之前我們有提到了不需另外做手機版網站，也能讓網站在行動裝置上正常瀏覽的響應式網頁設計，這次我們就來看看實例以及響應式網頁在做SEO時要注意的地方。
響應式網頁其實就是利用CSS來控制內容的呈現方式，而這種利用CSS控制的方式稱作”media querys”，利用CSS來控制在各不同螢幕寬度行動裝置上的顯示方式，其實這種作法在CSS 3.0之前就已經出現，但當時只分成screen、print，而在CSS 3.0支援的裝置則更多了，不過這並不在本文討論的範圍啦(笑)。
要怎麼把網站做成響應式網頁?
以響應式網頁的media querys來說，有兩種作法：第一種式針對各裝置寬度寫成好幾支CSS檔案，我們可以看到下圖中，只寫了3支CSS(電腦螢幕及兩種行動裝置螢幕寬度)，實際上以現在行動裝置螢幕尺寸五花八門來看，一定會不只三支css。
圖一：針對各裝置寬度寫成好幾支CSS檔案
第二種做法則是我們比較推薦的，將電腦及各種行動裝置的media querys都寫在同一支CSS檔案裡，如此可減少伺服器的request，增進網頁的讀取速度，對SEO來說是較好的。而且只要規劃得宜，通常不需要整支CSS重寫，只會有部份CSS需要針對行動裝置螢幕寬度來改寫，所以把各螢幕寬度的CSS寫在同一個檔案裡就可以了！
圖二：各裝置螢幕寬度CSS寫在同一個檔案裡
響應式網頁的版面配置
其實製作響應式網頁的最佳時機與SEO一樣，就是網站還在規劃的時候就加入這樣的概念最好，因為許多因素或限制會導致網站完工上線後，會無法修改或修改極為困難，故建議您在跟網站設計公司洽談時，就告知他們有響應式網頁與SEO的需求。
響應式網頁的製作與版面規劃息息相關，考驗著視覺設計師與網頁前端工程師的經驗與功力，我們在這就不細述太多，讓各位看看下面幾張圖來實際感受：
圖三：某餐廳網站電腦螢幕顯示
圖四：某餐廳網站行動裝置顯示
透過上面幾張圖我們可以發現，餐廳網站的響應式行動版網頁，讓不重要的W3C驗證及無障礙網頁認證跑到了版面的中間，以及其選單設計不當，在SEO的角度來看，訪客的易用性不佳造成的就很有可能是偏高的跳出率。
另外，這個餐廳網站的響應式行動版網頁，其CSS使用了display:none的屬性，這種作法存在著被搜尋引擎判定為作弊的可能性，對SEO來說反而產生負面的影響，這就是我們前面所提到網站在規劃之初「版面配置」的重要性。不過若是圖片區塊而非文字區塊的話，使用display:none是可以的哦！
圖五：CSS內使用display:none屬性
最後，響應式網站除了最重要的易用性之外，再來就是版面配置、html結構、CSS撰寫，以上都須經過完整的規劃，才能讓整個網站在PC及行動裝置上美觀、好用又符合SEO！
