前言：為什么JavaScript SEO 越來越重要

JavaScript 在近幾年來越來越興盛，主要的原因在于JavaScript 能為網(wǎng)站帶來許多不同的特效，也為訪客體驗(yàn)增加不少了效果。

而在美國，也有多達(dá)80% 的電商網(wǎng)站使用JavaScript 生成主要的內(nèi)容，或是產(chǎn)生產(chǎn)品對應(yīng)的鏈接，JavaScript 對于網(wǎng)站的必要性也是越來越大，所以與其為了SEO 舍棄強(qiáng)大的JavaScript，不如讓你的網(wǎng)站同時(shí)能擁有JavaScript 也能做好SEO。

就像Google 的John Mueller所說：

并不是說，SEOer 一定要學(xué)會JavaScript 這個(gè)程序語音，相反的，每位SEOer 都必須去了解Google 如何處理JavaScript 所產(chǎn)生的內(nèi)容，并且適當(dāng)?shù)慕鉀Q相關(guān)問題。

– John Muller

Google 的搜索引擎已經(jīng)從早期的無法爬取JavaScript 內(nèi)容，到現(xiàn)在能夠渲染出JavaScript 的頁面，Google 不斷優(yōu)化著自己的爬蟲，但仍有許多的不足是我們需要留意的。而許多在做SEO 的營銷人員也常常在問：『搜索引擎真的能夠爬取JavaScript 嗎？』

帶著這個(gè)疑惑，本篇文章將從Google 爬蟲原理出發(fā)，到如何建立友善爬蟲的JavaScript 網(wǎng)頁做詳盡闡述。

從這篇文章中，你將會學(xué)到：

• Google 搜索如何爬取網(wǎng)頁內(nèi)容

• 如何檢查網(wǎng)站的JavaScript 問題

• JavaScript SEO 的最佳做法

• JavaScript SEO 常見問題有哪些

目錄

?1. JavaScript 是什么

?2. Google 怎么爬取JS 網(wǎng)站

?3. Google 爬取JavaScript 過程中重要節(jié)點(diǎn)

?4. 如何打造JavaScript 友好的網(wǎng)站

?5. 向Google 展示JavaScript 內(nèi)容的不同方式

?6. 如何建構(gòu)一個(gè)友好SEO 的JavaScript 網(wǎng)站

一、JavaScript 是什么

講到JavaScript 就要先講到同為網(wǎng)頁語言的HTML 跟CSS 語法，這三個(gè)語法分別為網(wǎng)頁的呈現(xiàn)起到不同的作用：

• HTML：網(wǎng)頁的骨架，就像人體、又或是汽車，先有了骨架后，才可以開始長肉。

• CSS：可以說是長在骨架上的肉，或是汽車上的顏色。

• JavaScript：類似控制器，像是汽車的引擎、煞車、油門，替網(wǎng)站增加更多的運(yùn)作與特效。

HTML 將網(wǎng)站的架構(gòu)建好；CSS 為各個(gè)部分著色、提供不同的呈現(xiàn)；而JavaScript 替網(wǎng)頁呈現(xiàn)出不同的特效，并依據(jù)不同的訪客呈現(xiàn)不同的效果。于是乎此三種網(wǎng)頁語言，讓網(wǎng)頁的呈現(xiàn)變的完整且方便有趣。

哪些內(nèi)容可能是JavaScript 產(chǎn)生的呢？

1.主要內(nèi)容

2.導(dǎo)航菜單

3.內(nèi)部鏈接

4.商品評論

5.分類篩選器

所以，如果這些內(nèi)容在JavaScript 上沒有處理好的話，很容易造成索引及排名上遇到困難。?

那如何檢查網(wǎng)頁上哪些內(nèi)容是JavaScript 所產(chǎn)生的呢

一、通過使用Chrome 插件：

這邊介紹的工具叫做『Quick Javascript Switcher』，這個(gè)插件可以直接開關(guān)網(wǎng)頁的JavaScript 功能，只要你關(guān)掉JavaScript 后，發(fā)現(xiàn)哪個(gè)部分的內(nèi)容不見了，那很大程度就是那個(gè)內(nèi)容是JavaScript 所產(chǎn)生。

從下圖可以看到，當(dāng)我們用插件關(guān)掉JavaScript 功能后，Pressplay 的主要內(nèi)容消失不見了，那就代表說其中主要內(nèi)容由JavaScript 所產(chǎn)生。

二、從開發(fā)者工具關(guān)閉

首先點(diǎn)擊鼠標(biāo)右鍵找到『檢查』，你會進(jìn)入開發(fā)者介面。

接著使用快捷鍵『Control + Shift + p』 (Windows) 或是『Command + Option + p』 (Mac)。

接著在光標(biāo)處中輸入JavaScript，就會看到一個(gè)『Disable JavaScript』選項(xiàng)，點(diǎn)擊即可關(guān)閉JavaScript，同理要再打開只需使用相同方法再點(diǎn)擊一次便可打開JavaScript 功能。

為什么網(wǎng)頁源代碼沒有JavaScript 產(chǎn)生的內(nèi)容??？

一般來說，我們在檢查網(wǎng)頁中的meta 標(biāo)簽、H 標(biāo)簽等內(nèi)容時(shí)，最常做的就是從網(wǎng)頁源代碼中去查看，也就是『右鍵> 檢查網(wǎng)頁源代碼』所呈現(xiàn)的內(nèi)容。

而這個(gè)文件就是HTML 文件，但這份HTML 文件僅僅代表瀏覽器在解析頁面時(shí)的最初訊息，而JavaScript 所產(chǎn)生的內(nèi)容并不在一開始的HTML 文件上。

所以，檢查網(wǎng)頁源代碼無法知道JavaScript 更新后的動態(tài)內(nèi)容。

此時(shí)就要介紹一下HTML 加工后的DOM 了，這邊為了不復(fù)雜化，簡單敘述一下，當(dāng)你『右鍵> 檢查』出來的東西便是加工過的DOM（如下圖）。DOM 里面會隨著你與網(wǎng)站的互動，將JavaScript 所產(chǎn)生的內(nèi)容加上去。

那如何區(qū)分HTML 源代碼還是加工后的DOM 呢？

PS: 如果Google 爬取頁面時(shí)無法完整呈現(xiàn)JavaScript 產(chǎn)生的頁面，它至少可以索引為加載過的HTML 原始碼。

在確認(rèn)并且知道哪些內(nèi)容屬于JavaScript 所產(chǎn)生的之后，再就是理解Google 怎么爬取JavaScript，并且優(yōu)化你的內(nèi)容讓網(wǎng)頁排名上升。

二、Google 怎么爬取JS 網(wǎng)站

對于搜索引擎而言，JavaScript 一直是Google 努力在改善爬蟲技術(shù)，讓搜索引擎索引并排名的目標(biāo)之一。雖然JavaScript 為訪客帶來更良好的使用體驗(yàn)，但是對于搜索引擎而言卻不是一件容易的事情，請記得：

根據(jù)onely 網(wǎng)站調(diào)查指出，許多大品牌網(wǎng)頁上JavaScript 之內(nèi)容未被索引的情況：

• Nike 網(wǎng)頁上JavaScript 所產(chǎn)生的內(nèi)容有22％ 未被索引

• H&M 網(wǎng)頁上JavaScript 所產(chǎn)生的內(nèi)容有65％ 未被索引

• Yoox 網(wǎng)頁上JavaScript 所產(chǎn)生的內(nèi)容有92％ 未被索引

你可以想像，Yoox 在國外是知名電商網(wǎng)站，每個(gè)月可以有高達(dá)1400 萬的流量，但是網(wǎng)站由JavaScript 產(chǎn)生的內(nèi)容竟然由高達(dá)92% 是Google 不會索引到的，由此可知這樣對SEO 的影響可以有多大，損失又可以有多多。

但同樣的，也有把JavaScript 所產(chǎn)生的內(nèi)容處理的很好的網(wǎng)站，allrecipes.com 以及boohoo.com 的網(wǎng)站分別讓JavaScript 所產(chǎn)生的內(nèi)容，被100% 及99% 的索引了，所以，只要方法得當(dāng)，我們也能讓JavaScript 與SEO 兼顧。

Google 爬取頁面的過程

在早期搜索引擎只需要下載HTML 檔便可完整了解網(wǎng)頁內(nèi)容，但由于JavaScript 技術(shù)的崛起及普及，搜索引擎甚至需要像瀏覽器一樣，以便他們以訪客的角度查看網(wǎng)頁內(nèi)容。

而Google 處理渲染的系統(tǒng)，被稱為Web Rendering Service (WRS)，中文可以翻譯成網(wǎng)頁渲染器，后面以WRS 代稱，而Google 也給出了一張簡化的圖作為說明。

簡單說明Google 爬取步驟，傳統(tǒng)爬取HTML 檔頁面時(shí)，每項(xiàng)元素都很好爬取，整個(gè)索引并排名頁面的過程也迅速：

1.Google bot 下載HTML 檔

2.Google bot 從源代碼中提取url 網(wǎng)址，并快速訪問這些url

3.Google bot 下載CSS 檔案

4.Google bot 將下載下來的資源送到Google 的Indexer

5.Google 的Indexer 檢索頁面

但如果是今天爬取JavaScript 所產(chǎn)生的網(wǎng)站內(nèi)容的話，Google 會怎么爬取呢：

1.Google bot 下載HTML 檔

2.Google bot 在源代碼中找不到鏈接，因?yàn)镴avaScript 未被執(zhí)行

3.Google bot 下載CSS 及JavaScript 檔案

4.Google bot 使用WRS（渲染器，Indexer 的一部分）解析、編譯并執(zhí)行JavaScript

5.WRS 從外部API、資料庫獲取資料（data）

6.Indexer 可以索引內(nèi)容

7.Google 發(fā)現(xiàn)新的鏈接，并將其加入爬取排隊(duì)隊(duì)伍之中（Googlebot's crawling queue）。至此，執(zhí)行一般Google bot 爬取HTML 頁面的第二步。

可以發(fā)現(xiàn)，為了渲染出頁面，Google 多了許多步驟。再來講一下渲染過程中，Crawler、Processing、Renderer 及Index 之重要節(jié)點(diǎn)。

三、Google 爬取JavaScript 過程中的重要節(jié)點(diǎn)

Crawler（爬蟲）

首先，crawler 會先向網(wǎng)站服務(wù)器發(fā)送一段請求(request)，網(wǎng)站服務(wù)器會返回內(nèi)容及其標(biāo)頭(header)，然后crawler 將它儲存起來。

而由于mobile-first indexing的關(guān)系，發(fā)送請求的可能大多都是來自手機(jī)版的爬蟲(mobile user-agent)，從Google Search Console上可以檢查到，你可以透過網(wǎng)址審查或是涵蓋范圍來知道現(xiàn)在是電腦版索引還是手機(jī)版優(yōu)先索引的狀態(tài)。

然后有些網(wǎng)站會使用user-agent detection，偵測訪客來到自己網(wǎng)站時(shí)，是用手機(jī)還是桌機(jī)、瀏覽器是什么、瀏覽器版本的不同資訊，再根據(jù)這些資訊給訪客相對應(yīng)的資訊，例如今天偵測到訪客是用手機(jī)版本的chrome，便呈現(xiàn)手機(jī)版的頁面給訪客看。

需要注意的是，有些網(wǎng)站遇到爬蟲時(shí)可能會設(shè)定禁止該爬蟲爬取頁面，或是禁止特定地區(qū)ip 的訪客查看頁面，這時(shí)候就要小心如果網(wǎng)頁沒設(shè)定好的話，很有可能爬蟲是看不到你的內(nèi)容的喔。

記得從幾個(gè)方面測試看看Google 爬蟲能否順利看到你的頁面：Google Search Console 的網(wǎng)址檢查器、移動友好測試工具以及富媒體結(jié)果測試工具。

補(bǔ)充：從爬取過程那張圖可以看到，Google 將爬取后產(chǎn)生的頁面稱之為HTML，但實(shí)際上，為了建構(gòu)頁面內(nèi)容，Google 其實(shí)爬取并儲存了相關(guān)所需的資源，像是CSS 文檔、JS 文檔、API 端口、XHR requests等相關(guān)資源。

Processing（處理）

Processing 的過程中其實(shí)是非常復(fù)雜且處理很多事的，這邊重點(diǎn)講述Google 處理JavaScript 的過程。

（一）遵循限制性最高的要求

什么是限制性最高的要求，就是假設(shè)今天Google 渲染(render)出頁面后，原本meta robots 的信息是index 被加入了noindex，那么Google 將不會索引其頁面，甚至其它尚未被渲染的頁面，因?yàn)镴S 產(chǎn)生noindex 這類的語法，則可能導(dǎo)致頁面無法被渲染。

（二）處理資源及鏈接

Google 并不像訪客那樣瀏覽頁面，Processing 的過程中有個(gè)很重要的工作便是檢查頁面上的鏈接以及建構(gòu)該頁面所需的文檔。

這些鏈接被記錄，加到等待爬取的排隊(duì)序列中（crawl queue），反覆執(zhí)行找鏈接、鏈接排隊(duì)、爬取鏈接，便是Google 本身爬取整個(gè)網(wǎng)路世界的方式。

Google 透過屬性，將建構(gòu)頁面所需的資源，像是JS、CSS 文檔被記錄。但是頁面對頁面的鏈接需要以特定的形式所呈現(xiàn)，才能被Google 所抓取，那就是以鏈接”>的形式。

<a href="/good-link">能被爬取的連結(jié)a>?

<span onclick="changePage('bad-link')">不能被爬取的連結(jié)span>?

<a onclick="changePage('bad-link')" >不能被爬取的連結(jié)a>?

<a href="/good-1ink" onclick-"changepage('good-link')">能被爬取的連結(jié)a>

如果你的鏈接是JavaScript 所產(chǎn)生的話，那必須等到頁面被渲染后，爬蟲才能爬到。但有個(gè)風(fēng)險(xiǎn)就是，不一定頁面上的內(nèi)容全數(shù)都能被成功渲染，有可能因?yàn)闄z索預(yù)算不足的情況下渲染不到你的鏈接，所以務(wù)必留意鏈接的部分。

（三）刪除重復(fù)內(nèi)容

Google 傾向?qū)⒅貜?fù)頁面刪除，或者是降低重復(fù)頁面的爬取優(yōu)先級別。許多JavaScript 所產(chǎn)生的網(wǎng)頁，都會有個(gè)app shell models，可以想像他是最小化的HTML、CSS 及JS 所組成，用戶可以在不同需求下再次載入所需要的內(nèi)容。

但這有一個(gè)問題就是，app shell models 只有最簡單少量的內(nèi)容及源代碼，所以很有可能被Google 誤判為重復(fù)性內(nèi)容，也造成其頁面能夠被渲染的優(yōu)先級下降，正確的內(nèi)容無法被索引，以及錯(cuò)誤的頁面被排名。

（四）緩存及其它

Google 下載頁面HTML、CSS、JS 文檔并渲染后，就會將其緩存。并且還有其它許多事情是Google 會同時(shí)處理的，并不止于這些，但處理頁面的部分重點(diǎn)就在上述幾項(xiàng)。

Render queue （渲染序列）

接下來許多頁面即將被渲染， 所以在渲染排隊(duì)中，根據(jù)Google 早期的說法，由于檢索預(yù)算的優(yōu)化，渲染頁面并檢索會是比較后期的事，俗稱第二波索引( two waves of indexing )，但其實(shí)在近期onely 的Bartosz Goralewicz 與John 及Martin 講述到，第二波索引的影響其實(shí)越來越小，Google 在等待渲染的中位數(shù)時(shí)間也只有5 秒鐘，可見Google 在渲染并索引這一塊下了相當(dāng)大的功夫，未來渲染也將與檢索能夠同步進(jìn)行?。

Renderer（渲染器）

還記得前面說的食譜與料理嗎？頁面在渲染前的DOM 跟渲染后的DOM 就像料理的食譜，以及做好的烤雞一樣，簡單講DOM 就是像圖中那樹狀圖所呈現(xiàn)。

料理前的食譜是不會改變的，所以渲染前的頁面源代碼一樣不會因觸發(fā)JavaScript 而改變，所以可以想像Renderer 就是一個(gè)主廚，料理食譜并且產(chǎn)生一道料理（JavaScript 渲染出來的頁面），Renderer 為的就是去渲染出JavaScript 相關(guān)內(nèi)容。

要知道光是可以爬取整個(gè)網(wǎng)路世界成千上億的資料便是不容易，還要將其內(nèi)容渲染出來耗費(fèi)資源非同小可，根據(jù)onely 指出，為了讓JavaScript 內(nèi)容被爬取、渲染并且索引，耗費(fèi)的資源是一般HTML 頁面的20 倍，一定要格外小心。讓我們看看渲染器中有哪些重要的東西吧。

(1)快取資源（Cache Resource）

Google 相當(dāng)重度依賴快取，它會快取各種文檔，文檔快取、頁面快取、API requests 等，在被送到渲染器前就會先快取起來。因?yàn)椴惶赡苊繙?zhǔn)備渲染一頁，Google 就下載一次資源，所以優(yōu)先快取好的文檔資源就能快速渲染頁面。

但這也帶來幾個(gè)問題，有可能Google 會快取到舊的檔案、舊版本的資源，導(dǎo)致在渲染頁面時(shí)出現(xiàn)錯(cuò)誤。如果有這種狀況出現(xiàn)記得做好版本控制或是內(nèi)容指紋，讓Google 可以知道你更新了新的內(nèi)容。

(2)沒有特定逾時(shí)時(shí)間（No Fixed Timeout）

很多網(wǎng)上謠傳渲染器只會用5 秒渲染你的頁面，但其實(shí)并不然，Google 渲染時(shí)可能會加載原有快取的檔案，會有5 秒的這一說法，主要是因?yàn)榫W(wǎng)址審查工具相關(guān)工具，檢測頁面時(shí)需要獲取資源所以需要設(shè)立合理的逾時(shí)時(shí)間。

為了確保內(nèi)容完整呈現(xiàn)，Google 沒有特地設(shè)定逾時(shí)時(shí)間，但為了爬蟲爬取及訪客體驗(yàn)，更快的速度一定是更好的。

(3)渲染后，Google 看到了什么？

這邊要提到一個(gè)很重要的點(diǎn)是，Google 并不會主動與網(wǎng)頁上的內(nèi)容做互動，所以有些JavaScript 的特效，需要訪客點(diǎn)擊或觸發(fā)的特效，是不會被Google 所觸發(fā)，不會點(diǎn)擊更不會滾動頁面。

所以早期你們一定有聽過一個(gè)說法，不要使用瀑布流網(wǎng)頁的原因就是如此，因?yàn)镚oogle 不會卷動你頁面的情況下，就無法觸發(fā)JavaScript 所產(chǎn)生的內(nèi)容，但Google 也不笨喔，為了克服瀑布流，他們直接把機(jī)器人設(shè)定成一臺超長版手機(jī)，這樣可以直接渲染出指定長度的內(nèi)容。

可是一般需要JavaScript 觸發(fā)的內(nèi)容無法被Google 渲染出來了喔，所以一定要特別注意，鏈接也不要出現(xiàn)JavaScript 所產(chǎn)生之鏈接。

四、如何打造JavaScript 友善的網(wǎng)站

前面我們說到JavaScript 現(xiàn)在越來越重要，也是越來越多網(wǎng)站使用的技術(shù)，所以與其完全避開使用JavaScript，不如打造一個(gè)既能滿足開發(fā)者需求，又能爭取排名的JavaScript 網(wǎng)站，讓來看看有哪些重要因素吧。

1.可被爬取(Crawlability)：確保你的網(wǎng)站能保持良好的結(jié)構(gòu)被爬取，并且爬蟲也能找到有價(jià)值的內(nèi)容。

2.可被渲染(Renderability)：確保頁面上的內(nèi)容可以被渲染。

3.爬取預(yù)算(Crawl budget)：Google 花了多少資源及時(shí)間渲染你的頁面

你的JavaScript 內(nèi)容對搜索引擎足夠友善嗎？

首先檢查。你要知道你的網(wǎng)頁在Google 眼中長的如何，那到底有哪些常見檢查方法，這些方法正確嗎？

1.透過網(wǎng)址審查工具

Google Search Console 的網(wǎng)站審查工具可以呈現(xiàn)渲染后的頁面，其它官方的工具包含AMP 測試工具、富媒體搜索結(jié)果測試等官方檢測工具，皆能呈現(xiàn)出渲染后的樣貌，這邊以移動友好測試工具為例。

可以看到屏幕截圖的畫面，顯示出Google 渲染出的畫面，可以試著去看屏幕截圖，重要內(nèi)容是否能夠被渲染出來。

渲染后的屏幕畫面

另一方，你可以從檢查工具的源代碼中查看內(nèi)容是否有被渲染出來，直接搜索內(nèi)容、H 標(biāo)簽等方式確認(rèn)。

記得從渲染后的HTML（DOM – the rendered code）檢查：

• 主要內(nèi)容是否可以呈現(xiàn)

• 推薦文章或推薦商品可以渲染出來嗎

• Google 還有沒有辦法看到其它重要元素

2.site 指令+關(guān)鍵字檢查

site 指令一般而言，大多用來檢查頁面在Google 之收錄狀況，那如果說你直接『site:網(wǎng)址』后發(fā)現(xiàn)頁面有被Google 收錄，你就能用這個(gè)方法檢查，因?yàn)镚oogle 其實(shí)會根據(jù)關(guān)鍵字修改搜索結(jié)果頁上的Description，所以當(dāng)你輸入一段內(nèi)文時(shí)，Google 其實(shí)很有可能根據(jù)你這一段內(nèi)文呈現(xiàn)在Description 上給你看。

以pressplay 頁面為例，pressplay 上的課程簡介其實(shí)就是用JavaScript 去產(chǎn)生的，下圖中可以看到，當(dāng)我們將JavaScript 功能關(guān)閉時(shí)，就會發(fā)現(xiàn)內(nèi)容只剩下下面那一段，那么要確認(rèn)Google 是否有索引到主要內(nèi)容便可用『site 指令+關(guān)鍵字』做檢查。

只有上面紅框文字非JavaScript 產(chǎn)生。

而在連老師『每月給你SEO最新趨勢』這堂課中會發(fā)現(xiàn)，只要將JavaScript 功能關(guān)掉，主要內(nèi)容便只剩下其中紅框這一段，再來，復(fù)制一段JavaScript 產(chǎn)生內(nèi)容的文字『每年服務(wù)客戶橫跨12大產(chǎn)業(yè)，我們了解你的產(chǎn)業(yè)問題，資深SEO專家團(tuán)隊(duì)陪你洞悉新·SEO』+ site:網(wǎng)址試試看。

有沒有發(fā)現(xiàn)，其實(shí)JavaScript 產(chǎn)生的內(nèi)容Google 是有渲染出來并且索引到的，但如果要更準(zhǔn)確的檢查，建議還是要從官方的網(wǎng)址測試工具查看。

注：網(wǎng)址審查工具：

Google Search Console 網(wǎng)址審查工具h(yuǎn)ttps://www.seo-tea.com/google-search-console-tutorial/#%E7%B6%B2%E5%9D%80%E5%AF%A9%E6%9F%A5

結(jié)構(gòu)化測試工具h(yuǎn)ttps://search.google.com/structured-data/testing-tool/u/0/?hl=zh-TW

富媒體搜索結(jié)果測試工具h(yuǎn)ttps://search.google.com/test/rich-results

AMP 測試工具h(yuǎn)ttps://search.google.com/test/amp?hl=zh-TW

移動友好檢測工具h(yuǎn)ttps://search.google.com/test/mobile-friendly

Google 無法索引我的網(wǎng)頁怎么辦

剛剛前面有提到，透過網(wǎng)址審查工具首先檢查Google 渲染頁面的狀態(tài)為何，如果渲染未出現(xiàn)主要內(nèi)容，那么就可能導(dǎo)致內(nèi)容無法被索引，你需要透過網(wǎng)址審查工具中的更多信息，查看是否有資源遭到阻擋。

更多信息中會告訴你哪些資源遭到封鎖

所以，先確保內(nèi)容是否能被正確渲染后，再確保能否被索引，接著才能優(yōu)化內(nèi)容競爭排名。

Google 未能索引你網(wǎng)頁的原因：

• 渲染時(shí)逾時(shí)：是否載入時(shí)耗費(fèi)資源過大，導(dǎo)致訪客及Google 都無法渲染頁面

• 是否資源遭到阻擋：檢查Robot.txt 文件，確認(rèn)Google 是否渲染時(shí)資源遭受阻擋

• Google 渲染時(shí)遇到問題：透過網(wǎng)址審查工具檢查頁面詳細(xì)狀況

• 重復(fù)頁面問題：是否有其它重復(fù)頁面導(dǎo)致內(nèi)容無法被索引

• Google 無法發(fā)現(xiàn)該頁面：沒有內(nèi)部鏈接，或是Sitemap.xml 無該頁面導(dǎo)致Google 無法發(fā)現(xiàn)

• 其它……

了解Google是否能渲染你的內(nèi)容，是否能正確索引，然后再爭取排名，一步步找出問題并解決它。?

五、渲染方式的不同：向Google 展示JavaScript 內(nèi)容的不同方式

你以為你的頁面對Google 來說只是渲染出來，然后查看內(nèi)容、收錄并且排名嗎？其實(shí)沒那么簡單，網(wǎng)頁渲染的呈現(xiàn)方式還能分為客戶端渲染（Client Side Rendering）、服務(wù)器端渲染（Server Side Rendering）、混合式渲染等方式。

SSR（服務(wù)器端渲染），通常對于Google bot 以及訪客而言，能夠接受到完整的HTML 檔案，內(nèi)容也已經(jīng)呈現(xiàn)好了。

CSR（客戶端渲染），近幾年來越來越流行的渲染方式，對于Google bot 及訪客而言，最初拿到的頁面幾乎是空白的HTML 檔案，隨著訪客的操作，JavaScript 非同步的產(chǎn)生并下載內(nèi)容。用料理與食譜來比喻，Google bot 及訪客都只拿到了一份食譜，后面呈現(xiàn)端看訪客如何烘培蛋糕（操作網(wǎng)站）。

但是，Google bot 并不像訪客一樣，會有許多花里胡哨的操作，Google bot 不會滾動、不會點(diǎn)擊更不會跟網(wǎng)站進(jìn)行互動，所以如果你是全CSR（客戶端渲染）的頁面一定要注意，解決方法如下:

①　服務(wù)器端渲染（SSR）

敞偌你的頁面因?yàn)镴avaScript 渲染問題導(dǎo)致頁面無法被索引，那強(qiáng)烈建議將重要頁面或是網(wǎng)站改成服務(wù)器端渲染。

②　動態(tài)渲染（Dynamic Rendering ）

有時(shí)候當(dāng)然不可能說全改成SSR ，于是動態(tài)渲染就變成當(dāng)今蠻重要的一種渲染方式，能同時(shí)做到CSR 想呈現(xiàn)的效果，又能同時(shí)達(dá)到SEO 排名。

從下圖可以看到，網(wǎng)頁使用了全JavaScript 所產(chǎn)生的內(nèi)容，但是提供給Google bot 的是另一靜態(tài)HTML 頁面，很好的解決了Google 爬蟲無法查看渲染頁面的問題。

以下三種服務(wù)可以很好的幫助你實(shí)現(xiàn)動態(tài)渲染功能：

1. Prerender.io https://prerender.io/

2. Puppeteer https://developers.google.com/web/tools/puppeteer

3. Rendertron https://codelabs.developers.google.com/codelabs/dynamic-rendering?hl=zh-tw#0

Google 官方文件也提供了轉(zhuǎn)譯原理、說明及方式，推薦大家看看。而下圖是各種渲染JavaScript 的方法，其實(shí)大部分對于Google 來說都是渲染的出來的，比較難的還是在CSR（客戶端渲染）的部分，所以如果你是CSR 建議導(dǎo)入動態(tài)渲染喔。

六、如何建構(gòu)一個(gè)友善SEO 的JavaScript 網(wǎng)站

其實(shí)這個(gè)小節(jié)的內(nèi)容有部分你可能過去就知道了，但因?yàn)镴avaScript 的關(guān)系仍有部分不同。

允許Google 爬取

如果連網(wǎng)頁都不能爬取、渲染的JavaScript 資源都無法讀取的話，就不用說要排名啰，記得Robots.txt里不要禁止渲染相關(guān)資源，在Robots.txt中加入以下指令：

User-Agent: Googlebot

Allow: .js

Allow: .css

On-page 優(yōu)化

基本上on-page 上的重要元素應(yīng)該都要能夠被呈現(xiàn)出來，記得透過網(wǎng)址審查工具仔細(xì)檢查是否都有出現(xiàn)：

• Title/Description

• H 標(biāo)簽

• 主要內(nèi)容

• meta robots 標(biāo)簽

• alt 標(biāo)簽

JavaScript 網(wǎng)站最常出現(xiàn)的一個(gè)狀況是重復(fù)Title/Description 被重復(fù)使用，記得可以從Google Search Console 中的涵蓋范圍查看，又或者透過Screaming Frog 等工具確認(rèn)。

網(wǎng)址的點(diǎn)擊

前面雖然都有提到，但這邊還是正式說明一下，在2018 年的Google I/O 大會上便說到，因?yàn)镚ooglebot 并不會去點(diǎn)擊、滾動或是與網(wǎng)頁做互動，所以如果你的鏈接是以onclick 的方式呈現(xiàn)的話，將不會被Googlebot 所爬取。

對Google 而言，好鏈接與壞鏈接

同樣的，在導(dǎo)航上、分頁上、內(nèi)容上一樣切記要使用 的方式去呈現(xiàn)鏈接，才能確保Google 會發(fā)現(xiàn)并爬取你的鏈接。

網(wǎng)址的更新

對于部分網(wǎng)頁采用SPA（Single Page Application）方式所呈現(xiàn)的網(wǎng)頁，在更新網(wǎng)頁時(shí)，必須使用History API，對于較早期的開發(fā)者而言，在更新網(wǎng)頁Url 時(shí)采用的是片段（fragement）的方式，那網(wǎng)址就會變成我們常見的錨點(diǎn)，如下：

Our products

但以『#』這種形式的連結(jié)對于Google 來說并不會抓取喔！雖然早期開發(fā)出一種連結(jié)形式，將『#』取代成『#!』，但這種方式已經(jīng)過時(shí)了，網(wǎng)址也會變得相當(dāng)丑。

但是透過History API 的方式就能讓網(wǎng)頁資訊變動時(shí)，鏈接才會變換成Google 可爬取的形式，完整介紹可參考Google 官方文件。

錯(cuò)誤頁面

因?yàn)镴avaScript 框架是客戶端而非伺服務(wù)器端，所以像是當(dāng)SPA 頁面產(chǎn)生錯(cuò)誤時(shí)，并沒有辦法傳遞出404 狀態(tài)碼到服務(wù)器中，此時(shí)請采取以下其中一種方式解決：

l使用JavaScript 轉(zhuǎn)移到你原本就設(shè)定好404 狀態(tài)碼及頁面不存在訊息之頁面

l將錯(cuò)誤頁面加上noindex 標(biāo)簽，并在頁面上呈現(xiàn)『404 頁面錯(cuò)誤』信息，這樣子頁面就能被視作軟404（soft 404）的狀態(tài)。

Sitemap

我們可能因?yàn)槭褂肑avaScript 產(chǎn)生了網(wǎng)站的許多內(nèi)容，并沒有辦法說一次到位，解決所有JavaScript 產(chǎn)生的SEO 問題，此時(shí)Sitemap.xml 有著重要的角色，就是告知Google 網(wǎng)站重要的頁面有哪些，對于你提交的頁面，Google 可能會優(yōu)先爬取。

但同時(shí)，你也必須確保Sitemap 上的所有頁面鏈接沒有以下問題：

1. 重復(fù)內(nèi)容

2. 被canonical 指到別的頁面

3. 404 錯(cuò)誤頁面

4. 301 轉(zhuǎn)址到其它頁面

5. 空白頁面

6. 等等…

這樣Sitemap 才能真正的發(fā)揮他的作用，讓Google 知道你重要的頁面。

總結(jié)

JavaScript 所產(chǎn)生的內(nèi)容，已經(jīng)不像過往幾年Google 爬蟲完全無法理解，隨著開發(fā)技術(shù)的進(jìn)步JavaScript 也成為網(wǎng)頁開發(fā)的重要元素，所以不要急著排斥它。

記得首先，讓Google 能夠渲染出你的頁面；其次，確認(rèn)Google 有順利索引你的頁面；接著，按著你一般優(yōu)化SEO 的方式，排除重復(fù)內(nèi)容、優(yōu)化內(nèi)容，加強(qiáng)關(guān)鍵字排名。

這看似簡單的幾個(gè)步驟就花了很大一個(gè)篇幅在說明了，所以一起努力建立一個(gè)友善SEO 的JavaScript 網(wǎng)站吧！

參考資料：

l了解JavaScript 搜尋引擎最佳化(SEO) 基礎(chǔ)知識 https://developers.google.com/search/docs/guides/javascript-seo-basics

l修正會影響搜尋體驗(yàn)的JavaScript 問題 https://developers.google.com/search/docs/guides/fix-search-javascript

l導(dǎo)入動態(tài)轉(zhuǎn)譯 https://developers.google.com/search/docs/guides/dynamic-rendering

lRendering on the Web https://developers.google.com/web/updates/2019/02/rendering-on-the-web

lJavaScript SEO: What You Need to Know https://ahrefs.com/blog/javascript-seo/

lThe Ultimate Guide to JavaScript SEO (2020 Edition) https://www.onely.com/blog/ultimate-guide-javascript-seo

lJavaScript and SEO: The Difference Between Crawling and Indexing? https://www.stateofdigital.com/javascript-seo-crawling-indexing/

lMaking JavaScript and Google Search work together https://web.dev/javascript-and-google-search-io-2019/

lRendering SEO manifesto – why JavaScript SEO is not enough https://www.onely.com/blog/rendering-seo-manifesto/

lJavaScript vs. Crawl Budget: Ready Player One https://www.onely.com/blog/javascript-vs-crawl-budget-ready-player-one/

lEverything You Know About JavaScript Indexing is Wrong https://www.onely.com/blog/everything-you-know-about-javascript-indexing-is-wrong/

lStatic vs. Server Rendering https://frontarm.com/james-k-nelson/static-vs-server-rendering/

lDeliver search-friendly JavaScript-powered websites (Google I/O '18)? https://youtu.be/PFwUbgvpdaQ

lJavaScript SEO – How Does Google Crawl JavaScript https://seopressor.com/blog/javascript-seo-how-does-google-crawl-javascript/

翻譯作品， 原作者：分解茶