Gatsbyブログサイト移行物語~プラグインHelmetでSEO調整~

/ (プロジェクトディレクトリー)
  ├ static/
  |  └ images/
  |    ├ ogp.png（汎用ogp画像）
  |    └ logo.png（サイトのロゴ ）
  └ src/
    |  ├ thumbnail/ 記事のキービジュアルが格納されている
    |  └ templates/
    |    └ blog-post.js
    └ components/
          └ seo.js（head内にmetaタグなどを出力する）

<!-- Facebookなど -->
<meta property="og:image" content=" サムネイル画像の URL" />
<!-- twitter -->
<meta property="twitter:image" content="サムネイル画像の URL">
<!-- スマホでのGoogle検索一覧 -->
<meta name="thumbnail" content="サムネイル画像の URL">

{
  property: `og:type`,
  content: `${isRootPath ? "website" : "webpage"}`,
},

{
  name: `twitter:card`,
  content: `summary_large_image`,
},

Seo.defaultProps = {
  lang: `ja`,
  meta: [],
  description: ``,
}

<link rel="canonical" href="URL"/>

import * as React from "react"
import PropTypes from "prop-types"
import { Helmet } from "react-helmet"
import { useStaticQuery, graphql } from "gatsby"
//記述方法変更
const Seo = props => {
  const {
    description,
    img,
    location,
    lang,
    title,
    meta,
    type,
    date,
    modified,
  } = props
  // 省略

  const metaDescription = description || site.siteMetadata.description
  const defaultTitle = site.siteMetadata?.title
  const imgPath = `${site.siteMetadata.siteUrl.replace(/\/$/, "")}${
    img ? img : "/images/ogp.png"
  }`
  const rootPath = `${__PATH_PREFIX__}/`
  const isRootPath = location.pathname === rootPath

  let blogUrl = location ? location.href : site.siteMetadata.siteUrl
  // ページネーションのある箇所は削除
  blogUrl = String(blogUrl).replace(/page\/([0-9])+\//, "")

  // 構造化データの追加
  // 執筆者情報
  const author = [
    {
      "@type": "Person",
      name: site.siteMetadata.author.name,
      description: site.siteMetadata.author.summary,
      url: site.siteMetadata.siteUrl,
      sameAs: [
        site.siteMetadata.social.twitter,
        site.siteMetadata.social.instagram,
      ],
    },
  ]

  // 公開する組織など
  const publisher = {
    "@type": "Organization",
    name: site.siteMetadata.title,
    description: site.siteMetadata.description,
    logo: {
      "@type": "ImageObject",
      url: `${site.siteMetadata.siteUrl}images/logo.png`,
      width: 72,
      height: 72,
    },
  }

  // JSON-LDの設定
  let jsonLd = [
    {
      "@context": "http://schema.org",
      "@type": isRootPath ? "webSite" : "webPage",
      inLanguage: "ja",
      url: blogUrl,
      name: title,
      author,
      publisher,
      image: imgPath,
      description: metaDescription,
    },
  ]
  if (type === "blog") {
    const article = {
      "@context": "http://schema.org",
      "@type": "BlogPosting",
      url: blogUrl,
      name: title,
      headline: title,
      image: {
        "@type": "ImageObject",
        url: imgPath,
      },
      description: description,
      datePublished: date,
      dateModified: modified,
      mainEntityOfPage: {
        "@type": "WebPage",
        "@id": blogUrl,
      },
      author,
      publisher,
    }
    jsonLd = [...jsonLd, article]
  }

  return (
    <Helmet
      {/* 省略 */}
    >
      <link rel="canonical" href={blogUrl} />
      {/* 構造化データ出力 */}
      <script type="application/ld+json">
        {JSON.stringify(jsonLd)}
      </script>
    </Helmet>
  )
}

// 省略

export default Seo

{/*ブログ*/}
<Seo
  title={title}
  location={location}
  type="blog-list"
  discription="ブログ一覧記事です。"
/>
{/*カテゴリ*/}
<Seo
  title={cate.name}
  location={location}
  type="cate-list"
  discription={`${cate.name}一覧記事です。${cate.description}`}
/>
{/*タグ*/}
<Seo
  title={tag}
  location={location}
  type="tag-list"
  discription={`${tag}一覧記事です。`}
/>

if (!isRootPath) {
  let breadCrumbList
  const home = {
    "@type": "ListItem",
    "position": 1,
    "item": `${site.siteMetadata.siteUrl}/`,
    "name": "ホーム",
  }
  const blogList = {
    "@type": "ListItem",
    "position": 2,
    "item": `${site.siteMetadata.siteUrl}/blogs/`,
    "name": `ブログ一覧`,
  }

  if (type === "blog" || type === "cate-list" || type === "tag-list") {
    breadCrumbList = [
      home,
      blogList,
      {
        "@type": "ListItem",
        "position": 3,
        "item": blogUrl,
        "name": title,
      }
    ]
  } else if (type === "blog-list") {
    breadCrumbList = [
      home,
      blogList
    ]
  } else {
    breadCrumbList = [
      home,
      {
        "@type": "ListItem",
        "position": 2,
        "item": blogUrl,
        "name": title,
      }
    ]
  }
  jsonLd = [
    ...jsonLd,
    {
      "@context": "http://schema.org",
      "@type": "BreadcrumbList",
      "itemListElement": breadCrumbList,
    },
  ]
}

npm install gatsby-plugin-google-gtag

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-google-gtag`,
      options: {
        trackingIds: [
          process.env.GOOGLE_ANALYTICS_TRACKING_ID,//トラッキングID
          process.env.GOOGLE_ADSENSE_ID,//Adもまとめて入れられる！！
        ],
        pluginConfig: {
          head: true,//headerに追記
        },
      },
    },
  ],
}

process.env.GOOGLE_ANALYTICS_TRACKING_ID

<meta name="google-site-verification" content="値" />

// ~ 省略 ~

return (
    <Helmet
      htmlAttributes={{
        lang,
      }}
      title={title}
      titleTemplate={pageName}
      meta={[

    // ~ 省略 ~

        {
          name: `google-site-verification`,
          content: `値`,
    },

        // ~ 省略 ~

npm install gatsby-plugin-sitemap

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-sitemap`,
      options: {
        output: `/`,
        excludes: [
          `/blogs/page/*`,
          `/404?(.*)`,
          `/blogs/*/page/*`,
          `/blogs/tags/*/page/*`,
        ],
      },
    }
  ]
}