[技術文章]響應式網頁實例與SEO

之前我們有提到了不需另外做手機版網站,也能讓網站在行動裝置上正常瀏覽的響應式網頁設計,這次我們就來看看實例以及響應式網頁在做SEO時要注意的地方。
響應式網頁其實就是利用CSS來控制內容的呈現方式,而這種利用CSS控制的方式稱作”media querys”,利用CSS來控制在各不同螢幕寬度行動裝置上的顯示方式,其實這種作法在CSS 3.0之前就已經出現,但當時只分成screen、print,而在CSS 3.0支援的裝置則更多了,不過這並不在本文討論的範圍啦(笑)。
 

要怎麼把網站做成響應式網頁?

以響應式網頁的media querys來說,有兩種作法:第一種式針對各裝置寬度寫成好幾支CSS檔案,我們可以看到下圖中,只寫了3支CSS(電腦螢幕及兩種行動裝置螢幕寬度),實際上以現在行動裝置螢幕尺寸五花八門來看,一定會不只三支css。

圖一:針對各裝置寬度寫成好幾支CSS檔案

圖一:針對各裝置寬度寫成好幾支CSS檔案

第二種做法則是我們比較推薦的,將電腦及各種行動裝置的media querys都寫在同一支CSS檔案裡,如此可減少伺服器的request,增進網頁的讀取速度,對SEO來說是較好的。而且只要規劃得宜,通常不需要整支CSS重寫,只會有部份CSS需要針對行動裝置螢幕寬度來改寫,所以把各螢幕寬度的CSS寫在同一個檔案裡就可以了!

圖二:各裝置螢幕寬度CSS寫在同一個檔案裡

圖二:各裝置螢幕寬度CSS寫在同一個檔案裡

響應式網頁的版面配置

其實製作響應式網頁的最佳時機與SEO一樣,就是網站還在規劃的時候就加入這樣的概念最好,因為許多因素或限制會導致網站完工上線後,會無法修改或修改極為困難,故建議您在跟網站設計公司洽談時,就告知他們有響應式網頁與SEO的需求。
響應式網頁的製作與版面規劃息息相關,考驗著視覺設計師與網頁前端工程師的經驗與功力,我們在這就不細述太多,讓各位看看下面幾張圖來實際感受:

圖三:某餐廳網站電腦螢幕顯示

圖三:某餐廳網站電腦螢幕顯示

圖四:某餐廳網站行動裝置顯示

圖四:某餐廳網站行動裝置顯示

透過上面幾張圖我們可以發現,餐廳網站的響應式行動版網頁,讓不重要的W3C驗證及無障礙網頁認證跑到了版面的中間,以及其選單設計不當,在SEO的角度來看,訪客的易用性不佳造成的就很有可能是偏高的跳出率。
另外,這個餐廳網站的響應式行動版網頁,其CSS使用了display:none的屬性,這種作法存在著被搜尋引擎判定為作弊的可能性,對SEO來說反而產生負面的影響,這就是我們前面所提到網站在規劃之初「版面配置」的重要性。不過若是圖片區塊而非文字區塊的話,使用display:none是可以的哦!

圖五:CSS內使用display:none屬性

圖五:CSS內使用display:none屬性

最後,響應式網站除了最重要的易用性之外,再來就是版面配置、html結構、CSS撰寫,以上都須經過完整的規劃,才能讓整個網站在PC及行動裝置上美觀、好用又符合SEO!