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

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

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

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

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

這允許用戶在沒有頁面刷新的情況下查看SPA站點的“頁面”，從理論上改進UX。

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

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

Googlebot

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

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

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

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

Googlebot如何看待SPA

典型的Vue.js SPA示例是Vue HackerNews Clone 2.0。這是Vue團隊提供的一個開源項目，用于演示Vue的全部功能和有效的設計模式。

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

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

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

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

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

可是等等...

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

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

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

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

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

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

您可能認為這是一個微不足道的問題，因為您無論如何都需要為舊瀏覽器轉(zhuǎn)換或填充此類功能。但重點是，您不應該盲目相信每個搜索爬蟲正確運行您的應用程序，就像您不會盲目相信您的應用程序被每個瀏覽器正確運行一樣。

優(yōu)化

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

關于SEO與React的文章有一個有趣的評論：網(wǎng)絡爬蟲比 SEO專家Barry Adams所做的更聰明。關于搜索引擎如何對SPA進行排名的話題，他說：

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

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

如果SEO是至關重要的，該怎么辦

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

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

服務器端渲染

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

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

SSR保證您的頁面將是爬蟲友好的，因為無論爬蟲如何運行JavaScript，或者甚至是否運行JavaScript，頁面內(nèi)容都是完整的。

SSR有其缺點：

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

如果您希望在Vue.js SPA中實現(xiàn)服務器端呈現(xiàn)，則應從官方指南開始：Vue.js服務器端呈現(xiàn)指南。我還寫了一篇關于使用Laravel和Vue.js實現(xiàn)SSR的指南：使用Laravel和Vue.js 2.5進行服務器端渲染。

提示：像Nuxt.js這樣的框架帶有開箱即用的服務器端渲染。

預呈現(xiàn)

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

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

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

然而，預渲染也有缺點：

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

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

提示：為prerendering for SEO可以從prerender.io作為服務購買

結(jié)論

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

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

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

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