Help us understand the problem. What is going on with this article?

Netlify ではじめての OGP on SPA

More than 1 year has passed since last update.

どうも。Cocoda!のエンジニアのいがりです。
Cocoda!の一部がログインせずに見られる仕様になり、OGPを表示させたくなりました。はじめてのOGP対応だったので覚え書きとして残します。

環境

React.jsによるSPAをNetlifyでホスティングしています。

要件

TwitterでシェアしたときにOGPがページごとに動的に変えて表示されるようにしたい!

OGPとは

Open Graph Protocolの略。
SNSでシェアしたときに、リンク先の情報が表示されるよく見るアレです。
スクリーンショット 2019-02-19 2.39.04.png

OGPを設定していないとシェアしたときに下のような簡素な印象になります。 (postdさん、ごめんなさい。ちょうどシェアしたときにうまく言ってなかったようなので使わせていただきます。めちゃめちゃ好きなメディアです。)
スクリーンショット 2019-02-19 2.42.04.png

シェアされる、あるいはシェアしてほしいページはOGPを設定したいですよね。

OGPの設定の仕方

OGPの設定はmetaタグによって可能です。
スクリーンショット 2019-02-19 2.39.04.png

このOGPは以下のタグによって表示されています。ディベロッパーツールから確認できます。

<head>
  <meta property="og:url" content="https://news.google.com">
  <meta property="og:title" content="Google ニュース">
  <meta property="og:image" content="https://lh3.googleuserc...">
  <meta property="og:description" content="Google ニュースが世界中のニュース提供元から集約した広範囲にわたる最新情報">
</head>

OGP生成の課題

jsからmetaタグを動的に書き換えれば一見すぐOGP表示できそうですが、そんなに甘くなかった。。。😢

TwitterやFacebookクライアントはjsを解釈してくれないので、シェアしたときに、動的に書き換える前の、取得した素のhtmlに書いてあるmetaタグのみしか見てくれません。

つまり、 サーバーから返した静的なファイルのOGPを読み込ませる必要があります。

解決策

調べたところ解決策が2つありました。

  • SSR(サーバーサイドレンダリング)
  • prerender

SSR

(元々ブラウザ上でしか動かなかった)JavaScriptをサーバー内部で実行して、HTMLを生成すること

by https://medium.com/@sundaycrafts/%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC%E4%BD%93%E9%A8%93%E3%82%92%E5%90%91%E4%B8%8A%E3%81%95%E3%81%9B%E3%82%8B%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E3%82%B5%E3%82%A4%E3%83%89%E3%83%AC%E3%83%B3%E3%83%80%E3%83%AA%E3%83%B3%E3%82%B0javascript-%E6%AD%B4%E5%8F%B2%E3%81%A8%E5%88%A9%E7%82%B9-df68cd7cd991

ここで詳しく述べるのは控えますが、フロントエンドが複雑になりそうだなーという印象がありました。

prerender

prerender とは、あらかじめレンダリングしたファイルを読み込むことです👀。これによってjsによって動的なアプリケーションであっても、SSRせずに静的なファイルをクライアントに返すことができます。

サイトのホスティングに使用している Netlify ではbeta版で prerenderのサポートをしています

Our built-in prerendering service will cache prerendered pages for between 24 and 48 hours; this is not adjustable.
当社の組み込みの事前レンダリングサービスは、事前レンダリングされたページを24〜48時間キャッシュします。 これは調整できません。

なるほど。

簡単に設定できそうだったのでとりあえずNetlifyのprerender機能を試してみることにしました。(しかも無料)

Prerenderまでの手順

 1. React Helmet を使って動的にmetaタグを書き換える
スクリーンショット 2019-02-19 3.37.06.png

 2. NetlifyのSettingsタブのPrerenderingセクションに移動
スクリーンショット 2019-02-19 3.22.40.png

 3. Enable Prerenderingにチェックを入れる
スクリーンショット 2019-02-19 3.24.14.png

 4. robots.txtにOGPを表示したいサイトのクロールを許可する

User-agent: Twitterbot  # Twitterは許可する
Allow: /allow           # /allow パスはクロールを許可する

 5. fetch as googleする
robots.txtはキャッシュされるので、 fetch as google からGoogleに再読込してもらいます。
スクリーンショット 2019-02-19 3.42.51.png

 5. OGP表示の確認

TwitterでのOGP表示のプレビューができる Card validator で確認してみます。
スクリーンショット 2019-02-19 3.29.56.png

!!!!以上!!!!
爆速でOGP設定できました。すごいぞNetlify。

まとめ

超簡単にOGP設定できちゃいました。
SPAでのOGP生成で悩んでいる人に届くと良いな。

rentama
株式会社almaにてデザインフルな世界を創っています。 / Product => cocoda! / Ruby / Ruby on Rails / JavaScript / React.js / MySQL
https://cocoda-design.com/
alma
デザインをもっと好きになるサービス、Cocoda!の開発・運営をするスタートアップです。
https://cocoda-design.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away