SEO vs. React:Web爬虫远比你想象的聪明

来源： SDK.cn 类型：技术文章发布：2016-11-07 14:28:41

很多人都担心，使用React、Angular或是Ember搭建网站，会影响网站在搜索引擎中的排名。

他们的理由是：只有当页面在用户的浏览器中完全渲染的时候，搜索引擎所使用的爬虫才能够工作。如果页面的HTML代码只含有一些meta标签和script标签，搜索引擎就会以为这是一个空白页面，从而影响页面的排名。

我经常看到这样一个情况：很多SEO咨询师都建议你在后端渲染页面，从而让爬虫看到HTML代码，从而完成检索。

在我看来，这条建议完全不合理，也不显示。现在都2016年了，用户想要的是动态的页面和优秀的体验。他们不希望每点击一个东西，就要重新加载一个新页面。

那么问题来了，“用户端”渲染真的影响搜索引擎排名吗？

Preactjs.com测试

最近一直有一些SEO专家在唱衰我所喜爱的Preact。Jason Miller，一名正在使用Preact的开发者驳斥了这个观点。

他用谷歌搜索了Preact的主页：

图片2.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>

如果Googlebot无法读取Preact所渲染的HTML，那么它就应该只能显示meta标签，其他内容无法显示。

但是，当我们在谷歌搜索 site:preactjs.com 的时候，搜索结果如下：