netlifyを使って、動的OGPに対応する

Introduction

拙作であるが、「にゃ～ん」という名前のWeb Serviceを公開している

https://nyaan.work/

当初はただTwitterに「にゃーん」と投稿するだけのサービスだったが、色々と機能を作り込み、最終的にThe Cat APIから取得した猫画像をTwitter上に動的に表示するようにした。

実際に、Twitterのリンクを貼ると下記のとおりになる

OGPを動的に書き換えるまで、かなり試行錯誤を重ねたので、その知見を共有したいと思う

TL;DR

動的OGPを実現するには2つの手法を選択することが出来る

• pre-renderring
• SSR(Server-Side-Rendering)

今回Netlifyにお試し機能として用意されているpre-rendering機能を使っている。
しかし、このpre-rendering機能をVanilla JavaScriptで実現するのはそんなに簡単ではなかった。
自作スクリプト側の工夫と、Netlify側の設定が必要であった。

自作スクリプト側の工夫

まず、自作スクリプト側の工夫だが、

• パラメータに画像のURLを仕込む
• OGPを動的に書き換えるコードを設定する

必要がある。

パラメータに画像のURLを仕込む

パラメータに画像のURLを仕込む仕組みは非常に単純で、TextEncoderや、TextDecoderなどを使って変換をしている
にゃ～んの場合、 https://nyaan.work/#!/ja/ より後ろの文字がそのURLパラメータになっている。
タイトルも含めてパラメータ化したい場合は、さらに色々パラメータに仕込むことが出来るだろう。

OGPを動的に書き換えるコードを設定する

index.html

<meta property="og:image" content="https://nyaan.work/witch-cat.png" />

HTML側には、フォールバックとして固定の画像URLを入れておく。

script.js

// URLはURLパラメータで受け取っているURL
document.querySelector('meta[property="og:image"]').setAttribute("content", url);

スクリプト側では、このようなシンプルなコードで書き換えが可能になるが、どのタイミングでこのコードを実行するかがしばらく理解できていなかった。

結論から書くならば、DOMContentLoadedが走った瞬間に実行すればOGPを動的に書き換えても、クローラーが認識出る。
しかしながら、APIや画像が読み込まれるのをある程度待っているとこの書き換えが行われない。
しばらくこの事が分からなかったが、色々試してみてようやくタイミングの問題だったことが判明した。

Netlify Settings

そして、Netlifyの設定だが、

Site settings->Build & deploy->Prerendering->Enable prerendering with Netlify

に設定をする必要がある。
今回、SPAを作成したのでリダイレクト設定も必要で、netlify.tomlに

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

[[redirects]]
  from = "/robots.txt"
  to = "/robots.txt"
  status = 200
  force = true

のようなリダイレクト設定を書く必要があった。
netlify.tomlの詳細は公式ドキュメントを参照するのが一番早い。

この設定をする事で、一意ではないURLを受け取ってもnetlify側がうまい具合index.htmlにリダイレクトしてくれる。
netlifyでSPAを作る時に参考になるはずだ。
ちなみに、_redirectsを直接作るという方法もあるが、netlify.tomlで管理するほうが百倍楽なので、こちらで管理することをオススメする。

レポジトリ

https://github.com/ArcCosine/nyaan

もし、興味がある方は上記のレポジトリ内ににゃーんの全てが詰め込まれているので参照していただければと思う。Vanilla JavaScriptのみで構成されているので、初学者の方でも内容はつかみやすいはずである。