Gatsby.jsで作ったブログのSEO対策をする

2022年02月12日 15:50

導入

今回はサイトを公開する際に欠かせない SEO 対策を Gatsby.js で作ったブログで行います。
SEO 対策とは、Google や Yahoo などの検索エンジンで上位に表示するための対策です。
これをしたからと言って必ず上位に来るわけではないのですが、一般にしておいたほうがいいといわれている対策について紹介します。

前回の記事でタグ機能の実装方法を紹介しているので、気になる方はこちらも確認していただけると嬉しいです。

スポンサードリンク

Gatsby の SEO 対策

現在、gatsby-starter-blogという公式のスターターを使っています。
このスターターは優秀で SEO 対策を測定する Chrome に付属している Lighthouse では、最初から 100 点を出しています。
lighthouseのSEOスコア

なので、対策として行うべきことはそこまで多くありません。
具体的には以下の 5 つです。

sitemap の追加
各記事の description の設定
robots.txt の設定
URL の正規化
独自ドメイン・サイト名の決定

sitemap の追加

SEO 対策として必要なサイトマップを作成します。
Gatsby にはサイトマップを作るプラグインがあるので、これを gatsby-config.js に入れるだけです。

具体的な手順としては、まず以下のようにコマンドを打ちます。

npm install gatsby-plugin-sitemap

そして、gatsby-config.js に以下のように設定するだけで完了です。

siteMetadata: {
  // 既に設定してある場合はそのまま
  siteUrl: `https://www.example.com`,
},
plugins: [`gatsby-plugin-sitemap`]

各記事の description の設定

次に、各記事の description の設定を行います。
現時点では各記事の markdown の上部に description を設定しない場合、<meta>タグの description に何も設定されません。

<meta name="description" content="…" data-react-helmet="true" />

これを記事一覧ページに表示してあるのと同様に、冒頭の一部を表示するようにします。
この問題は日本語を使うときに起こるようなのですが、src/templates/blog-post.js の graphQL の excerpt(抜粋)を以下のように変更することで可能です。

excerpt(truncate: true, pruneLength: 100)

truncate: trueは日本語を使えるようにするために入れており、pruneLength: 100では抜粋する文字を 100 文字に指定しています。
これは、Twitter で表示される文字数の上限であるためです。

robots.txt の設定

SEO 対策として Google のクローラーが巡回しないページを設定します。
以下のように、巡回させたくないページ・サイトマップを設定します。

User-agent: *
Disallow: /404/

Sitemap : https://www.example.com/sitemap/sitemap-index.xml

URL の正規化

同じページに様々なリンクが存在すると SEO 上よくないので、それらの URL を 1 つと認識させるために URL の正規化をします。
これもプラグインが存在するので、インストールし、

npm install gatsby-plugin-canonical-urls

gatsby-config.js に登録するだけで設定が完了します。

plugins: [
  {
    resolve: `gatsby-plugin-canonical-urls`,
    options: {
      siteUrl: `https://www.example.com`,
    },
  },
]

独自ドメイン・サイト名の決定

今までは、前作っていたブログのままのサイト名で設定してきました。
ただ、「bpeldi2oerkd8」という名前は他の方とかぶらないのはいいのですが、読みづらく、SEO 上やサイト訪問者を増やすといった意味ではマイナスでした。
なので、ブログのリニューアルを機にサイト名を変更することにしました。
それに伴って、取得する独自ドメインも変更します。

新しいサイト名は bpeldi2oerkd8 から読みやすい部分をとった bel（ベル）とプロフィール写真に使っていた苺を組み合わせて、「ベル 15 の開発ブログ」とすることに決めました。
これからネット上のハンドルネームを「ベル 15」として活動していきます。
また、取得するドメインは https://bel-itigo.com/ とします。

スポンサードリンク

終わりに

今回は、Gatsby.js で作ったブログの SEO 対策をしました。
次回は、Google Adsense に必須なお問い合わせフォームとプライバシーポリシーページを実装する方法を紹介します。