logo标签列表

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

javascriptjqueryhtmlfacebook-opengraph
5
我正在尝试使用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响应中的值添加到开放图谱标签中。

1
可能是使用JQuery在Head标签中添加元数据的重复问题。 - Alexander
3个回答
8
如果您的标签是用于在类似Facebook的网站上生成内容预览，则使用jQuery可能无法正常工作，因为大多数网络爬虫不运行JavaScript，它们只是下载HTML并按原样阅读。
为了使其正常工作，您需要在服务器端生成标签。
您可以使用Facebook的共享调试器调试您的标签： https://developers.facebook.com/tools/debug/
3
如Alan所述，大多数网络爬虫不运行JavaScript，它们只是下载HTML并按原样阅读。截至今日，FB爬虫不能运行JavaScript。
为此，一个好的解决方案是拥有一个服务器（nginx就足够了），检测访问者的用户代理，如果是Facebook的UA（https://developers.facebook.com/docs/sharing/webmasters/crawler/），则提供带有OG标签的简单HTML。否则，提供Web应用程序。
1
你可以像这样使用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.

谷歌确实会读取并运行JavaScript代码，至少会读取meta标签。详见https://developers.google.com/search/docs/guides/javascript-seo-basics

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接