eyecatch thumbnail

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

Profile picture
Takeru Yamada
2021.05.05

Contents


まとめ

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

はじめに

opening

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

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

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

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

それではどうぞ!


環境

environment

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

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

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 対策のなんたるかを理解していないので語れないだけですが)

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

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


実装

implement

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

実装方法の基本は 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つ:

  1. <meta> タグに twitter:image を追加する
  2. <meta> タグの og:imagetwitter:imagecontent を 相対パスから絶対パスに書き換える

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:imageog:imagecontent のパスを相対パスから絶対パスに変更します.

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

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

いやはや

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

以上で実装は完了です.

新しい記事を買いてデプロイして Twitter で記事共有したときに Twitter Card が表示されることを 心から願っています:)


おわりに

ending

gatsby-starter-blog で Twitter Card を表示するための SEO 対策の手法を紹介しました.

Twitter Card が表示されるとサムネイル画像が表示されるのでそれだけでリッチな感じがします.

あくまで個人的見解ですけど.

最後までお読みいただきありがとうございました.

今日も良い一日を!

参考図書

GatsbyJS 全般については Webサイト高速化のための静的サイトジェネレーター活用入門 | GatsbyJSで実現する、高速&実用的なサイト構築 を参考にしています.

gatsby book


執筆機材


関連記事