響應式網站設計(Responsive Web Design，簡稱RWD)，即網頁內容適應各種屏幕尺寸，也就是同一個HTML文本，通過CSS編寫，能根據不同設備的尺寸，無論是直立還是橫放，都能適應且流暢播放。那麼，響應式網站設計對SEO優化有什麼影響呢?

建立手機版網頁的方式有哪些?

一般來說，建立手機版網頁的方式主要有三種，分別是：響應式網站設計、自適應式網站以及手機、電腦各自為獨立網站。下面，香港網頁製作公司為大家詳細介紹一下。

響應式網站：手機和電腦是採用同一個網址，同一個HTML文本，但CSS編寫會根據不同屏幕尺寸來改變網站排版。

自適應式網站(Adaptive Web Design，即AWD)：雖然手機和電腦的網址可做到完全一樣，但在不同設備開啟時，會優先判斷哪種設備，再給予不同的CSS，繼而改變排版。

手機、電腦各自為獨立網站(Separate URLs)：手機和電腦各自製作獨立網站，且網址也不一樣。

如何製作響應式網站?

要製作響應式網站之前，首先我們先了解下響應式網站的原理是什麼?

響應式網站是通過檢查屏幕的尺寸，讓網頁內容可直接改變文字大小、行距、整體排版、區塊位置、圖片縮放等，滿足各種設備的版面設置。

製作響應式網站的方式：

1. 設置viewport

響應式網站會根據「屏幕尺寸」，即viewport，來改變網頁內容的排版。在HTML本文上，應註明「meta name=viewport」的標籤，讓瀏覽器知道」尺寸變化」與「內容縮放」的比例。

要點：

* 利用meta viewport標籤，檢測瀏覽器大小變化時，網頁內容的尺寸改如何調整;

* 註明width=device-width，讓網頁css像素：裝置獨立像素=1:1，確保設備的擺放都能完整適應屏幕尺寸。

2. 使用 CSS @media

響應式網站能根據設備尺寸改變版型，其最大的功勞就是CSS模式。

要點：

* 在CSS中，大型元素應使用「相對」尺寸，避免使用「絕對」尺寸，如：設定width: 100%，而非使用width: 344px，確保所有設備都能正常顯示。

* 使用CSS @media，應針對不同屏幕，套用不同樣式。

製作響應式網站對SEO優化有什麼影響?

在SEO優化中，Google一直強調「用戶體驗」，而這也是響應式網站的技術重點。

響應式網站如何符合SEO優化?

1. 使用「 meta name=viewport」標記，向瀏覽器生命，網頁內容可根據設備尺寸調整大小;

2. 切勿使用robots.txt 或其他方式，以免Google無法正確解讀響應式網站的網頁配置;

3. 響應式網站上線後，使用Google行動設備相容性測試，檢測Googlebot能否正確解讀，並預防有不小心阻擋Googlebot抓取的情況。

4. 採用響應式圖片技術(Responsive Images)，除了根據設備尺寸調整圖片比例外，還可以結合CSS的@media篩選功能，對於不同設備尺寸，給予合適的圖片檔案，避免圖片檔案過大。

5. Google建議適應「適應性JavaScript(JavaScript-adaptive)」。

哪種手機網站製作方式對SEO優化比較好?

目前，Google官方表明，並不偏向哪種網站製作技術，只要確保Googlebot能存取網頁內容及網頁上所使用的CSS、JavaScript，就可以了。

事實上，哪種製作方式對SEO優化會比較好呢?

1. 重複內容

若手機版、電腦版網址不同，如果Googlebot判斷發生問題，如：沒有在手機版HTML文件著名「電腦版得對應網址」，會導致Google算法收錄不正確的網頁作為電腦版網址;或將手機版視為電腦版的「重複內容」，這在SEO優化處理上都相當棘手。

所以，關於這個問題，香港網頁製作公司推薦可以做到「同一網址」的適應性網站和自適應式網站會比較好。

2. 減少重定向或重定向錯誤

手機版和電腦版網址不同時，可能需要透過「重定向」，將用戶帶到合適的頁面。但是重定向極有可能會讓用戶花費太多時間等待，因而直接放棄或跳出。此外，設定重定向時也會常常發生錯誤，影響搜索結果的排名。

所以，關於這個問題，香港網頁製作公司推薦可以做到「同一網址」的適應性網站和自適應式網站會比較好。

3. Googlebot賺取有預算上限

當手機版和電腦版網址不同時，需要在各版本的HTML文件中指明各設備相對應的網址，Googlebot會順着這個指示，前往不同版本進行抓取。但手機和電腦網址不同，會導致Googlebot花費更多抓取預算到不同版本、相似內容上的網站。

這對規模小的網站，並不會有太大影響;但對規模大且更新頻率高的網站，會有較大的影響。

所以，關於這個問題，香港網頁製作公司推薦可以做到「同一網址」的適應性網站和自適應式網站會比較好。

4. 網頁加載速度

網頁加載速度一直是用戶體驗的主要指標，Google也曾經多次表示，網頁加載速度是決定自然排名、關鍵字廣告排名的因素之一。

一般來說，能專門為「手機設備」、「手機網絡寬頻」等量身訂做的HTML、JavaScript、CSS，是最能保證手機版網頁加載速度的方式之一。

自適應式技術，就是專門為手機裝置所開發，能充分為網頁加載速度優化的方式;響應式技術，則因為手機、電腦都存取同一份HTML、JavaScript、CSS，若網站層級、資料量大，有可能會影響網頁的加載速度。

除了按照SEO優化選擇網頁製作方式，還需要考慮其他方面。香港網頁製作公司表示，從網站開發時間來看，響應式設計>手機、電腦獨立網站>自適應網站設計。從管理及維護上看，響應式設計會比其他兩種方式更容易管理和維護;自適應式設計在管理上會比較容易，但維護上會相對複雜，因為需要同時維護多種版本網頁資源;手機、電腦獨立網站，無論管理還是維護，難度都比較高。至於成本，三種方式都需要視乎網站製作難度、需求、版面複雜度等決定。

因此，想選擇最適合的方式，就需要評估最適合的成本，以及考慮後續維護。