GatsbyブログのSEO対策でやっておくこと一覧

Programming

はじめに

Metaデータの追加

gatsby-plugin-react-helmet を入れましょう。大抵のStarterであれば最初から入ってる可能性が高いです。

yarn add gatsby-plugin-react-helmet

現在入ってるmeta情報をまとめました。これくらいの情報があれば十分でしょう。

<Helmet>
    <meta property="og:title" content={title} />
    <meta name="description" content={description} />
    <meta property="og:description" content={description} />
    <meta property="og:type" content="website" />
    <meta property="og:url" content={url} />
    <meta name="twitter:site" content={twitterSiteAccount} />
    <meta name="twitter:creator" content={twitterCreatorAccount} />
    <meta property="og:locale" content="ja_JP" />
    <meta property="og:site_name" content={siteTitle} />
    <meta property="og:image:secure_url" content={absoluteImageUrl} />
    <meta property="og:image" content={absoluteImageUrl} />
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content={siteTitle} />
    <meta name="twitter:description" content={siteDescription} />
    <meta name="twitter:image" content={absoluteImageUrl} />
</Helmet>

Pageごとに差し込めるようにMeta.jsなどでまとめて引数で各ページにmeta情報を配置できるようにしましょう。

Google Analytics

gatsby-plugin-google-gtagを入れましょう。これも最初から入ってる可能性高いです。

yarn add gatsby-plugin-google-gtag

gatsby-config.jsに追加する。これだけで設定が完了です。

    {
      resolve: 'gatsby-plugin-google-gtag',
      options: {
        trackingIds: [${your-gtag}],
        pluginConfig: {
          head: true,
        },
      },
    },

Google Search Console

  1. プロパティタイプを選択する

↑のGoogle Analytics Tagを設定しているのであれば圧倒的に、URLプレフィックスが簡単です。

左のドメイン設定の場合は少し面倒くさいです。

image.png (90.0 kB)

例: Google Domains

google-site-verification=xxxxxxxxxxxx-yyyyyYYYYYYYYYYのTXTレコードに追加する。反映するのに1日?くらい必要なので手早くするのであれば前者ですね。

  1. Google Analyticsのアカウントを使用して確認する
image.png (328.0 kB)

サイトマップを設定する

サイトマップとは

サイトマップ(sitemap.xml)とは、サイト内に存在するURLのリストを記述したファイルのことを指します。 ユーザー向けのサイトマップページとはまた異なるもので、クローラーに向けてのファイルとなります。 これは、クローラーがサイト内を巡回する際の参考となるもので、クロールでは見つけられなかったページや、更新された情報などを見つけやすくするためのもので、比較的大規模なサイトの場合に必要となってくるファイルです。

サイトマップ(sitemap.xml)とは より引用

yarn add gatsby-site-map

gatsby build時にsitemap.xmlを作成してくれます。サーバにデプロイしたらhttp://your-domain/sitemap.xmlにアクセスしてみましょう。

    {
      resolve: 'gatsby-plugin-sitemap',
      options: {
        query: `
          {
            site {
              siteMetadata {
                siteUrl: url
              }
            }
            allSitePage(
              filter: {
                path: { regex: "/^(?!/404/|/404.html|/dev-404-page/)/" }
              }
            ) {
              edges {
                node {
                  path
                }
              }
            }
          }
        `,
        output: '/sitemap.xml',
        serialize: ({ site, allSitePage }) => allSitePage.edges.map((edge) => ({
          url: site.siteMetadata.siteUrl + edge.node.path,
          changefreq: 'daily',
          priority: 0.7
        }))
      }
    },

RSSを設定する

RSSとは

RSSとは「Webサイトの新着情報を配信するフォーマット」です。 RSSとは「Really Simple Syndication」、または「Rich Site Summary」の略語※で、Webサイトのニュースやブログなどの、更新情報の日付やタイトル、その内容の要約などを配信するため技術のことです。RSSは、XML形式で記述されており、RSSリーダーと呼ばれるツールを使用することで、様々なサイトの更新情報や新着情報を自動的に取得することができます。

RSSとは より引用

gatsby-plugin-feedを入れる

yarn add gatsby-plugin-feed

gatsby build時にrss.xmlを作成してくれます。サーバにデプロイしたらhttp://your-domain/rss.xmlにアクセスしてみましょう。

    {
      resolve: 'gatsby-plugin-feed',
      options: {
        query: `
          {
            site {
              siteMetadata {
                siteUrl
                title
              }
            }
          }
        `,
        feeds: [{
          serialize: ({ query: { site, allMarkdownRemark } }) => (
            allMarkdownRemark.edges.map((edge) => ({
              ...edge.node.frontmatter,
              description: edge.node.frontmatter.description,
              date: edge.node.frontmatter.date,
              url: site.siteMetadata.siteUrl + edge.node.fields.slug,
              guid: site.siteMetadata.siteUrl + edge.node.fields.slug,
              custom_elements: [{ 'content:encoded': edge.node.html }]
            }))
          ),
          query: `
            {
              allMarkdownRemark(
                limit: 1000,
                sort: { order: DESC, fields: [frontmatter___date] }
              ) {
                edges {
                  node {
                    html
                    fields {
                      slug
                    }
                    frontmatter {
                      title
                      date
                      excerpt
                    }
                  }
                }
              }
            }
          `,
          output: '/rss.xml',
          title: 'your title'
        }]
      }
    },

まとめ

ざっくりこんなものでしょうか。また他に対応するものがあれば随時更新していこうと思います!

参考URL

#Gatsby#SEO

Related Links


Gatsbyでブログを始めるまで
GatsbyにShare機能、OGPタグをつける
Gatsbyにタグ機能、カテゴリ機能をつける(基礎編)
タグ機能、カテゴリ機能をつける(応用編)
GatsbyにTableOfContents(目次)をつける
DarkModeのCSSを適用させる
多機能なGatsbyJSのThemeをつくってnpmに公開した話
Yoshiki Ohashi
2x歳の個人事業主エンジニア。SI企業1年, Webベンチャー企業2年で上流から下流の経験を経て独立。 エンジニアらしく性格は温和。プロジェクトチームに心理的安全性を求める。go gin | Spring | Java | Kotlin | Vue | Python | 筋トレ | キャンプ | 個人開発 | 新潟出身

よく読まれている記事


Gatsbyでブログを始めるまで
GatsbyにShare機能、OGPタグをつける
Gatsbyにタグ機能、カテゴリ機能をつける(基礎編)
DL実装するときに理解すること
多機能なGatsbyJSのThemeをつくってnpmに公開した話
© 2020 Yoshiki Ohashi All rights reserved.