SEO VS React: 爬蟲比你想的聰明

05-03

原文

很多人到現在還擔心如果如果用react， angular, ember 來構建你的網站將降低你的搜索引擎排名。

這種想法來自一些莫名的擔憂比如：搜索引擎的網路爬蟲不能爬取網頁內容除非他是完全由服務端生成的HTML。

如果服務端的HTML只有元數據和腳本的標籤，搜索引擎將認為你的網頁是一個空白頁然後給你一個很低的網頁排名。

我經常看到一些SEO諮詢師建議用戶完全由服務端來渲染網頁，這樣搜索引擎就能很好的識別網頁內容然後建立索引。

這些建議在我看來有些沒有理由和不現實，在2016年的今天用戶都期待動態網頁和時髦的用戶體驗。沒人想每點一個按鈕都得等待服務端返回一個新頁面。

所以」客戶端渲染會降低你搜索引擎排名「到底是不是真的？

首先，我不是一個SEO專家，我也就臨時翻了翻書，以下都是我臨時翻書找到的。

google 2015年十月在webmaster 博客的聲明：

今天，只要你沒有禁止爬蟲訪問你的css和JavaScript文件，我們就能像現代瀏覽器一樣進行客戶端渲染和理解你的網頁，對於這個技術上的改進，我們更新了technical Webmaster Guidelines 來告訴你們怎麼禁止爬蟲爬取JavaScript和css文件。

還有另一篇2015年的 Search Engine Land 文章：

我們運行了多種測試來確認google可以運行和索引多種形式的JavaScript。我們還可以肯定google現在可以從客戶端渲染整個頁面和讀取頁面上的DOM來索引動態生成的頁面。
DOM裡面的傳統SEO信息（頁面標題，元數據描述，規範標籤，巴拉巴拉....)跟以前一樣被採用。動態生成內容也被爬蟲爬取和可索引。更進一步，在某些情況下，動態生成的DOM內容甚至比服務端生成的HTML頁面權重更大。當然這個還需要進一步驗證，但是這種情況確實發生在了我們的一下測試中。

從以上兩條建議來看幾乎可以肯定客戶端渲染對網頁排名是無害的。

http://Preactjs.com 測試

我最近推特感慨了那些SEO諮詢師對我最愛的react的找茬。準確的說，我最近正在試圖用Preact, 一個輕量級的react。然後我得到了Preact開發團隊中的Jason Miller的回復...

https://twitter.com/_developit/status/786599423425912832?ref_src=twsrc%5Etfw（沒梯子的忽略）

除了了上面我引用的Search Engine Land的文章， Jason還發了一條鏈接用google搜索Preact.js首頁的結果。 Preact.js首頁大概如下

整個首頁都是用Preact.js客戶端渲染生成的..首頁代碼如下：

<!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>