动态的Facebook Open Graph标签是否可行？

Question

动态的Facebook Open Graph标签是否可行？

jqueryhtmlfacebook-graph-apifacebook-opengraph

21

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

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调试工具仍然显示每个内容为content="#"。我假设这是因为Facebook在JavaScript有机会替换内容之前读取源代码。

是否有解决方法?

谢谢。

- user1661677

http://drib.tech/programming/dynamically-change-facebook-open-graph-meta-data-javascript 上说有一个不再起作用的解决方法。也许有一天会有新的解决方法！ - Ryan

3个回答

1

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

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

预渲染服务会生成页面的HTML / CSS渲染，但是它们会等待页面完全加载和JavaScript执行后才这样做。这样，Facebook就可以获得已执行JavaScript并正确设置OpenGraph标记的网站呈现结果！

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

- Martin Vandersteen

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

- user7795526

4

你假设你会使用PHP，但对于许多人来说，这不是一个可行的选择。 - Tero

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- andyrandy · Accepted Answer

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标签。