Question

我使用jQuery（下面）动态更改我的<meta property="og:image" content="#">和<meta property="og:title" content="#">标记。当我通过＆＃39;查看＆＃39;来查看代码时在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 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这样的预呈现服务来预呈现你的页面，并将来自网络爬虫的请求重定向到基于用户代理的预呈现服务器（你可以很容易在谷歌上找到如何使用你的Nginx / Apache服务器。

预呈现服务会生成页面的HTML / CSS呈现，但它们会等到页面完全加载并执行JavaScript之后再执行。这样，Facebook就可以获得执行JavaScript的网站渲染，并正确设置OpenGraph标签！

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

动态Facebook Open Graph标签可能吗？

3 个答案: