wenkai

使用“Fetch as Google”测试React驱动的网站的SEO

wenkai · 2016-12-29翻译 · 616阅读 原文链接
图片作者:我自己

我最近进行了一项测试,客户端渲染是否会阻止搜索引擎的爬取。在我这篇文章中提到,React 似乎根本不会影响搜索引擎的索引。

现在我们来到下个环节。我将会建立一个沙箱 React 项目,看看 Google 是如何爬取和索引的。

建立一个小的 web 应用

我的目标是创建一个简单的 React 应用,最小化配置 Babel, webpack 及其他工具的时间。然后我会尽快把这个 app 部署到公网上。

我还想做到在几秒钟内把更新部署到生产环境。

实现这些目标最好的工具是 create-react-app 和 Github Pages。

create-react-app 的帮助下,我在30分钟内创建了一个小的 React app。只是输入这些命令的事:

create-react-app seo-sandbox
cd seo-sandbox/
npm start

我修改了默认的文本和 logo,玩弄了一下格式,然后得到了—————一个 100% 由客户端渲染的网页,就交给 Google 的机器人去慢慢处理吧!

你可以在 Github 上看到这个项目。

部署到 GitHub Pages

create-react-app 非常好用,简直是超能力。

在我完成 npm run build 之后,它识别到我将要发布到 GitHub Pages,告诉我这么做:

这是我在GitHub Pages 上的 SEO 沙箱: https://pahund.github.io/seo-sandbox/

我用 “Argelpargel” 作为网站的名字,因为这个单词在 Google 上没有搜索结果

配置 Google 搜索控制台

Google 提供了一套免费的工具叫做 Google搜索控制台,以便网站站长可以测试他们的网站。

为了使用它,我给我的页面添加了一个叫做 “property” 的东西:

为了证明我是这个网站的主人,我得向网站上传一个特殊的文件以便 Google 可以找到它。多亏了好用的 npm run deploy 命令,我可以在几秒钟内完成。

通过 Google 的眼睛观察我的网页

配置完成后,我现在可以通过 “Fetch as Google” 以Google机器人的方式观察我的 SEO 沙箱页面:

点击 “Fetch and Render”,我就可以检查我的 React 页面上哪一部分真正被Google机器人索引了:

我发现了什么

发现 #1: Google 机器人可以读出异步加载的内容

我想测试的第一件事是 Google 机器人会不会索引或爬取异步渲染的页面。

在页面加载完成后,我的 React 应用发送了一个 Ajax 请求,然后使用请求到的数据更新了部分页面。

为了模拟,我在 App 组件中添加了一个 constructor 函数,通过window.setTimeout 方法设置组件的 state。

constructor(props) {
    super(props);
    this.state = {
        choMessage: null,
        faq1: null,
        faq2: null,
        faq3: null
    };
    window.setTimeout(() => this.setState(Object.assign(this.state, {
        choMessage: 'yada yada'
    })), 10);
    window.setTimeout(() => this.setState(Object.assign(this.state, {
        faq1: 'bla bla'
    })), 100);
    window.setTimeout(() => this.setState(Object.assign(this.state, {
        faq2: 'shoo be doo'
    })), 1000);
    window.setTimeout(() => this.setState(Object.assign(this.state, {
        faq3: 'yacketiyack'
    })), 10000);
}

查看源代码

我使用了4中不同的延时: 10毫秒,100毫秒,1秒和10秒。

结果表明,Google 机器人只会放弃10秒延时的。另外三段文本显示在了 “Fetch as Google” 窗口中:

React Router 干扰了 Google 机器人

我把 React Router (version 4.0.0-alpha.5) 添加到 web 应用中,创建一个菜单栏,加载不同的子页面(直接从他们的文档里复制粘贴):

意外发生了 — 当点击 “Fetch As Google”时我只得到了一个绿色背景的空页面:

看起来使用 React Router 的客户端渲染页面对搜索引擎是不友好的。这个问题只在 React Router 4 alpha 版本上存在,还是在 React Router 3 稳定版本上也存在,尚待分晓。

未来的试验

我还想测试一些其他的东西:

  • Google 机器人是否会爬取异步渲染的文本块里的链接?
  • Google 机器人是否可以理解异步添加的 meta 标签,例如 description
  • Google 机器人需要多久时间来爬取一个由 React 渲染的有很多很多很多页面的网站?

你可能有更多的想法,我希望在评论中看到!

译者wenkai尚未开通打赏功能

相关文章