分享一個(gè)最近碰到的案例。

某天微信上來(lái)了個(gè)消息，咨詢?yōu)槭裁醋约鹤龅木W(wǎng)頁(yè)收錄極少。明明已經(jīng)有了上千個(gè)頁(yè)面且內(nèi)容還算是不錯(cuò)，網(wǎng)站的技術(shù)設(shè)置也沒(méi)有屏蔽爬蟲抓取，但整體的收錄數(shù)據(jù)就是上不去，更別提關(guān)鍵詞出詞了。

起初我還以為是低質(zhì)量?jī)?nèi)容的緣故，但一打開人家的網(wǎng)頁(yè)，上面的內(nèi)容做的確實(shí)不錯(cuò)，圖片搭配合理且排版精美，仔細(xì)讀起來(lái)也有點(diǎn)東西。

于是一點(diǎn)點(diǎn)排查。

起初看站長(zhǎng)工具后臺(tái)，里面的爬蟲報(bào)告上顯示是有抓取記錄的，且一直持續(xù)有爬蟲光顧他的網(wǎng)站。

這也就說(shuō)明整體的技術(shù)通道是沒(méi)有問(wèn)題的，問(wèn)題可能就出在某些技術(shù)設(shè)置有瑕疵。

然后準(zhǔn)備排查 SEO 插件的設(shè)置，但是反饋說(shuō)在這塊沒(méi)有做任何操作。因?yàn)椴⒉皇鞘褂?WordPress 建站，而是直接在某平臺(tái)上買的源代碼，并部署在自己的服務(wù)器上。

所以后面自然就懷疑是不是這套源代碼有什么技術(shù)問(wèn)題。

通過(guò)工具測(cè)試后發(fā)現(xiàn)，這套源代碼在 SEO 優(yōu)化方面基本就是坑，因?yàn)檎w上使用的是客戶端渲染（CSR）技術(shù)來(lái)做內(nèi)容加載的。

技術(shù)層面上的通俗理解，就是網(wǎng)站初始加載時(shí)只有一個(gè)網(wǎng)頁(yè)框架，里面基本沒(méi)任何內(nèi)容。后續(xù)有用戶在網(wǎng)頁(yè)上做了點(diǎn)擊或者瀏覽動(dòng)作時(shí)，觸發(fā)了 js 代碼才會(huì)去加載網(wǎng)頁(yè)內(nèi)容。

注：這種內(nèi)容加載方式現(xiàn)在已經(jīng)非常少見了，主流的建站方式都不是這種內(nèi)容渲染方式。

這種技術(shù)邏輯，對(duì)于個(gè)人用戶的使用體驗(yàn)而言基本沒(méi)有問(wèn)題，但是對(duì)于爬蟲而言就問(wèn)題大了。

因?yàn)榕老x初次加載時(shí)只有一個(gè)空曠的內(nèi)容框架（沒(méi)有內(nèi)容），于是爬蟲自然就會(huì)認(rèn)為這個(gè)頁(yè)面是沒(méi)有內(nèi)容的，它并不會(huì)像人一樣會(huì)去做點(diǎn)擊之類的操作。

問(wèn)題發(fā)現(xiàn)了，后續(xù)自然就是整改了，無(wú)奈前面花的那些成本都白白浪費(fèi)了。

所以這種 JavaScript SEO，如果你純粹是使用技術(shù)去搭建網(wǎng)站的話，是很有必要好好學(xué)習(xí)一下的。

且官方文檔里已經(jīng)有了不少這方面的說(shuō)明，值得我們?cè)趧?dòng)手之前好好看看。

像官方文檔里的這個(gè)案例（第十點(diǎn)），說(shuō)的內(nèi)容付費(fèi)墻方面的實(shí)操操作。

比如我們看很多平臺(tái)需要付費(fèi)訂閱才能顯示完整內(nèi)容，但是在做內(nèi)容隱藏時(shí)只是通過(guò)簡(jiǎn)單的 js 代碼設(shè)置內(nèi)容不可見。

于是矛盾出現(xiàn)了，雖然普通用戶在瀏覽器上看不到隱藏內(nèi)容，但是這些被隱藏的內(nèi)容卻在網(wǎng)頁(yè)源代碼里明明白白的顯示著（通過(guò)查看網(wǎng)頁(yè)源代碼的方式都能看到這些被刻意隱藏的內(nèi)容）。

這就讓爬蟲很尷尬了，到底是抓取已經(jīng)呈現(xiàn)出來(lái)的內(nèi)容，還是說(shuō)這些被隱藏的內(nèi)容都要抓取進(jìn)去。

于是官方文檔里就給實(shí)操說(shuō)明，不要用這種 js 代碼認(rèn)為隱藏的方式去做內(nèi)容付費(fèi)墻。

相反直接在服務(wù)端做出免費(fèi)版本與付費(fèi)完整版本，倒是一個(gè)更好選擇。

其實(shí)在網(wǎng)站運(yùn)營(yíng)過(guò)程中，類似這樣的坑還挺多的，沒(méi)辦法只能一個(gè)一個(gè)踩過(guò)去才能提高自己的能力。