SEO如何使用于手机网站 2013-10-19 来源: 卓杰科技(www.zhuojie.cc) 浏览:

之前我们有提到了不需另外做手机版网站,也能让网站在行动装置上正常浏览的响应式网页设计,这次我们就来看看实例以及响应式网页在做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来说反而产生负面的影响,这就是我们前面所提到网站在规划之初「版面配置」的重要性。

CSS內使用display:none屬性图五:CSS内使用display:none属性

最后,响应式网站除了最重要的易用性之外,再来就是版面配置、html结构、CSS撰写,以上都须经过完整的规划,才能让整个网站在PC及行动装置上美观、好用又符合SEO!

在线咨询

020-89202380