網(wǎng)站內部搜索引擎優(yōu)化與外部搜索引擎優(yōu)化的相同點(diǎn) JavaScript SEO 終極指南（Google SEOer必看）

　　5.分類(lèi)篩選器

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

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

　　一、通過(guò)使用Chrome 插件：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

　　Google 爬取頁(yè)面的過(guò)程

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

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

　　簡(jiǎn)單說(shuō)明Google 爬取步驟，傳統爬取HTML 檔頁(yè)面時(shí)，每項元素都很好爬取，整個(gè)索引并排名頁(yè)面的過(guò)程也迅速：

　　1.Google bot 下載HTML 檔

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

　　3.Google bot 下載CSS 檔案

　　4.Google bot 將下載下來(lái)的資源送到Google 的Indexer

　　5.Google 的Indexer 檢索頁(yè)面

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

　　1.Google bot 下載HTML 檔

　　2.Google bot 在源代碼中找不到鏈接，因為JavaScript 未被執行

　　3.Google bot 下載CSS 及JavaScript 檔案

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

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

　　6.Indexer 可以索引內容

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

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

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

　　Crawler（爬蟲(chóng)）

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

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

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

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

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

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

　　Processing（處理）

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

　?。ㄒ唬┳裱拗菩宰罡叩囊?/p>

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

　?。ǘ┨幚碣Y源及鏈接

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

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

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

　　

　　能被爬取的連結a>

　　不能被爬取的連結span>

　　不能被爬取的連結a>

　　能被爬取的連結a>

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

　?。ㄈ﹦h除重復內容

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

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

　?。ㄋ模┚彺婕捌渌?/p>

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

　　Render queue （渲染序列）

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

　　Renderer（渲染器）

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

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

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

　　(1)快取資源（Cache Resource）

　　Google 相當重度依賴(lài)快取，它會(huì )快取各種文檔，文檔快取、頁(yè)面快取、API requests 等，在被送到渲染器前就會(huì )先快取起來(lái)。因為不太可能每準備渲染一頁(yè)，Google 就下載一次資源，所以?xún)?yōu)先快取好的文檔資源就能快速渲染頁(yè)面。

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

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

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

　　為了確保內容完整呈現，Google 沒(méi)有特地設定逾時(shí)時(shí)間，但為了爬蟲(chóng)爬取及訪(fǎng)客體驗，更快的速度一定是更好的。

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

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

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

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

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

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

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

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

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

　　你的JavaScript 內容對搜索引擎足夠友善嗎？

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

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

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

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

　　渲染后的屏幕畫(huà)面

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

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

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

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

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

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

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

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

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

　　Google Search Console 網(wǎng)址審查工具#%E7%B6%B2%E5%9D%80%E5%AF%A9%E6%9F%A5

　　結構化測試工具

　　富媒體搜索結果測試工具

　　AMP 測試工具

　　移動(dòng)友好檢測工具

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

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

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

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

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

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

　　五、渲染方式的不同：向Google 展示JavaScript 內容的不同方式

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

　　

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

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

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

　?、俜?wù)器端渲染（SSR）

　　敞偌你的頁(yè)面因為JavaScript 渲染問(wèn)題導致頁(yè)面無(wú)法被索引，那強烈建議將重要頁(yè)面或是網(wǎng)站改成服務(wù)器端渲染。

　?、趧?dòng)態(tài)渲染（Dynamic Rendering ）

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

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

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

　　Prerender.io

　　Puppeteer

　　Rendertron #0

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

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

　　其實(shí)這個(gè)小節的內容有部分你可能過(guò)去就知道了，但因為JavaScript 的關(guān)系仍有部分不同。

　　允許Google 爬取

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

　　User-Agent: Googlebot

　　Allow: .js

　　Allow: .css

　　On-page 優(yōu)化

　　基本上on-page 上的重要元素應該都要能夠被呈現出來(lái)，記得透過(guò)網(wǎng)址審查工具仔細檢查是否都有出現：

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

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

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

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

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

　　網(wǎng)址的更新

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

　　Our products

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

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

　　錯誤頁(yè)面

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

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

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

　　Sitemap

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

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

　　重復內容

　　被canonical 指到別的頁(yè)面

　　404 錯誤頁(yè)面

　　301 轉址到其它頁(yè)面

　　空白頁(yè)面

　　等等…

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

　　總結

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

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

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

　　參考資料：

　　l了解JavaScript 搜尋引擎最佳化(SEO) 基礎知識

　　l修正會(huì )影響搜尋體驗的JavaScript 問(wèn)題

　　l導入動(dòng)態(tài)轉譯

　　lRendering on the Web

　　lJavaScript SEO: What You Need to Know

　　lThe Ultimate Guide to JavaScript SEO (2020 Edition)

　　lJavaScript and SEO: The Difference Between Crawling and Indexing

　　lMaking JavaScript and Google Search work together

　　lRendering SEO manifesto – why JavaScript SEO is not enough

　　lJavaScript vs. Crawl Budget: Ready Player One

　　lEverything You Know About JavaScript Indexing is Wrong

　　lStatic vs. Server Rendering

　　lDeliver search-friendly JavaScript-powered websites (Google I/O '18)

　　lJavaScript SEO – How Does Google Crawl JavaScript