如今，許多網(wǎng)站都是用 JavaScript 構(gòu)建的。雖然 JavaScript 在客觀上沒(méi)有任何問(wèn)題，但我們實(shí)現(xiàn)它的方式會(huì)對(duì)我們的用戶體驗(yàn)和我們?cè)谒阉鹘Y(jié)果中的排名產(chǎn)生相當(dāng)大的影響。開(kāi)發(fā)人員不得不考慮他們的 JavaScript 如何影響 SEO，而 SEO 和其他數(shù)字營(yíng)銷人員現(xiàn)在必須更多地了解他們的內(nèi)容和網(wǎng)站體驗(yàn)所依賴的技術(shù)。如果您在任何一條船上，那么您來(lái)對(duì)地方了。繼續(xù)閱讀以了解客戶端渲染和服務(wù)器端渲染之間的區(qū)別，或跳轉(zhuǎn)到特定部分。

什么是客戶端渲染？

客戶端呈現(xiàn)意味著網(wǎng)站的 JavaScript 在您的瀏覽器中呈現(xiàn)，而不是在網(wǎng)站的服務(wù)器上。根據(jù) Google 的 Martin Splitt 的說(shuō)法，“如果您使用 JavaScript 框架，則默認(rèn)為客戶端渲染。這意味著您先發(fā)送基本的 HTML，然后再發(fā)送一段 JavaScript，然后 JavaScript 會(huì)在瀏覽器中獲取和組合內(nèi)容。”

將客戶端渲染想象成從宜家訂購(gòu)家具。宜家不會(huì)把已經(jīng)組裝好的家具送到你家。相反，他們會(huì)在到達(dá)您家后將您必須組裝的零件發(fā)送給您。

客戶端渲染有什么好處？

因?yàn)槌尸F(xiàn)內(nèi)容的所有負(fù)擔(dān)都在客戶端（即試圖查看您的頁(yè)面的人或機(jī)器人），客戶端呈現(xiàn)是網(wǎng)站所有者更便宜的選擇，因?yàn)樗鼫p少了他們自己的服務(wù)器上的負(fù)載。這也是 JavaScript 網(wǎng)站的默認(rèn)狀態(tài)，使網(wǎng)站所有者的客戶端呈現(xiàn)比服務(wù)器端呈現(xiàn)更容易。

客戶端渲染的風(fēng)險(xiǎn)是什么？

客戶端渲染有兩個(gè)主要缺點(diǎn)。一方面，客戶端渲染會(huì)增加用戶體驗(yàn)不佳的可能性。JavaScript 可以為頁(yè)面增加幾秒鐘的加載時(shí)間，如果這種負(fù)擔(dān)完全由客戶端（網(wǎng)站訪問(wèn)者）承擔(dān)，那么他們可能會(huì)感到沮喪并離開(kāi)您的網(wǎng)站。

客戶端渲染的第二大缺點(diǎn)是它對(duì)搜索引擎機(jī)器人的影響。例如，Googlebot 有一種稱為第二波索引的東西。在這個(gè)過(guò)程中，他們首先對(duì)頁(yè)面的 HTML 進(jìn)行爬網(wǎng)和索引，然后在資源可用時(shí)返回呈現(xiàn) JavaScript。這種兩階段的方法意味著有時(shí)，JavaScript 內(nèi)容可能會(huì)被遺漏，并且不會(huì)包含在 Google 的索引中。

其他搜索引擎在渲染 JavaScript 方面比谷歌差。JavaScript 還可以在搜索引擎機(jī)器人抓取網(wǎng)站時(shí)減慢它們的速度，這在大型網(wǎng)站上可能會(huì)引入抓取預(yù)算問(wèn)題。

什么是服務(wù)器端渲染？

服務(wù)器端渲染是指網(wǎng)站的 JavaScript 在網(wǎng)站的服務(wù)器上渲染。再次使用家具示例，這就像訂購(gòu)?fù)耆M裝好的到達(dá)您家的家具。

服務(wù)器端渲染有什么好處？

因?yàn)?JavaScript 在網(wǎng)站的服務(wù)器上呈現(xiàn)，所以搜索引擎機(jī)器人和人類都能獲得更快的頁(yè)面體驗(yàn)。這不僅意味著更好的用戶體驗(yàn)（這也是谷歌排名算法的一部分），而且還消除了與速度相關(guān)的抓取預(yù)算問(wèn)題。

將完全呈現(xiàn)的頁(yè)面發(fā)送到搜索引擎機(jī)器人也意味著您不會(huì)冒客戶端呈現(xiàn)內(nèi)容可能發(fā)生的“部分索引”的風(fēng)險(xiǎn)。當(dāng) Google 和其他搜索引擎機(jī)器人嘗試訪問(wèn)您的頁(yè)面時(shí)，他們無(wú)需等待渲染資源可用才能看到您的完整頁(yè)面，而是從一開(kāi)始就獲得完全渲染的頁(yè)面。

服務(wù)器端渲染有哪些風(fēng)險(xiǎn)？

服務(wù)器端渲染可能是昂貴且資源密集型的。它可能很昂貴，因?yàn)闉闄C(jī)器人和人類網(wǎng)站訪問(wèn)者呈現(xiàn)內(nèi)容的全部負(fù)擔(dān)都在您的服務(wù)器上。實(shí)施它可能會(huì)占用大量資源，因?yàn)樗皇?JavaScript 網(wǎng)站的默認(rèn)設(shè)置，并且需要您的工程團(tuán)隊(duì)的工作才能執(zhí)行。

服務(wù)器端渲染也往往不適用于第三方 JavaScript。因此，如果您使用 Bazaarvoice 之類的服務(wù)在您的網(wǎng)站上提取評(píng)論，它們將不會(huì)通過(guò)服務(wù)器端呈現(xiàn)來(lái)呈現(xiàn)。

哪個(gè)更適合 SEO、客戶端或服務(wù)器端渲染？

在這兩個(gè)選項(xiàng)之間，服務(wù)器端渲染比客戶端渲染更適合 SEO。這是因?yàn)榉?wù)器端渲染可以加快頁(yè)面加載時(shí)間，這不僅可以改善用戶體驗(yàn)，還可以幫助您的網(wǎng)站在 Google 搜索結(jié)果中獲得更好的排名。

服務(wù)器端渲染也更適合 SEO，因?yàn)樗藦乃阉饕鏅C(jī)器人渲染 JavaScript 的負(fù)擔(dān)，解決了與速度相關(guān)的抓取預(yù)算問(wèn)題和部分索引。但是，如果您負(fù)擔(dān)不起實(shí)現(xiàn)服務(wù)器端渲染的費(fèi)用怎么辦？或者您沒(méi)有執(zhí)行它的技術(shù)資源？值得慶幸的是，還有第三種選擇。

混合渲染選項(xiàng)：動(dòng)態(tài)渲染

動(dòng)態(tài)渲染是客戶端和服務(wù)器端渲染的混合體。它是這樣工作的。當(dāng)搜索引擎機(jī)器人嘗試訪問(wèn)頁(yè)面時(shí)，網(wǎng)站會(huì)發(fā)送一個(gè)完全渲染的頁(yè)面。但是當(dāng)一個(gè)人試圖訪問(wèn)一個(gè)頁(yè)面時(shí)，他們的瀏覽器必須呈現(xiàn)該頁(yè)面。

許多人喜歡這種Google 認(rèn)可的渲染選項(xiàng)，因?yàn)樗?/p>

• 比服務(wù)器端渲染更便宜、更容易實(shí)現(xiàn)
• 解決與速度相關(guān)的抓取預(yù)算問(wèn)題
• 解決部分索引問(wèn)題
• 讓人類訪問(wèn)者享受 JavaScript 提供的交互性

哪些類型的網(wǎng)站需要擔(dān)心這個(gè)問(wèn)題？

客戶端渲染、服務(wù)器端渲染或動(dòng)態(tài)渲染之間的爭(zhēng)論只與使用 JavaScript 的網(wǎng)站相關(guān)。如果您的網(wǎng)站是純 HTML，則人類用戶或搜索引擎機(jī)器人不需要呈現(xiàn)任何內(nèi)容。基于 React 和 Angular 等庫(kù)構(gòu)建的完整 JavaScript 網(wǎng)站在渲染之前可能完全空白，具體取決于它們的編碼方式。

網(wǎng)站也可以是部分 JavaScript 和部分 HTML。例如，網(wǎng)站可能只依賴 JavaScript 來(lái)獲取評(píng)論（例如 Bazaarvoice）或“相關(guān)產(chǎn)品”小部件。這意味著在渲染之前只有頁(yè)面的一部分是可見(jiàn)的。

如果您的網(wǎng)站部分或完全依賴 JavaScript，特別是如果您的網(wǎng)站很大（即數(shù)千或數(shù)百萬(wàn)頁(yè)）并且經(jīng)常更改（例如新聞出版商或產(chǎn)品周轉(zhuǎn)率高的電子商務(wù)網(wǎng)站），那么您肯定會(huì)想要仔細(xì)考慮您的渲染選項(xiàng)。

如何審核我的 JavaScript 網(wǎng)站是否存在 SEO 問(wèn)題？

在選擇解決方案之前，最好先診斷一下您的 JavaScript 網(wǎng)站上存在哪些 SEO 問(wèn)題（如果有的話）。

有幾種方法可以做到這一點(diǎn)：

• 使用“禁用 JavaScript”擴(kuò)展— 您可以使用各種瀏覽器擴(kuò)展來(lái)關(guān)閉您正在查看的網(wǎng)頁(yè)上的 JavaScript。這是查看頁(yè)面上 JavaScript 元素位置的簡(jiǎn)單方法。如果關(guān)閉 JavaScript 后內(nèi)容或鏈接消失，則可能是 JavaScript SEO 問(wèn)題。
• 對(duì)加載了 JS 的內(nèi)容進(jìn)行 Google 搜索— 一旦您確定了加載了 JavaScript 的內(nèi)容，請(qǐng)嘗試復(fù)制其中的一些文本并將其粘貼到 Google 搜索中。如果您的網(wǎng)站沒(méi)有返回任何結(jié)果，則您可能遇到了 JavaScript SEO 問(wèn)題。
• Google Search Console 的 URL 檢查工具- 通過(guò)此工具運(yùn)行一個(gè)頁(yè)面，然后單擊“查看抓取的頁(yè)面”以查看 Google 呈現(xiàn)的內(nèi)容。如果缺少某些頁(yè)面內(nèi)容，則可能是 JavaScript SEO 問(wèn)題。您可以使用 Google 的Rich Results Test或Mobile-Friendly Test做同樣的事情。
• 將僅 HTML 的爬網(wǎng)與啟用 JS 的爬網(wǎng)進(jìn)行比較——如果您有一個(gè)支持 JavaScript 的爬蟲(chóng)，如SiteCrawler，您可以在不啟用 JavaScript 的情況下爬取您的網(wǎng)站，然后在啟用 JavaScript 的情況下再次爬取。雖然其他工具允許您一次測(cè)試一個(gè)頁(yè)面，但這是獲得整個(gè)站點(diǎn)中 JavaScript 問(wèn)題的高級(jí)視圖的好方法。