PWA SEO 挑戰：是什麼阻止了您的 PWA 網站排名？
已發表: 2022-08-24目錄
憑藉更快的速度和更好的 UI 和 UX，PWA 可以提升您的 Google Core Web Vitals，從而改善您的 SEO。 許多技術博客和新聞（包括 SimiCart）都聲稱這一點。
然而，這還不是全部。 事實上，在某些情況下，PWA 可能對您網站的 SEO 不利。
在開發 PWA 網站 10 多年的時間裡，我們遇到了幾個案例，SEO 性能實際上受到 PWA 的負面影響。
我們已經寫過一篇關於 PWA 好處的文章。 現在，為了讓您看到冰山的水下部分，以下是店主在實施 PWA 時可能面臨的 SEO 的一些重大挑戰。
PWA SEO 的主要問題
這可以追溯到基本的網站開發知識：HTML 和 Javascript。 我們敢打賭，即使您根本不精通技術，您也一定聽說過這兩種編碼語言。
簡而言之，HTML 是最簡單的編碼語言，用於創建網站結構。
同時，Javascript 是一個更高級的，它負責更多的特殊效果。
因此，例如，如果您看到一個網頁包含大量動態內容、精美的滾動效果或酷炫的滑塊，則該網頁正確地使用了 Javascript。
（信用：Reddit）
PWA 以其生動的 UI/UX 體驗而聞名，您可能已經猜到了，它使用了大量的 Javascript。
問題是：谷歌和許多其他搜索引擎不能很好地呈現 Javascript 網站。 基於 Javascript 的網站通常比 HTML 網站更複雜，處理起來也更繁重。 事實上，不僅搜索引擎，Twitter 或 Facebook 等社交媒體也不太喜歡 Javascript。
因此，搜索引擎機器人在索引您的 PWA 網站時可能會遇到一些問題，從而導致 SEO 性能不佳。
因此，它需要一位對 PWA 有深入了解的熟練專家來優化網站，使其對 SEO 友好。
為 SEO 優化 PWA 時的 6 個障礙。
1.性能問題
“但是 PWA 應該很快？” ——你可能會問。
是的，是的，但這並不意味著 PWA 沒有一些性能問題。
PWA 仍然存在一些與速度相關的突出問題。 但是，如果優化得當，PWA 可以快如閃電。
就像尤塞恩博爾特一樣，儘管他天生就是超級天才，但如果沒有一個了解他能力並訓練他的教練，他也無法成為冠軍。
讓我們仔細看看每個問題：
問題
Javascript 文件在解析、編譯和執行時佔用了許多資源。 此外，由於服務器性能不佳，搜索引擎錯誤無法快速呈現 Javascript 文件。
因此，它可能會影響某些頁面速度指標，例如 First Meaningful Paint 和 First Contentful Paint。 由於這兩個指標是重要的排名因素，這對 SEO 不利。 此外，落後的網站也永遠不會有利於用戶體驗。
最重要的是，由於 PWA 的 service worker 需要 HTTPS 和 SSL 證書才能運行，它可能會使您的網站比其 HTTP 版本慢。
解決方案
一些提高速度的常見做法是實現 AMP（加速移動頁面）和 PWA，以及將 HTTP/2 與 HTTPs 一起使用
由於 PWA 是電子商務領域的一項先進和利基技術，因此最好讓經驗豐富的 PWA 開發人員優化您的網站速度。
2. Javascript 錯誤
問題
解析時，Google Chrome 等瀏覽器可以自動更正 HTML 語法，例如結束標籤。 但是，這與 Javascript 錯誤不同。
因此，Javascript 中的任何錯誤都可能阻止搜索引擎蜘蛛抓取和索引您的網頁。
解決方案
讓開發人員為您的網站編寫乾淨且結構良好的 Javascript 代碼非常重要，以避免以後進行許多耗時的修復。
如果網站遇到任何 Javascript 錯誤，開發人員將需要手動清理它們並在修復它們後通知搜索引擎。
3. 由於隱藏內容，超鏈接/圖像未抓取
隱藏內容是人眼看到的內容，而不是搜索引擎看到的內容。 例如，隱藏在“顯示更多”按鈕或延遲加載菜單鏈接後面的文本。 這些通常是用 Javascript 編寫的動態內容和鏈接
問題
由於 Google 在理解 Javascript 方面仍有一些困難，因此可能會有一些 PWA 的 Javascript 內容不會被 Google 訪問。
如果您的內容（例如重要鏈接、產品圖片）對搜索引擎不可見，他們無法對其進行索引。 因此，這將對您的 SEO 排名產生不良影響。
解決方案
您始終可以依靠 Sitechecker 或 Small SEO 工具等工具來查看您的網頁是否包含任何隱藏的內容。 確保提供給用戶的所有關鍵內容（如文本、圖片和鏈接）與提供給 Googlebot 的內容相匹配。
4.模塊兼容性
問題
作為一項相對較新的技術，PWA 經常利用最新的模塊。 這可能與穀歌或其他瀏覽器發生衝突，這些瀏覽器通常依賴於不太現代的模塊。 一些值得注意的例子是 ES6、Fetch API 或新的語法或方法。
解決方案
在實施之前，您應該檢查它們的兼容性。 如果您的 PWA 的某些模塊無法與 Googlebot 一起使用，這不是什麼大問題，因為有工具或 polyfill 可以解決這個問題。
Polyfill 是一些 Javascript 代碼行，它們可以允許舊瀏覽器使用現代功能，即使它們本身不支持這些功能。
根據 Googlebot 與哪些模塊衝突，也可能有一個轉譯工具。
供您參考，轉譯（翻譯 + 編譯）意味著將一種編程語言翻譯和解釋為另一種。 讓我們以 ES6 模塊為例，像 Babel 這樣的服務可以將現代 C6 Javascript 文件轉換為 ES5，這使得舊瀏覽器可以順利運行。
5.服務端渲染問題
為了更好地呈現基於 Javascript 的網站，Googlebot 使用服務器端和客戶端呈現。
簡而言之，渲染過程是這樣的：
- Googlebot 第一次抓取您的網站以查找鏈接和內容
- 服務器將呈現第一次抓取後找到的鏈接和內容。 這些鏈接和內容將在不久後編入索引
- 谷歌第二次、第三次等繼續爬取網站
- 從現在開始，剩餘的鏈接和內容將由客戶端呈現，這意味著它們將呈現在您用戶的設備上。
- 渲染完成後，Google 會為您的網頁編制索引。
問題
起初，Googlebot 的渲染流程似乎很合理，但也有一些主要缺點：
- 較低的分度速度：
Google 可以使用服務器端渲染快速索引 HTML 文件，但使用客戶端渲染索引 Javascript 文件可能需要幾天時間
- 優先處理錯誤的頁面：
想像一下，您有一個鏈接到其他頁面的網頁。 這些被稱為內部鏈接。 谷歌依靠這些內部鏈接的結構來了解鏈接之間的關係以及它們應該優先考慮哪些鏈接。
但是，對於插入 Javascript 的鏈接，Google 需要等待客戶端渲染完成才能開始索引。 換句話說，谷歌只有在客戶端渲染完成後才能全面評估網站的內部鏈接結構。
因此，一些不需要客戶端渲染的不那麼重要的鏈接可能會首先被爬取，而且會更頻繁地被爬取。 因此，Google 可以優先考慮您的次要頁面並忽略銷售頁面。
- 服務端渲染和客戶端渲染的衝突：
服務器端渲染和客戶端渲染之間經常存在問題。 例如，一些重要的頁面元素（元標記、規範標記）未編入索引。 此外，這兩個階段可能會向 Google 發送一些混合信號，因此搜索引擎不知道如何處理您的頁面。
解決方案
更高效的服務器是解決這些問題的主要方法。 開發人員可能需要優化服務器，以便它立即響應深度鏈接請求。 此外，它們需要處理渲染良好的 HTML 文件，尤其是那些用於關鍵頁面元素的 HTML 文件，例如導航、鏈接、內容、元標記和圖像。
現代技術也可以幫助我們解決 Javascript 和網絡瀏覽器之間的衝突。 例如，同構技術可以使瀏覽器更容易呈現 Javascript 文件。
6. SEO常見錯誤
SEO排名因素有200多個，其中一些技術含量很高，例如規範標籤，rebot.txt等。因此，商家可能很容易忽略這些配置，從而最終損害其網站的SEO。
在修復您的 PWA SEO 之前，最好確保您當前的網站遵循最佳 SEO 實踐。
>> 查看更多：最佳 Magento SEO 實踐
現在，來到最棘手的問題：
我應該升級到 PWA 嗎？
…如果我不想損害我網站的 SEO。
對於考慮實施 PWA 的商家來說，這一定是非常令人困惑的，尤其是當有機搜索是一個重要的網站流量渠道時。
但是，這些挑戰並不意味著 Google bot 無法抓取 PWA 網站，也不會因為其編程語言而對 PWA 網站進行不同的排名。
只是商家在實施對 SEO 友好的 PWA 網站時需要注意一些技術挑戰。
事實上，PWA 網站絕對可以在搜索引擎中排名靠前，如果不比同等的非 PWA 網站更好的話。 如前所述，Web 應用程序改進了 SEO 的核心 Web Vitals。
那麼，就 SEO 而言，PWA 是英雄還是零？ 這取決於他們的開發人員是否深入了解 PWA 技術和網站開發。
帶走
PWA 可以成為您網站 SEO 排名的雙刃刀。 另一方面，其增強的速度和客戶體驗可以幫助提升 SEO 的核心網絡生命力。 在不利的一面，PWA 具有豐富的 Javascript 內容，對於像谷歌這樣的搜索引擎來說更複雜。 因此，沒有深入了解 PWA 的糟糕實施可能會導致排名下降。
完全有可能創建一個對 SEO 友好的 PWA 網站。 關鍵是要找到熟悉這些挑戰並知道如何快速解決它們的 PWA 開發人員。
我們有 10 年的時間為 Magento 創建無頭 PWA