dark

搜索引擎優化和漸進式網路應用程序：展望＆nbspFuture

2019年5月17日

[ad_1]

SEO的從業者一直不信任JavaScript。

這部分是基於經驗;搜索引擎發現，抓取和準確索引嚴重依賴JavaScript的內容的能力在歷史上一直很差。但它也是習慣性的，源於對所有形式的JavaScript的一般警惕，而不是基於理解或經驗。這表明它依賴於多年來一直沒有相關的傳統SEO技術，並且認為擅長技術SEO並不需要理解現代Web開發。

正如邁克金在他的帖子中寫道 技術SEO文藝復興這些態度促使「SEO作為一個營銷領域不斷增長的技術知識差距，使許多SEO難以解決我們的新問題」。他們還讓SEO從業者面臨被拋棄的風險，因為我們中有太多人拒絕探索 – 更不用說擁抱 – 漸進式網路應用程序（PWA），現代JavaScript框架以及其他越來越被視為網路的未來。

在本文中，我將重新審視PWA。除了探索搜索引擎優化和可用性的影響之外，我還將展示一些你可能沒有聽說過的現代框架和構建工具，並提出如果我們要把自己置於技術前沿，我們需要適應的方式的網路。

1.回顧：PWA，SPA和服務人員

漸進式Web應用程序本質上是提供類似於本機應用程序的用戶體驗的網站。推送通知等功能可讓您輕鬆重新與受眾群體互動，同時用戶可以將自己喜愛的網站添加到主屏幕，而不會出現應用商店的複雜情況。 PWA可以繼續離線或在低質量網路上運行，並且可以在移動設備上實現頂級全屏體驗，這種體驗更接近原生iOS和Android應用程序提供的體驗。

最重要的是，PWA在保留 – 甚至增強 – 網路的基本開放和可訪問性的同時做到了這一點。正如名稱所暗示的那樣，它們具有漸進性和響應性，旨在為每個用戶提供服務，無論他們選擇何種瀏覽器或設備。它們也可以自動保持最新狀態 – 正如我們將要看到的 – 可以像傳統網站一樣被發現和鏈接。最後，它不是全部或全部：現有網站可以部署這些技術的有限子集（使用簡單的服務工作者）並立即開始獲得收益。

該規範仍然相當年輕，當然，有些領域需要工作，但這並不能阻止它們成為十年來網路能力的最大進步之一。 PWA的採用正在迅速發展，組織正在發現無數的PWA 現實世界的商業目標 他們可以影響。

您可以閱讀有關PWA的功能和要求的更多信息 Google Developers，但使PWA成為可能的兩項關鍵技術是：

  • App Shell架構：通常使用像React或Angular這樣的JavaScript框架來實現，這是指構建單頁應用程序（SPA）的方法，它將邏輯與實際內容分開。將app shell視為您的應用需要運行的最小HTML，CSS和JS; UI的骨架，可以緩存。

  • 服務工作者：瀏覽器在後台運行的一個特殊腳本，與您的頁面分開。它本質上充當代理，以編程方式攔截和處理來自頁面的網路請求。

請注意，這些技術並不相互排斥;單頁應用程序模型（在2010年與AngularJS一起成熟）顯然早於服務工作者和PWA一段時間。正如我們將要看到的，創建一個不是單頁面應用程序的PWA也是完全可能的。然而，出於本文的目的，我們將關注開發現代PWA的「典型」方法，探索選擇加入快速增長的組織的團隊所面臨的SEO影響和機遇。利用上述兩種技術。

我們將從app shell架構和單頁面應用程序模型的渲染含義開始。

2. app shell架構

網址

簡而言之，app shell架構包括積極地緩存靜態資產（最低限度的UI和功能），然後使用JavaScript動態載入實際內容。大多數現代JavaScript SPA框架都鼓勵類似於這種方法的東西，以這種方式分離邏輯和內容有利於速度和可用性。交互感覺很快，就像在本機應用程序上那樣，數據使用非常經濟。

歸功於 https://developers.google.com/web/fundamentals/architecture/app-shell

正如我在介紹中所提到的，嚴重依賴客戶端JavaScript是SEO的問題。從歷史上看，其中許多問題都集中在以下事實：雖然搜索爬蟲需要唯一的URL來發現和索引內容，但單頁應用程序不需要更改應用程序或網站的每個狀態的URL（因此，短語「單頁」 ）。對片段標識符的依賴 – 不是作為HTTP請求的一部分發送 – 動態操作內容而不重新載入頁面是SEO的一個主要問題。遺留解決方案涉及用所謂的hashbang（＃！）和_escaped_fragment_參數替換散列，這個hack早已被棄用，我們今天不會探索。

感謝HTML5歷史API和pushState方法，我們現在有了更好的解決方案。可以使用JavaScript更改瀏覽器的URL欄，而無需重新載入頁面，從而使其與應用程序或站點的狀態保持同步，並允許用戶有效使用瀏覽器的「後退」按鈕。雖然此解決方案不是靈丹妙藥 – 您的伺服器必須配置為通過將應用程序載入到正確的初始狀態來響應對這些深層URL的請求 – 它確實為我們提供了解決SPA中URL問題的工具。

//在你的控制台中運行它來修改你的URL
//瀏覽器 – 請注意頁面實際上並沒有重新載入。
history.pushState（null，「Page 2」，「/ page2.html」）;

今天SEO面臨的更大問題實際上更容易理解：渲染內容，即何時以及如何完成。

渲染內容

請注意，當我在這裡引用渲染時，我指的是構造HTML的過程。我們關注的是實際內容如何進入瀏覽器，而不是將像素繪製到屏幕上的過程。

在網路的早期階段，事情在這方面更簡單。伺服器通常會返回呈現頁面所需的所有HTML。然而，如今，許多使用單頁面應用程序框架的網站只從伺服器提供最少的HTML，並將繁重的工作委託給客戶端（無論是用戶還是機器人）。鑒於網路的規模，這需要大量的時間和計算資源，而且正如谷歌在2018年的I / O大會上明確指出的那樣，這對搜索引擎構成了一個主要問題：

「谷歌搜索中的JavaScript驅動網站的呈現推遲到Googlebot有可用於處理該內容的資源。」

在較大的網站上，第二波指數化有時會延遲幾天。除此之外，您可能會遇到許多關鍵信息的問題，例如規範標籤和完全錯過的元數據。我強烈推薦觀看 谷歌關於這個主題的精彩演講的視頻 了解現代搜索爬蟲所面臨的一些挑戰。

谷歌是極少數提供JavaScript的搜索引擎之一。更重要的是，它使用了一個 網路渲染服務 直到最近才是 基於Chrome 41 （2015年發布）。顯然，這僅僅是單頁應用程序的含義，JavaScript SEO的更廣泛的主題是一個迷人的領域。雷切爾科斯特洛的 最近關於JavaScript SEO的白皮書 是我讀過的關於這個主題的最好的資源，它包括其他專家的貢獻，如BartoszGóralewicz，Alexis Sanders，Addy Osmani等等。

出於本文的目的，這裡的關鍵點是，在2019年，您不能依賴搜索引擎來準確地抓取和呈現依賴於JavaScript的Web應用程序。如果您的內容是在客戶端呈現的，那麼Google會抓取大量資源，而您的網站在搜索中的效果會不佳。無論你聽到什麼相反，如果有機搜索是你網站的一個有價值的渠道，你需要為伺服器端渲染做好準備。

但伺服器端渲染是一個經常被誤解的概念……

「實現伺服器端呈現」

這是一個常見的搜索引擎優化審計建議，我經常聽到它被拋出，好像它是一個獨立的，易於採取行動的解決方案。充其量只是對一項巨大的技術任務的過度簡化，最糟糕的是，這是對有關網站可能/必要/有益的誤解。伺服器端渲染是許多可能設置的結果，可以通過許多不同的方式實現;但最終，我們關心的是讓我們的伺服器返回靜態HTML。

那麼，我們有什麼選擇呢？讓我們稍微分解伺服器端呈現內容的概念並探索我們的選擇。這些是Google在上述I / O大會上概述的高級方法：

  • 動態渲染 – 在這裡，普通瀏覽器獲得需要客戶端渲染的「標準」Web應用程序，而機器人（例如Googlebot和社交媒體服務）則提供靜態快照。這包括在伺服器基礎結構上添加一個額外的步驟，即一個獲取Web應用程序，呈現內容的服務，然後根據用戶代理（即UA嗅探）將靜態HTML返回給機器人。從歷史上看，這是通過像PhantomJS這樣的服務完成的（現已棄用，不再開發），而今天Puppeteer（無頭Chrome）可以執行類似的功能。主要優點是它通常可以固定在您現有的基礎設施中。

  • 混合渲染 – 這是Google的長期推薦，它絕對是新網站構建的方式。簡而言之，每個人 – 機器人和人類 – 都將初始視圖作為完全呈現的靜態HTML。抓取工具可以繼續以這種方式請求URL，並且每次都會獲得靜態內容，而在普通瀏覽器中，JavaScript會在初始頁面載入後接管。這在理論上是一個很好的解決方案，並且在速度和可用性方面也有許多其他優點;更多關於那一點。

後者更清潔，不涉及UA嗅探，是谷歌的長期推薦。值得澄清的是，「混合渲染」並不是一個單獨的解決方案 – 它是許多可能的方法的結果，這些方法可以在伺服器端提供靜態預渲染內容。讓我們分解如何通過幾種方式實現這樣的結果。

同構/通用應用程序

這是您可以實現「混合渲染」設置的一種方式。同構應用程序使用在兩者上運行的JavaScript 伺服器和客戶端。這得益於Node.js的出現，Node.js在許多其他方面允許開發人員編寫可以在後端和瀏覽器中運行的代碼。

通常，您將配置您的框架（React，Angular Universal，無論如何）以在節點伺服器上運行，在將HTML發送到客戶端之前預呈現部分或全部HTML。因此，您的伺服器必須配置為通過為適當的頁面呈現HTML來響應深層URL。在普通瀏覽器中，這是客戶端應用程序無縫接管的點。初始視圖的伺服器呈現的靜態HTML由瀏覽器「重新水合」（精彩術語），將其重新轉換為單頁面應用程序並使用JavaScript執行後續導航事件。

做得好，這個設置可以很棒，因為它提供了客戶端渲染的可用性優勢，伺服器端渲染的SEO優勢，以及快速的第一次繪製（即使Time to Interactive經常受到JS kicks的補液的負面影響在）。由於擔心過度簡化任務，我不會在這裡詳細介紹，但關鍵是雖然同構JavaScript /真正的伺服器端渲染可以是一個強大的解決方案，但設置通常非常複雜。

那麼，還有哪些其他選擇？如果你無法證明完全同構設置的時間或費用，或者它只是對你想要實現的內容有點過分，那麼還有其他方法可以獲得單頁應用模型的好處 – 以及混合渲染設置 – 沒有破壞你的SEO？

預渲染/ JAMstack

在伺服器端呈現內容可能並不一定意味著呈現過程本身需要在伺服器上進行。我們所需要的只是渲染HTML，隨時準備為客戶服務;渲染過程本身可以在任何你喜歡的地方發生。使用JAMstack方法，將內容呈現為HTML是構建過程的一部分。

我以前寫過關於JAMstack方法的文章。通過快速入門，該術語代表JavaScript，API和標記，它描述了一種在沒有伺服器端軟體的情況下構建複雜網站的方法。從前端組件部件組裝站點的過程 – 傳統站點可能通過WordPress和PHP實現的任務 – 作為構建過程的一部分執行，而使用JavaScript和API在客戶端處理交互性。

可以這樣想：一切都存在於您的Git存儲庫中。您的內容存儲為純文本降價文件（可通過無頭CMS或其他基於API的解決方案進行編輯），頁面模板和彙編邏輯使用Go，JavaScript，Ruby或您首選的站點生成器恰好使用的任何語言編寫。您可以在任何計算機上使用適當的命令行工具集將您的站點構建為靜態HTML，然後再將其託管在任何位置。生成的一組易於緩存的靜態文件通常可以安全地託管在CDN上，幾乎沒有任何內容。

老實說，我認為靜態站點生成器 – 或者更確切地說是支撐它們的原理和技術 – 是未來。我有很多機會對此我說錯了，但是對於那些使用現代基於npm的自動化軟體（如Gulp或Webpack）編寫CSS或JavaScript的人來說，這種方法的強大功能和靈活性應該是明確的。我挑戰任何人來測試專家webhost提供的深度Git集成 Netlify 在一個真實世界的項目中，仍然認為JAMstack方法是一種時尚。

靜態網站生成器在GitHub上的流行度，使用https://stars.przemeknowak.com生成

JAMstack設置對我們討論單頁應用程序和預呈現的重要性應該是相當明顯的。如果我們的靜態站點生成器可以基於用Liquid或Handlebars編寫的模板來組裝HTML，為什麼不能用JavaScript做同樣的事情呢？

有一種新的靜態站點生成器就是這樣做的。這些程序經常由React或Vue.js提供支持，允許開發人員使用尖端的JavaScript框架構建網站，並且可以輕鬆配置為每個頁面（或「路由」）輸出SEO友好的靜態HTML。這些HTML文件中的每一個都是完全呈現的內容，可供人和機器人使用，並且可作為完整客戶端應用程序（即單頁面應用程序）的入口點。這是Google稱為「混合渲染」的完美執行，儘管預渲染過程的精確性使其與同構設置完全不同。

一個很好的例子是 GatsbyJS，內置 應對 和 GraphQL。我不會詳細介紹，但我會鼓勵所有讀過這篇文章的人查看他們的主頁 優秀的文檔。它是一個支持良好的工具，具有合理的學習曲線，一個活躍的社區（一個功能豐富的v2.0在九月發布），一個可擴展的基於插件的架構，與許多CMS的豐富集成，它允許開發人員利用現代框架像React沒有破壞他們的SEO。還有 Gridsome， 基於 VueJS，和 反應靜態 哪 – 你猜對了 – 使用React。

Nike最近的Just Do It活動，利用了React驅動的靜態站點生成器GatsbyJS，並在Netlify上託管。

這些平台的企業級採用率似乎將會增長;耐克使用GatsbyJS作為他們的 去做就對了 活動，Airbnb為他們的工程網站 airbnb.io，和 布勞恩 甚至用它來為一個主要的電子商務網站供電。最後，我們的朋友們 SEOmonitor 用它來為他們的新網站提供動力。

但就目前的單頁應用和JavaScript渲染而言，這已經足夠了。是時候我們探討了支撐PWA的兩項關鍵技術中的第二項。承諾你會留在我身邊（哈哈，書獃子笑話），因為是時候探索服務工作者了。

3.服務人員

首先，我應該澄清一下，我們正在探索的兩種技術 – SPA和服務工作者 – 並不是相互排斥的。它們共同構成了我們通常稱之為漸進式Web應用程序的東西，是的，但它也可能有一個 PWA不是SPA。您還可以將服務工作者集成到傳統的靜態網站（即沒有任何客戶端呈現內容的網站），我相信在不久的將來我們會看到更多。最後，服務人員與其他技術一起運作 Web App清單，我的同事瑪麗亞最近更詳細地探討了一些事情 她出色的嚮導 到PWA和SEO。

但最終，服務工作者可以使PWA最令人興奮的功能成為可能。它們是歷史上Web平台最重大的變化之一，每個工作涉及構建，維護或審核網站的人都需要了解這一強大的新技術。如果，像我一樣，你一直熱切地檢查傑克阿奇博爾德的 服務工作者準備好了 過去幾年的頁面，並視為瀏覽器供應商的採用 已經成長，你會知道現在是時候開始與服務人員一起建設了。

我們將探索它們是什麼，它們可以做什麼，如何實現它們，以及它對SEO的影響。

服務工作者可以做什麼？

服務工作者是一種特殊的JavaScript文件，它在主瀏覽器線程之外運行。它位於瀏覽器和網路之間，其功能包括：

  • 攔截網路請求並以編程方式決定如何處理它們。工作人員可能正常進入網路，或者可能僅依賴於緩存。它甚至可以從各種來源製造出全新的反應。這包括構建HTML。

  • 在服務工作者安裝期間預載入文件。對於SPA，這通常包括我們之前討論過的'app shell'，而簡單的靜態網站可能會選擇預載入所有HTML，CSS和JavaScript，確保在離線時保持基本功能。

  • 處理推送通知，類似於本機應用程序。這意味著網站可以獲得用戶的許可以發送通知，然後依靠服務工作者接收消息並執行它們，即使在瀏覽器關閉時也是如此。

  • 執行後台同步，推遲網路操作，直到連接性得到改善。這可能是網路郵件服務或照片上傳工具的「發件箱」。沒有更多「請求失敗，請稍後再試」 – 服務人員將在適當的時候為您處理。

這些功能的好處超出了明顯的可用性特性。除了在網路上推動HTTPS的採用（所有主流瀏覽器只會在安全協議上註冊服務工作者），服務工作者在速度和性能方面都具有變革性。他們支持谷歌等新的方法和想法 PRPL模式因為我們可以最大限度地提高緩存效率並最大限度地減少對網路的依賴。通過這種方式，服務工作者將在使網路快速訪問並為下一個十億網路用戶訪問方面發揮關鍵作用。

所以是的，他們是一個絕對的強者。

實施服務工作者

而不是在這裡編寫一個基本教程的糟糕工作，而是將鏈接到一些關鍵資源。畢竟，您最了解您對服務工作者的理解程度。

該 MDN文檔 是了解服務工作者及其能力的好地方。如果您對Web開發的基本知識充滿信心並享受邊做邊學的方法，我強烈建議您完成 谷歌的PWA培訓課程。它包括一個整體 實踐練習 對服務工作者來說，這是熟悉基礎知識的好方法。如果ES6和promises還不是你的JavaScript曲目的一部分，那就準備好接受火災的洗禮。

他們需要理解的關鍵事項 – 一旦你開始試驗，你會很快意識到 – 服務工作者會向開發人員交出令人難以置信的控制級別。不像以前嘗試解決連接難題（比如命運多.. 應用程序緩存），服務人員不會對您的工作強制執行任何特定模式;它們是一套工具，可以為您所面臨的問題編寫自己的解決方案。

這樣做的一個後果是它們可能非常複雜。註冊和安裝服務工作者並不是一個簡單的練習，任何通過StackExchange複製粘貼拼湊在一起的嘗試都註定要失敗（嚴重的是，不要這樣做）。對於您的站點，沒有現成的服務工作者 – 如果您要創建合適的工作者，則需要了解網站的基礎結構，體系結構和使用模式。作為網路開發大師的Ben叔叔說得最好：擁有強大的力量帶來了巨大的責任。

最後一件事：您可能會驚訝地發現您訪問的網站已經使用了服務工作者。前往chrome：// serviceworker-internals / in Chrome或about：debugging＃workers in Firefox查看列表。

服務工作者和SEO

就搜索引擎優化的影響而言，與服務工作者最相關的事情可能就是他們使用「劫持請求」和修改或製作響應的能力。 獲取API。您在「查看源」中甚至在「網路」選項卡上看到的內容不一定代表從伺服器返回的內容。它可能是緩存的響應，也可能是服務工作者從各種不同來源構建的。

信用： https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

這是一個實際的例子：

  • 前往 GatsbyJS主頁
  • 點擊「文檔」頁面的鏈接。
  • 右鍵單擊 – 查看源

沒有內容，對吧？只是一些內聯腳本和樣式以及空HTML元素 – 一個用React構建的經典客戶端JavaScript應用程序。即使您打開「網路」選項卡並刷新頁面，「預覽」和「響應」選項卡也會顯示相同的故事。實際內容僅出現在「元素」檢查器中，因為DOM正在使用JavaScript進行彙編。

現在運行相同URL的curl請求（https://www.gatsbyjs.org/docs/），或使用Screaming Frog獲取頁面。所有內容都包含在內，還有正確的標題標籤，規範以及您可能期望從伺服器端呈現的頁面中獲得的所有內容。這就是像Googlebot這樣的爬蟲也會看到的。

這是因為網站使用混合渲染，並且安裝在瀏覽器中的服務工作者正在處理後續導航事件。沒有必要從伺服器獲取Docs頁面的原始HTML，因為客戶端應用程序已經啟動並運行 – 因此，View Source會顯示服務工作者返回到應用程序的內容，而不是網路返回。此外，由於服務工作者有效地使用緩存，因此可以在離線時重新載入這些頁面。

您可以使用「網路」選項卡輕鬆識別來自服務工作者的響應 – 請注意下面的「來自ServiceWorker」行。

在「應用程序」選項卡上，您可以看到當前頁面上運行的服務工作者及其創建的各種緩存。您可以禁用或繞過工作程序並測試它可能使用的任何更高級的功能。學習如何使用這些工具是一項非常有價值的工作;我不會在這裡詳細介紹，但我建議學習Google的Web基礎知識 調試服務工作者的教程。

我已經有意識地努力在本文中將代碼片段保持在最低限度，但是給了我這個。我匯總了一個示例，說明了一個簡單的服務工作者如何使用Fetch API來處理請求以及我們提供的控制程度：

結果：

我希望這個（非常簡化和非生產就緒）示例說明了一個關鍵點，即我們對資源請求的處理方式進行了極其精細的控制。在上面的示例中，我們選擇了一個簡單的try-cache-first，fall-back-to-network，fall-back-to-custom-page模式，但可能性是無窮無盡的。開發人員可以根據主機名，目錄，文件類型，請求方法，緩存新鮮度和更多負載來自由決定如何處理請求。響應 – 包括整頁 – 可以由服務工作者製作。傑克阿奇博爾德探討了他的一些常用方法和方法 離線食譜。

現在是了解服務工作者能力的時候了。現代技術搜索引擎優化所需的技能組合與網路開發人員的工作重疊程度很高，而今天，對所有主要瀏覽器中開發工具的深入理解 – 包括服務工作者調試 – 應該被視為先決條件。

4.結束

SEO需要適應

直到最近，由於不了解PWA和服務工作者帶來的後果和機遇，因此很容易逃脫。

這些是與搜索營銷相關的邊緣的尖端功能，並且許多SEO對JavaScript的上述謹慎沒有做任何鼓勵實驗。但是，PWA正在迅速成為一種規範，如果不了解它們的運作機制，很快就不可能做出有效的工作。為了保持作為技術搜索引擎優化（或SEO工程師，從邁克金借用另一個術語）的相關性，你應該把自己放在這些範式轉變發展的最前沿。網路開發中文盲的技術搜索引擎優化已經不合時宜，我相信搜索營銷的技術和內容驅動方面之間的進一步分歧並不是壞事。專業！

在得知開發團隊正在為新的網站構建採用新的JavaScript框架之後，SEO對於一定程度的憤世嫉俗反應並不罕見。我當然開玩笑說開發人員被最新的閃亮技術或框架所吸引，以及JavaScript開發世界的發展速度有多快，層層抽象和自動化被添加到什麼 – 從外部 – 經常似乎是一個開發堆棧的斜塔。但值得花些時間來理解為什麼選擇框架，何時可能開始在生產中使用技術，以及這些決策將如何影響SEO。

例如，不是批評單個頁面應用程序框架的404處理或內部鏈接，而是能夠提供有意義的建議，這些建議基於對它們實際工作方式的理解。正如喬諾·阿爾德森（Jono Alderson）在關於他的談話 SEO的民主化對開源項目的貢獻在傳播SEO的認知和意識方面比在特定基礎上反覆修復相同問題更有價值。

超越SEO

最後一件事我想提一下：PWA是一組變革性的技術，它們顯然具有遠遠超出SEO的後果。其他數字營銷領域也受到直接影響，從我的角度來看，其中最有趣的是分析。

如果您的網站在離線狀態下部分或完全正常運行，您是否已根據此進行調整分析設置？如果推送通知訂閱是您網站的KPI，那麼您是否將此作為目標進行跟蹤？記住服務工作者無權訪問Window對象，使用「普通」跟蹤代碼無法跟蹤這些事件。相反，有必要將服務工作者配置為使用Measurement Protocol構建匹配，必要時對其進行排隊，並將它們直接發送到Google Analytics伺服器。

這是我最近一直在探索的一個迷人的領域，你可以在我的系列文章中閱讀第一篇文章 PWA分析在Builtvisible博客上。

這就是我現在的全部！謝謝閱讀。如果您有任何問題或意見，請在下面留言或在Twitter上留言 @tomcbennet。

非常感謝 奧利弗梅森 和 威爾奈 他們對本文早期草案的反饋意見。

相關文章