【Netlify】SPAサイトで簡単にOGPを付ける。

私は普段Nuxt.js(Vue)を使ってサイトを書いていますが、SPAサイトの一番大きな問題はTwitterでOGPがつかない事だと思っています。しかしながらOGPを付けるという目的のためにNuxt.jsでSSR(サーバーサイドレンダリング)する事は間違っていると考えています。理由としては、コストや安定性です。
その中でかなり悩んでいましたが、NetlifyにPrerenderingという機能がありました。今回はこの機能を用いてSPAサイトにOGPを付けていきたいと思います。無料です。

結果

まず初めに実際の結果です。かなり良いのではないでしょうか。

【超難問AIテスト】
あなたの成績は3/5 問正解です！。もしかして未来人？？
https://t.co/1vN6gitUmy #超難問AIテスト
全問正解できひんかった

— ゆうもや (@takex5g) January 11, 2021

Netlify Prerenderについて

Netlifyはgit pushでホスティングできる事でお馴染みのサービスです。HerokuやGithubPagesと同じ感じです。Netlifyの機能としてPrerender機能が提供されていました。Prerenderとは、予めNetlifyがjavascriptも実行させた静的キャッシュを取っておくことで、SPAの動的OGPも表示させるものです。
もしbot(Twitterクローラなど)の場合はprerenderさせたキャッシュしたページ、人間がアクセスした時は普通にページを表示させます。現在Netlifyではbeta版として提供されています。料金は無料です。その他のprerenderについての詳細は公式ドキュメントを見てください。

実装方法

コード側の設定

Nuxtでの動的OGPの例です。特に難しい事はせず、headerのogpを書き換えているだけです。ここについては他の記事を見てください。SSRでOGP表示する例とかもそのまま流用出来るはずです。

index.vue

(抜粋)
  head() {
    return {
      meta: [
        {
          hid: "og:image",
          property: "og:image",
          content: "https://www.example.com/ogp/" + this.img + ".png",
        },
      ],
    };
  },

Netlify側の設定

NetlifyのSettingにおいて、PrerenderingをEnableにします。

これで表示されるはずです。TwitterValidatorで確かめてみましょう。

所感

もうSPA時代のOGPはこれで良いなと思いました。firebaseFunction使ったり,SSRしたりと他にも方法はありますが、圧倒的にこの方法が楽でした。無料ですし。
気になる点は
・キャッシュのタイミングがわからない。（ブラックボックス）
・キャッシュを手動削除できない。（OGP画像を変えても前の画像が残る）
という点です。まぁこのくらいは目をつぶれるかなぁという感じです。無料ですし。

是非素敵なOGPライフを!

あ、もし時間があったら、AI/人間見分けるテストやってみて。OGPちゃんとつきますし。

AIはここまで人間に近づきました。
合成音声か人間かを見分けるゲームです。

マジで難しいので挑戦してみてください！！！https://t.co/DSPxngYerM #超難問AIテスト

— ゆうもや (@takex5g) January 11, 2021