サーバーレスで動的な OGP を設定する
SNS に自分の作ったページやサービスを配信する際に OGP を設定すると、リッチなコンテンツとして共有することができ、
CTR や CVR などに寄与するかもしれません。
OGP は html の meta タグとして設定しますが、要件によってはページごとに別のコンテンツとして設定したい場合が多々あります。
その場合 meta タグを動的に生成しなくてはならなくなって実装が大変です。
今回は Cloud Functions を用いて比較的簡単に動的な OGP を設定してみます。
構成
前提
-
/XXXは共有したいコンテンツで、XXX の部分は可変だと仮定 - Twitter などに共有する際は
/ogp/XXXというリンクを生成してそれをツイートする想定
流れ
-
/ogp/XXXというリンクにアクセス（ここでいうリンクとはツイートにはられたリンクのこと） - firebase hosting を使って
/ogpから始まるパスはすべて Cloud Functions に受け流す - Cloud Functions 側で bot かユーザーを UA から判断
- firestore や storage からデータを取得し bot やユーザーに対して適切なコンテンツを作る
- それぞれにあったコンテンツを返す
firebase hosting
以下のようにリダイレクトの設定を書きます。
firebase.json
...
"rewrites": [
{
"source": "/ogp/**", "function": "ogp"
},
{
"source": "**",
"destination": "/index.html"
}
]
...
Cloud Functions
firebase をバックエンドに用いていたため Cloud Functions を使用しました。
isBot で Twitter bot かそれ以外かを判定します。
あとは firestore からもととなるデータを引っ張ってきて meta タグに設定します。
isBot = false の場合はアクセスされた url から /ogp の部分だけ取り除いた url にリダイレクトして元のコンテンツを返します。
index.ts
export const ogp = functions.region('us-central1').https.onRequest(async (req, res) => {
const userAgent = req?.headers['user-agent']?.toLowerCase()
const path = req.path
const params = path.match(/^\/ogp\/contents\/(.+?)$/)
const contentId = params?.pop()
const doc = await db.collection('contents').doc(contentId).get()
const name = doc.data()?.name
const description = `${name} の説明`
const imageUrl = doc.data()?.imageUrl
const isBot = userAgent !== null && userAgent?.includes('twitterbot')
if (isBot) {
// Twitter bot の場合
// ogp を設定した html を返す
const html = createHtml(name, description, imageUrl, contentId)
res.status(200).send(html)
} else {
// Twitter bot 以外（ユーザー）の場合
// ogp を抜いたパスにリダイレクトしてあげる
const url = `${DOMAIN}/contents/${contentId}`
res.redirect(url)
}
})
/**
* ogp 作成用関数
*/
const createHtml = (
title: string,
description: string,
imageUrl: string,
contentId: string | undefined) => {
return `<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>OGP Test</title>
<meta property="og:title" content="${title}" />
<meta property="og:image" content="${imageUrl}" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:description"${description}" />
<meta property="og:url" content="${DOMAIN}/ogp/contents/${contentId}" />
<meta property="og:type" content="article" />
<meta property="og:site_name" content="test" />
<meta name="twitter:site" content="${DOMAIN}" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="${title}" />
<meta name="twitter:image" content="${imageUrl}" />
<meta name="twitter:description" content="${description}" />
</head>
<body>For Twitter Bot</body>
</html>
`
}
テスト
開発中にツイートしてしまうとフォロワーさんに迷惑になっちゃうかもなので、 Twitter Card Validator を使ってテストします。
/ogp から始まる URL を貼り付けて設定したタイトルや説明、画像などが表示されたら成功です。
参考