對 CSR(Client Side Rendering) 做 SEO 的工作為何落在了開發者身上?

在責任上, SEO 應該是站點開發者、站點運營者、搜索引擎三者共同完成的。站點開發者做好頁面結構科學、標籤語義化、站點路由精簡、提供必要的爬蟲信息(如 Robot.txt,Sitemap,標籤 role,ref 等等);運營人員負責關鍵詞選取、原創內容、出入友鏈及 SEO 服務購買;搜索引擎開發者負責爬蟲開發、數據清洗、分析、排序、存儲及其它產品性功能。

在現實環境中,現階段 CSR(Client Side Rendering) 大行其道,SPA 站點層出不窮,用戶體驗得到了質的升級、開發者效率有了長足的提升,使用前端路由技術也讓用戶感知不到 CSR 與 SSR(Client Side Rendering) 區別,該給爬蟲的路由給好了,該給爬蟲的 hints 給夠了,可爬蟲就是要 html 文本,很氣!路由 + hints + js 就已經包含爬蟲需要的所有信息了,可 為了兼顧 SEO, 開發者不得不為爬蟲提供專門的 shadow site,或者自己定期下載自己的頁面提供給爬蟲,或者使用 SSR,有種回歸原始社會、天堂掉落地獄,為「弱智」的爬蟲喂飯的感覺。

從技術角度上看,現代的前端測試框架已經可以測試頁面功能、非同步資源;也有 PhantomJS、Headless Browser 技術;甚至高校的學生也能做到為爬蟲提供解析動態腳本的能力。惟有慮者,就是爬蟲工具大規模應用腳本解析與 BOM 和 DOM 模擬時的性能問題或者是在虛擬機上運行瀏覽器的開銷與複雜性問題,竊以為,這不是無解並不能優化的,加速設備、探索高效的技術方案都是路子,何況搜索引擎公司還有整天圍著爬蟲轉的專職工程師。既然可邁著步子面向未來做無人車、人工智慧,以之為基石的爬蟲技術卻不能滿足現代 web 技術的需求,難免要叫人吐槽 SEO 界的主要矛盾之一是日益精進的現代 web 開發技術與落後不知進取的爬蟲技術的矛盾。

固然可以反駁 CSR 成型才幾年,可谷歌推出 Gmail 可是 2007 年,爬蟲開發者們應該有為日後大行 SPA 之今日做準備的前瞻性。畢竟他們的 AI 已經可以識別語音、圖像了,卻對 CSR 的網頁束手無策實在諷刺,一點不像推崇人工智慧的公司的感覺。在現在及未來,還有一些用 CSS 特性實現的站點,爬蟲們似乎更是絕不 care 了(固然這樣的站點 Accessibility 極差,不過健全人是能識別的!按下不表)。

私以為,使用 SSR 合理的考量是為了加速頁面渲染(此點有待商榷並和站點實際情況相關),瀏覽器兼容,A/B 測試等情況。為了 SEO 不得不給 CSR 站點加上 SSR 真有種讓開發者嘴上說道「搜索引擎您真是大爺,我準備了 SSR 好好伺候您」,OS卻是「老子還要遷就這搜索引擎的破技術,你跑一下我的 JS 不就拿到 HTML 了嗎,你覺得麻煩咋不直接要我自己寫爬蟲自己清洗數據自己去你的網站填資料庫呢」的不服氣又不得不妥協的無力感呢!


截圖較多。

TL;DR:百度對中文SPA的支持已經到了比較好的程度,但對英文SPA的支持欠佳。另外,如果要使用bing,搜索中文內容就用國內版,英文內容就用國際版。

Google和bing很早以前就支持SPA了。幾個月前吧,我用百度搜索preact,發現搜不到preact.js官網,Google、bing都能搜到。不過現在(2017-11)再試,發現百度也支持SPA站點了。如下圖

百度搜索preact

bing搜索preact

當然只能搜到首頁還不夠,看看能不能搜到SPA里的內容,這次換angular試試。

百度搜索angular文檔內容

可以看到,百度只在第一頁給出了angular官網的鏈接,沒有給出具體指向文檔forms這一章的鏈接。

bing搜索angular文檔內容

嗯,高下立判,bing在首頁第二條就給出了angular文檔里講forms的章節鏈接。點擊進去,就是我想要的內容。

bing搜索指向的網頁

當然,中國的開發者更關心中文SPA的支持情況,那再試試中文SPA網站。我在react中文網上找了一個瀏覽量第3的帖子,分別用百度和bing國際版、bing國內版搜一下試試

我選擇的帖子

百度搜索中文SPA站點內容

可以看到排在首頁第一條,很不錯。但是點進去之後顯示位置的是該帖子中間的一個樓層,不知道為什麼。

百度搜索結果點擊進去的網頁

使用bing國際版,搜索結果第一頁沒有我要找的內容

bing國際版首頁沒由我要的內容

換到bing國內版,回歸正常發揮

bing國內版能搜到

bing

和百度不一樣,bing國內版搜到的內容點擊進去顯示的是帖子的第一樓。

bing國內版搜索結果點進去的內容

結論:百度對中文SPA的支持已經到了比較好的程度,但對英文SPA的支持欠佳。另外,如果要使用bing,搜索中文內容就用國內版,英文內容就用國際版。


雖然我不是百度的工作人員,但是和相關人員有比較多的交流,並且結合實際情況,談談我的看法

  1. 單頁應用的這種形式,的確提升了用戶體驗,但並不具有可檢索性。
  2. 並不是前端技術出身,前端路由技術應該是通過?或者#的參數,通過ajax來觸發頁面內容變更,目前對於搜索引擎來說,很多站點使用?追加的參數等於一個新的頁面,如果只是通過ajax獲取內容,那對於搜索來說都是重複頁面,搜索引擎很難區分這個?的參數是使用ajax還是刷新頁面,而#之前大部分是用於頁面錨點定位,所以#後的內容是被爬蟲拋棄的
  3. 我從2012年的時候就聽說搜索引擎開始測試能執行js的爬蟲,其實爬蟲的工程師也是會關注這一點的。但是很可惜,現在17年了,貌似還沒全量上線,我猜測主要原因是大部分的站點,還是在傳統前端技術框架下運行,所以這種事情就不是那麼緊急。搜索引擎維護的是整個生態,而不是特定的某個站點。並且執行js對資源的消耗比單純下載個html要大上5~10倍,就百度這狀態而言,投入大量錢,針對只有可能不到1%的站點才會使用CSR的技術,對爬蟲進行改造應該是不可能的。
  4. 針對『你覺得麻煩咋不直接要我自己寫爬蟲自己清洗數據自己去你的網站填資料庫呢』,其實搜索引擎一直有做,只是針對的大型網站
  5. 其實樓主的困擾我也非常有同感,站點上的任何一個js特效都要仔細檢查,做各種hack工作保證爬蟲友好性,不過與其抱怨爬蟲的落伍,還不如讓越來越多站點升級自身的前端技術,倒逼百度去升級它的爬蟲,這對整個行業也是一件好事。

因為搜索引擎是老大,它定規則,你要麼遵守,要麼放棄SEO放棄搜索引擎帶來的流量。

火氣不要這麼大,前端不是面向SEO編程,也不是面向CSR編程,調整心態,努力做到面向工資編程。

---

站在開發者角度,當然是希望搜索引擎更新抓取技術,把JS執行一遍抓取內容,但是站在搜索引擎的角度,要能執行JS抓內容那麼簡單當年早就把flash的內容執行抓了。其實搜索引擎需要的是數據,從HTML解析文本可以拿到,這種方法簡單可靠,執行JS再拿理論上也可以拿到,但是太複雜,而且CSR的路由是藉助HTML的偽鏈實現的,根本不是啥正規URL,真要抓內容,不如直接定義API規範,讓搜索引擎調API取數據,連解析都省了。


站在搜索引擎的角度,恐怕瓶頸就真的在性能上。記得The Art of SEO一書中說,Google 2008年能檢測到互聯網中存在1 萬億張的頁面,到2014年,檢測到了3萬萬億張頁面。6年3萬倍,說明在爬蟲性能與技術不斷提升的同時,互聯網中的數據量增長也十分巨大。
對於百度,應該也有同樣的問題。雖然爬蟲性能和技術提升,但互聯網中的內容,仍然抓不完,處理不完。看這幾年百度推出的演算法和產品,很多都是幫助爬蟲"減輕負擔"。比如颶風,打擊重複內容站; 再比如阿拉丁,熊掌號,鼓勵數據通過API對接。對於搜索引擎爬蟲,"能實現"是一碼事,"大規模高效應用"又是另一碼事。網頁那麼多,數據都抓不完,當然也不會花過多經歷處理那些CSR站。

站在企業的角度,SEO雖不如前兩年火熱,對於某些業務類型企業,仍然是十分重要的用戶獲取渠道。但是,真的不是所有類型的網站需要SEO。對於一些重交互數據少的Web APP,可能SEO意義就不大。但是企業內部的SEO人員或者企業的SEO服務商不會考慮這個,因為他們的工作之一就是確保網站所有頁面搜索引擎友好,他們對於那些CSR的頁面肯定會提出修改的需求,這就需要有一個人來權衡及拍板,SSR成本如果很高,是否真的要做。


改變不了別人只能改變自己。。還不是為了錢


推薦閱讀:

如何從零開始學習SEO?
做SEO有沒有前景?
網站馬太效應問題,小網站如何避免?
seo網站優化是什麼?
如何做到 SEO 可控?

TAG:前端開發 | 搜索引擎優化SEO | 爬蟲計算機網路 | SPASingle-PageApp | 服務端渲染 |