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 & 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的结果：
1_nBjY1kfpImRn2lsPdSdkGg.png
另一篇 Andrew Farmer 2016年3月的文章 警告除谷歌外的搜索引擎对 JavaScript 缺少支持：
我的研究中我不能找到任何证据表明 Yahoo、Bing 或百度支持对 JavaScript 的爬取。如果在这些搜索引擎的 SEO 对你很重要，你需要使用服务端渲染，未来我会再探讨。
所以我决定试一下其他搜索引擎对于 Preact 的搜索结果。
✅Bing
看来 Andrew 对 Bing 的描述是苍白的。下面是 Bing 的搜索结果：
1_bCcM0TRVImaOF_hVs8HPtg.png
✅Yahoo
下面是 Yahoo 的搜索结果：
1_TYNb6bd-o3jQG-sPMGVEIA.png
✅ Duck Duck Go
1_WjfXMyYZz_0W1q_1std4QA.png
⚠️百度
看来百度的搜索结果有些问题：
1_LNI0cw0ZM42y-0uoYRosCQ.png
从结果看的出，除非在中国的搜索排名对你很重要，不然不需要过多担心使用 JavaScript 在客户端渲染你的网页，只要遵守一些基本规则：
- 在异步操作之前渲染你的组件。
- 让谷歌收录你的每个页面确保爬虫能爬取页面内容。
感谢阅读！文章出处
写在2018年6月13日，现在百度也可以正确读取 Preact 的网站了。但是对于 URL 中使用 Hash 的好像还是不可以。
网友评论