什么是响应式网站设计?对于网站SEO优化有什么好处?

谈到手机版网页,最常被提到的就是RWD。究竟什么是RWD呢?RWD,也就是响应式网站设计,英文为Responsive Web Design。Responsive响应式代表着网页内容可以依照显示器宽度,马上反应在排版上。也就是说,同一个HTML文本,可以通过CSS编写,依照不同装置(手机、电脑、平板)显示器宽度,无论直立或横放,都能流畅的缩放、更改版面配置、甚至是控制网页上的文字显示与否。

一般提到「建立手机版网页」,有三种做法,分别是:RWD、AWD、手机、电脑独立网站。

RWD,Responsive Web Design,响应式网站

手机、电脑同网址。同一个HTML文本,CSS能依照不同显示器宽度的条件,来改变排版。

AWD,Adaptive Web Design,自适应式网站

手机、电脑网址,可以做到完全一样。不同的装置开启时,会先判定装置是哪一种,来给予不同的CSS,进而改变排版。

Separate URLs,手机电脑各自为独立网站,不同网址

手机、电脑网址不同。保持电脑版网站不变,另外做一个专门给手机用的小尺寸网站。所以也可能会有不同的HTML文本、CSS、JavaScript档案。

把「Separate URLs」,拿来这边跟RWD、AWD讨论,有点奇怪。毕竟,AWD网站也是可以做成「手机、电脑网址不同」,但是为了顺应下面本篇文章主轴,会针对SEO优缺点来讨论,就暂且让我们用比较粗浅的方式来分类。

什么是RWD响应式网站(Responsive web design)?

要开始讨论对SEO影响之前,可以先了解什么是RWD响应式网站?原理是什么呢?RWD是通过检查显示器宽度(浏览器宽度),让网页上的内容,可以改变文字大小、行距、整体排版、区块位置、图片缩放等等样式。无论你是用手机开网页、电脑开网页、平板开网页,网页内容的版面配置,都可流畅的依照浏览器宽度来改变,用一套网址就可以走天下啦!

RWD重要的精神:设置检视区viewport

RWD最重要精神,就是会依据「显示器宽度」,也就是检视区宽度(viewport),来改变网页上的内容排版。在HTML文本上,应该要注明metaname=”viewport”的标签,让浏览器清楚知道,「宽度尺寸变化」与「网页的内容缩放」两者的比例。

利用metaviewport标签,控制浏览器大小变化时,网页内容的宽度、缩放该如何调整。

注明width=device-width,让网页内容可以依据「装置宽度」,灵活运用装置的独立像素,可以自由改变排版。

注明initial-scale=1,让网页CSS像素:装置独立像素=1:1,如此一来,无论手机直立、横放,都能确保网页能完整运用显示器宽度。

RWD重要的精神:使用CSS@media,针对不同显示器宽度,套用不同样式

RWD网页,之所以可以随著装置显示器宽度来改变版型,最大的功劳就是来自于CSS样式。简单来说,我们可以用CSS设定条件,在不同的显示器宽度之下,可以使用不同的字型大小、行距、版面位置。

在CSS中,大型元素使用「相对」宽度,避免使用「绝对」宽度。因为各家手机、平板,显示器大小不同,设定了「绝对」宽度,难以保证可以在所有类型装置上正常显示。例如,在顶层div,设定width:100%,而不要使用width:344px。

使用CSS@media以针对不同大小的显示器套用不同的样式。

@media的语法,是一种简易的条件筛选功能,可以套用在CSS样式中,当显示器宽度符合条件,就会查询到相对应的CSS样式。

RWD响应式网站上关于SEO的设置

RWD响应式网站有哪些设定,与SEO相关呢?在SEO领域中,「使用者体验」一直是Google非常强调的。例如:手机网页是不是好操作?按钮够不够大?文字间距够不够宽?流程是不是顺畅?浏览的画面是不是有符合显示器宽度?网页载入时间是不是够快?

这些都是SEO中,非常重要的一环,也刚好是RWD技术的重点。

使用metaname=”viewport”标记,向浏览器声明,网页内容可以配合装置宽度调整大小。

请勿使用robots.txt或其他方式,挡住Googlebot检索任何网页资产(CSS、JavaScript和图片),以避免Google无法正确解读RWD的网页配置。

RWD响应式网站上线后,使用Google行动装置相容性测试,检验Googlebot是否能正确解读,并且预防有不小心挡掉Googlebot的状况。

使用响应式图片技术(ResponsiveImages)。除了可依据装置宽度,调整图片比例之外,在高解析度装置上,也可给予高解析度图片。另外,也可以结合CSS的@media筛选功能,对于不同装置宽度,给予适合的图片档案,避免图片档案过大。

建议使用「适应性JavaScript(JavaScript-adaptive)」。

  • 本文由 发表于 2019年9月11日11:00:44
  • 转载请务必保留本文链接:http://www.tunan321.com/archives/847
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: