Merge pull request #133 from iterative/seo-component

Author: yathomasi

packages/gatsby-theme-iterative/gatsby-config.js

@@ -158,6 +158,7 @@ module.exports = ({
   siteMetadata: {
     author: 'Iterative',
     titleTemplate: '',
+    twitterUsername: '',
     plausibleSrc,
     plausibleAPI,
     plausibleDomain

packages/gatsby-theme-iterative/src/components/MainLayout/DefaultSEO/index.tsx

@@ -8,8 +8,8 @@ import './fonts.css'
 import LayoutHeader from '../LayoutHeader'
 import LayoutFooter from '../LayoutFooter'
 import { handleFirstTab } from '../../utils/front/accessibility'
-import DefaultSEO from './DefaultSEO'
 import { useRedirects } from './utils'
+import SEO from '../SEO'
 
 export enum LayoutModifiers {
   Wide,
@@ -54,7 +54,7 @@ const MainLayout = ({
         'items-center'
       )}
     >
-      <DefaultSEO pathname={location.pathname} />
+      <SEO pathname={location.pathname} />
       <LayoutHeader modifiers={modifiers} />
       <main
         className={cn(

packages/gatsby-theme-iterative/src/components/MainLayout/index.tsx

@@ -1,6 +1,7 @@
 import { getSrc, IGatsbyImageData } from 'gatsby-plugin-image'
 
 export type MetaProps = JSX.IntrinsicElements['meta']
+export type LinkProps = JSX.IntrinsicElements['link']
 
 export const getMetaTitle = (title: string): MetaProps[] => {
   return [
@@ -48,18 +49,52 @@ export const getMetaImage = (
   ]
 }
 
-export const buildMetadata = (
-  siteUrl: string,
-  title?: string,
-  defaultMetaTitle?: boolean,
-  description?: string,
-  keywords?: string,
-  image?: IGatsbyImageData | string,
-  imageAlt?: string,
-  imageHeight?: number,
+export const buildMetadata = ({
+  siteUrl,
+  siteName,
+  title,
+  defaultMetaTitle,
+  description,
+  keywords,
+  image,
+  imageAlt,
+  imageHeight,
+  imageWidth,
+  pathname,
+  twitterUsername
+}: {
+  siteUrl: string
+  siteName?: string
+  title?: string
+  defaultMetaTitle?: boolean
+  description?: string
+  keywords?: string
+  image?: IGatsbyImageData | string
+  imageAlt?: string
+  imageHeight?: number
   imageWidth?: number
-) => {
-  const prebuildMeta: MetaProps[] = []
+  pathname?: string
+  twitterUsername?: string
+}) => {
+  const prebuildMeta: MetaProps[] = [
+    {
+      property: 'og:site_name',
+      content: siteName
+    },
+    {
+      property: 'og:type',
+      content: 'website'
+    },
+    {
+      property: 'og:locale',
+      content: 'en_US'
+    },
+    {
+      name: 'twitter:card',
+      content: 'summary'
+    }
+  ]
+
   if (title && !defaultMetaTitle) {
     prebuildMeta.push(...getMetaTitle(title))
   }
@@ -83,5 +118,26 @@ export const buildMetadata = (
       ...getMetaImage(imageUrl, imageAlt, imageHeight, imageWidth)
     )
   }
+  if (pathname) {
+    const fullUrl = siteUrl + pathname
+    prebuildMeta.push({
+      name: 'og:url',
+      content: fullUrl
+    })
+  }
+  if (twitterUsername) {
+    prebuildMeta.push(
+      ...[
+        {
+          name: 'twitter:creator',
+          content: twitterUsername
+        },
+        {
+          name: 'twitter:site',
+          content: twitterUsername
+        }
+      ]
+    )
+  }
   return prebuildMeta
 }

packages/gatsby-theme-iterative/src/components/SEO/helper.ts

@@ -3,7 +3,7 @@ import Helmet from 'react-helmet'
 import { IGatsbyImageData } from 'gatsby-plugin-image'
 
 import getSiteMeta from '../../queries/siteMeta'
-import { buildMetadata, MetaProps } from './helper'
+import { buildMetadata, MetaProps, LinkProps } from './helper'
 
 export interface IPaginatorPageInfo {
   currentPage: number
@@ -22,6 +22,9 @@ interface ISEOProps {
   imageHeight?: number
   imageWidth?: number
   meta?: MetaProps[]
+  link?: LinkProps[]
+  canonicalUrl?: string
+  pathname?: string
   pageInfo?: IPaginatorPageInfo
   children?: React.ReactNode
 }
@@ -32,32 +35,39 @@ const SEO: React.FC<ISEOProps> = ({
   skipTitleTemplate,
   description,
   keywords,
-  image,
+  image = '/social-share.png',
   imageAlt = '',
-  imageHeight,
-  imageWidth,
+  imageHeight = 630,
+  imageWidth = 1200,
   meta = [],
+  link = [],
+  canonicalUrl,
+  pathname,
   pageInfo,
   children
 }) => {
   const siteMeta = getSiteMeta()
+  const fullUrl = siteMeta.siteUrl + pathname
   const pageTitle = useMemo(() => {
     return pageInfo && pageInfo.currentPage > 1
       ? `${title || siteMeta.title} page ${pageInfo.currentPage}`
       : title
   }, [title, siteMeta, pageInfo])
   const prebuildMeta = useMemo(() => {
-    return buildMetadata(
-      siteMeta.siteUrl,
-      pageTitle,
+    return buildMetadata({
+      siteUrl: siteMeta.siteUrl,
+      siteName: siteMeta.title,
+      title: pageTitle,
       defaultMetaTitle,
       description,
       keywords,
       image,
       imageAlt,
       imageHeight,
-      imageWidth
-    )
+      imageWidth,
+      pathname,
+      twitterUsername: siteMeta.twitterUsername
+    })
   }, [
     siteMeta,
     pageTitle,
@@ -67,15 +77,53 @@ const SEO: React.FC<ISEOProps> = ({
     image,
     imageAlt,
     imageWidth,
-    imageHeight
+    imageHeight,
+    pathname
   ])
 
   return (
     <Helmet
+      htmlAttributes={{
+        lang: 'en'
+      }}
+      defaultTitle={siteMeta.title}
       title={pageTitle}
+      titleTemplate={
+        skipTitleTemplate
+          ? ''
+          : siteMeta.titleTemplate || `%s | ${siteMeta.title}`
+      }
       {...(skipTitleTemplate && { titleTemplate: '' })}
       meta={[...prebuildMeta, ...meta]}
+      link={[
+        ...(canonicalUrl
+          ? [
+              {
+                rel: 'canonical',
+                href: canonicalUrl
+              }
+            ]
+          : pathname
+          ? [
+              {
+                rel: 'canonical',
+                href: fullUrl
+              }
+            ]
+          : []),
+        ...link
+      ]}
     >
+      {siteMeta.plausibleSrc ? (
+        <script
+          defer
+          data-domain={
+            siteMeta.plausibleDomain || new URL(siteMeta.siteUrl).hostname
+          }
+          data-api={siteMeta.plausibleAPI || undefined}
+          src={siteMeta.plausibleSrc}
+        />
+      ) : null}
       {children}
     </Helmet>
   )