NetlifyのPrerendering機能を使ってクライアントサイドのみの実装でOGP対応する

エンジニアリング

Netlify

2019/10/26

2021/10/05

松田承一

この記事は公開後、1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

はじめに

microCMSのようなHeadless CMSを利用する最もシンプルな方法はクライアントサイドで利用する方法です。
具体的にはHTML / CSS / JavaScriptでサービスを実装し、それらのリソースを公開することです。
（ReactやVueを使ったSPAもこれに含まれます）

この方法は非常にシンプルな構成である一方、一点問題が残ります。
SNSシェア時の内容の設定です。
TwitterやFacebookにURLをシェアしようとするとそのサイトの og:title や og:image が参照されます。
先のシンプルなHTML / CSS / JavaScript構成ではJavaScriptでこれらの値を設定することになるでしょう。
しかし、これらSNSのクローラーはクロールの際にJavaScriptを実行しないため、せっかくのページ毎の独自の内容をSNSに表示させることができません。

og:imageが読み込まれないことを確認する

それでは実際に試してみましょう。
まずは以下のようなソースを index.html に記述し、GitHub Pagesで公開します。
やっていることとしては og:image をJavaScriptで設定するだけです。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title>Hello World</title>
    <meta
      id="ogImage"
      property="og:image"
      content="http://placehold.jp/1200x630.png"
    />
  </head>
  <body>
    <main>
      <p>Hello World</p>
    </main>
    <script>
      //og:imageを変更
      document.getElementById("ogImage").content =
        "https://d1pa960qlle92r.cloudfront.net/protected/ap-northeast-1:11889c08-ec2f-4d7a-b37c-49c5982b2b47/service/microcms/media/markdow-with-microcms.png";
    </script>
  </body>
</html>

GitHub Pagesで公開したサイトはこちらからアクセスできます。

それではこのサイトをFacebookシェアデバッガーでチェックしてみましょう。
Facebookシェアデバッガーを使うとFacebookにシェアされる内容を確認・更新できます。
（なおTwitterにもCard validatorという同様のツールがあります。）

チェック結果はこちらです。
https://developers.facebook.com/tools/debug/sharing/?q=https%3A%2F%2Fwantainc.github.io%2Fprerendering-test%2F
「リンクをプレビュー」の欄で確認できるようにog:imageはJavaScriptによる変更前の画像が表示されています。

ここで確認できたように、この状態ではFacebookやTwitterにURLをシェアした際にJavaScriptによる変更内容は反映されません。
これでは例えばシェアが重要なメディアサイトなどに利用するのは難しいでしょう。

NetlifyのPrerenderingを使う

それではこの問題を解決しましょう。
Netlifyは静的なサイトを公開するためのサービスで、近年非常に人気となってきています。
現状、最も簡単な方法はこのNetlifyを使いPrerendering設定を行う方法です。

さっそくいきましょう。
先ほどのページをNetlifyでも公開しました。
https://modest-mccarthy-15e215.netlify.com
（Netlifyでサイトを公開する方法はGitHubリポジトリを選択するだけと非常に簡単ですので割愛いたします。）

次にPrerendering設定を行います。
設定はSettings -> Build & Deploy -> Post ProcessingにあるPrerenderringを有効にするだけです。
※2019/10/27現在、ベータ版の機能となりますのでその点はご注意ください

この状態で再度Facebookシェアデバッガーをチェックしてみます。
https://developers.facebook.com/tools/debug/sharing/?q=https%3A%2F%2Fmodest-mccarthy-15e215.netlify.com

JavaScriptで設定した画像が表示されていることがわかります！
これでシェアした際の画像をページ独自のものとすることができました。

さいごに

Netlifyを使うことでクライアントサイドの実装のみでもOGP対応することができました。
Netlifyを使う必要があるものの、これだけ簡単にOGPに対応できることはとても嬉しいことです。
microCMSをこの方法と組み合わせて使うとメディアサイトの構築なども今まで以上に低コストで実現できるでしょう。
ぜひこのようなモダンな構成をみなさんも検討してみてください！

-----

microCMSは日々改善を進めています。
ご意見・ご要望は管理画面右下のチャット、公式Twitter、メールからお気軽にご連絡ください！
引き続きmicroCMSをよろしくお願いいたします！