前提・実現したいこと
firebaseとVuecliを用いてwebアプリを製作しています。
TwitterでOGP画像をシェアするものです。
以下を参考にしています。
「Vue.jsとFirebaseでOGP画像生成系のサービスを爆速で作ろう」を実際に作ってみる
functionで動的に<head>を書き換えたいのですがうまくいきません。
今は、想定のURL(.../result/:id)に手打ちでアクセスしてもメタタグが確認できない(Chromeの検証)状況です。
コンソールにエラーは出ません。
また、私のシステムでは"/s/:id"にページ遷移するようにしています。
その際functions"s"が呼び出され、"/result/:id"に飛ばしてくれるはずですが、うまく機能しません。
できない原因は何が考えられるのでしょうか?
該当のソースコード
#functions/index.js const functions = require("firebase-functions"); const express = require("express"); const app = express(); const admin = require("firebase-admin"); admin.initializeApp(functions.config().firebase); const db = admin.firestore(); const url = "https://OOOOO.firebaseapp.com"; const site_name = "私のアプリ"; const title = "私のアプリ"; const meta_description = "私のアプリです"; const meta_keywords = ["私のアプリ"]; const og_description = "私のアプリです"; const og_image_width = 1200; const og_image_height = 630; const fb_appid = ""; const tw_description = "私のアプリです"; const tw_site = "https://OOOOO.firebaseapp.com"; const tw_creator = ""; const genHtml = (image_url, id) => ` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>${title}</title> <meta name="description" content="${meta_description}"> <meta name="keywords" content="${meta_keywords.join(",")}"> <meta property="og:locale" content="ja_JP"> <meta property="og:type" content="website"> <meta property="og:url" content="${url}"> <meta property="og:title" content="${title}"> <meta property="og:site_name" content="${site_name}"> <meta property="og:description" content="${og_description}"> <meta property="og:image" content="${image_url}"> <meta property="og:image:width" content="${og_image_width}"> <meta property="og:image:height" content="${og_image_height}"> <meta property="fb:app_id" content="${fb_appid}"> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="${title}"> <meta name="twitter:description" content="${tw_description}"> <meta name="twitter:image" content="${url}"> <meta name="twitter:site" content="${tw_site}"> <meta name="twitter:creator" content="${tw_creator}"> </head> <body> <script> location.href = '/result/${id}'; </script> </body> </html> `; app.get("s/:id", (req, res) => { const id = req.params.id; // eslint-disable-next-line promise/catch-or-return db.collection("cards") .doc(id) .get() .then(result => { // eslint-disable-next-line promise/always-return if (!result.exists) { res.status(404).send("404 Not Exist"); } else { const data = result.data(); const html = genHtml(data.imageurl); res.set("cache-control", "public, max-age=600, s-maxage=600"); res.send(html); } }); }); exports.s = functions.https.onRequest(app);
#firebase.json 内容一部省略 "hosting": { "public": "dist", "ignore": ["firebase.json", "**/.*", "**/node_modules/**"], "rewrites": [ { "source": "/s/**", "function": "s" }, { "source": "**", "destination": "/index.html" } ] }
#vueAPPのrouter.js export default new Router({ mode: "history", base: process.env.BASE_URL, routes: [ { path: "/result/:id", name: "result", component: Result }, 省略
お願いいたします。
あなたの回答
tips
プレビュー