unkerr’s poem

日々の開発におけるポエム

Netlify で公開した SPA で Twitter Card が読み込まれないときの対処法

Twitter のクローラは、Google クローラと違って JavaScript を実行してクロールしてくれないため、Twitter Card が読み込まれません。

これについては、SSR で対処している記事などが散見しますが、サイトを Netlify で公開している場合、とても簡単に解決できます。

Netlify へログインして当該サイトの Settings から Build & deploy > Post processing > Prerendering と進みます。

Edit settings をクリックして、Enable prerendering with Netlify にチェックを入れ保存すれば終了です。

Card Validator にて Twitter Card が正常に読み込まれることを確認できます。