fix(blog): fix twitter title and description to be longer

Author: timmywil

content/blog/what-is-an-independent-voice-assistant/index.md

@@ -1,7 +1,7 @@
 ---
-title: What Is an Independent Voice Assistant
+title: What Is an Independent Voice Assistant?
 date: '2020-05-12'
-description: An independent voice assistant, sometimes referred to as an "owned assistant," is a type of voice interface that enables companies to directly communicate with their customers.
+description: An independent voice assistant, sometimes referred to as an "owned assistant", is a type of voice interface that enables companies to directly communicate with their customers.
 tags: Product
 author: mike
 draft: false

src/components/AboutLayout.tsx

@@ -21,7 +21,11 @@ interface Props {
 export default function About({ children }: Props) {
   return (
     <Layout>
-      <SEO title="About us" description="About our team" />
+      <SEO
+        title="About us"
+        longTitle="Learn about the company Spokestack"
+        description="About our team"
+      />
       <StickyNavLayout header="About" links={links}>
         {children}
       </StickyNavLayout>

src/components/BlogPost.tsx

@@ -25,6 +25,7 @@ export default function BlogPost({ post, related }: Props) {
     <Layout>
       <SEO
         title="Blog"
+        longTitle={post.frontmatter.title}
         description={post.frontmatter.description || 'The Spokestack Blog'}
       />
       <div css={styles.container}>

src/components/DocsPage.tsx

@@ -48,6 +48,7 @@ export default function DocsPage({ post, selectFirst }: Props) {
     <Layout>
       <SEO
         title="Docs"
+        longTitle="Spokestack Documentation"
         description={
           post.frontmatter.description || 'Documentation for the Spokestack API'
         }

src/components/SEO.tsx

@@ -10,13 +10,15 @@ type Meta =
 
 interface Props {
   title: string
+  longTitle?: string
   description?: string
   lang?: string
   meta?: Meta[]
 }
 
 export default function SEO({
   title,
+  longTitle,
   description = '',
   lang = 'en',
   meta = []
@@ -55,7 +57,7 @@ export default function SEO({
         },
         {
           property: 'og:title',
-          content: title
+          content: longTitle || title
         },
         {
           property: 'og:description',
@@ -75,7 +77,7 @@ export default function SEO({
         },
         {
           name: 'twitter:title',
-          content: title
+          content: longTitle || title
         },
         {
           name: 'twitter:description',