47
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

posted at

updated at

Organization

Firebase + SPA で SSR なしに OGP 対応

SPA で構築すると気になるのは SEO と OGP です。SEO に関しては Google のクローラは JS を解釈してくれるようになったので fetch as Google で確認する限りインデックスされるようです(順位に影響があるかどうかは不明)。OGP に関しては現状、 facebook / twitter のクローラは JS を解釈してくれないので、サーバから返却される HTML に <meta property="og:title" content="title"> のようなタグを埋め込んでおく必要があります。

SPA OGP 対策として一番最初に語られるのが SSR (サーバサイドレンダリング) だと思いますが、OGP のためだけに SSR するのは面倒なので、Firebase Hosting + Functions を使ってなんとかして見る方法を試してみました。そのメモです。

注意

今回の対応方法は Firebase のみで構築をするパターンです。これには弱点が幾つかあります。

  • リダイレクト処理が入るので、最初のレスポンスが微妙
  • Google のインデックスがリダイレクトが入るため評価されるか微妙

これを回避するためには CloudFront + Lambda@edge を併用するパターンもあります。こちらも対応方法を書いたので参考にしてみてください。

Firebase + SPA + CloudFront + Lambda で SSR なしに OGP 対応

Hosting から Functions へ

Firebase Hosting では .firebase ファイルにルールを記載すると、特定 URL 時に Functions へ処理を受け渡すことができます。

{
  "hosting": {
    "rewrites": [
      {
        "source": "/@note/*",
        "function": "note"
      }
    ]
  }
}

この例だと /@note/piyo のような URL にアクセスすると note Function が起動します。

Functions で OGP 含む HTML

次にリクエストを受け取った note FUnction で、OGP のタグを含んだ HTML を返却するようにします。

import * as functions from 'firebase-functions';
import DocumentSnapshot = FirebaseFirestore.DocumentSnapshot;
import DocumentData = FirebaseFirestore.DocumentData;
import * as admin from 'firebase-admin';
admin.initializeApp(functions.config().firebase);
const db = admin.firestore()

function buildHtmlWithPost (id: string, noteObj:DocumentData) : string {
  return `<!DOCTYPE html><head>
  <title>${noteObj.title}</title>
  <meta property="og:title" content="${noteObj.title}">
  <meta property="og:image" content="${noteObj.image}">
  <meta property="og:image:width" content="600">
  <meta property="og:image:height" content="600">
  <meta name="twitter:card" content="summary">
  <meta name="twitter:title" content="${noteObj.title}">
  <meta name="twitter:image" content="${noteObj.image}">
  <link rel="canonical" href="/@note/${id}">
  </head><body>
  <script>window.location="/@note/?noteId=${id}";</script>
  </body></html>`
}

export const note = functions.https.onRequest(function(req, res) {
  const path = req.path.split('/')
  const noteId = path[2]
  db.collection('note').doc(noteId).get().then((doc:DocumentSnapshot) : void => {
    const htmlString = buildHtmlWithPost(noteId, doc.data())
    res.status(200).end(htmlString)
  }).catch(err => {
    res.status(500).end(err)
  })
})

この例では、URL に含まれている ID を元に firestore へデータを取得して適宜 HTML に埋め込んでいます。

ポイントは <meta> タグのみを記載し、実際のコンテンツは window.location でリダイレクトしているところです。こうすると、 facebook / twitter などはリダイレクトされず、通常ユーザは /@note/?noteID=xxx へリダイレクトされます。

このままだと正規の URL /@note/xxx/@note/?noteID=xxx になってしまうため HTML5 history replace を使って URL を書き換えてあげます。vue-router を使っている例はこちら。 $route.query でクエリパラメータがあった場合は正規 URL に変更してあげるような処理です。

created () {
  if (this.$route.query.noteId) {
    this.$router.replace('/@note/' + this.$route.query.noteId)
  }
}

以上で、 Firebase のみで OGP 対応をすることができました。

Register as a new user and use Qiita more conveniently

  1. You can follow users and tags
  2. you can stock useful information
  3. You can make editorial suggestions for articles
What you can do with signing up
47
Help us understand the problem. What are the problem?