漸進式網絡應用程序 (PWA) 和搜索引擎優化 (SEO)

已發表: 2021-12-27

Progressive Web App (PWA) 是一種通過網絡交付的應用軟件。 它使用 HTML、CSS、JavaScript 等標準網絡技術構建。PWA 通常用於提高網站的轉化率和流量。 從 2021 年開始，Google Chrome、Apple Safari、Firefox for Android 和 Microsoft Edge 將（全部或部分）支持 PWA。

作為一個相對較新的發展，PWA 優化在大多數情況下仍然會產生積極的結果，並且具有驚人的統計數據。 PWA Stats 不斷報告實施 PWA 的服務所獲得的收益。

一般來說，根據 TOP 30 PWA 報告，“漸進式網絡應用的平均轉化率比原生移動應用高 36%”。

PWA 是在線營銷的好幫手。 這就是為什麼它們在 SEO 人群中很受歡迎。 然而，就像 React 和 SEO 一樣，PWA SEO 組合也有其困難。 在本文中，我們將闡明 PWA 如何與 SEO 協同工作。

目錄顯示
  • PWA 的例子和主要好處
    • 1. 星巴克
    • 2.品特雷斯特
    • 3.優步
  • 搜索引擎優化的重要性
  • 漸進式 Web 應用程序的 SEO：問題是什麼？
  • 服務器端渲染和客戶端渲染
  • 如何在不影響搜索引擎優化的情況下實施 PWA？
    • 1.應用動態渲染
    • 2.結合SSR和CSR
    • 3. 使用 SEO 友好的 JavaScript 框架構建你的 PWA
    • 4. 訴諸即用型 PWA 解決方案
    • 5.PWA工作室
    • 6.ScandiPWA
    • 7.Vue店面
  • 如何在 PWA 實施過程中避免與 SEO 相關的錯誤？
  • 底線

PWA 的例子和主要好處

progressive-web-application-apps-pwa-framework

任何 Web 服務都可以是 PWA。 主要有以下三個要求：

  1. 在 HTTPS 下運行。
  2. 包括 Web 應用程序清單。
  3. 實現服務工作者。

PWA 的主要目的是為每個用戶提供卓越的功能。 以下是 PWA 提供的主要優勢列表：

  1. PWA 幾乎可以為任何企業帶來新的機遇和增長。 它結合了最好的應用程序和網絡質量，反應靈敏並且能夠在任何設備上工作，並且不一定需要快速的網絡。
  2. 傳輸層安全性使其安全。
  3. Service Worker（瀏覽器在後台運行的特殊腳本）允許 PWA 在離線模式下工作。

讓我們看一下採用 PWA 的一些最偉大的例子：

為您推薦：用於構建漸進式 Web 應用程序 (PWA) 的最流行框架。

1. 星巴克

星巴克點餐系統的PWA簡單易用。 它看起來就像他們的本地應用程序，但確實能夠在用戶瀏覽菜單並將項目添加到購物車時離線運行。 這種解決方案的最大好處是 PWA 幾乎比星巴克的標準應用程序小兩倍。 因此，該公司顯著增加了網絡用戶的數量。

2.品特雷斯特

在發現只有 1% 的 Pinterest 移動用戶因性能不佳而下載並登錄後，移動應用在 PWA 技術的基礎上進行了重構。 因此，花費的時間、廣告收入和核心參與度等指標增加了 40% – 60%。

3.優步

Uber 網絡應用程序被重建為 PWA，目的是在低速網絡和與本機 Uber 應用程序不兼容的舊智能手機上提供快速服務。 得益於此，超輕量級核心應用程序在 2G 網絡上加載時間約為 3 秒。

搜索引擎優化的重要性

谷歌搜索引擎優化排名 seo

SEO 就是針對搜索引擎 (SE) 優化您的網站。 其主要目的是提高網站在搜索結果中的排名並吸引訪問者。 它基於 SE 算法並使用關鍵字來幫助搜索引擎顯示相關內容並吸引目標受眾訪問網站。 這就是 SEO 如何為您的網站帶來自然流量，這是同類中最好的。 與直接流量和付費流量不同，它能夠將您的大部分訪問者轉變為您的客戶。

漸進式 Web 應用程序的 SEO：問題是什麼？

seo-brand-marketing-statistics-graph-growth-business-company

儘管 PWA 提供了所有好處，但許多網站所有者仍然對實施該技術猶豫不決。 有兩個主要原因：

  1. 害怕改變已經運行良好的現有系統。
  2. 對 PWA 如何與 SEO 協同工作理解不足。

正如 John Mueller（谷歌分析師）所說，“PWA 目前在谷歌搜索中沒有任何優勢。”

許多 PWA 是使用 JS 框架構建的，這些框架並不以其 SEO 友好性而著稱。

因此，與傳統的基於 HTML 的網站不同，依賴 JavaScript 的 PWA 對 SEO 具有挑戰性。 這就是為什麼它們在可搜索性方面沒有任何優勢。 然而，與流行的看法相反，這並不意味著漸進式網絡應用程序不能被搜索引擎索引。 你只需要為此使用不同的技術。

服務器端渲染和客戶端渲染

移動應用程序設計開發技術

大多數網站使用服務器端呈現 (SSR)。 這是頁面在服務器端呈現而不是在瀏覽器中呈現的最簡單方法。 但是，每次用戶請求頁面時都會加載整個 HTML，這在 Internet 連接不穩定或不夠快時可能會出現問題。

基於 JavaScript 的 PWA 使用客戶端呈現 (CSR)，其中內容在客戶端的瀏覽器中呈現。 它不會在用戶每次請求頁面時發送整個 HTML 頁面。 JavaScript 文件僅顯示客戶端瀏覽器中頁面信息的必要部分。 這就是為什麼即使在互聯網連接不佳的情況下頁面加載速度也更快的原因。

但是，為什麼很多站長還是拒絕使用CSR呢？ 問題是谷歌機器人。 它可以在 HTML 文檔中完全可見的代碼中讀取網站內容。 CSR 就其情況而言，完全依賴於搜索引擎處理 JavaScript 的能力。 這就是為什麼有人認為 CSR 應用程序不能被索引。 然而，事實上，在所有搜索引擎中，谷歌是最擅長處理 JavaScript 的。

儘管如此，這仍然不代表 JavaScript 和 SEO 的問題就解決了：谷歌承認 JS 的處理並不完美。 也就是說，抓取基於 JavaScript 的頁面的過程比抓取 HTML 頁面需要更多的時間。 事實上，這意味著您將不得不等待更多時間才能讓 JavaScript 內容出現在搜索引擎的結果頁面中。

所有這些都使得網站所有者很難既改善訪問者的用戶體驗，又使他們的內容針對搜索引擎進行優化。

如何在不影響搜索引擎優化的情況下實施 PWA？

pwa-framework-progressive-web-application-apps
您可能喜歡： Magento PWA Studio：適用於 Magento 的漸進式 Web 應用工具！

1.應用動態渲染

動態呈現向不同來源顯示不同版本的內容。 訪問者獲得 CSR 版本，爬蟲獲得服務器端渲染版本。 這允許改進 Google 機器人對基於 JavaScript 的頁面的索引。 這樣，您將為您的客戶提供最方便的用戶體驗，而不會危及網站的 SEO。

2.結合SSR和CSR

使用服務器端渲染確保爬蟲能夠看到內容中最重要的部分（肯定需要傳遞給搜索引擎）。 一旦爬蟲發現頁面，就會選擇這些信息。 其餘信息將在流程的第二階段通過客戶端呈現自動處理。

3. 使用 SEO 友好的 JavaScript 框架構建你的 PWA

我們強烈推薦 GatsbyJS。 使用此框架構建 PWA 網站非常容易（以及將現有的 Gatsby 網站轉變為 PWA）。 它會在構建步驟中預呈現您的網站，即使互聯網連接速度很慢，也能獲得出色、無延遲的性能。 因此，您的訪問者可以獲得類似應用程序的瀏覽體驗。

4. 訴諸即用型 PWA 解決方案

如今，PWA 比以往任何時候都更實惠。 所以，如果你不想在 PWA 開發上浪費大量的時間和資源，你可以使用一些根據 SEO 原則製作並經過全面測試的即用型 PWA 解決方案，這樣你就可以放心質量的代碼。

5.PWA工作室

PWA Studio 於 2019 年作為 Web 技術標準發布，旨在提供類似應用程序的體驗。 事實上，它並不是一個現成的解決方案：它更像是用於 PWA 開發的工具和功能的集合。 此解決方案非常複雜且令人印象深刻，但需要進行額外的調整。

6.ScandiPWA

ScandiPWA 是一個開源解決方案，基於 React 和 Redux。 它旨在提高網站的速度和離線工作能力。 它還會不斷更新，因此您將始終獲得新功能。

7.Vue店面

這是市場上首批可用的 PWA 解決方案之一。 實際上，Vue Storefront 是一種通用的一體化解決方案，但需要額外的維護資源。

如何在 PWA 實施過程中避免與 SEO 相關的錯誤？

seo-移動網站-響應式設計-瀏覽器

要開發精心設計的 PWA，通過提供改進的用戶體驗來幫助您在 SEO 中取勝，您應該：

  1. 執行 SEO 審核。 這將有助於發現並修復所有與 SEO 相關的問題。
  2. 諮詢 SEO 專家。 當您使用 React（例如）構建 PWA 時，您的 SEO 專家應該確切地知道如何結合 React 和 SEO。 這樣您就可以避免實施後可能出現的大多數問題。
  3. 在開發 PWA 時堅持基本的 SEO 原則。 在 Google 發布的與 Progressive Web Apps SEO 相關的文章中，該公司提供了有關如何構建可索引 PWA 的提示。 其中一些是這樣的：
    • 每個頁面都應該可以通過特定的 URL 訪問。 因此，每個頁面都將被獨立抓取。
    • 該網站應採用響應式設計並針對移動設備進行優化。
    • 使用漸進增強。 由於該策略，PWA 即使在舊瀏覽器上也能正常運行。
    • 定期使用 Google Search Console 檢查 Google 如何呈現您的頁面。 因此，您將始終知道何時該升級或更改某些內容。
    • 密切關注頁面加載時間。 谷歌衡量每個頁面的加載速度，如果你的頁面加載速度變慢，谷歌將降低它的排名。
您可能還喜歡： React Native vs Flutter vs PWA：趨勢移動應用程序框架之戰。

底線

end-conclusion-final-words 最終結論

PWA 優化為在線營銷提供了大量機會，並為絕大多數企業帶來增長。 事實上，PWA 通常應用的最佳 SEO 實踐是用戶友好的界面：它響應迅速、結構化且呈現速度快。 然而，PWA 仍然沒有給 SEO 帶來直接優勢，與 SEO 相關的問題阻止了許多商家在他們的網站上實施 PWA。 這就是為什麼要小心並使用不同的技術很重要，例如動態渲染、SSR 和 CSR 的組合或現成的 PWA 解決方案。 您還應該從一開始就讓 SEO 專家參與該過程。

如您所見，您可以通過成功結合使用 SEO 和 PWA。 還應該指出的是，PWA 是一種年輕的創新型軟件，因此可以期待改進。 

作者-形象-Ivan-Jones 本文由 Ivan Jones 撰寫。 Ivan 是 Clockwise.Software 的 SEO 專家，在該行業擁有超過 5 年的經驗。 他知道多年來幫助他將網站保持在谷歌搜索結果頂部的細微差別。 作為一個狂熱的學習者，他熱衷於測試有利於 SEO 結果的新方法。