【翻译】SEO 对上 React：爬虫远比你想象的聪明

1_T1b83o47E1AI0lTpwzHVvA.png

很多人仍担心如果使用 React、Angular、Ember 建站会有损搜索引擎的排名。

他们的想法大致是这样：搜索引擎使用的爬虫不能正确的爬取一个在浏览器里渲染的页面，它们只能看见从后端发送过来的 HTML 代码。

如果 HTML 代码中只有一些 meta 标签和 script 标签，搜索引擎会认为你的页面是空的并且给个很低的排名。

我经常看到 SEO 顾问推荐在后端渲染页面，这样爬虫能够爬到很好的 HTML 代码并建立索引。

在我看来这样的建议是完全不合理和不切实际的。在2016年，用户期盼页面是动态的并能提供非常畅快的体验。他们不想每次点击之后等待着一个新的 HTML 页面被加载。

那么”客户端渲染会降低页面排名“说法成立吗？

做些研究

1_WjGkGUHaw5k-LRVPXPdmdw.gif

首先声明：我不是一个 SEO 专家。但我确实研读了很多文章，下面是我的发现。

这是一个谷歌在其 webmaster 博客上的声明，时间是2015年10月：

当前，只要你不阻止谷歌爬虫爬取您的的 JavaScript 或 CSS 文件，我们基本上能够渲染和理解你的页面就像现代浏览器一样。为了表述这些改进，我们最近更新了我们的 Webmaster 技术准则，建议不要阻止谷歌爬虫爬取您网站的 CSS 和 JS 文件。

下面是 Search Engine Land 2015年5月的文章：

我们运行了一系列测试验证了谷歌可以运用多种实现做到执行并索引 JavaScript。我们也同时确认谷歌可以渲染整个页面并读取 DOM，即使索引动态生成的内容。

在 DOM 中 SEO 信号（标题，meta 标签，规范化标签，meta rebots 标签等）仍然被推崇。被动态插入到 DOM中的内容是可以爬去和索引的。另外，在某些情况下 DOM 信号甚至会优先于 HTML 代码造成矛盾。这还需要做一些工作，但确实是我们测试的一部分。

以上两条来源的建议就是，可以确实安全的使用客户端渲染布局。

测试 Preactjs.com

我最近推了一条挽歌给那些挑剔 React 的 SEO 顾问。准确的说，我正迁往 Preact，一个轻量的脸书的 React 的替代物。抛开我在上面引用的 Search Engine Land 的文章不说，Preact 的作者 Jason Miller 给谷歌搜索推了他的项目首页，这个样子的：

1_BmlCGUpoCeo-M-mJh4SEmQ.png

这个页面完全是在客户端渲染的，使用的 Preact，看一下它的代码：

<!DOCTYPE html><html><head>
<meta charset="utf-8">
<title>Preact: Fast 3kb React alternative with the same ES6 API. Components &amp; Virtual DOM.</title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimal-ui">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<meta name="theme-color" content="#673AB8">
<link rel="manifest" href="/manifest.json">
<link rel="icon" type="image/png" href="/assets/app-icon-192.png" sizes="192x192">
<script>(function(url){window['_boostrap_'+url]=fetch(url);})('/content'+location.pathname.replace(/^\/(repl)?\/?$/, '/index')+'.md');</script>
<link rel="shortcut icon" href="/favicon.ico">
<link href="/style.6bae35e4ff9d687cb418.css" rel="stylesheet">
</head><body>
<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-6031694-20', 'auto');ga('send', 'pageview');</script>
<script type="text/javascript" src="/bundle.a0afd09fd48712ed0f26.js"></script>
</body></html>

如果谷歌爬虫不能读懂 Preact 渲染的页面代码，它不会显示比 meta 标签更多的内容。
但是，下面是谷歌搜索site:preactjs.com的结果：