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

由於所有這些相互矛盾的建議引起的混亂，我經常看到問題“我的Vue SPA是否適合SEO？” 來自像Vue.js Developers Facebook小組，Vue.js論壇和Reddit上的r / vuejs這樣的地方。

在本文中，我們將挑戰流行的觀點，做一些基本的測試，並嘗試總結一些明智的建議，建立SEO友好的SPA。

客戶端呈現內容的問題

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

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

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

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

Googlebot

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

在網絡發佈初期，Googlebot只會抓取頁面中提供的靜態HTML。然而，2014年宣佈，Googlebot現在會嘗試在開始抓取之前呈現JavaScript。

為了幫助調試渲染經JavaScript修改的頁面的任何問題，Google為網站管理員提供了Google抓取工具，該工具會顯示Googlebot在特定網址上看到的內容的快照。

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

Googlebot如何看待SPA

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

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

刪除服務器端呈現

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

但是，我們試圖瞭解的是Googlebot如何看待客戶端呈現的內容。出於這個原因，我關閉了SSR並再次運行測試：

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

可是等等...

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

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

對JavaScript持懷疑態度

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

就像瀏覽器一樣，Googlebot必須擁有一個JavaScript引擎，其中包含已實現的Web標準和ES功能的特定子集，以及它們如何實現的特定特性。

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

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

優化

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

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

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

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

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

最重要的是，如果SEO很關鍵，您不能依賴SPA的客戶端呈現，並且必須確保您的網頁中包含內容。

但這並不意味著您需要放棄SPA架構。有兩種技術，服務器端渲染和預渲染，它們都可以實現預期的結果。

服務器端渲染

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

虛擬DOM的狀態將轉換為HTML字符串，然後在發送到客戶端之前注入到頁面中。當頁面到達瀏覽器時，JavaScript應用程序將無縫地掛載在現有內容上。

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

SSR有其缺點：

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

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

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

預呈現

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

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

預呈現的優點是它不需要Node.js生產服務器，也不會向生產服務器添加負載。

然而，預渲染也有缺點：

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

如果你熱衷於在Vue.js應用程序中實現預渲染，我已經在這個博客上寫了一個指南：Pre-Render A Vue.js App（帶節點或Laravel）

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

結論

許多開發人員看到谷歌2014年關於JavaScript渲染的公告是對SEO內容的SEO擔憂的終結。實際上，無法保證Googlebot會正確呈現網頁，如果確實如此，它仍然可能會將網頁排名低於競爭網站中的靜態HTML網頁。

我的建議：如果您打算使用SPA架構，請確保提供服務器呈現或預呈現的頁面。

閱讀更多 愛碼農 的文章

關鍵字: Google 抓取 網絡爬蟲