javascript - 带有开放图谱协议(protocol)的 Google+ 片段

标签 javascript html ajax google-plus facebook-opengraph

我有一个动态构建的网页,我正在尝试获取在 Google+ 上共享的链接以显示片段并看起来不错,可以在此处找到文章呈现和文档的示例片段:

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

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

enter image description here

我的页面头部是这样的:

<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。我不能动态地执行此操作吗?

最佳答案

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

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

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

Simple schema for saving og tags for dynamic generated pages

关于javascript - 带有开放图谱协议(protocol)的 Google+ 片段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35569219/

相关文章:

Javascript 在具有类的元素上切换类

javascript - Div 事件状态不粘 onclick

html - 如何在有类的 div 之后选择每个没有类的第一个 div?

html - 从浏览器打开图像到图库

ajax - 避免在谷歌上为存档页面点击重复内容?

javascript - 如何拦截点击并在点击之前和之后做一些事情?

javascript - 这些示例中的 javascript 变量 "hoisted"如何来自 MDN

javascript - 如何通过 JQuery Ajax 调用在 PHP 中验证我的表单?

javascript - 如何将 jQuery Mobile 中的范围 slider 限制为最大值

asp.net - 从书签 AJAX 调用 asp