Gatsbyで作ったサイトのTwitterカードが表示されない

OGP情報が反映されない

サイトがある程度形になったので、ツイートをしようと思ったところカードが表示されない...
検証ツールで確認すると、headタグ内にOGP情報は出力されている。
だけどメタタグ検証ツールで確認すると、タイトルすら表示されていない。
てことで調査した結果、大体こんなんが原因じゃないのかな〜ってのがわかったので、書いていきます。
SEO設定はreact-helmetで行なっています。

絶対URLを使用する

まず、タイトルとかは出てるけど画像がno imageになってしまうみたいな方はここを確認するのが良いかと思います。
OGPは../assets/image.pngといった相対パスは読み込んでくれないので、https://から始まる絶対URLで設定するようにしましょう。

headタグ内の要素を並び替える

こんな記事を発見。
恐らくTwitterやFacebookのクローラーはheadタグ内を上から数KBしか読み込んではいないんじゃないか？とのこと。
Gatsbyサイトの構成によっては、headタグ内に大量のインラインスタイルが出力されるため、その後にOGP情報が出力されていた場合、そこまで読み込んでくれないとのこと。
これの解決策としては、gatsby-ssr.js（build時に実行したい処理を記述できる）にheadタグ内の要素を並び替えるコードを書いてあげる方法があるみたいです。
サンプルコードもGithubのIssueに記載してありますので、参考にしてみてください。

JavaScriptで出力されていないか

GoogleのクローラーはJavaScriptを解釈してくれますが、TwitterやFacebookのクローラーは解釈してくれません。そのため静的にmetaタグを出力する必要があります。
buildされたファイル内に検索をかけたときに、react-helmetで設定したmeta情報が出力されていない場合、対応を行う必要があります。
私の場合は、react-helmetのモジュールのみをインストールしており、gatsby-plugin-react-helmetを使っていないことが原因でした。
以下のようにインストールを行い、設定をしたところ、静的に出力が行われ、Twitterカードも表示されるようになりました。

インストール

$ npm install react-helmet gatsby-plugin-react-helmet

設定

// gatsby-config.js
plugins: [
  `gatsby-plugin-react-helmet`
]