gatsby-starter-blog SEO 対策 | Twitter Card 表示方法を紹介

ルッチ / Lucci

2021.05.05

#tech

#gatsby

Contents

まとめ
はじめに
環境
SEO 対策って何すれば良いの？
実装
おわりに
参考図書

まとめ

<meta> タグに twitter:image などを追加する

はじめに

gatsby-starter-blog の SEO 対策として Twitter Card を表示させる方法についての紹介です．

先日 gatsby-theme-blog から gatsby-stater-blog へ乗り換えたのですが gatsby-stater-blog のデフォルト設定では記事の url を Twitter で共有しても Twitter Card が表示されなくて困っていました．

いろいろ調べて実装した結果 Twitter Card が表示されるようになりました．

この記事ではその手法を紹介しますのでこの記事を読めば Twitter Card が表示されるようになります．

それではどうぞ！

環境

開発環境を共有しておきます．

開発環境が異なる場合は期待動作しないかもしれないのでご承知おきください．

npm list コマンドの実行結果を一部抜粋してきたのでご覧いただければと．

$ npm list
gatsby-starter-blog@0.1.0
├── gatsby@3.1.2
├── react-helmet@6.1.0
├── react@17.0.1

SEO 対策って何すれば良いの？

“SEO 対策” と一口に言っても意味が広すぎて何をすれば良いのかわかりません．

(自分が SEO 対策のなんたるかを理解していないので語れないだけですが)

今回の SEO 対策は <meta> タグの新規追加です．

<meta> タグに Twitter Card を表示させるための情報を追加すれば Twitter 側がよしなにしてくれますんで．

実装

それでは実装していきます．

実装方法の基本は Search Engine Optimization (SEO) and Social Sharing Cards with Gatsby の通りです．

GatsbyJS の公式ドキュメントは優秀なのでその通りに実装すれば大体うまくいきます．

でも今回は自分だけかもしれませんが，この公式ドキュメントに載っている実装だけでは不十分でした．

なのでこの記事ではその欠けている情報を紹介します．

基本実装

基本的な実装は先ほど登場した Search Engine Optimization (SEO) and Social Sharing Cards with Gatsby の通りです．

なので，まずはこの公式ドキュメント通りに実装してください．

英語が読めないから公式ドキュメントは読めない

と壁を感じている人は Google 翻訳をかけるなり未来翻訳をかけるなりして英語の壁を突破してくださいませ．

日本語訳された文書は誤りがあったりメンテナンスされていなかったりして不都合が多いので．

補足実装

さてこの記事のメインコンテンツである補足実装いきましょう．

基本実装が出来ている前提で話を進めます．

基本実装だけで Twitter Card が表示されるようになった方はここから先を読む必要はありません．

ご自身のブログ記事執筆に勤しんでいただければと思います．

補足する実装は次の2つ:

<meta> タグに twitter:image を追加する
<meta> タグの og:image と twitter:image の content を相対パスから絶対パスに書き換える

twitter:image の追加

まず twitter:image を <meta> タグに追加します．

なぜ twitter:image を追加する必要があるのかというと <meta> タグの og:image だけでは Twitter Card が表示されなかったからです．

Twitter 公式開発者ドキュメントの https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/summary-card-with-large-image を読んで理解した限り twitter:image を <meta> タグに追加しないとダメそうです．

og:image が <meta> タグに追加されていれば twitter:image としてマッピングしてくれる？かと思っていたのですがそうではなさそうでした．

で具体的な実装は以下の通りです．

        .concat(
          metaImage
            ? [
                // ...
                {
                  name: "twitter:image",
                  content: `${metaImage.src}`,
                },
                // ...
              ]

content のパスを相対パスから絶対パスに変更する

次に twitter:image と og:image の content のパスを相対パスから絶対パスに変更します．

devtools 使ってそれぞれの content のパスを見ながら開発したんですが相対パスだとダメだったんですよねー．

相対パスだとダメだったので渋々ですが絶対パスに書き換えました．

いやはや

        .concat(
          metaImage
            ? [
                // ...
                                {
                  property: "og:image",
                  content: `${site.siteMetadata.siteUrl}${metaImage.src}`,
                },
                // ...
                {
                  name: "twitter:image",
                  content: `${site.siteMetadata.siteUrl}${metaImage.src}`,
                },
                // ...
              ]