Angular 4 - 为 Facebook 动态更新元标签（开放图）

Question

我们如何动态添加/更新元标记，以便 Facebook/Whatsapp 共享对话框选择它们？

我将我的 angular 2 应用程序升级到 angular 4，以便在我们从 API 获取组件中的数据后使用 Meta 服务动态添加/更新元标记。

到目前为止，在我的组件中，我有

this.metaService.updateTag({ property: 'og:title', content: pageTitle });
this.metaService.updateTag({ property: 'og:url', 'www.domain.com/page' });
this.metaService.updateTag({ property: 'og:image', content: coverUrl, itemprop: 'image' });
this.metaService.updateTag({ property: 'og:image:url', content: coverUrl, itemprop: 'image' });
this.metaService.updateTag({ property: 'og:image:type', content: 'image/png' });

我正在使用 updateTag，因为我已经使用默认值添加了静态标签。 当我检查它们时，此代码成功更新了元标记值。

我知道 Facebook/Whatsapp 调试器工具不执行任何 javascript 是有道理的，因此它可能永远不会在他们的环境中执行。

我正在使用https://developers.facebook.com/tools/debug/并且它总是选择有意义的默认标签值。

我的问题是，Facebook/Whatsapp 动态获取更新的标签值的方法是什么？ 我正在使用 Angular 4 并通过 API 调用加载所有数据，因此在页面加载和脚本执行之前不可能获得任何类型的数据。

Answer 1

Open Graph OG 标签必须在源代码中！

您需要在 html 源代码中提供一个包含开放图形标签（如 og:image og:title 和 og:description ）的静态 html 页面，因为 facebook、twitter 和 co 只是抓取纯 html 而不通过 javascript 呈现它。 Angular 通过 js 动态更新 dom，因此爬虫只得到初始的 index.html。

有几种方法可以提供包含开放图形标签的 html 并解决您的问题：

• 具有角度通用的服务器端渲染
• 使用代理呈现您的页面
• 动态覆盖 index.html 替换 og 标签
• 提供静态 html 页面（不确定 angular 是否支持）

我猜你已经使用类似ngx-meta 的东西来添加 og 标签了？

Angular Universal - 在 Angular 2/3/4/5 中使用元标记进行服务器端渲染

我猜服务器端渲染是解决您的问题的最合适的方法。 为此，您可以托管节点服务器或使用例如。 AWS 拉姆达。 这样做的缺点是，您的应用程序必须主动托管并且不能再静态提供。 无论如何，这似乎是最好的方法，因为它也改进了 SEO。 Angular Universal 是要搜索的术语：

• 角度通用
• Angular Universal Starter Boilerplate
• 带有服务器端渲染的 Angular Universal PWA，使用 aws lambda 样板进行无服务器渲染

构建时的 Angular 通用预渲染

您还可以在构建过程中预渲染特定路由，并将 angular 用作具有多个预渲染 index.html 文件的静态应用程序。 如果您只有很少的静态路由，这非常有效。 考虑具有动态部分的更通用的路线，这不是解决方案。 去服务器端渲染。 angular 通用样板也包含一个示例。 参见prerender.ts

替代解决方案

使用代理预渲染 Angular 以提供 OG 标签

如果您想避免在构建过程中实现服务器端/预渲染（设置 angular Universal 有时对于结构不佳的应用程序来说是一种痛苦。）您可以尝试使用代理服务来预渲染您的页面。 看看例如。 预渲染.io 。

覆盖 index.html

将所有请求重定向到覆盖 og:tags 的脚本。 例如。使用 PHP 和 .htaccess 覆盖 og 标签，这在现代环境中也是可能的。 例如。 您可以使用 cloudfront/api 网关和 lambda 函数。 还没有看到这个例子。

Facebook 缓存和开放图谱调试

请注意，缓存可能仍然缓存了它们第一次抓取时的开放图信息。 确保您的源代码是最新的，并且所有缓存、反向代理（如 nginxx、cloudfront）都已清除。

使用Facebook Debugger调试打开的图形缓存并清除 facebook opengraph 缓存

Answer 2

截至 2018/19 年，如果您的主要目标是 SEO（或者可能更多的“SMO” - 社交媒体优化 - 因为 Googlebot 在评估 JavaScript 方面做得很好，但大多数社交媒体机器人没有）您选择的 SSR 解决方案可能应该不是 Angular Universal，而是使用无头浏览器的东西。

这将属于 Manuel 回答中的“代理”类别，但由于我还没有看到他们在这里发布了两个（半）非常好的解决方案：

瑞创

这个是由 Google Chrome 团队自己维护的，它只是渲染和返回应用程序的一个很好的端点。

伦多拉

与 Rendertron 非常相似，但这个中间件已经内置（即您决定在何处以及如何决定渲染哪些请求以及不渲染哪些请求），并且还带有一些更高级但方便的功能，例如缓存。 因此，它真的非常接近它的“需要零配置”的目标，甚至比 Rendertron 更容易设置。

傀儡师

再次由 Google Chrome 团队维护（实际上由 Rendertron 使用）Puppeteer 为无头 Chrome 提供了一个基于节点的高级 API。 因此，如果之前的项目对您来说是两个僵硬的项目，那么您可能可以使用 Puppeteer 实施合适的解决方案，但显然它比仅使用 Rendertron 或 Rendora 会做更多的工作。

与 Angular Universal 相比，该解决方案具有巨大的优势，即您的应用项目可以完全不依赖于使用的 SSR 工具（它甚至可以使用除 Angular 之外的任何其他技术）。 这显然不仅为您自己的代码提供了更大的灵活性，而且为您的包选择提供了更大的灵活性，因为您不必担心它们是否与 Angular Universal 兼容。 它们的缺点可能是一点性能开销，但如果您只是针对机器人，这可能无关紧要。 如果您使用 Rendora 的缓存，这甚至可能不是真的，您实际上可能会提高性能。 但是，如果这可以与使用 Angular Universal 实现的性能提升相媲美，我不知道。 但请记住，当我们谈论 SSR 的性能提升时，我们总是只谈论第一页加载的时间。 因此，通常这一点的重要性并不太高，因为您的用户在第一次加载后会与您的应用程序进行更多的交互。 如果他们不这样做，而您主要是匿名用户，他们只检查一个页面然后离开，您可能不会首先构建 PWA，而是构建一个经典的网页......

tl;dr 只需查看 Rendora 和 Rendertron，它们可能就是您正在寻找的东西，并且可以轻松快速地让您到达那里。

Answer 3

试试这个（使用 fb API：v2.12）：

FB.ui({
  method: 'share_open_graph',
  action_type: 'og.shares',
  action_properties: JSON.stringify({
    object : {
      'og:url': 'url', // your url to share
      'og:title': 'title',
      'og:site_name':'site_name',
      'og:description':'description',
      'og:image': 'image Url',//
      'og:image:width':'250',//size of image in pixel
      'og:image:height':'257'
    }
  })
}, function(response){
  console.log("response is ",response);
});

Answer 4

如果您使用的是 Angular 4，为什么不使用 Angular Universal 创建页面服务器端 - 这样您就可以在浏览器加载页面之前以编程方式构建HEAD标签

https://universal.angular.io/

Answer 5

在 angular 6 中，动态元标记未反映在 index.html 中

所以只有在 .htaccess 的帮助下才能获得动态元内容。

如果您想呈现需要的动态内容，请借助 .htaccess。

RewriteCond %{HTTP_USER_AGENT} facebookexternalhit/1.1|Twitterbot|Pinterest|linkedinbot|WhatsApp|Viber|SkypeUriPreview|Google.*snippet [NC,OR]

欲了解更多信息：

https://gist.github.com/toop/8072354

https://www.winhelp.info/create-browser-whitelist-with-htaccess.html

Answer 6

只需在 khushali 的回答中增加 2 美分，这帮助我找到了一个临时解决方案。

在我的托管服务提供商 (Dreamhost) 上，仅复制/粘贴时 [NC,OR] 会产生奇怪的结果。 在只有一行的 RewriteCond 上，我不得不将它写为RewriteCond … googlebot|yandex|…|…|… [NC] （用每行一个重写 RewriteCond 也有效，但在第一行不能用 [OR] . 这会奏效:)

RewriteCond … googlebot [NC]
RewriteCond … yandex [NC,OR]
RewriteCond … WhatsApp [NC,OR]

注意第一行看似缺失的OR

另一方面，我的第二分是最后一个 WhatsApp 条目 - 结果是 WhatsApp 直接从应用程序内部进行抓取（至少它今天在我的 android 手机上是这样做的；）所以我的完整行现在是RewriteCond %{HTTP_USER_AGENT} googlebot|bingbot|yandex|baiduspider|facebookexternalhit|twitterbot|rogerbot|linkedinbot|embedly|quora\\ link\\ preview|showyoubot|outbrain|pinterest\\/0\\.|pinterestbot|slackbot|vkShare|W3C_Validator|WhatsApp [NC]

（还有我完整的 htaccess

    RewriteEngine On
        
        # https://stackoverflow.com/questions/18406156/redirect-all-to-index-php-using-htaccess
        RewriteCond %{REQUEST_FILENAME} !-f
        RewriteCond %{REQUEST_FILENAME} !-d
        RewriteCond %{HTTP_USER_AGENT} googlebot|bingbot|yandex|baiduspider|facebookexternalhit|twitterbot|rogerbot|linkedinbot|embedly|quora\ link\ preview|showyoubot|outbrain|pinterest\/0\.|pinterestbot|slackbot|vkShare|W3C_Validator|WhatsApp [NC]
        #        RewriteCond %{HTTP_USER_AGENT} facebookexternalhit|googlebot [NC]   MUST BE WRITTEN WITHOUT OR
        #        RewriteCond %{HTTP_USER_AGENT} googlebot [NC]
        #        RewriteCond %{HTTP_USER_AGENT} facebookexternalhit [NC,OR]          'OR' IS FOR SECOND LINE (AND THIRD AND FOURTH ETC. WON'T WORK ON FIRST LINE)
        RewriteRule ^(.*)$ opengraph.php?q=$1 [NC,L,QSA]

        RewriteCond %{REQUEST_FILENAME} !-f
        RewriteCond %{REQUEST_FILENAME} !-d
        RewriteRule ^(.*)$ redir.php?orig_path=$1 [NC,L,QSA]

</IfModule>

Answer 7

我刚刚为链接创建了一个简单的 PHP 站点，它实现了 Open Graph 标签并通过 JavaScript 将用户重定向到“真实”站点。 该脚本执行以下操作：

1. 从您的 API 中获取所需的数据。
2. 返回一个带有 og-Tags 的简单 HTML 站点
3. 使用 JavaScript 将用户重定向到“真实”站点

示例：

<?php
  $articleId = $_GET['id'];
  $redirectUrl = 'https://yourapp.com/app/tabs/start/article/'.$articleId;

  // get the article metadata
  $response = file_get_contents('https://api.yourapp.com/articles/'.$articleId);
  $response = json_decode($response);

  $title = $response->title;
  $description = $response->excerpt;
  if(property_exists ($response, 'mainImageUrl') ) {
    $imageUrl = $response->mainImageUrl;
  }
  $publishedTime = $response->published;
?>

<html prefix="og: http://ogp.me/ns#">
<head>
  <title><?php echo $title ?></title>
  <meta name="description" content="<?php echo $description ?>">
  <meta property="og:title" content="<?php echo $title ?>">
  <meta property="og:description" content="<?php echo $description ?>">
  <meta property="og:site_name" content="Your App">
  <meta property="og:locale" content="en_US">
  <meta property="og:type" content="article">
  <meta property="og:url" content="https://yourapp.com/article/<?php echo $articleId ?>">
  <?php if(isset($imageUrl)) { echo '<meta property="og:image" content="'.$imageUrl.'">'; } ?>
  <meta property="og:image" content="<?php echo $imageUrl ?>">
  <meta property="article:published_time" content="<?php echo $publishedTime ?>">

  <script>
    window.location.href = '<?php echo $redirectUrl ?>';
  </script>
</head>
<body>
    <a href="<?php echo $redirectUrl ?>">Click here to proceed...</a>
</body>
</html>