Gatsbyjsで作成したブログのTwitterCardを表示させる

問題:TwitterCardが表示されない

Card Validator | Twitter Developers

ブログを作ってみたはいいんですが、投稿があるたびにTwitterで共有しようにもTwitterCard（OGP画像）が表示されずに困っていました.

そこで今回はこのエラーの原因を突き止め、TwitterCardが表示されるようにしてみました。

TL:DR;

プラグインgatsby-react-helmetが追加・設定されていなかったことが原因
Developer　Toolで確認するとmetaタグがあるように見えても、実際にビルドされたHTMLを確認して、必要なmetaタグが追加されているか確認することが大事

調査

まずは次のような調査方針で進めてみました。

TwitterCardが表示される仕組みを調べる
1と現状のサイトを比較し、足りていない要素を調べ、追加する
2で表示されなければ、調査方針再検討

TwitterCardが表示される仕組み

カードの利用開始

【2020年版】Twitterカードとは？使い方と設定方法まとめ

これらの記事を確認する限り、TwitterCardを表示するために必要なことは、以下のmetaデータを設定することのようです。

<meta name="twitter:card" content="カード種類" /> <!--①-->
<meta name="twitter:site" content="@ユーザー名" /> <!--②-->
<meta property="og:url" content="記事のURL" /> <!--③-->
<meta property="og:title" content="記事のタイトル" /> <!--④-->
<meta property="og:description" content="記事の要約（ディスクリプション）" /> <!--⑤-->
<meta property="og:image" content="画像のURL" /> <!--⑥-->

現状のサイトと比較

meta-when-error

確認したところ、エラー発生時には、次の3つのmetaデータがありませんでした。

<meta name="twitter:site" content="@ユーザー名" /> <!--②-->
<meta property="og:url" content="記事のURL" /> <!--③-->
<meta property="og:image" content="画像のURL" /> <!--⑥-->

Twitter特有のmetaとしては、twitter:siteがもっとも怪しそうなので、まずはこちらを追加してみます。

{
    name: `twitter:card`,
    content: `summary_large_image`,
},
{
    name: `twitter:site`,
    content: `@ikumatdkr`,
},

なおも失敗してしまったので、og:urlを追加してみます。

{
    property: `og:url`,
    content: `https://ikuma-t.work/`,
},

またもや失敗してしまいました。エラーメッセージが変わらないのが気になるところです🤔

最後に、まだ不足しているog:imageを追加します。

{
    property: `og:image`,
    content: `https://ikuma-t.work/static/logo.png`,
},

エラーメッセージ含めて、何も解消されません。

方針再設定

設定をしたにもかかわらず、Card Validatorが表示するメッセージが変わらないことを考慮すると、どうやら別のところに原因がありそうです。

しかも登録しているmetaタグはいくつもあるのに4 metatags were foundとしか表示されないことを考えると、次の2つの可能性が考えられます。

metaタグが実際には生成されていない
metaタグが生成されてはいるが、読み取られていない

まずは1つ目について確認してみることにしました。

生成されたmetaタグを確認する

ここまではChrome Developer Toolで確認してきましたが、実際にgatsby buildによって生成されたhtmlがどうなっているかを確認してみます。

build-meta-when-error

すると、metaタグに相当するのは4件のみで、Twitter関連で設定した内容は全く反映されていません。

どうやらここが怪しそうです。

gatsby-react-helmetが正しく機能しているかを確認

メタデータを追加するために、react-helmetを使用しているのですが、Gatsbyjsで使用するためにはgatsby-react-helmetも必要です。

つまり、以下のような実際にmetaタグを定義するコンポーネントだけではNGで

import { Helmet } from "react-helmet"

const Seo = () => {
  return (
    <Helmet>
      /* meta情報を記述 */
    </Helmet>
  )
}

それを使用する前提として、プラグインを追加し、

$ yarn add gatsby-plugin-react-helmet react-helmet

それをgatsby-config.jsで宣言しておく必要があるのです。

plugins: [`gatsby-plugin-react-helmet`]

gatsby-plugin-react-helmet

…確認してみたところ、プラグインの追加と宣言が漏れていました。

そのため上記設定を施し、再度gatsby buildを実行すると、ビルド結果のHTMLにmetaタグが追加されていました。

meta-when-succeed

Developer Toolでの確認結果も、metaタグが上位に表示されるようになり、

card-succeed

metaタグも読み取られ、Twitter Cardが表示されるようになりました。

ついでに各記事ページごとにヒーローイメージを取得するように設定して、本件は任務完了です🥷 ogimage-by-page