让爬虫在页面加载完 Nuxt 后读取 header meta 标签答案

【问题标题】：Make crawlers read header meta tags after page has finished loading Nuxt让爬虫在页面加载完 Nuxt 后读取 header meta 标签
【发布时间】：2023-02-11 02:07:55
【问题描述】：

我在一个网站上使用 Nuxt，我们有不同的内容类型，如事件、博客文章等。

我们有一个从中提取内容的 API，因此，例如，如果写了一篇新文章，它将显示在 API 中，然后在 nuxt 应用程序上显示为动态路由。

我们有 SEO 标签，如标题、关键字、描述、图片等。还有 Facebook 等的 og 元标签。

元标记在测试时和在 Facebook 上正确加载在浏览器中。然而，对于动态路由，因为内容是从 API 中提取的，所以标题元标记仅在内容被提取后才会更新，即页面加载完成后。然而，Facebook 会尽快获取元标头标签（这将只是默认标头标签）并且不会等待页面完成加载以便它可以读取更新后的正确元标签。

有什么办法可以强制爬虫在获取标题中的元标记信息之前等待页面完成加载？

谢谢

【问题讨论】：

标签： nuxt.js web-crawler seo facebook-opengraph

【解决方案1】：

不幸的是，没有标准的方法可以强制像 Facebook 这样的爬虫在抓取元标记之前等待页面完成加载。但是，您可以使用服务器端呈现来确保首次加载页面时 HTML 中存在正确的元标记，这应该会提高爬虫看到正确元标记的机会。

在 Nuxt 中，您可以在组件中使用 asyncData 方法从 API 获取数据并返回页面的元数据，这些元数据将添加到组件的数据中并可用于模板。此方法在呈现组件之前在服务器上运行，因此它将包含在发送到浏览器的初始 HTML 中。

下面是一个示例，说明如何使用 asyncData 获取博客文章的元数据并将其提供给模板：

<template>
  <h1>{{ post.title }}</h1>
  <!-- Add other components for the post content here -->
</template>

<script>
export default {
  async asyncData ({ params, $axios }) {
    const { data } = await $axios.get(`/api/posts/${params.id}`)
    return { post: data }
  }
}
</script>

在您的 head 组件中，您可以使用 asyncData 方法中的数据为页面生成正确的元标记：

    <template>
      <title>{{ post.title }}</title>
      <meta name="description" content="{{ post.description }}">
      <!-- Add other meta tags here -->
    </template>
    
    <script>
    export default {
      computed: {
        post () {
          return this.$store.state.post
        }
      }
    }
   </script>

使用此设置，正确的元标记将包含在发送到浏览器的初始 HTML 中，并且它们应该在页面首次加载时可供抓取工具使用。

【讨论】：