动态 Facebook Open Graph 标签可能吗？

Question

我正在使用 jQuery（如下）动态更改我的 <meta property="og:image" content="#"> 和 <meta property="og:title" content="#"> 标签。当我通过Chrome中的'inspect'查看代码时，标签已成功更改。

HTML:

<meta property="og:title" content="#">
<meta property="og:image" content="#">

jQuery:

$("meta[property='og:title']").attr("content", data.name);
$("meta[property='og:image']").attr("content", data.thumbnail.url);

但是每个 Facebook debugger tool 仍然显示 content="#"。我假设这是因为 Facebook 在 Javascript 有机会替换内容之前读取了源代码。

有办法解决这个问题吗？

谢谢。

Answer 1

Facebook 根本不解析 JavaScript，您不能使用动态 Open Graph 标签。无论如何，即时更改它们并没有什么意义。

您只能在服务器上动态更改 OG 标签 - 显然。例如：https://yourdomain.com/dynamicogtags.php?title=xxx&description=xxx

<meta property="og:title" content="<?php echo $_GET['title'];?>">

不确定那是否是您想要做的，URL 这样看起来很丑陋。重写当然很好。

您可能还想尝试类似 prerender.io 的方法，但我不确定它是否会处理动态 og 标签。

Answer 2

试试这个对我有用。

<?php

$params = array();
if(count($_GET) > 0) {
    $params = $_GET;
} else {
    $params = $_POST;
}
// defaults
if($params['type'] == "") $params['type'] = "restaurant";
if($params['locale'] == "") $params['locale'] = "en_US";
if($params['title'] == "") $params['title'] = "default title";
if($params['image'] == "") $params['image'] = "thumb";
if($params['description'] == "") $params['description'] = "default description";

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# MY_APP_NAME_SPACE: http://ogp.me/ns/fb/MY_APP_NAME_SPACE#">
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

        <!-- Open Graph meta tags -->
        <meta property="fb:app_id" content="MY_APP_ID" />
        <meta property="og:site_name" content="meta site name"/>
        <meta property="og:url" content="http://URL/index.php?type=<?php echo $params['type']; ?>&locale=<?php echo $params['locale']; ?>&title=<?php echo $params['title']; ?>&image=<?php echo $params['image']; ?>&description=<?php echo $params['description']; ?>"/>
        <meta property="og:type" content="MY_APP_NAME_SPACE:<?php echo $params['type']; ?>"/>
        <meta property="og:locale" content="<?php echo $params['locale']; ?>"/>
        <meta property="og:title" content="<?php echo $params['title']; ?>"/>
        <meta property="og:image" content="http://URL/img/<?php echo $params['image']; ?>.png"/>
        <meta property="og:description" content="<?php echo $params['description']; ?>"/>

    </head>
</html>

Answer 3

如前所述，Facebook 根本不解析 JavaScript。

一种方法（我就是这样做的）是使用像 prerender.io 这样的预呈现服务来预呈现您的页面，并将来自网络爬虫的请求重定向到基于 [=20] 的预呈现服务器=]（您可以轻松找到如何使用 google 上的 Nginx/Apache 服务器执行此操作）。

预渲染服务会生成页面的 HTML/CSS 渲染，但它们会等到页面完全加载并执行 JavaScript 后再执行。这样，Facebook 就会得到您网站的渲染图，其中 JavaScript 已执行且 OpenGraph 标签设置正确！

预渲染 open-source 因此您可以运行免费使用自己的预渲染服务器！

动态 Facebook Open Graph 标签可能吗？

Dynamic Facebook Open Graph tags possible?

jquery

html

facebook-graph-api

facebook-opengraph