add meta tags for SEO

src/components/HamburgerIcon/index.tsx

@@ -3,11 +3,11 @@ import React from 'react'
 
 import styles from './styles.module.css'
 
-interface IHamburgetProps {
+interface IHamburgerProps {
   opened?: boolean
 }
 
-const HamburgerIcon: React.FC<IHamburgetProps> = ({ opened }) => (
+const HamburgerIcon: React.FC<IHamburgerProps> = ({ opened }) => (
   <div className={cn(styles.wrapper, opened && styles.opened)}>
     <div className={cn(styles.line, styles.first)} />
     <div className={cn(styles.line, styles.second)} />

src/components/Page/DefaultSEO/index.tsx

@@ -1,23 +1,25 @@
 import React from 'react'
-import ReactHelmet from 'react-helmet'
+import Helmet from 'react-helmet'
 
 import { MetaProps } from '../../SEO'
-import { IPaginatorPageInfo } from '../../Paginator'
 import getSiteMeta from '../../../queries/siteMeta'
 
 interface IDefaultSEOProps {
-  pageInfo?: IPaginatorPageInfo
+  pathname: string
 }
 
-const DefaultSEO: React.FC<IDefaultSEOProps> = ({ pageInfo }) => {
+const metaImage = {
+  src: '/social-share.png',
+  width: '1200',
+  height: '630'
+}
+
+const DefaultSEO: React.SFC<IDefaultSEOProps> = ({ pathname }) => {
   const siteMeta = getSiteMeta()
-  const metaTitle =
-    pageInfo && pageInfo.currentPage > 1
-      ? `${siteMeta.title} page ${pageInfo.currentPage}`
-      : siteMeta.title
+  const metaTitle = siteMeta.title
   const metaDescription = siteMeta.description
   const metaKeywords = siteMeta.keywords
-  const metaImage = '/social-share.png'
+  const fullUrl = siteMeta.siteUrl + pathname
 
   const meta: MetaProps[] = [
     {
@@ -28,6 +30,10 @@ const DefaultSEO: React.FC<IDefaultSEOProps> = ({ pageInfo }) => {
       name: 'keywords',
       content: metaKeywords
     },
+    {
+      property: 'og:url',
+      content: fullUrl
+    },
     {
       property: 'og:title',
       content: metaTitle
@@ -42,11 +48,23 @@ const DefaultSEO: React.FC<IDefaultSEOProps> = ({ pageInfo }) => {
     },
     {
       property: 'og:image',
-      content: metaImage
+      content: metaImage.src
+    },
+    {
+      property: 'og:image:width',
+      content: metaImage.width
+    },
+    {
+      property: 'og:image:height',
+      content: metaImage.height
     },
     {
       property: 'og:image:secure_url',
-      content: metaImage
+      content: metaImage.src
+    },
+    {
+      name: 'twitter:site',
+      content: '@dvcORG'
     },
     {
       name: 'twitter:card',
@@ -62,12 +80,12 @@ const DefaultSEO: React.FC<IDefaultSEOProps> = ({ pageInfo }) => {
     },
     {
       name: 'twitter:image',
-      content: encodeURI(`${siteMeta.siteUrl}${metaImage}`)
+      content: encodeURI(`${siteMeta.siteUrl}${metaImage.src}`)
     }
   ]
 
   return (
-    <ReactHelmet
+    <Helmet
       htmlAttributes={{
         lang: 'en'
       }}
@@ -76,21 +94,13 @@ const DefaultSEO: React.FC<IDefaultSEOProps> = ({ pageInfo }) => {
       meta={meta}
       link={[
         {
-          rel: 'shortcut icon',
+          rel: 'icon',
           type: 'image/vnd.microsoft.icon',
           href: '/favicon.ico'
         },
         {
-          rel: 'icon',
-          type: 'image/png',
-          href: '/favicon-32x32.png',
-          sizes: '32x32'
-        },
-        {
-          rel: 'icon',
-          type: 'image/png',
-          href: '/favicon-16x16.png',
-          sizes: '16x16'
+          rel: 'canonical',
+          href: fullUrl
         }
       ]}
     />

src/components/Page/index.tsx

@@ -45,7 +45,7 @@ const Page: React.FC<IPageProps> = props => {
 
   return (
     <>
-      <DefaultSEO />
+      <DefaultSEO pathname={props.location.pathname} />
       <LayoutComponent {...props} />
     </>
   )

src/components/SEO/index.tsx

@@ -11,7 +11,11 @@ interface ISEOProps {
   defaultMetaTitle?: boolean
   description?: string
   keywords?: string
-  image?: string
+  image?: {
+    src: string
+    presentationWidth: number
+    presentationHeight: number
+  }
   meta?: MetaProps[]
   pageInfo?: IPaginatorPageInfo
   children?: React.ReactNode
@@ -72,18 +76,28 @@ const SEO: React.FC<ISEOProps> = ({
   }
 
   if (image) {
+    const imageUrl = siteMeta.siteUrl + image.src
+
     prebuildMeta.push(
       {
         property: 'og:image',
-        content: image
+        content: imageUrl
       },
       {
         property: 'og:image:secure_url',
-        content: image
+        content: imageUrl
+      },
+      {
+        property: 'og:image:width',
+        content: String(image.presentationWidth)
+      },
+      {
+        property: 'og:image:height',
+        content: String(image.presentationHeight)
       },
       {
         name: 'twitter:image',
-        content: encodeURI(`${siteMeta.siteUrl}${image}`)
+        content: imageUrl
       }
     )
   }

src/templates/blog-post.tsx

@@ -7,7 +7,8 @@ import SEO from '../components/SEO'
 import Post from '../components/Blog/Post'
 
 interface IFluidObject extends FluidObject {
-  presentationWidth?: number
+  presentationWidth: number
+  presentationHeight: number
 }
 
 export interface IGatsbyImageProps extends GatsbyImageProps {
@@ -67,24 +68,17 @@ interface IBlogPostPageProps {
   data: {
     markdownRemark: IBlogPostData
   }
-  pageContext: {
-    next: IBlogPostData
-    previous: IBlogPostData
-  }
 }
 
-const BlogPostPage: React.FC<IBlogPostPageProps> = ({ data }) => {
+const BlogPostPage: React.SFC<IBlogPostPageProps> = ({ data }) => {
   const post = data.markdownRemark
 
   return (
     <>
       <SEO
         title={post.frontmatter.title}
         description={post.frontmatter.description}
-        image={
-          post.frontmatter.picture &&
-          post.frontmatter.picture.childImageSharp.fluid.src
-        }
+        image={post.frontmatter.picture?.childImageSharp?.fluid}
       />
       <Post {...post} />
     </>
@@ -128,7 +122,9 @@ export const pageQuery = graphql`
           childImageSharp {
             fluid(maxWidth: 850) {
               ...GatsbyImageSharpFluid_withWebp
+              src
               presentationWidth
+              presentationHeight
             }
           }
         }

static/robots.txt

@@ -1,2 +1,4 @@
+Sitemap: https://blog.dvc.org/sitemap.xml
+
 User-agent: *
 Disallow: