使用jQuery设置动态元标记和Open Graph标记

时间:2017-05-29 11:19:47

标签: javascript jquery html opengraph

我正在尝试使用jQuery添加动态标签,但似乎无法正常工作。我在加载页面后直接加载我的脚本。

这是我的HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <script type="text/javascript" src="script.js"></script>
  </head>
  <body>
  </body>
</html>

这就是我在jQuery上添加标签的方式。

$(function() {
      $('head').append('<meta property="og:type" content="profile"/>'); 
      $('head').append('<meta property="og:url" content=""/>');
      $('head').append("<meta property='og:title' content="+text+"'/>");
      $('head').append("<meta property='og:image' content="+imageUrl+"'/>");
  });

为什么我这样做?用户访问页面example.com/?link=HDI635后 我想简要介绍一下内容。所以我之后使用jQuery进行API调用,之后我想将API响应中的值添加到Open Graph标记中。

3 个答案:

答案 0 :(得分:4)

如果您的代码的目的是在Facebook等网站上生成内容预览,那么使用jQuery可能无法运行,因为大多数网页抓取工具都不运行JavaScript,他们只需下载HTML并按原样阅读。

要使其正常工作,您需要在服务器端生成标记。

您可以使用Facebook的共享调试器调试您的代码: https://developers.facebook.com/tools/debug/

答案 1 :(得分:1)

正如Alan所说,大多数网络爬虫都不运行JavaScript,他们只是下载HTML并按原样阅读。到目前为止,FB搜寻器还没有。

一个好的解决方案是拥有一台服务器(nginx足够)来检测访问者的用户代理,如果是Facebook的UA(https://developers.facebook.com/docs/sharing/webmasters/crawler/)提供带有OG标签的简单HTML。否则,请提供网络应用。

答案 2 :(得分:0)

您可以像这样使用 JavaScript 更新元标记:

const title = "your title;
const description = "your description";
$('meta[name="description"]').attr('content', description);
$('meta[property="og:title"]').attr('content', title);
$('meta[property="og:description"]').attr('content', description);
// etc.

Google 确实会读取和运行 JavaScript 内容,并且至少会读取元名称标签。见https://developers.google.com/search/docs/guides/javascript-seo-basics