手機版網站的SEO觀念：如何做好SEO行動裝置優化

2015年 Google發布了有史以來的第一個與行動裝置友善（Mobile Friendly）的演算法，這套演算法國外業界稱呼為 Mobilegeddon ，演算法的內容簡單來說：你的網站必須要有手機版網站，並且對手機使用者是友善的。

距離2015年已經好幾個年頭過去了，行動裝置優化（Mobile Friendly）已經成為網站優化的基礎配備，但在2020~2021年間，Google又推動了一套全新的演算法更動 – Mobile First Indexing（行動裝置優先索引）。這篇文章我們要來談SEO上與『行動裝置友善（Mobile Friendly）』有關的觀念、以及你在SEO優化上該注意的注意事項。

先談行動裝置友善（Mobile Friendly）的基礎原則

行動裝置友善（Mobile Friendly）指的是你的網站必須要能夠符合行動裝置瀏覽與使用，更白話來說，只要使用者用手機打開你的網站時的使用體驗是非常流暢的，就達到了符合行動裝置友善（Mobile Friendly）的目的，為了達到這個目的，我們會架設所謂的手機版網站（或有些人稱為行動版網站），以下為Google針對手機版網站提出的幾個基礎規範：

• 避免使用對手機不友善的外掛程式：舉例來說，Flash格式的網站內容以現在環境來說對使用者體驗不太友善，尤其以手機來說現在大部分的瀏覽器都不支援Flash了，建議架設網站時盡量避免使用Flash。

• 內容寬度不超出螢幕顯示範圍：以下圖為例，確保手機的介面上沒有任何物件會超出手機的瀏覽範圍。

• 字體大小：行動裝置的螢幕較小，故手機版網站的文字不宜太小
• 點選元素距離：可點選的元素（連結）之間距離不宜太近，避免使用者用手指瀏覽時，一次點到2個以上的按鈕。

以上是Google官方所建議的基本原則，但我個人也會建議把下列項目做好（可以算是加分項目）：

• 蓋台廣告優化：盡量不要在手機版網站上設置太擾人的蓋台廣告，如果真的不得已要使用蓋台廣告，廣告最好不要佔據太多版位、或是關閉廣告的＂Ｘ＂按鈕設置的太難點擊。同時，Google5月的演算法 Page Experience 也會針對蓋台廣告做出懲處，不只會影響使用者體驗、還會影響SEO : (
• 圖片壓縮以及速度優化：網站速度對於使用者體驗以及SEO都會有相當程度影響，做手機版網站優化時，我們必須要預設使用者的網路環境可能沒有電腦裝置來的好，故在速度優化上最好多下一點功夫。尤其是圖片優化的部分特別重要，不建議在手機版網站上傳太大張的圖片。

以上所提到的應該大部分的讀者、行銷人都能夠理解，是很基本的網站優化觀念，你也可以透過以下的工具對你的網站做檢測：

• 行動裝置相容性測試工具

如果你要檢測＂網站是否符合行動裝置友善（Mobile Friendly）＂最簡單的方法便是透過Google的行動裝置相容性測試工具來檢測自己的網站，如果網站有不符合行動裝置友善（Mobile Friendly）的話，工具上會直接顯示出錯誤並要求網站主進行改善，這個應該是最簡單的檢測問題的方式。但要請你注意的是行動裝置相容性測試工具 是Page Level的檢測工具，也就是說，每個網頁丟進去測的結果可能不一樣，請確保每個網頁版型都至少有測試過一次。

• Search Console的行動裝置可用性報表

如果網站有行動裝置友善的問題，Search Console內的報表會告訴你（如果沒有Search Console的話，還請參考此文安裝）。

認識行動裝置優先索引

Google於2020年之後，逐漸實施了所謂的行動裝置優先索引（Mobile First Indexing），因此現在的網站除了需要符合上面提到的行動裝置友善（Mobile Friendly）之外，也應該符合行動裝置優先索引（Mobile First Indexing）。

行動裝置優先索引（Mobile First Indexing）的概念很簡單，就是Google的爬蟲機器人會先來爬你的手機版網站，並用機器人在手機版網站上所爬到的內容來決定電腦版網站以及手機版網站的排名，其實只要把行動裝置友善（Mobile Friendly）顧好，通常就不會有其他問題。但如果真的要謹慎檢查的話，我會建議幾個優化項目可以再檢查一下：

1. 重新檢查你的行動裝置友善（Mobile Friendly）是否有問題。

2. 電腦版和行動版網站的內容與頁面盡可能一致，如果是獨立網頁架構，請手機與電腦網站請一定要頁對頁（本文後面會有更多獨立網頁架構的說明）。

3. 我們提過很多次的速度優化，要特別對手機做優化，以前Google是爬電腦版網站，但現在Google以手機為主了。

4. 確保Google爬蟲可以有效地爬你的手機版網站（這部分最常出問題的就是下面一個段落提到的＂內部連結跟動線＂）。

實務上常看到的問題 – 內部連結跟動線的縮減

我們實務上目前看到最常出現的問題就是＂手機版網站上的內容比電腦版網站少＂或是＂手機版網站的動線不完整＂，因為手機版網站的版面比較小，很多企業主會在手機版網站上把動線做的更簡化，舉例來說，你在電腦版的介面上有設計2層的導覽列，但手機版網站塞不下太大的導覽列，因此有些網站乾脆把導覽列從2層簡化為1層，但搜尋引擎需要依賴網站內的內部連結來分析網站的架構 （網站動線/內部連結重要性我在SEO最重要的觀念，認識【內部連結】如何影響 SEO這篇文章有談過），因此我會建議手機版上的動線以及內部連結盡可能不要減少、或是不要減少太多。

Harris對於Mobile First Indexing的看法

行動裝置優先索引是2020~2021才逐漸全面實施的，其實如果你的網站有做好行動裝置友善（Mobile Friendly）通常SEO上就沒有問題，我們在SEO上的優化原則沒有太大的變動，只是以前我們把＂基礎SEO優化的原則＂套用到電腦版網站上面，現在改為要套用到手機版網站上面。比方說速度檢測以前都以電腦版網站為主，現在要改為優先檢測手機版網站，網站的動線/內部連結優化要改為手機版為主、網頁上的內容豐富度也應該以手機版為主。

談手機版網站的架構選擇

我們現在常見的手機版網站架構大致上可以分為三種，分別是『獨立式網頁（Separate URLs）』、『響應式網頁（Responsive Web Design）』、『動態服務（Dynamic Serving）』三種，如果處理得宜的話，不論選擇哪一種架構，你的SEO都是可以被優化的（前提是處理得宜的話），而在SEO實務上最容易出現問題的是獨立式網頁（Separate URLs）的手機版網站架構，如果你的網站是屬於這類型的架構，可能在SEO上要好好的檢查一下文章後段提到的項目，那在往下之前，我們先介紹這三種架構之間的差異。

• 獨立式網頁（Separate URLs）

獨立式網頁設計我們在業界俗稱叫做大小網，白話來解釋就是架設寫兩套程式碼來解決手機版網站優化的問題，舉例來說，我為電腦版網站以及手機版網站各自寫了兩套網頁（2套HTML），網址分別是 www.yesharris.com 以及 m.yesharris.com  （如上圖範例），當使用者的瀏覽裝置是手機時，系統會將使用者導向到手機版網站的m.yesharris.com ，反之，則會導向到 www.yesharris.com 這個電腦版網站的網址。這個架構的優缺點如下：

優點：手機版網站跟電腦版可以完全分開設計，為不同裝置的使用者設計專屬的體驗

缺點：在SEO的優化上會比較麻煩一點點，且後續維護起來比較麻煩，因為要維護兩套程式檔案。

• 響應式網頁（Responsive Web Design）

響應式網頁我們通常簡稱叫做RWD，簡單來說我們只開發一套網頁，並透過RWD的技術讓網頁會隨著不同的裝置而自適應的改變網頁的版面以及物件大小。RWD的網站跟上面提到的獨立式網頁不同，基本上網址是不變的，在SEO上也比較不容易出現問題，它的優缺點如下：

優點：只要維護一套程式碼就好，在SEO上也比較不容易出現問題。

缺點：考量到網頁要隨著不同的裝置而縮放版面及物件，RWD通常版型無法設計得太複雜，手機版跟電腦版的體驗會相當接近。

• 動態服務（Dynamic Serving）

動態服務與上述提到的獨立式網頁設計一樣是設計兩套程式檔案（2套HTML），但不同的是在前台是使用一樣的網址。白話一點來說，我們在後端做了兩套網頁，並依賴伺服器對裝置判斷＂要提供給前端手機版的程式檔案還是電腦版網站的程式檔案＂，Google旗下的網站有很多就是採用這個架構，這個架構的優缺點如下：

優點：手機版網站跟電腦版可以完全分開設計，為不同裝置的使用者設計專屬的體驗，相較獨立式網頁來說，動態服務的架構對SEO也比較不容易出問題。

缺點：要維護兩套程式檔案、還要處理裝置導向的設定，也有可能出現一些裝置判斷的錯誤。

三種架構各自其實都有優缺點以及各自的SEO狀況，我直接整理如下再來詳細說明：

在不同裝置時
的網址 HTML SEO優化 UI彈性 響應式設計
（Responsive Web） 網址不變 1套HTML 符合Mobile Friendly即可，通常不需特別做其他優化 因為兩個裝置共用一套HTML，UI設計的彈性較小 獨立式網頁
（ Separate URLs） 兩種版本網址 2套HTML 稍微麻煩一點點，實際要做的事情參考本文章的下一個段落 彈性較大 動態服務
（Dynamic Serving） 網址不變 2套HTML 符合Mobile Friendly即可，通常不需特別做其他優化 彈性較大

實務上在選擇手機版網站的架構時，要先考量到你的網站所需要的功能以及UI的複雜性，如果你的UI介面很複雜、或希望針對手機使用者以及電腦使用者各自設計不一樣的介面體驗，那你可能沒有辦法使用RWD（RWD是用同一套HTML去做版面的適應性縮放/調整，太複雜的介面比較難做到適應性的縮放），如果網站的介面功能不複雜，那麼就可以用RWD的架構。

不同手機版網站架構，對於SEO有影響嗎？

上述三種架構在SEO上都能優化出成效，但獨立式網頁設計在SEO上比較需要特別花心思去照顧，更簡單來說，如果你的手機網站是採用RWD跟動態服務，把手機體驗顧好通常就不太會有SEO的問題出現，但獨立式網頁就不同了，獨立式網頁在SEO維護上要注意4個很重要的注意事項：

• Search Console要申請兩組

我在Search Console的教學內有提到過，不同版本的網址需要申請不同的Search Console，如果你是獨立式網頁的架構，你可以申請1個網域資源或申請2個網址資源，例：我有www.yesharris.com 以及 m.yesharris.com ，請兩個都申請好Search Console，用網址資源申請的好處是 Search Console內的手機版網站以及電腦版網站的資料可以分開來看。

• 獨立網址註解

獨立式網頁會把手機版跟電腦版分為兩種版本網址，例： m.yesharris.com 以及 www.yesharris.com ，實務上Google有時會分辨不出來這兩種版本網頁之間的關聯，最慘的狀況來說 Google有可能認不出 m.yesharris.com 以及 www.yesharris.com 其實是同一個網站，並且也認不出來它們之間的關聯性是手機版與電腦版網站，如果Google無法辨認出來的話就有可能發生以下問題：

1. 使用者會用手機搜尋時，找到你的電腦版網站。

2. 你的手機版網站與電腦版網站的內容肯定是接近或是一樣，因此會產生重複內容問題。

為了避免這樣的狀況出現，Google釋出了下列的語法，如果你的網站恰好是採用獨立式網頁設計，請你將以下語法放到你網站上的每一個網頁：

以首頁為例：

你的電腦版網站必須要在<head>裡面置入下列語法：

<link rel=”alternate” media=”only screen and (max-width: 640px)” href=”https://m.example.com/“>

你的手機版網站必須要在<head>裡面置入下列語法：

<link rel=”canonical” href=”https://www.example.com/“> 

以產品頁為例：

你的電腦版網站必須要在<head>裡面置入下列語法：

<link rel=”alternate” media=”only screen and (max-width: 640px)” href=”https://m.example.com/product99“>

你的手機版網站必須要在<head>裡面置入下列語法：

<link rel=”canonical” href=”https://www.example.com/product99“> 

• 避免網頁沒有頁對頁的對應

你的每一個網頁都要對應有手機版網頁與電腦版網頁，獨立式網頁比較怕的就是沒有頁對頁，舉例來說，我在電腦版網站上每一支產品都有＂產品介紹＂、＂產品購買流程＂、＂產品保固說明＂三個網頁，但到手機版本網站上我將三個網頁濃縮為一個網頁叫做＂產品總攬＂，頁數不一樣且沒有頁對頁的情況，Google可能會對不起來這些網頁之間的關聯性。請避免這樣的情況發生。

• 根據裝置做轉址設定

在『行動裝置優先索引』上線後，只要你是獨立式網頁的設計，現在可能會出現＂在電腦版Google搜尋時，看到手機版網站＂的狀況（如上圖），因此，Google官方特別提醒網站主需要做適當的轉址，當電腦裝置進到手機版網站時，伺服器應該要進行判斷，並且把使用者轉址到電腦版網站。

綜合上述所說，我通常會建議客戶先考量自己對於UI介面以及功能的規劃，如果UI介面跟功能不複雜則盡量用RWD，真的不得已需要複雜的介面或版型時，才來考量使用獨立式網頁或動態服務。因為RWD在SEO上簡單很多、顧好行動裝置友善（Mobile Friendly）就不太會出現嚴重的SEO問題，維護成本也相對較低。

總結：3個大重點一定要注意

這篇文章講了很多基本的手機版網站的優化觀念，總結來說我會建議你檢查幾個項目：

1. 網站是否符合行動裝置友善（Mobile Friendly），你可以用檢測工具來檢測 。

2. 網站需要符合行動裝置優先索引（Mobile First Indexing），但這個沒有檢查工具，還請盡可能以文章前面提到的方式來顧及到，並且把所有SEO的基礎原則套用到你的手機版網站上。

3. 如果你的網站是RWD或動態服務，那請顧好行動裝置友善（Mobile Friendly），但如果是用獨立式網頁，則需要另外檢查四件事情，分別是『Search Console額外安裝』、『獨立網址註解』、『頁對頁的對應』、『裝置判斷的轉址處理』。

上述三個都符合就不用太擔心 : )