静的サイトジェネレータを利用するなど、よりよい方法が存在します。ページが共有された時に、タイトルと説明文と画像がカード形式で表示されることがありますね。クローラが読み込みに来てくれるというものです。扱うには、一工夫が必要です。実行されないので意味を持ちません。実行した上で取得しキャッシュするサービスです。ページまでは$15/月と非常に良心的です。外部に依存しないように運用したいという気持ちから、今回は導入をしませんでした。来訪者がクローラであるか判断し、クローラであればそれぞれのコンテンツに対して生成されたクローラ専用のページに飛ばすことにしました。https://gist.github.com/thoop/8165802を参考に、設定ファイルを書きました。ogp.htmlです。クローラ以外は見ないので、適当で構いません。最近、Reactを書き始めたが、どうもindex.cssやindex.js、index.tsxなんかが増えてしまう。そんな状態でAtomでReactを書こうとすれば、たちまち`index.js`のタブだらけになってしまう。そんな時、Atomのパッケージの1つ、nice-indexが便利だ。nice-index`と叩き、Atomを再起動してタブ一覧を見ると、それぞれのディレクトリ名が表示されるようになり、非常に見やすくなった。最近、Reactを書き始めたが、どうもindex.cssやindex.js、index.tsxなんかが増えてしまう。そんな状態でAtomでReactを書こうとすれば、たちまち`index.js`のタブだらけになってしまう。そんな時、Atomのパッケージの1つ、nice-indexが便利だ。nice-index`と叩き、Atomを再起動してタブ一覧を見ると、それぞれのディレクトリ名が表示されるようになり、非常に見やすくなった。利用して自動で生成し、/${そのページのパス}/ogp.htmlとして保存します。手間でなければ、手でサッと書いてしまっても良いかも知れません。上記の例であれば、/posts/atom-nice-index/ogp.htmlとして保存します。アクセスした場合、来訪者が人間であれば/index.htmlが、来訪者がクローラであれば${uri}/ogp.htmlが表示されるようになりました。終わりに正直、あまりベストプラクティスという感じではありません。幸翠2019年4月に株式会社ディー・エヌ・エーへ新卒として入社し、GoとVue.jsを書いています。Analyticsを利用しています。