8
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2021-01-16

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

結果

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

Netlify Prerenderについて

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

実装方法

コード側の設定

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にします。
2021-01-15_23h08_52.png

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

所感

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

是非素敵なOGPライフを!

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

8
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?