使用 jQuery 设置动态 Meta 标签和 Open Graph 标签答案

【问题标题】：Set dynamic Meta Tags and Open Graph tags using jQuery使用 jQuery 设置动态 Meta 标签和 Open Graph 标签
【发布时间】：2017-10-29 16:33:44
【问题描述】：

我正在尝试使用 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 标记。

【问题讨论】：

Using JQuery to add metadata in the Head Tag的可能重复

标签： javascript jquery html facebook-opengraph

【解决方案1】：

如果您的标签的目的是在 Facebook 等网站上生成内容预览，那么使用 jQuery 可能不起作用，因为大多数网络爬虫不运行 JavaScript，他们只是下载 HTML 并按原样阅读。

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

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

【讨论】：

【解决方案2】：

正如 Alan 所说，大多数网络爬虫不运行 JavaScript，他们只是下载 HTML 并按原样阅读。截至今天，FB 爬虫还没有。

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

【讨论】：

【解决方案3】：

您可以像这样使用 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

【讨论】：