动态 Facebook Open Graph 标签可能吗？答案

【问题标题】：Dynamic Facebook Open Graph tags possible?动态 Facebook Open Graph 标签可能吗？
【发布时间】：2015-12-15 05:40:44
【问题描述】：

我正在使用 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 有机会替换内容之前读取了源代码。

有没有办法解决这个问题？

谢谢。

【问题讨论】：

drib.tech/programming/… 说有一种解决方法不再有效。也许有一天！

标签： jquery html facebook-graph-api facebook-opengraph

【解决方案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 标签。

【讨论】：

我已经知道了。我的问题是“解决”我的问题。很多网站都这样做——一定有办法。
没有办法，facebook 只是不解析 javascript。哪个网站在做？
我并不是说我需要使用 Javascript 来完成这项工作。必须有一种方法可以动态加载<meta> 标签。 Vimeo、Youtube，几乎任何像这样的视频托管网站都可以完美地与 FB 配合使用。我猜他们正在使用 PHP 为每个上传的视频创建一个新页面？
这有点超出范围，尝试谷歌搜索“apache rewrite”，有很多关于重写 url 的信息。无论如何，我认为这不是一个好主意，因为您仍然必须添加整个描述，而且它可能会很长。这只是一个想法，但却是一个糟糕的想法。 youtube 获取视频密钥，查看他们的数据库并获取标签。
如果您对某事投反对票，请评论原因。我的回答是 100% 正确的，但如果缺少某些内容，我很乐意改进它。

【解决方案2】：

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

一种方法（我这样做的方法）是使用 prerender.io 之类的预渲染服务来预渲染您的页面，并将来自网络爬虫的请求重定向到基于用户代理的预渲染服务器（您可以轻松地在 google 上找到如何使用您的 Nginx/Apache 服务器执行此操作）。

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

Prerender 是开源的，因此您可以免费运行自己的预渲染服务器！

【讨论】：

【解决方案3】：

试试这个对我有用。

<?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>

【讨论】：

您假设您将使用 php，对于许多人来说这不是一个可行的选择。