使用开放图协议的 Google+ 代码段答案

【问题标题】：Google+ Snippet with Open Graph Protocol使用开放图协议的 Google+ 代码段
【发布时间】：2016-06-04 19:10:25
【问题描述】：

我有一个动态构建的网页，我正在尝试获取在 Google+ 上共享的链接以显示 sn-ps 并且看起来不错，可以在此处找到用于文章呈现和文档的示例 sn-p：

https://developers.google.com/+/web/snippet/article-rendering

当我按照文档进行操作时，我的链接不会与我在 google plus 中设置的所有内容一起呈现，它们显示如下：

我的页面头部是这样的：

<head>
<div id="replaceGoogle"></div>
</head>

在我的 javascript 中，一旦生成，我就可以插入打开的图形标签：

//replace google
        var google = '<meta property="og:type" content="article" /><meta itemprop="og:headline" content="'+ data[0].name+'" /> <meta itemprop="og:description" content="View beer on Beer Portfolio" /> <meta property="og:image" content="'+ data[0].icon +'" />';
        $("#replaceGoogle").replaceWith(google);

数据取自从 ajax 调用中读取的 json。我不能动态地这样做吗？

【问题讨论】：

只是需要动态网络语言的服务器端脚本。

标签： javascript html ajax google-plus facebook-opengraph

【解决方案1】：

使用服务器端脚本（在 cmets 中询问详细信息）

【讨论】：

【解决方案2】：

我认为这个问题类似于Generating Open Graph meta tags dynamically。您问题的主要原因是 google+ 和 facebook 不会执行您的 javascript，因此它们都不会看到您的动态 og 标签。

这个问题的基本解决方案是：

为每个动态页面创建唯一的 url 并将此 url 的动态参数保存到数据库中。
当您的用户尝试使用此唯一网址共享页面时，您会发现已保存的动态参数
使用 og 标记创建页面并填充找到的动态参数

【讨论】：