Google 爬虫如何抓取 JavaScript 的内容

当Google爬虫（Googlebot）抓取网站时，它可以执行JavaScript并抓取动态生成的内容。然而，有些情况下担心Googlebot无法正确地执行JavaScript。在这里，我们详细讲解如何让Google爬虫成功抓取JavaScript内容。

确保JavaScript没有错误

Googlebot可以执行JavaScript并抓取动态生成的内容，但如果JavaScript代码存在语法错误或其他问题，它将无法正确地解析和渲染您的页面。因此，确保您的JavaScript代码没有错误，特别是当它与DOM交互时。

例如，以下JavaScript代码具有语法错误：

var message = "Hello, world!'

在这里，字符串常量的末尾引号丢失了。这个错误可能会导致Googlebot无法正确解析代码，并且在渲染页面时无法动态生成内容。

使用单页应用程序框架

如果您的网站使用单页应用程序（SPA）框架，例如React或Angular，您需要确保Googlebot可以正确解析和渲染您的应用程序。对于这种情况，可以使用以下两种技术：

1. 预渲染：这是在服务器上执行的过程，在其中静态HTML页面使用JavaScript生成，Googlebot只需要抓取和索引这些预渲染的HTML页面。例如，搜索引擎优化（SEO）专用的工具，例如prerender.io和React Helmet，可以帮助您预渲染您的单页应用程序。

2. SSR（服务端渲染）：这是在服务器上执行的过程，在其中渲染HTML代码并将其发送给Googlebot，而不是动态生成存在于客户端上的JavaScript代码。因此，Googlebot不需要解析JavaScript代码，而可以直接索引渲染的HTML代码。针对单页应用程序的SSR方案，例如Next.js和Nuxt.js，可以帮助您实现服务端渲染的功能。

示例1：使用预渲染技术

以下是使用prerender.io预渲染技术为Vue.js应用程序生成静态HTML页面的示例：

1. 安装prerender.io Vue插件：

npm install prerender-spa-plugin --save-dev

1. 在vue.config.js文件中定义插件：

const PrerenderSPAPlugin = require('prerender-spa-plugin')

module.exports = {
  configureWebpack: config => {
    if (process.env.NODE_ENV !== "production") return;
    return {
      plugins: [
        new PrerenderSPAPlugin({
          staticDir: path.join(__dirname, "dist"),
          routes: ["/"],
          renderer: new PrerenderSPAPlugin.PuppeteerRenderer({
            renderAfterDocumentEvent: "render-event"
          })
        })
      ]
    };
  }
}

这里的PrerenderSPAPlugin将为应用程序生成静态HTML页面，并将其保存在dist目录中。在这里，我们只为“/”路由定义静态HTML页面。

1. 设置“/”路由：

{
  path: '/',
  name: 'home',
  component: Home,
  meta: {
    prerender: {
      render: true
    }
  }
}

在meta中的prerender对象中，基于路由为我们的主页和其他需要预渲染的页面定义一个布尔值。

现在，执行npm run build以构建您的Vue.js应用程序，并预渲染您的应用程序，以确保Googlebot可以抓取和索引您的静态HTML页面。

示例2：使用SSR技术

以下是使用Next.js实现服务端渲染，并确保Googlebot可以正确地索引内容的示例：

1. 安装Next.js：

npm install next react react-dom

1. 创建pages目录，并在其中定义页面范本：

import Link from 'next/link';

const Index = () => (
  <div>
    <Link href="/about">
      <a>About Page</a>
    </Link>
    <p>Hello Next.js</p>
  </div>
);

export default Index;

这里，我们在页面中定义了一个链接，并在其下方添加

元素。

1. 配置Next.js应用程序的服务器端：

const express = require('express');
const next = require('next');

const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()

app.prepare().then(() => {
  const server = express()

  server.get('*', (req, res) => {
    return handle(req, res)
  })

  server.listen(3000, (err) => {
    if (err) throw err
    console.log('> Ready on http://localhost:3000')
  })
})

这个服务器代码将Next.js应用程序启动在3000端口上，并处理所有请求。

现在，您可以在localhost:3000上预览您的Next.js应用程序，并确保Googlebot可以正确地索引和渲染您的内容。

以上是让Google爬虫成功抓取JavaScript内容的完整攻略，包括使用预渲染和SSR技术，并提供了两个示例。