JavaScript SEO：搜索引擎如何理解JavaScript

隨著Web變得越來越復(fù)雜，JavaScript發(fā)現(xiàn)自己在開發(fā)引人入勝的網(wǎng)站中發(fā)揮著有用的作用。盡管它曾經(jīng)被用來強(qiáng)調(diào)HTML中包含的內(nèi)容，但現(xiàn)在它越來越成為中心舞臺(tái)。然而，JavaScript和SEO的問題仍然是許多網(wǎng)站開發(fā)人員關(guān)心的問題。

網(wǎng)站所有者希望確保Googlebot和其他搜索引擎爬蟲能夠正確理解包含大量JavaScript的網(wǎng)站，以便他們的頁面不會(huì)在搜索引擎結(jié)果中受到影響。我們將分解JavaScript SEO的基本要素，以幫助我們的社區(qū)保持他們的網(wǎng)站優(yōu)化并準(zhǔn)備好在SERP上競(jìng)爭(zhēng)。

了解使用JavaScript SEO進(jìn)行渲染

在我們深入研究JavaScript SEO之前，我們必須首先探索JavaScript網(wǎng)站的行為方式以及它們?nèi)绾闻c用戶和搜索引擎爬蟲交互。首先，Google區(qū)分了JavaScript網(wǎng)站和頁面上僅包含一些JavaScript的網(wǎng)站。在后者中，JavaScript有助于創(chuàng)建一些特殊效果，但核心內(nèi)容——最重要的信息——以HTML形式出現(xiàn)。這意味著JavaScript不會(huì)影響Googlebot閱讀和理解網(wǎng)站的能力，因此不會(huì)影響SEO。然而，Javascript站點(diǎn)使用JavaScript來顯示關(guān)鍵信息。這意味著您希望包含在索引中的內(nèi)容依賴于JavaScript來顯示，這使得呈現(xiàn)成為索引過程的重要組成部分。

了解渲染

呈現(xiàn)是獲取站點(diǎn)的內(nèi)容、模板和其他功能并將它們顯示給用戶的過程。有兩種主要的渲染類型：服務(wù)器端渲染和客戶端渲染。

服務(wù)器端渲染

在服務(wù)器端渲染中，模板填充在服務(wù)器上。每次用戶或爬蟲訪問站點(diǎn)時(shí)，頁面都會(huì)在服務(wù)器上呈現(xiàn)，然后發(fā)送到瀏覽器。這意味著當(dāng)用戶訪問您的網(wǎng)站時(shí)，他們會(huì)立即收到所有內(nèi)容作為HTML標(biāo)記。通常，這有利于SEO，因?yàn)镚oogle不必單獨(dú)呈現(xiàn)JavaScript來訪問您創(chuàng)建的所有內(nèi)容。

客戶端渲染

然而，對(duì)于某些情況，例如單頁應(yīng)用程序，客戶端渲染確實(shí)有一些優(yōu)勢(shì)。

客戶端JavaScript在性能方面可能很昂貴。在決定使用JavaScript SEO呈現(xiàn)頁面中的元素時(shí)，不要忽視頁面加載性能，這一點(diǎn)非常重要。移動(dòng)設(shè)備上4G連接的目標(biāo)頁面加載時(shí)間應(yīng)低于2秒。頁面加載緩慢會(huì)對(duì)您的整體頁面排名產(chǎn)生負(fù)面影響。谷歌表示頁面加載性能是一個(gè)排名因素。較慢的頁面加載時(shí)間會(huì)導(dǎo)致跳出率高于正常水平、頁面總停留時(shí)間降低、每次會(huì)話低于平均頁面、轉(zhuǎn)換百分比降低并最終導(dǎo)致頁面排名降低，這直接影響整體頁面訪問量。避免在您的網(wǎng)站上使用共享庫，而是嘗試有效地使用您的JavaScript SEO和CSS。

中端手機(jī)的處理器速度較慢，通常RAM較低，GPU速度較慢。當(dāng)瀏覽器加載網(wǎng)頁時(shí)，手機(jī)必須下載、解析、編譯和執(zhí)行所有JavaScript。因此，如果您傳遞大量未使用的代碼，則可以大大減慢整個(gè)頁面加載時(shí)間。以下是一個(gè)來自實(shí)時(shí)站點(diǎn)的示例頁面，其中包含大量未使用的代碼。該報(bào)告是通過Chrome開發(fā)者工具覆蓋率報(bào)告生成的。正如您在此示例中看到的，2.3 MB中有2.2 MB未使用。

在html中顯示盡可能多的重要鏈接也很重要，這樣它們就可以在第一遍中被抓取。通過JavaScript呈現(xiàn)重要鏈接，您可以延遲獲取這些鏈接。與您的開發(fā)團(tuán)隊(duì)密切合作，為您希望在網(wǎng)站上展示的功能設(shè)定切合實(shí)際的目標(biāo)，以平衡字節(jié)數(shù)方面的占用空間，并針對(duì)具有4G網(wǎng)絡(luò)速度的不同手機(jī)類型測(cè)試頁面加載性能。一些網(wǎng)站還發(fā)現(xiàn)他們可以將這兩種主要的渲染形式結(jié)合起來，從而實(shí)現(xiàn)動(dòng)態(tài)渲染。例如，對(duì)于內(nèi)容會(huì)發(fā)生很大變化的站點(diǎn)，動(dòng)態(tài)呈現(xiàn)有助于站點(diǎn)利用客戶端和服務(wù)器端呈現(xiàn)的優(yōu)勢(shì)。

這種技術(shù)允許站點(diǎn)在兩者之間切換，具體取決于訪問站點(diǎn)的人員。使用rendertron，您可以對(duì)您的網(wǎng)站進(jìn)行編程，以創(chuàng)建可交付給某些用戶代理（如Googlebot）的預(yù)渲染內(nèi)容。但是，當(dāng)普通用戶訪問該站點(diǎn)時(shí)，該站點(diǎn)可以使用客戶端呈現(xiàn)，以便訪問您的站點(diǎn)的訪問者可以盡可能高效地獲取最新信息。請(qǐng)注意，如果您確實(shí)使用此策略，您將需要定期更新站點(diǎn)的緩存版本，以確保爬蟲看到的版本保持最新。

渲染和JavaScript SEO

谷歌對(duì)JavaScript的理解相對(duì)較好。然而，爬蟲試圖解釋和排名全球數(shù)十億個(gè)網(wǎng)站，而JavaScript確實(shí)比標(biāo)準(zhǔn)HTML需要更多的努力。這有時(shí)會(huì)使它處于不利地位。Google報(bào)告說，Googlebot分兩波索引JavaScript網(wǎng)站。在第一次通過期間，爬蟲將查看HTML內(nèi)容并使用它開始索引站點(diǎn)。稍后，他們將返回以渲染需要渲染的JavaScript。但是請(qǐng)記住，使用服務(wù)器端呈現(xiàn)創(chuàng)建的網(wǎng)站會(huì)使用HTML標(biāo)記顯示內(nèi)容。由于主要內(nèi)容已經(jīng)顯示，Googlebot將不必返回以在網(wǎng)站上呈現(xiàn)JavaScript以正確索引內(nèi)容。這可以使您的JavaScript SEO策略變得更加容易。

由于第一次和第二次通過站點(diǎn)之間的延遲，JavaScript中包含的內(nèi)容不會(huì)很快被索引。這意味著內(nèi)容將不計(jì)入初始排名，并且更改可能需要一段時(shí)間讓Google注意到并相應(yīng)地調(diào)整排名。出于這個(gè)原因，使用JavaScript SEO的品牌將希望確保他們?cè)谄渚W(wǎng)站的HTML中放置盡可能多的基本內(nèi)容。應(yīng)寫入他們希望計(jì)入其排名的關(guān)鍵信息，以便爬蟲可以在第一時(shí)間對(duì)其進(jìn)行解釋。

JavaScript SEO的常見錯(cuò)誤

盡管JavaScript有助于創(chuàng)建一些令人興奮的網(wǎng)站，但通常會(huì)彈出一些錯(cuò)誤，損害網(wǎng)站的SEO和在線潛力。我們想提請(qǐng)您注意其中的一些。

忽略HTML

在JavaScript中包含站點(diǎn)中最重要的信息意味著爬蟲在第一次索引您的站點(diǎn)時(shí)將幾乎沒有信息可以使用。如前所述，確保您希望快速索引的關(guān)鍵信息是使用HTML創(chuàng)建的。如果您不確定關(guān)鍵內(nèi)容的位置，可以通過右鍵單擊頁面上的任意位置并從菜單中選擇“檢查”來檢查頁面源。您在檢查頁面中找到的內(nèi)容是Googlebot立即看到的內(nèi)容。您還可以在瀏覽器中關(guān)閉JavaScript以查看剩余的內(nèi)容。在您完成站點(diǎn)審核時(shí)，ContentIQ還能夠解釋您的JavaScript框架，幫助您了解您的站點(diǎn)為用戶創(chuàng)建的整個(gè)體驗(yàn)。

沒有正確使用鏈接

鏈接在任何網(wǎng)站中都起著至關(guān)重要的作用，因?yàn)樗鼈兛梢詭椭老x和用戶了解頁面的連接方式。在JavaScript SEO方面，它還有助于讓人們更好地參與您的網(wǎng)站并對(duì)您的內(nèi)容感興趣。但是，對(duì)于JavaScript SEO，您需要確保您的鏈接設(shè)置正確。這意味著使用相關(guān)的鏈接錨文本和HTML錨標(biāo)記，包括href屬性中目標(biāo)頁面的URL。

Google建議遠(yuǎn)離其他HTML元素，例如<span>以及JavaScript事件處理程序。這些類型的鏈接策略會(huì)使人們更難跟蹤鏈接，并且還會(huì)給那些使用輔助技術(shù)的人帶來糟糕的用戶體驗(yàn)。Google還建議遠(yuǎn)離基于散列的路由技術(shù)。如果JavaScript有助于在頁面之間創(chuàng)建過渡，那么使用歷史API會(huì)更好。

意外阻止Google索引您的JavaScript

請(qǐng)記住，Googlebot在第二次通過您的網(wǎng)站之前不會(huì)呈現(xiàn)JavaScript。因此，某些網(wǎng)站會(huì)錯(cuò)誤地包含標(biāo)記，例如在Google首次通過網(wǎng)站時(shí)加載的HTML中的“無索引”標(biāo)記。此標(biāo)記可能會(huì)阻止Googlebot返回運(yùn)行站點(diǎn)中包含的JavaScript，從而阻止對(duì)站點(diǎn)的正確索引。另一個(gè)常見錯(cuò)誤是阻止爬蟲爬取JavaScript目錄。因此，請(qǐng)確保您的robots.txt文件中沒有Disallow:/JavaScript條目。

寫在最后

JavaScript仍然是網(wǎng)絡(luò)的一個(gè)重要功能，因?yàn)槠放剖褂盟鼇順?biāo)記他們的頁面并為他們的用戶創(chuàng)建更具吸引力的網(wǎng)站。然而，了解Googlebot和其他爬蟲如何讀取JavaScript以及它如何與JavaScript SEO進(jìn)行潛在交互仍然是許多人的首要任務(wù)。