一個(gè)臭名昭著的單頁(yè)面應(yīng)用（SPA）開(kāi)發(fā)領(lǐng)域是SEO。根據(jù)您的要求，搜索引擎抓取客戶端呈現(xiàn)的內(nèi)容要么完全正常，只要它是同步的，或者根本不是很好。

由于所有這些相互矛盾的建議引起的混亂，我經(jīng)�？吹絾�(wèn)題“我的Vue SPA是否適合SEO？” 來(lái)自像Vue.js Developers Facebook小組，Vue.js論壇和Reddit上的r / vuejs這樣的地方。

在本文中，我們將挑戰(zhàn)流行的觀點(diǎn)，做一些基本的測(cè)試，并嘗試總結(jié)一些明智的建議，建立SEO友好的SPA。

客戶端呈現(xiàn)內(nèi)容的問(wèn)題

單頁(yè)面應(yīng)用程序的標(biāo)準(zhǔn)實(shí)現(xiàn)為瀏覽器提供了一個(gè)頁(yè)面“shell”，而不包含任何有意義的內(nèi)容。而是使用AJAX從服務(wù)器按需加載內(nèi)容，然后通過(guò)JavaScript將其添加到頁(yè)面。

這允許用戶在沒(méi)有頁(yè)面刷新的情況下查看SPA站點(diǎn)的“頁(yè)面”，從理論上改進(jìn)UX。

雖然這種架構(gòu)適用于在瀏覽器中查看頁(yè)面的人類用戶，但搜索引擎爬蟲(chóng)呢？抓取工具可以運(yùn)行JavaScript嗎？如果是這樣，他們會(huì)在抓取頁(yè)面之前等待AJAX調(diào)用完成嗎？

重要的是要知道這一點(diǎn)，因?yàn)樗�可以確定網(wǎng)站的內(nèi)容是否可以被搜索引擎索引，同樣重要的是，它的內(nèi)容排名是多少。

Googlebot

由于Google是全球領(lǐng)先的搜索引擎，因此我們的調(diào)查應(yīng)專注于Google搜索引擎抓取工具Googlebot。

在網(wǎng)絡(luò)發(fā)布初期，Googlebot只會(huì)抓取頁(yè)面中提供的靜態(tài)HTML。然而，2014年宣布，Googlebot現(xiàn)在會(huì)嘗試在開(kāi)始抓取之前呈現(xiàn)JavaScript。

為了幫助調(diào)試渲染經(jīng)JavaScript修改的頁(yè)面的任何問(wèn)題，Google為網(wǎng)站管理員提供了Google抓取工具，該工具會(huì)顯示Googlebot在特定網(wǎng)址上看到的內(nèi)容的快照。

一個(gè)常見(jiàn)的誤解是Googlebot不會(huì)抓取異步JavaScript。這篇文章在破壞它方面做得很好。TLDR; Googlebot會(huì)等待至少20秒才能完成異步調(diào)用！

Googlebot如何看待SPA

典型的Vue.js SPA示例是Vue HackerNews Clone 2.0。這是Vue團(tuán)隊(duì)提供的一個(gè)開(kāi)源項(xiàng)目，用于演示Vue的全部功能和有效的設(shè)計(jì)模式。

我將此應(yīng)用程序部署到Heroku實(shí)例并通過(guò)Fetch As Google運(yùn)行。在下圖中，左側(cè)的屏幕截圖顯示了Googlebot如何看到它，右側(cè)的屏幕截圖顯示了用戶將如何看到它。它們似乎完全相同。

刪除服務(wù)器端呈現(xiàn)

Vue HackerNews Clone 2.0的一個(gè)關(guān)鍵特性是服務(wù)器端渲染（SSR）。這意味著，與更基本的SPA不同，每個(gè)頁(yè)面的內(nèi)容都在服務(wù)器上呈現(xiàn)，并在每次頁(yè)面加載時(shí)提供給瀏覽器，就像它是靜態(tài)HTML一樣。

但是，我們?cè)噲D了解的是Googlebot如何看待客戶端呈現(xiàn)的內(nèi)容。出于這個(gè)原因，我關(guān)閉了SSR并再次運(yùn)行測(cè)試：

即使只提供客戶端渲染，Googlebot也能輕松查看內(nèi)容。我還等了幾天才看看Google是否已將該應(yīng)用編入索引。它有過(guò)：

可是等等...

雖然這個(gè)測(cè)試似乎滿足了對(duì)客戶端呈現(xiàn)內(nèi)容的任何擔(dān)憂，但是有一些原因讓你不應(yīng)該對(duì)它充滿信心：

1. 與所有JavaScript引擎一樣，Googlebot也不是絕對(duì)可靠的，并且可能存在無(wú)法呈現(xiàn)頁(yè)面的邊緣情況。
2. 僅僅因?yàn)轫?yè)面可以被索引，并不意味著它將排名很好。

對(duì)JavaScript持懷疑態(tài)度

Googlebot在渲染Vue HackerNews方面沒(méi)有任何問(wèn)題。但我們不應(yīng)該認(rèn)為它可以使所有JavaScript完美無(wú)瑕。谷歌2014年關(guān)于JavaScript渲染的公告明確表示不會(huì)有任何保證，盡管大多數(shù)開(kāi)發(fā)人員似乎忽略了這一點(diǎn)。

就像瀏覽器一樣，Googlebot必須擁有一個(gè)JavaScript引擎，其中包含已實(shí)現(xiàn)的Web標(biāo)準(zhǔn)和ES功能的特定子集，以及它們?nèi)绾螌?shí)現(xiàn)的特定特性。

根據(jù)該視頻來(lái)自谷歌開(kāi)發(fā)者阿迪·奧斯馬尼和羅布·多德森（發(fā)布2017年11月），Googlebot在目前基于Chrome的41有很多新的API，因?yàn)?1版已發(fā)布，如果你使用的任何人，想必Googlebot無(wú)法呈現(xiàn)和索引您的網(wǎng)頁(yè)。

您可能認(rèn)為這是一個(gè)微不足道的問(wèn)題，因?yàn)槟鸁o(wú)論如何都需要為舊瀏覽器轉(zhuǎn)換或填充此類功能。但重點(diǎn)是，您不應(yīng)該盲目相信每個(gè)搜索爬蟲(chóng)正確運(yùn)行您的應(yīng)用程序，就像您不會(huì)盲目相信您的應(yīng)用程序被每個(gè)瀏覽器正確運(yùn)行一樣。

優(yōu)化

不要忘記“SEO”中的“O”代表“優(yōu)化”。被索引是一個(gè)搜索引擎是不夠的; 我們希望我們的網(wǎng)站排名也很好。Fetch As Google告訴我們頁(yè)面是如何被看到的，而不是頁(yè)面與競(jìng)爭(zhēng)對(duì)手的對(duì)比情況。

關(guān)于SEO與React的文章有一個(gè)有趣的評(píng)論：網(wǎng)絡(luò)爬蟲(chóng)比 SEO專家Barry Adams所做的更聰明。關(guān)于搜索引擎如何對(duì)SPA進(jìn)行排名的話題，他說(shuō)：

“當(dāng)你在沒(méi)有服務(wù)器端渲染的情況下使用React時(shí)會(huì)發(fā)生什么情況，爬蟲(chóng)會(huì)在第一頁(yè)停止，因?yàn)樗�看不到任何要跟隨的超鏈接...它使爬行過(guò)程非常緩慢和低效。這就是為什么網(wǎng)站基于React（以及類似的JavaScript平臺(tái)）構(gòu)建在Google上的表現(xiàn)比主要為爬蟲(chóng)程序提供純HTML的網(wǎng)站更糟糕......純HTML網(wǎng)站可以非常有效地被抓取，新添加和更改的內(nèi)容將被更快地抓取和索引，并且Google可以更好地評(píng)估此類網(wǎng)站上各個(gè)網(wǎng)頁(yè)的抓取優(yōu)先級(jí)。“

雖然他沒(méi)有為此提供任何證據(jù)，但它似乎與其他排名決定者的理念一致，如頁(yè)面速度。

如果SEO是至關(guān)重要的，該怎么辦

最重要的是，如果SEO很關(guān)鍵，您不能依賴SPA的客戶端呈現(xiàn)，并且必須確保您的網(wǎng)頁(yè)中包含內(nèi)容。

但這并不意味著您需要放棄SPA架構(gòu)。有兩種技術(shù)，服務(wù)器端渲染和預(yù)渲染，它們都可以實(shí)現(xiàn)預(yù)期的結(jié)果。

服務(wù)器端渲染

服務(wù)器端呈現(xiàn)（SSR）是Web服務(wù)器作為服務(wù)器請(qǐng)求/響應(yīng)周期的一部分呈現(xiàn)頁(yè)面的位置。在Vue.js和其他類似框架的情況下，這是通過(guò)針對(duì)虛擬DOM執(zhí)行app來(lái)完成的。

虛擬DOM的狀態(tài)將轉(zhuǎn)換為HTML字符串，然后在發(fā)送到客戶端之前注入到頁(yè)面中。當(dāng)頁(yè)面到達(dá)瀏覽器時(shí)，JavaScript應(yīng)用程序?qū)�無(wú)縫地掛載在現(xiàn)有內(nèi)容上。

SSR保證您的頁(yè)面將是爬蟲(chóng)友好的，因?yàn)闊o(wú)論爬蟲(chóng)如何運(yùn)行JavaScript，或者甚至是否運(yùn)行JavaScript，頁(yè)面內(nèi)容都是完整的。

SSR有其缺點(diǎn)：

• 您需要將代碼設(shè)計(jì)為“通用”，即它必須在瀏覽器和基于服務(wù)器的JavaScript環(huán)境中工作。這意味著任何期望瀏覽器API和對(duì)象
• window
• 可用的代碼都不起作用。
• 您的應(yīng)用將在每次向服務(wù)器發(fā)出請(qǐng)求時(shí)運(yùn)行，增加額外的負(fù)載并減慢響應(yīng)速度。緩存可以部分緩解這種情況。
• 實(shí)施SSR既復(fù)雜又耗時(shí)，因此項(xiàng)目需要更多的開(kāi)發(fā)人員時(shí)間。
• 它只適用于Node.js后端。SSR可以使用非節(jié)點(diǎn)后端完成，例如，通過(guò)使用PHP擴(kuò)展v8js，但是這樣的解決方案非常有限。

如果您希望在Vue.js SPA中實(shí)現(xiàn)服務(wù)器端呈現(xiàn)，則應(yīng)從官方指南開(kāi)始：Vue.js服務(wù)器端呈現(xiàn)指南。我還寫(xiě)了一篇關(guān)于使用Laravel和Vue.js實(shí)現(xiàn)SSR的指南：使用Laravel和Vue.js 2.5進(jìn)行服務(wù)器端渲染。

提示：像Nuxt.js這樣的框架帶有開(kāi)箱即用的服務(wù)器端渲染。

預(yù)呈現(xiàn)

如果由于上述原因之一而無(wú)法使用SSR，則還有另一種方法：預(yù)渲染。使用此方法，您可以在開(kāi)發(fā)環(huán)境中使用無(wú)頭瀏覽器運(yùn)行應(yīng)用程序，對(duì)頁(yè)面輸出進(jìn)行快照，并使用此快照將HTML文件替換為服務(wù)器的響應(yīng)。

它與SSR的概念幾乎相同，只是它是在部署前完成的，而不是在實(shí)時(shí)服務(wù)器上完成的。它通常使用像Chrome這樣的無(wú)頭瀏覽器來(lái)執(zhí)行，并且可以與Webpack，Gulp等合并到構(gòu)建流程中。

預(yù)呈現(xiàn)的優(yōu)點(diǎn)是它不需要Node.js生產(chǎn)服務(wù)器，也不會(huì)向生產(chǎn)服務(wù)器添加負(fù)載。

然而，預(yù)渲染也有缺點(diǎn)：

• 它對(duì)于顯示更改數(shù)據(jù)的頁(yè)面不起作用，例如，Vue HackerNews。
• 它不適用于具有用戶特定內(nèi)容的頁(yè)面，例如具有用戶個(gè)人詳細(xì)信息的帳戶頁(yè)面。然而，這些類型的頁(yè)面對(duì)SEO不太重要; 你通常不希望索引的帳戶頁(yè)面。
• 您需要單獨(dú)預(yù)渲染應(yīng)用中的每條路線，這可能會(huì)占用大量網(wǎng)站的大量時(shí)間。

如果你熱衷于在Vue.js應(yīng)用程序中實(shí)現(xiàn)預(yù)渲染，我已經(jīng)在這個(gè)博客上寫(xiě)了一個(gè)指南：Pre-Render A Vue.js App（帶節(jié)點(diǎn)或Laravel）

提示：為prerendering for SEO可以從prerender.io作為服務(wù)購(gòu)買(mǎi)

結(jié)論

許多開(kāi)發(fā)人員看到谷歌2014年關(guān)于JavaScript渲染的公告是對(duì)SEO內(nèi)容的SEO擔(dān)憂的終結(jié)。實(shí)際上，無(wú)法保證Googlebot會(huì)正確呈現(xiàn)網(wǎng)頁(yè)，如果確實(shí)如此，它仍然可能會(huì)將網(wǎng)頁(yè)排名低于競(jìng)爭(zhēng)網(wǎng)站中的靜態(tài)HTML網(wǎng)頁(yè)。

我的建議：如果您打算使用SPA架構(gòu)，請(qǐng)確保提供服務(wù)器呈現(xiàn)或預(yù)呈現(xiàn)的頁(yè)面。

標(biāo)簽： Google seo web服務(wù)器 代碼 服務(wù)器 服務(wù)器端 谷歌 開(kāi)發(fā)者 排名 搜索 搜索引擎 網(wǎng)絡(luò)

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請(qǐng)與原作者聯(lián)系。