很多人仍擔心如果使用 React、Angular、Ember 建站會有損搜索引擎的排名顷锰。
他們的想法大致是這樣：搜索引擎使用的爬蟲不能正確的爬取一個在瀏覽器里渲染的頁面，它們只能看見從后端發(fā)送過來的 HTML 代碼亡问。
如果 HTML 代碼中只有一些 meta 標簽和 script 標簽官紫，搜索引擎會認為你的頁面是空的并且給個很低的排名。
我經(jīng)持菖海看到 SEO 顧問推薦在后端渲染頁面束世，這樣爬蟲能夠爬到很好的 HTML 代碼并建立索引。
在我看來這樣的建議是完全不合理和不切實際的床玻。在2016年毁涉，用戶期盼頁面是動態(tài)的并能提供非常暢快的體驗。他們不想每次點擊之后等待著一個新的 HTML 頁面被加載锈死。
那么”客戶端渲染會降低頁面排名“說法成立嗎贫堰？
做些研究
首先聲明：我不是一個 SEO 專家。但我確實研讀了很多文章待牵，下面是我的發(fā)現(xiàn)其屏。
這是一個谷歌在其 webmaster 博客上的聲明，時間是2015年10月：
當前缨该，只要你不阻止谷歌爬蟲爬取您的的 JavaScript 或 CSS 文件偎行，我們基本上能夠渲染和理解你的頁面就像現(xiàn)代瀏覽器一樣。為了表述這些改進贰拿，我們最近更新了我們的 Webmaster 技術(shù)準則蛤袒，建議不要阻止谷歌爬蟲爬取您網(wǎng)站的 CSS 和 JS 文件。
下面是 Search Engine Land 2015年5月的文章：
我們運行了一系列測試驗證了谷歌可以運用多種實現(xiàn)做到執(zhí)行并索引 JavaScript壮不。我們也同時確認谷歌可以渲染整個頁面并讀取 DOM汗盘，即使索引動態(tài)生成的內(nèi)容。
在 DOM 中 SEO 信號（標題询一，meta 標簽隐孽，規(guī)范化標簽，meta rebots 標簽等）仍然被推崇健蕊。被動態(tài)插入到 DOM中的內(nèi)容是可以爬去和索引的菱阵。另外，在某些情況下 DOM 信號甚至會優(yōu)先于 HTML 代碼造成矛盾缩功。這還需要做一些工作晴及，但確實是我們測試的一部分。
以上兩條來源的建議就是，可以確實安全的使用客戶端渲染布局度宦。
測試 Preactjs.com
我最近推了一條挽歌給那些挑剔 React 的 SEO 顧問。準確的說戳表，我正遷往 Preact蛛倦，一個輕量的臉書的 React 的替代物歌懒。拋開我在上面引用的 Search Engine Land 的文章不說，Preact 的作者 Jason Miller 給谷歌搜索推了他的項目首頁溯壶，這個樣子的：
這個頁面完全是在客戶端渲染的及皂，使用的 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 標簽更多的內(nèi)容验烧。
但是，下面是谷歌搜索site:preactjs.com的結(jié)果：
另一篇 Andrew Farmer 2016年3月的文章 警告除谷歌外的搜索引擎對 JavaScript 缺少支持：
我的研究中我不能找到任何證據(jù)表明 Yahoo又跛、Bing 或百度支持對 JavaScript 的爬取碍拆。如果在這些搜索引擎的 SEO 對你很重要，你需要使用服務端渲染效扫，未來我會再探討倔监。
所以我決定試一下其他搜索引擎對于 Preact 的搜索結(jié)果直砂。
?Bing
看來 Andrew 對 Bing 的描述是蒼白的菌仁。下面是 Bing 的搜索結(jié)果：
?Yahoo
下面是 Yahoo 的搜索結(jié)果：
? Duck Duck Go
??百度
看來百度的搜索結(jié)果有些問題：
從結(jié)果看的出，除非在中國的搜索排名對你很重要静暂，不然不需要過多擔心使用 JavaScript 在客戶端渲染你的網(wǎng)頁济丘，只要遵守一些基本規(guī)則：
- 在異步操作之前渲染你的組件。
- 讓谷歌收錄你的每個頁面確保爬蟲能爬取頁面內(nèi)容洽蛀。
感謝閱讀摹迷！文章出處
寫在2018年6月13日，現(xiàn)在百度也可以正確讀取 Preact 的網(wǎng)站了郊供。但是對于 URL 中使用 Hash 的好像還是不可以峡碉。
