使用 Google 抓取方式,测试 React 驱动的网站 SEO-阿里云开发者社区

开发者社区> 玄学酱> 正文

使用 Google 抓取方式,测试 React 驱动的网站 SEO

简介: 本文讲的是使用 Google 抓取方式,测试 React 驱动的网站 SEO,我最近进行了一项测试,它有关客户端渲染的网站是否能避免被搜索引擎的机器人爬取内容。就如我此文所述,React 并不会破坏搜索引擎的索引。
+关注继续查看
本文讲的是使用 Google 抓取方式,测试 React 驱动的网站 SEO,

我最近进行了一项测试,它有关客户端渲染的网站是否能避免被搜索引擎的机器人爬取内容。就如我此文所述,React 并不会破坏搜索引擎的索引。

现在,我开始实施我的下一个步骤。为了了解 Google 到底能爬取和索引哪些内容,我建立了一个 React 的沙盒项目。

建立一个小型的网页应用程序

我的目标只是建立一个单纯的 React 应用程序,用最少的时间配置 Babelwebpack 和其他一些工具。之后,我会尽可能快地把这个应用程序部署到公网环境。

我也想能在几秒内就把更新部署到生产环境中。

考虑到要实现这些目标,理想的工具是 create-react-app 和 GitHub Pages

有了 create-react-app,我能在 30 分钟内创建一个小型的 React 应用程序。只需要输入这些指令:

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

我更改了默认的文本和 logo,修改了一些格式,然后瞧瞧看 —— 一个 100% 由客户端程序渲染的网页完成了,让Googlebot 好好琢磨一下。

你可以访问我 Github 上的项目工程了解更多

部署到 GitHub Pages

create-react-app 非常有用。简直和我心有灵犀。在我执行了 npm run build 指令后,它就识别出我准备计划在 GitHub Pages上发布我的项目,并且告诉我应该这么做:

这是我托管在 GitHub Pages 上的 SEO 沙盒

我把这个网站的名字设定为 "Argelpargel",因为这个词从未被 Google 收录过。

配置 Google 搜索终端

Google 为网站所有者提供了一份免费的套件工具叫做 Google 搜索终端,它可以被用于测试他们的网站。

为了建立这个服务,我为这个网站增加一个称为 property 的东西:

为了证明我就是这个网站的所有者,我不得不向 Google 上传一个特别的文件来找到这个网站。多亏了这个有用的方法 npm rum deploy,让我在很快的时间内就完成了。

Google 眼中我们网站长什么样

环境配置完毕以后,我现在能使用 "Fetch as Google" 工具,用 Googlebot 的方式看看我们的 SEO 沙盒页面:

当我点击 "Fetch and Render" 按钮,就能检查到由 React 驱动的页面上哪一部分能真正被 Googlebot 检索到:

目前我所发现的

发现 #1: Googlebot 以异步加载的形式来阅读内容

我想最先测试的是 Googlebot 会不会对异步渲染的内容进行检索或者爬取。

在页面被加载完毕后,我的 React 应用程序为数据发送了一个 Ajax 请求,并用这些数据更新了部分页面上的内容。

为了模拟这个过程,我为应用程序的组件增加了一个构造器,它通过使用一个 window.setTimeout 方法为组件设定状态。

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);
}

→ 源代码已提交到 GitHub

我使用了 4 种超时时间,10 毫秒, 100 毫秒, 1 秒 和 10 秒。

结果表明,Googlebot 只会在 10 秒的超时时间上失败。但是其他 3 个超时时间都成功了,并且对应的文本块都会显示在"Fetch as Google" 窗体内。

React Router 让 Googlebot 迷了眼

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

太出乎意料了 - 当我点击了 “Fecth As Google”后,我只看到了一片绿色背景的页面:

以客户端渲染的界面使用 React Router 影响了搜索引擎的友好性。但这是否只是 React Router 4 上的问题仍旧需要观察,或者 React Router 3 稳定版本上也存在这样的问题。






原文发布时间为:2016年11月22日

本文来自云栖社区合作伙伴掘金,了解相关信息可以关注掘金网站。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
微软称Google Android可以使用.NET,徐汇区网站设计
最近Oracle起诉Google使用Java侵权的事件炒得沸沸扬扬,但微软开源技术中心总监Tom Hanraha说,微软不会禁止Google Android使用.NET 技术。Hanraha说:“像Oracle因Java而起诉Google这样的事情,微软是不会做的。
805 0
Google Adsense(Google网站联盟)广告申请指南
Google AdSense 是一种获取收入的快速简便的方法,适合于各种规模的网站发布商。它可以在网站的内容网页上展示相关性较高的 Google 广告,并且这些广告不会过分夸张醒目。由于所展示的广告同用户在您的网站上查找的内容相关,因此,最终您的内容网页不仅会为您带来经济效益,还能够得以充实。
1916 0
【网站SEO分析】浅谈网站换域名注意事项
这里说的网站改版,并不包含单纯的页面样式的改动,仅指原页面URL发生了改变,比如换域名、修改URL结构等。
1536 0
SEO网站优化有无捷径可循?
今天写这篇文章确实是有很大的感触,现在好多新人站长在优化网站的时候一旦遇到问题就去百度找现成的答案,要么就直接去问有经验的人。不经历风雨怎能见彩虹,自己从来不想想问题是怎么产生的,一味的依赖别人。
1634 0
+关注
玄学酱
这个时候,玄酱是不是应该说点什么...
20710
文章
438
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载