如何使您的網站達到行動友好？最新指南

在過去的幾年裡，Google 一直將注意力轉移到行動搜尋上。到目前為止，可以肯定的是，整個網路的 70% 都在行動優先索引上。就 SEO 而言，這意味著 Googlebot 會索引您網站的行動版本而不是桌面版本。因此，如果您的網站不適合行動設備，那麼它很可能不會看到高搜尋排名。那麼，您如何使您的網站對行動設備友好，以便您的用戶和 Google 爬蟲絕對喜歡它呢？我們來看一下！

什麼是行動 SEO？

行動 SEO 代表行動搜尋引擎優化。其核心是針對使用智慧型手機、平板電腦或任何其他行動設備訪問您的網站的用戶優化您的網站的過程。行動搜尋引擎優化的目標是為所有行動用戶提供卓越的網站體驗，無論螢幕大小、設備操作系統或行動網際網路速度如何。

為什麼製作適合行動設備的網站如此重要？

當他們需要了解最新消息、查看棒球比賽的獲勝者或線上購物時，每天有數十億用戶選擇他們的智慧型手機而不是桌上型電腦。雖然行動搜尋引擎優化的好處可能很明顯，但我們的 SEO 專家在下面統整了一些最有說服力的觀點。

行動搜尋已經超過了桌面搜尋

早在 2017 年，行動搜尋就超過了桌面搜尋。今天，超過一半的網路搜尋來自行動設備。隨著行動設備流量的份額每月不斷增長，這種趨勢只會不斷加強。對於網站所有者來說，這意味著很大一部分訪問者正在通過行動設備查看他們的網站。如果該網站不適合行動設備，則行動搜尋者會返回搜尋結果。Google 同時捕捉用戶行為，最終可能會降低此類網站的排名。返回用戶再次訪問優化不佳的網站的機會也很低。

Google 聚焦在行動搜尋

這一切都始於 2015 年，當時 Google 推出了適合行動設備的更新。通過所謂的「Mobilegeddon」更新， Google 懲罰了不適合行動設備的網站。但是，這僅適用於行動搜尋，其份額在當時遠低於桌面。當我們第一次聽說行動優先索引時，情況發生了巨大變化。從 2017 年開始， Google 慢慢開始使用智慧型手機 Googlebot 抓取網路。快進到 2022 年，我們將 70% 的整個網路都放在行動優先索引上，並且一直延伸到最終達到 100%。

這對網站所有者意味著什麼？簡而言之，現在只有您網頁的行動版本用於索引和排名目的，這使得行動搜尋引擎優化對任何網站所有者都很重要。上述結論是 Google 優先考慮行動優化的網站。當頁面體驗更新推出時，我們再次看到了它的證明。想知道您的網站是否在行動索引上？使用 Google Search Console 可以快速檢查這一點。只需前往設置並檢查關於部分。如果您的網站已切換到行動優先索引，您會看到 Googlebot Smartphone 作為索引爬蟲。請注意，所有在 2019 年 7 月 1 日之後上線的網站都採用行動優先索引。如果您仍在桌面索引上，事情可能很快就會發生變化，因此最好現在就照顧您的行動搜尋引擎優化而不推遲它。

如何選擇適合行動友好的解決方案？

當您決定長期的行動 SEO 優化計劃時，Google 提供了三種行動配置供您選擇。為了幫助您選擇正確的配置，我將簡要介紹所有三種配置，並說明每種配置的優缺點。

響應式設計

響應式網頁設計是行動搜尋引擎優化方面最優雅的解決方案，並被 Google 等最流行的搜尋引擎推薦。簡而言之，對於桌面用戶和行動訪問者的所有網頁，您都有相同的 URL。HTML 也保持不變。唯一改變的是 CSS，它會根據螢幕大小和設備類型改變內容的呈現方式。

簡單來說，HTML 用於描述網頁的結構。CSS 告訴瀏覽器如何呈現您的頁面，包括顏色、佈局和字體，並允許您調整頁面以適應不同的螢幕尺寸、設備類型和操作系統。要完全控制您的網站在不同設備上的外觀，您需要使用媒體查詢。 @media 規則基本上告訴瀏覽器在滿足某些條件時如何呈現您的響應式網頁設計。

使用響應式設計，您的網站在任何設備上都看起來很棒，而且花費最少的精力和時間。您也可以輕鬆檢查您的網站在不同設備上的顯示方式。如果您使用的是 Google Chrome，請右鍵單擊頁面上的任意位置，然後點擊 Inspect。在螢幕的左上角，找到 Dimensions 並選擇您想要在其上查看您的網站的設備。或者，您可以利用一些免費的線上工具。最後但並非最不重要的一點是，許多用於構建網站的現代解決方案可以幫助您在沒有任何編碼經驗的情況下建立響應式網站。

動態服務

使網站適合行動設備的另一種方法是動態服務。使用動態服務，伺服器會根據請求頁面的用戶代理（行動設備、平板電腦或台式機）在同一 URL 上使用不同的 HTML（和 CSS）進行響應。這種方法比較耗時，因為您必須為同一個 URL 創建兩個版本的網頁。另外，您必須跟上正在發布的最新小工具。否則，您網站的桌面版本將下載到較新的行動設備上。總體而言，在行動 SEO 方面，動態服務不太可取。

單獨的行動網站

這種方法在於為行動訪問者創建一個單獨的行動友好網站。行動流量被重定向到另一個特定於行動設備的 URL，通常如下所示 - m.example.com。通常，行動版的內容比桌面版少，並且提供更適合行動瀏覽的導航。這種行動配置在當時很流行，但如今已不常使用，也不被 Google 推薦。如果您選擇這種行動配置，您可能會遇到重複內容的嚴重問題，這可能會損害您網站的 SEO。此外，您還需要優化標題和元描述，以便單個頁面的兩個版本具有相同的標題和元描述。更重要的是，HTML 和 CSS 允許我們在當今的網站上做一些聞所未聞的事情，因此響應式設計是首選。

你需要一個 APP 嗎？

單獨的行動 APP （適用於 iOS 和 Android 用戶）是一個額外的選項，可以補充您的主網站或作為獨立的解決方案。重要的是要了解並非每個企業都需要 APP 。比如說，如果您的網站純粹是資訊性的，那麼您最好為行動訪問者採用響應式設計。但是，如果您正在運營電子商務網站或送餐服務，則 APP 可以顯著提升用戶的行動體驗。但如果您沒有紮實的技術背景或龐大的預算，那麼構建 APP 是一件非常頭疼的事情。這是一個成本高昂的解決方案，通常可以用經過適當優化的響應式網站代替。因此，除非您是大品牌，否則您不應該在 APP 上花費金錢和時間。總結一下， Google 和其他搜尋引擎建議您今天為適合行動設備的網站使用響應式設計。但選擇始終取決於您和您的業務需求。

如何檢查您的網站是否適合行動設備？

第一件事。在開始使您的網站適合行動設備之前，請檢查您目前的現狀。

檢查常見的行動問題

跳轉到 Google Search Console 並轉到「行動可用性」選項卡。如果您對網站的行動搜尋引擎優化有任何嚴重問題，該工具會通知您。如果您跳到“詳細資訊”部分，您會看到 Google 認為會損害您的網站對行動訪問者的可用性的簡短描述。這包括用戶體驗問題、行動網站界面問題以及您將在本指南後面部分處理的一系列其他因素。如果您沒有 Google Search Console 帳戶，您還可以使用 Google 的 Mobile-Friendly Test 來檢查您網站的行動優化。輸入您網站的 URL，點擊分析，然後等待該工具收集所有數據。唯一的缺點是您一次只能分析一個 URL。所以如果你需要審核整個網站，最好使用 Google 搜尋控制台。

檢查行動設備的頁面速度

在我們跳到行動設備上的頁面速度優化之前，讓我們先看看如何衡量這個因素。您可以使用 Google PageSpeed Insights。到達那裏後，輸入要檢查的頁面的 URL，然後等待分析完成。向下滾動到“機會”部分，查看有助於加快頁面下載速度的建議。正如您可能猜到的那樣，這種方法的缺點是它只允許您一次檢查一頁，這可能很煩人。還有另一個 Google 工具可以檢查您在行動設備上的網站速度 -行動速度測試。很酷的一點是，您可以查看從不同位置和不同行動網路 (3G/4G) 下載網頁的速度。

如何使您的網站適合行動設備？

準備好通過一個針對行動設備進行了完美優化的網站邁入新的一年了嗎？在本指南的這一部分中，我將描述使您的網站在用戶和 Google 眼中都適合行動設備的四個步驟。

01 優化行動用戶的下載時間

如果您想提高您的行動搜尋引擎優化，您的網站在行動設備上的下載速度至關重要。Google 部落格文章中引用的一項研究表明，行動用戶往往一次只將注意力集中在螢幕上 4-8 秒。如果您的網頁需要更長的時間來下載，從字面上看，您將失去大量的訪問者。檢查來自 Google 的統計數據，在搜尋和排名算法方面，Page Experience 更新和網站體驗核心指標(Core Web Vitals) 的引入再次強調了縮短行動流量下載時間的重要性。

什麼是網站體驗核心指標(Core Web Vitals) ？

網站體驗核心指標(Core Web Vitals)是衡量網站下載速度、交互性和視覺穩定性的指標。連同行動友好性、安全性、安全性和沒有彈出窗口，這些新信號現在用於評估整體頁面體驗，並在決定頁面是否值得排名時進行最終投票。這些都是來自 Google 的詳細指南。我們還發現改進的網站體驗核心指標(Core Web Vitals) 與自然展示和點擊之間存在一些令人信服的相關性。Google 的行動頁面速度基準是一秒。雖然這看起來雄心勃勃，但這個目標是可以實現的。以下是您需要採取的確切步驟，以確保在行動設備上縮短下載時間：

檢查您的伺服器響應時間

下載時間的成功很大程度上取決於您的網路託管伺服器的速度。如果您的伺服器響應時間過長，您將在 PageSpeed Insights 中看到相應的警報。您需要與您的網路託管服務提供商的支援人員討論加快速度的可能方法。

避免使用 Flash – 改用 HTML5

Adobe Flash 在網際網路的早期非常流行。但這不再是真的。特別是對於從不支援 Flash 的行動設備。如果您需要將媒體添加到您的網頁（影片、動畫等），請使用 HTML5 不會損害您的行動搜尋引擎優化。它不僅可以幫助您在所有設備上提供相同的內容，而且還可以顯著提高智慧型手機和平板電腦的下載時間。

不要使用太多插件

如果您的網站是在 WordPress、Joomla 或任何其他 CMS 上構建的，請格外小心使用插件。他們可能會減慢您的網站速度。請諮詢 SEO 專家進行拆分測試，看看您的網站在使用和不使用插件的情況下表現如何。您還可以使用查詢監視器來檢測 WordPress 網站上的有問題的插件。

優化您的圖像

每個網站都有大量圖像。為了使它們都下載得足夠快，它們肯定需要優化。確保您使用正確的圖像格式，例如 AVIF、JPEG 2000、JPEG XR 和 WebP。後一種格式比類似質量的 PNG 和 JPEG 輕 25% 到 35%，因此它可以成為行動 SEO 的主要速度助推器。要進一步減小圖像的大小，請通過壓縮工具運行它們。另一種節省下載時間的方法是利用延遲下載行動設備上的圖像。延遲下載允許您延遲螢幕外圖像並僅在需要時下載它們。

重要的提示：為避免索引問題，請勿延遲下載螢幕最先看到的行動內容，因為 Googlebot 無法下載需要用戶交互的元素。

啟用網路緩存

緩存可加快瀏覽速度，並為回訪者提供良好的用戶體驗。允許瀏覽器緩存網站內容的所有部分，包括文本、圖像、HTML、CSS 和 JavaScript。這應該對您的行動優化有很大幫助。

註冊 CDN

內容傳遞網路(CDN)是連接在一起的伺服器網路，可以更快地交付您網站的內容。簡而言之，多個 CDN 伺服器遍布全球。當來自紐約的用戶訪問您的網站時，CDN 網路將找到最近的伺服器並從那裡下載所有內容。無論原始伺服器在哪裡。許多網路託管服務提供商免費提供 CDN。

仔細檢查您的代碼

為了使您的網站針對行動搜尋進行優化並確保行動平台上的快速下載速度，您的 HTML、CSS 和 JavaScript 的每一部分都必須完美編碼。

使用更少的重定向

如果沒有一個重定向，您就無法構建網站的話，請確保它們已正確設置，並注意僅限行動設備的 404 重定向。這裡的一般經驗法則是行動設備上的重定向越少越好。

使用 AMP 但要謹慎

AMP(Accelerated Mobile Pages) 是一個開源專案，主要由 Google 贊助和推廣。您可能已經在 SERP 上看到過 AMP 頁面。AMP 頁面曾經有一個閃電圖標。但最近 Google 刪除了行動搜尋結果的 AMP 圖標。所以現在真的很難區分。AMP 的主要好處是您的頁面幾乎可以立即下載，但這種速度的提升是有代價的。首先，它存在嚴重的設計限制，您只能使用內聯樣式，CSS 限制為 50KB，JavaScript 限制為 150KB。其次，當有人連結到您的 AMP 頁面時，此反向連結將指向 google.com 網域，而不是您的網域。因此，AMP 頁面的連結構建變得有點複雜。最後，如果您的行動網頁經過適當優化，您可以在不實際實施 AMP 的情況下達到類似 AMP 的行動下載速度。

02 讓 Google 抓取所有內容

如果您的網站已切換到行動優先索引，您需要確保網站的行動版本與桌面版本具有相同的內容。這包括 Javascript、CSS、圖像和您網站代碼的其他重要部分。如您所知，被索引和排名的是您網站的行動版本。因此，如果您的內容的任何部分在行動設備上被阻止，Google 根本不會看到它們，也不會被編入索引。如果您仍然需要為行動用戶隱藏頁面內容的任何部分，您可以將它們放在標籤(tabs)中。在全世界聽說行動優先索引之前，這可能是一個問題並且可能會損害您的排名，但它不再是真的， Google 證實了這一點。此外，如果您有一個單獨的行動訪問者網站 ( m.example.com )，則需要檢查並比較 robots.txt 文件的兩個版本，桌面版和行動版。

什麼是 robots.txt？

robots.txt 文件是一個文本文件，它告訴搜尋引擎機器人他們可以或不可以訪問您網站的哪些頁面或文件。有一種很好的舊方法可以在桌面和行動網站的 URL 之後添加 robots.txt - www.example.com/robots.txt 和 m.example.com/robots.txt 。格外小心地檢查您的重要和賺錢頁面都不會被阻止在行動設備上抓取。

03 用心花時間在您的行動網站的 UI 和 UX

行動網站的用戶體驗在很多方面與桌面不同。通常，螢幕尺寸較小，瀏覽主要以縱向模式進行。雖然響應式設計涵蓋了這些方面的許多方面，但您應該注意，就行動 UI 優化而言，擁有響應式網站並不總是足夠的。讓我們來看看您可以採取哪些主要行動步驟來提升訪問者的行動體驗並確保您的網站適合行動設備。

注意 Viewport Content 標籤

行動優化中一個簡單但經常被忽視的部分是視區內容(Viewport Content)標籤。視區元標記告訴瀏覽器如何處理不同設備上網頁的尺寸和縮放。Google 的建議是使用 viewport 標籤，如果您使用的是響應式設計，請務必仔細檢查您的 HTML 是否包含格式正確的視區內容標籤。它將幫助您避免您的網站在行動設備上顯示為桌面。

提高可讀性

當您選擇字體大小和顏色時，請始終考慮小螢幕。應用大小至少為 14 像素的簡單清晰字體。確保文本和背景之間有足夠的對比度，以避免在有問題的環境中出現可讀性問題。此外，盡量不要在著陸頁頂部使用冗長的文本塊來壓倒行動用戶，改用短段落，並將不重要的文本移到底部。懷疑您的網站是否易於閱讀？只需拿起您的智慧型手機並瀏覽幾分鐘即可。您是否必須放大才能閱讀內容的任何部分？如果答案是否定的，那麼您的行動網站的可讀性應該沒問題。您還可以跳轉到 Google Search Console 中的行動可用性，以檢查您的行動網站是否存在任何可讀性問題，這可能會損害您網站的行動 SEO。

採取拇指友好的方法

當您針對行動設備優化您的網站時，您會希望使整個設計對拇指友好。在 49% 的情況下，它是用於與內容交互的拇指。因此，您的行動網站上的所有可點擊元素都應該足夠大，以適應拇指的大小。這也適用於文本中可點擊連結之間的距離。Google 建議點擊目標的最小尺寸約為 7 毫米或 48 個 CSS 像素，元素之間的最小間距至少為 8 像素。

借助 Google Chrome 瀏覽器中可用的 Lighthouse，您可以快速檢查網站是否符合這些標準。為此，請在瀏覽器中打開要檢查的頁面，右鍵單擊頁面上的任意位置，然後點擊 Inspect。您也可以按 Shift + CTRL + J (Windows) 或 Option + ⌘ + J（在 macOS 上）。在螢幕的右上角，找到並單擊 >> 符號，然後選擇 Lighthouse。點擊生成報告並等待檢查完成。將生成我們已經在 PageSpeed Insights 中看到的熟悉報告，但我們對 SEO 部分告訴我們的內容特別感興趣。如果您的任何可點擊元素不符合 Google 的建議，Lighthouse 會向您發出警告，並準確告訴您哪些因素會損害您的行動搜尋引擎優化並需要修復。

改進行動設備上的導航

您的行動友好型導航可以採用多種形式，但您應該始終記住，它必須讓用戶感覺自然和直觀。一旦人們登陸您的主頁，他們應該完全了解他們下一步需要去哪里以及為什麼要去。以下是使您的行動導航完美的一些提示：

把事情簡單化。還記得行動用戶很容易不知所措嗎？這也適用於導航。您的選單在設計時應考慮小螢幕尺寸。因此，與其用大量元素將其弄亂，不如分析典型用戶的旅程，並將行動導航限制在 4-8 個最重要的項目上。優先考慮重要元素。由於行動用戶的注意力非常短，因此您需要將最重要的項目（例如賺錢頁面和號召性用語）放在最前面。

不要忘記拇指友好的方法。請始終牢記，您的用戶不會使用鼠標來瀏覽您的行動網站。為手指點擊而不是滑鼠點擊而設計。避免水平滾動。 Google 和用戶都不喜歡水平滾動。如果您的選單不適合行動螢幕，您應該重新考慮。用您的徽標替換主頁按鈕。從您網站的任何頁面返回主頁應該很容易。但是，為什麼要讓一個無聊的文本按鈕或家符號竊取螢幕空間呢？將指向您主頁的連結直接嵌入到您的品牌徽標中。在頂部添加搜尋框。不要讓您的用戶搜尋搜尋框。特別是如果您正在運行電子商務網站。研究表明，搜尋欄的最佳位置是在頁面頂部。可以通過單擊使搜尋欄可用或預設顯示它。

注意你的 CTA

通常，行動網站訪問者與您網站上的內容的互動比在桌面上更熱切。但令人驚訝的是，根據各種研究，行動轉化率要低得多。那麼為什麼會這樣呢？我們做了自我檢查，發現許多著陸頁經常有同樣的問題。這是一個錯誤的行動呼籲。始終將 CTA 放在您的賺錢頁面上，以供行動用戶使用。不要強迫他們滾動找到它，永遠不要讓不那麼重要的橫幅覆蓋 CTA，使 CTA 的文本清晰，不要忘記按鈕的設計應該考慮到拇指優先的方法。以下是在行動設備上正確放置 CTA 的一些很好的範例：

檢查社群分享按鈕

向您的網站添加社群分享按鈕總是好的。它們讓用戶可以輕鬆地在他們的社群資料中分享您的內容，提高您的品牌曝光率並幫助您在網上接觸更多人。社群共享小部件通常放置在桌面用戶螢幕的左側或右側，以便他們在決定共享您的內容後可以共享您的內容。然而，這個位置對於行動設備來說不是很好，因為瀏覽是在縱向模式下進行的。您仍然可以在網站的行動版本上利用社群分享按鈕，而不會損害您的行動搜尋引擎優化。您只需要將小部件放置在頁面底部即可。

避免侵入性彈出窗口

許多網站所有者認為彈出窗口是收集更多潛在客戶、電子郵件訂閱者或吸引更多訪問者註冊線上活動的一種額外方式。同時，在大多數情況下，用戶和 Google 都認為彈出窗口是用戶體驗的噩夢。對於行動設備來說尤其如此。由於行動設備上的螢幕尺寸較小，適用於桌面的彈出窗口可能會妨礙目標內容的查看，並且看起來與您想要的不完全相同。此類彈出窗口不僅會破壞您的行動用戶體驗，還會損害您的排名。 Google 很久以前就證實了這一點。那麼這是否意味著您根本不能使用彈出窗口？實際上不是。為避免受到 Google 的處罰，您需要負責任地使用彈出窗口，並確保它們沒有完全隱藏背景內容。

04 實施 Schema markup

Schema markup 是一組 HTML 標記，用於幫助 Google 的抓取工具更好地了解您的內容是關於什麼的。您可以從數百個不同的標籤中進行選擇，並使用它們來標記您網站上的內容（電話號碼、工作時間、食譜烹飪時間、產品價格等）。具有適當結構架構標記的網站更容易被 Google 解釋，並且有機會在行動搜尋引擎結果頁面上獲得這些漂亮的豐富片段。在實現 Schema 標記的許多方法中，我最喜歡其中一種是 Google 的標記助手。它簡單、自動化，整個過程不需要太多時間。進入幫助程序後，只需選擇您將使用的內容類型，添加您的 URL，然後點擊開始標記。在下一個螢幕上，您需要突出顯示網頁的元素並指定它們是什麼。完成標記後，單擊 CREATE HTML。您將獲得需要添加到頁面頭部的代碼。一旦你上傳了你的頁面並且它已經上線，請檢查一切是否正常。轉到 Rich Results Test 並檢查您的頁面是否有資格獲得結果。