我已经在我的网络应用程序中成功实现了 Flutter meta_seo，并且我可以使用 HTML Inspect 看到 og 标签，但在 查看页面源代码上看不到。
问题是，当我使用 og 标签预览工具（如 https://www.opengraph.xyz/）时，标签不可见；他们在社交媒体上也不可见。有什么我可以做的吗？
查看页面源代码 - OG 标签不可见
<base href="/">
<meta charset="UTF-8">
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
<meta name="description" content="Permoja Collaboration and Community Platform.">
<!-- iOS meta tags & icons -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="permoja">
<link rel="apple-touch-icon" href="icons/Icon-192.png">
<!-- Favicon -->
<link rel="icon" type="image/png" href="favicon.png"/>
<title>permoja</title>
<link rel="manifest" href="manifest.json">
Html 检查 - OG 标签可见
<meta name="description" content="This is Women in HR summary">
<meta property="fb:app_id" content="178043849885">
<meta property="og:title" content="Women in HR Kenya" data-rh="true">
<meta property="og:description" content="This is Women in HR summary" data-rh="true">
<meta property="og:image" content="https://firebasestorage.googleapis.com/v0/b/f...jpg" data-rh="true">
<meta property="og:site_name" content="Women in HR Kenya">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Women in HR Kenya">
<meta name="twitter:description" content="This is Women in HR summary">
<meta name="twitter:image" content="https://firebasestorage.googleapis.com/v0/b...jpg">
我完全找不到让 meta_seo 工作的方法，我的结论是我们需要一种不同的方法，这就是我所做的：（免责声明，这仅适用于 Firebase 托管）
为了使用这种方法，我们利用 Firebase 函数。您可以在此处查看说明：https://firebase.google.com/docs/functions
我们在 JavaScript 中创建一个函数，该函数在重写规则的帮助下运行。该函数首先获取flutter文件index.html。
该函数然后从后端调用实体 - 我的是 RESTful API。该实体将用于生成带有标签的 html。
你需要npm和nodejs - npm附带nodejs 您还需要全局安装 firebase 工具，如果它当前是作为独立安装的，则需要先卸载它：
（独立安装如下所示：
curl -sL https://firebase.tools | bashnpm uninstall -g firebase-toolssudo npm install -g firebase-tools如果安装后firebase命令不可用，您可能需要将路径添加到PATH变量中；执行以下操作：
which firebasePATH=”$PATH:/usr/bin/firebase”确保您已使用 Google 帐户登录 Firebase：
firebase login初始化Firebase项目功能；在项目的根目录下，运行以下命令：
firebase init functions创建了一个新的文件夹功能。进入文件夹并运行
npm installfunctions文件夹内是index.js。更新如下：
/**
* Import function triggers from their respective submodules:
*
* const {onCall} = require("firebase-functions/v2/https");
* const {onDocumentWritten} = require("firebase-functions/v2/firestore");
*
* See a full list of supported triggers at https://firebase.google.com/docs/functions
*/
const functions = require("firebase-functions");
const admin = require("firebase-admin");
const fs = require("fs");
const BotDetector = require("device-detector-js/dist/parsers/bot");
const axios = require('axios');
async function fetchContentData(url) {
try {
url = url.replace('space/','api/space/space/')
url = url.replace('event/','api/event/event/')
console.log("API endpoint: " + url)
let response = await axios.get(url)
return response.data
} catch(ex) {
console.log(ex.message)
}
}
// SEt this flag to true if you want to view the bot version
const DEBUG_BOT = false;
admin.initializeApp();
exports.dynamicMetaTagsUpdate = functions.https.onRequest(
async (request, response) => {
let html = fs.readFileSync("./index.html", "utf-8");
const url = request.url;
const botDetector = new BotDetector();
const userAgent = request.headers["user-agent"].toString();
const bot = botDetector.parse(userAgent);
console.log("userAgent = " + userAgent);
console.log("bot = " + bot);
console.log("DEBUG_BOT = " + DEBUG_BOT);
if (bot || DEBUG_BOT) {
try {
const data = await fetchContentData("https://api.permoja.com" + url)
if(data.id) {
console.log("========== Content fetched ::: " + data.id)
} else {
console.log("========== Content not fetched ::: " + data)
}
if (!data.id) {
return response.status(404).json({ error: "Document not found" });
}
if(data.name != null) data.title = data.name;
if(data.profile != null) data.description = data.profile;
console.log("About to create content: " + data.title);
html = `<!doctype html>
<html lang="en">
<head>
<title>${data.title}</title>
<meta name="description" content="${data.description}">
<meta name="title" content="${data.title}">
<meta name="keywords" content="Permoja, collaboration, community, networking, events">
<meta property="og:locale" content="en_US" />
<meta property="og:type" content="website" />
<meta property="og:title" content="${data.title}" />
<meta property="og:description" content="${data.summary}" />
<meta property="og:image" content="${data.posterUrl}" />
<meta property="og:image:secure" content="${data.posterUrl}" />
<meta property="og:url" content="${url}" />
<meta property="fb:app_id" content="178043849885">
<meta name="twitter:card" content="${data.summary}" />
<meta name="twitter:creator" content="@samwaithaka" />
<meta name="twitter:title" content="${data.title}" />
<meta name="twitter:description" content="${data.summary}" />
</head>
<body>
<h1>Permoja Collaboration Platform</h1>
<h2>${data.title}</h2>
<p>${data.summary}</p>
<img src="${data.posterUrl}" />
</body>
</html>
`;
} catch (e) {
console.log(e);
return response.send(html);
}
}
return response.send(html);
}
);
您现在已准备好在模拟器上进行测试。运行这个：
firebase emulators:start在 firebase.json 上，修改重写如下：
"rewrites": [
{
"source": "/some-url-path/**",
"function": "dynamicMetaTagsUpdate"
},
{
"source": "**",
"destination": "/index.html"
}
]
您现在可以部署到 firebase