🔍 implement seo component

gatsby-config.js

@@ -4,6 +4,12 @@ require("dotenv").config({
 
 module.exports = {
   plugins: [
+    {
+      resolve: "gatsby-plugin-manifest",
+      options: {
+        icon: "src/assets/favicon.png",
+      },
+    },
     {
       resolve: `gatsby-plugin-page-creator`,
       options: {
@@ -79,6 +85,9 @@ module.exports = {
                 },
                 author: "*",
                 references: "*",
+                seo: {
+                  populate: "*",
+                },
               },
             },
           },
@@ -90,6 +99,9 @@ module.exports = {
             queryParams: {
               populate: {
                 articles: "*",
+                seo: {
+                  populate: "*",
+                },
               },
             },
           },
@@ -98,6 +110,9 @@ module.exports = {
             queryParams: {
               populate: {
                 articles: "*",
+                seo: {
+                  populate: "*",
+                },
               },
             },
           },
@@ -109,6 +124,9 @@ module.exports = {
               populate: {
                 author: "*",
                 blocks: "*",
+                seo: {
+                  populate: "*",
+                },
               },
             },
           },
@@ -117,7 +135,9 @@ module.exports = {
             queryParams: {
               populate: {
                 favicon: "*",
-                defaultSeo: "*",
+                seo: {
+                  populate: "*",
+                },
               },
             },
           },

gatsby-ssr.js

@@ -4,3 +4,7 @@ import AppContainer from "components/common/AppContainer.js";
 export const wrapPageElement = ({ element }) => {
   return <AppContainer>{element}</AppContainer>;
 };
+
+export const onRenderBody = ({ setHtmlAttributes }) => {
+  setHtmlAttributes({ lang: "th" });
+};

package.json

@@ -22,6 +22,7 @@
     "gatsby-plugin-fontawesome-css": "^1.2.0",
     "gatsby-plugin-google-fonts": "^1.0.1",
     "gatsby-plugin-image": "^2.24.0",
+    "gatsby-plugin-manifest": "^4.25.0",
     "gatsby-plugin-postcss": "^5.24.0",
     "gatsby-plugin-react-svg": "^3.1.0",
     "gatsby-plugin-sharp": "^4.24.0",

src/components/common/SEO.js

@@ -0,0 +1,51 @@
+import React from 'react'
+import { graphql, useStaticQuery } from 'gatsby'
+
+function SEO({ title, description, image, pathname, children }) {
+    const { strapiGlobal } = useStaticQuery(graphql`
+        query {
+            strapiGlobal {
+                siteName
+                siteDescription
+                siteUrl
+                twitterUsername
+                seo {
+                    metaImage {
+                        localFile {
+                            url
+                        }
+                    }
+                }
+            }
+        }
+    `)
+
+    const seo = {
+        title: (title && `${title} | natTP`) || strapiGlobal.siteName,
+        description: description || strapiGlobal.siteDescription,
+        image: `${image || strapiGlobal.seo.metaImage.localFile.url}`,
+        url: `${strapiGlobal.siteUrl}${pathname || ``}`,
+        twitterUsername: strapiGlobal.twitterUsername,
+    }
+
+    return (
+        <>
+            <title>{seo.title}</title>
+            <meta name='description' content={seo.description} />
+            <meta name='image' content={seo.image} />
+            <meta name='twitter:card' content='summary_large_image' />
+            <meta name='twitter:title' content={seo.title} />
+            <meta name='twitter:url' content={seo.url} />
+            <meta name='twitter:description' content={seo.description} />
+            <meta name='twitter:image' content={seo.image} />
+            <meta name='twitter:creator' content={seo.twitterUsername} />
+            <link
+                rel='icon'
+                href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='0.9em' font-size='90'>👤</text></svg>"
+            />
+            {children}
+        </>
+    )
+}
+
+export default SEO

src/pages/about.js

@@ -3,6 +3,7 @@ import { graphql } from 'gatsby'
 import { GatsbyImage, getImage } from 'gatsby-plugin-image'
 import Socials from 'components/common/Socials'
 import BlocksRenderer from 'components/blocksRenderer'
+import SEO from 'components/common/SEO'
 
 function About({ data }) {
     const author = data.strapiAbout.author
@@ -76,8 +77,13 @@ export const query = graphql`
             blocks {
                 ...Blocks
             }
+            seo {
+                metaTitle
+            }
         }
     }
 `
 
 export default About
+
+export const Head = ({ data }) => <SEO title={data.strapiAbout.seo.metaTitle} pathname='/about' />

src/pages/article/{StrapiArticle.slug}.js

@@ -14,6 +14,7 @@ import AboutAuthor from 'components/article/AboutAuthor'
 import Button from 'components/common/Button'
 import LikeSection from 'components/article/LikeSection'
 import ArticleCard from 'components/card/ArticleCard'
+import SEO from 'components/common/SEO'
 import { dateTimeStringToLocaleDateString } from 'utils/dateUtils'
 import { calculateTotalReadTime } from 'utils/readTimeUtils'
 import { getRandCombination } from 'utils/randUtils'
@@ -123,6 +124,7 @@ export const query = graphql`
             cover {
                 alternativeText
                 localFile {
+                    url
                     childImageSharp {
                         gatsbyImageData(aspectRatio: 1.77, placeholder: BLURRED, formats: [AUTO, WEBP, AVIF])
                     }
@@ -163,6 +165,9 @@ export const query = graphql`
                     }
                 }
             }
+            seo {
+                metaDescription
+            }
         }
         allStrapiArticle(limit: 10, sort: { fields: publishedAt, order: DESC }) {
             nodes {
@@ -202,3 +207,11 @@ export const query = graphql`
 `
 
 export default Article
+
+export const Head = ({ data }) => (
+    <SEO
+        title={data.strapiArticle.title}
+        description={data.strapiArticle.seo.metaDescription}
+        image={data.strapiArticle.cover.localFile.url}
+    />
+)

src/pages/column/columnTemplate.js

@@ -2,6 +2,7 @@ import React from 'react'
 import { graphql } from 'gatsby'
 import ArticleCard from 'components/card/ArticleCard'
 import Pagination from 'components/common/Pagination'
+import SEO from 'components/common/SEO'
 
 function Column({ data, pageContext }) {
     // const sortStates = [
@@ -102,3 +103,10 @@ export const query = graphql`
 `
 
 export default Column
+
+export const Head = ({ data }) => (
+    <SEO
+        title={`${data.strapiColumn.title} ${data.strapiColumn.tagline}`}
+        description={data.strapiColumn.description}
+    />
+)

src/pages/index.js

@@ -4,6 +4,7 @@ import Wave from 'assets/wave.svg'
 import Arrow from 'assets/arrow.svg'
 import ArticleCard from 'components/card/ArticleCard'
 import ClickableColumnName from 'components/article/ClickableColumnName'
+import SEO from 'components/common/SEO'
 import { getRandInt } from 'utils/randUtils'
 import { stringToSlug } from 'utils/slugUtils'
 // import usePrevious from 'hooks/usePrevious'
@@ -208,3 +209,5 @@ export const query = graphql`
 `
 
 export default Home
+
+export const Head = () => <SEO />

src/pages/tag/tagTemplate.js

@@ -2,6 +2,7 @@ import React from 'react'
 import { graphql } from 'gatsby'
 import ArticleCard from 'components/card/ArticleCard'
 import Pagination from 'components/common/Pagination'
+import SEO from 'components/common/SEO'
 
 function Tag({ data, pageContext }) {
     const tag = data.strapiTag
@@ -78,3 +79,5 @@ export const query = graphql`
 `
 
 export default Tag
+
+export const Head = ({ data }) => <SEO title={`บทความที่มีแท็ก ${data.strapiTag.title}`} />

yarn.lock

@@ -6028,6 +6028,17 @@ gatsby-plugin-image@^2.24.0:
     objectFitPolyfill "^2.3.5"
     prop-types "^15.8.1"
 
+gatsby-plugin-manifest@^4.25.0:
+  version "4.25.0"
+  resolved "https://registry.yarnpkg.com/gatsby-plugin-manifest/-/gatsby-plugin-manifest-4.25.0.tgz#b1a1fbcc035f242ee05094849817d75b488afa7c"
+  integrity sha512-2n7v+TvhWUMoOJEaeiPDFsf9jvOImKLZpnzxE8e6ZeeoGeDngXSZhkkP3x2UYIknHtZXUUjFJh8BaVBXiB1dSQ==
+  dependencies:
+    "@babel/runtime" "^7.15.4"
+    gatsby-core-utils "^3.25.0"
+    gatsby-plugin-utils "^3.19.0"
+    semver "^7.3.7"
+    sharp "^0.30.7"
+
 gatsby-plugin-page-creator@^4.25.0:
   version "4.25.0"
   resolved "https://registry.yarnpkg.com/gatsby-plugin-page-creator/-/gatsby-plugin-page-creator-4.25.0.tgz#6f47f1a49e18af9ef42207c22b20f5d78ccc02fb"