RWD 响应式网站设计是什么?对 SEO 的好处有哪些?

作者:码迷
作者:码迷SEO
发布时间:2019-12-04 13:00:01阅读:5点赞:0

RWD 响应式网站设计是什么?对 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 文本上,应该要注明 meta name=”viewport” 的标签,让浏览器清楚知道,「宽度尺寸变化」与「网页的内容缩放」两者的比例。

  • 利用 meta viewport 标签,控制浏览器大小变化时,网页内容的宽度、缩放该如何调整。
  • 注明 width=device-width ,让网页内容可以依据「设备宽度」,灵活运用设备的独立像素,可以自由改变排版。
  • 注明 initial-scale=1 ,让网页 CSS 像素:设备独立像素=1:1,如此一来,无论手机直立、横放,都能确保网页能完整运用屏幕宽度。

Viewport安装前后差异示意图左图:有设置 viewport,右图:没有设置 viewport (此为仿真图,画面截取自美丽佳人Marie Claire)

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

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

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

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

例如,当屏幕宽度小于、等于 600 px 时,背景会是 lightblue ,当屏幕宽度大于 600 px,背景会是 lightgreen。

上面的 CSS 写法,可以。(使用鼠标拉右侧窗口的宽度,就可以发现颜色变化。详见下图)

下图是跑出来的结果:

网站RWD优化-CSS随屏幕宽度效果变化屏幕宽度小于、等于 600 px 时,背景会是 lightblue

网站RWD优化-CSS随屏幕宽度效果变化当屏幕宽度大于 600 px,背景会是 lightgreen

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

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

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

  • 使用 meta name=”viewport” 标记,向浏览器声明,网页内容可以配合设备宽度调整大小。
  • 请勿使用 robots.txt 或其他方式,挡住 Googlebot 检索任何网页资产 (CSS、JavaScript 和图片),以避免 Google 无法正确解读 RWD 的网页配置。
  • RWD 响应式网站上线后,使用 ,检验 Googlebot 是否能正确解读,并且预防有不小心挡掉 Googlebot 的状况。
  • 使用响应式图片技术(Responsive Images)。除了可依据设备宽度,调整图片比例之外,在高分辨率设备上,也可给予高分辨率图片。另外,也可以结合 CSS 的 @media 筛选功能,对于不同设备宽度,给予适合的图片文档,避免图片文档过大。
  • Google 建议使用「适应性 JavaScript( JavaScript-adaptive)」。

RWD、AWD 哪种对 SEO 比较好?手机桌机各为不同网址,对 SEO 不好吗?

关于 RWD、AWD、手机桌机独立网站,SEO 最好的是哪一种?Google 官方表明,并没有偏好哪一种技术,只要你确保 Googlebot 可以访问网页、可以访问到网页上所使用的 CSS、JavaScript,就没有问题。

但是,如果单纯从「Google Search」官方说明,来探讨「RWD、AWD、手机桌机不同网址」哪种对 SEO 比较好呢?

SEO 项目RWD 响应式设计AWD 自适应设计独立的手机网站
解决重复内容问题
减少重新导向
节省 Google 检索预算
加快网页加载速度
  1. 重复内容

当手机版、电脑版网址不同时,如果 Googlebot 判定发生问题,例如,没有在手机版 HTML 文本,注明「电脑版的对应网址」,导致 Google 算法收录不正确的网页作为电脑版网址。或是,将手机版页面视为桌机版的「重复内容」,这两种情况,都会让 SEO 上的处理相当棘手。

所以,就「重复内容」议题,推荐使用能做到「单一网址」的 RWD、AWD。

  1. 减少重新导向(转址)、减少重新导向错误

当手机版、电脑版网址不同时,可能在切换设备时,会透过「重新导向」,将用户带到适合的页面。像是,用手机打开电脑版网址时,会自动转址到手机版网址。

但是,重新导向让用户等待更久,更容易放弃,更容易直接跳出。另外,在设置重新导向时,也常会发生错误。例如,应该用 302 重新导向,却误用 301 重新导向,或是导向到错误的网址,都会影响搜索的排名表现!

所以,就「减少重新导向错误」议题,推荐使用能做到「单一网址」的 RWD、AWD。

  1. Googlebot 的爬取也是有预算上限(Crawl budget)

什么是 Googlebot 的爬取预算呢?基本上,Googlebot 会依照网站流量、更新速度,来决定造访这个网站的频率,以及 Googlebot 投入在这个网站的时间。。

当手机版、电脑版网址不同时,需要在各版本的 HTML 文本,指明相对应的电脑版、行动版网页。Googlebot 可顺着这个指示,前往不同版本,继续爬取。

但是,比起「手机、电脑单一网址」来说,「手机、电脑网址不同」花费了 Googlebot 更多的爬取预算在不同版本、相似内容上面(手机版、电脑版)。

若网站规模小,不会有什么影响。但对于越大的网站(有效 URL 数量在 1,000 以上的网站)、更新频率越高的网站(例如每日都有新文章产生),会有较大的影响。

所以,就「节省 Googlebot 的爬取预算(Crawl budget)」议题,推荐使用能做到「单一网址」的 RWD、AWD。

什么是爬取预算(crawl budget)?网站速度优化,从Google Page Speed Insights开始

  1. 网页加载速度

网页加载速度一直是「用户体验」主要指针,Google 曾经重申多次,!

那么,若是在同样的「硬件条件」、「网络带宽」下,该选择哪种技术架设网站呢?(继续往下探讨之前,要声明一下,这边的技术探讨,是以广泛来说,不代表绝对的优劣。

能专门为「手机设备」、「手机网络带宽」,来量身订做 HTML、JavaScript、CSS,是最能保证手机版网页加载性能的方式之一。

AWD 自适应式技术,就是专门为手机设备所开发,能充分为网页加载的性能优化。

而 RWD 响应式技术,手机、电脑都是访问同一份 HTML、JavaScript、CSS,若网站层级、数据量庞大,有可能会造成文档肥大,影响网页加载速度。

Mobile SEO必学!行动版网站健检Search Console帮你做

除了 SEO,经营网站,还有其他重点需要考察

拥有一个网站,除了 SEO,还有其他重点需要考察。我们粗略分成两大部分来看:

  1. 手上能运用的资源:人力、开发时间、管理及维护成本。
  2. 网站内容需求:内容数据量、功能复杂度、画面要求程度。
评估项目手机、电脑独立网站RWD 响应式设计AWD 自适应设计
开发时间快速~中较久
管理及维护较难管理及维护,因为同时有 2 个网站。较容易管理、维护。较容易管理,但维护上复杂,因为可能同时有多种版本网页资源。
费用视网站复杂度,费用由低到高不等。依照网站需求、版面复杂度,费用由低到高不等。依照网站需求、版面复杂度,费用由中到高不等。

因为 RWD、AWD 在 SEO 先天条件上差异不大,反而与「工程层面」、「功能需求层面」有高度相关,诚心建议在选择之前,协同「网站产品经理」(清楚了解网站诉求、功能、SEO 项目)以及「工程开发团队」(清楚了解工程层面的复杂度、后续维运成本),双方一起讨论,评估最适合的成本,并有利于后续维运,才是最适合的选项!

参考数据:

本文网址:https://www.mamioo.com/seo-advanced/9mv17eo27wa5

本站内容均为「码迷SEO」原创整理,未经授权严禁采集转载,违者必究。
评论
相关文章
  • SEO必学策略「长尾关键字」,让你锁定动机明确的搜索访客

    SEO必学策略「长尾关键字」,让你锁定动机明确的搜索访客

    或许各位对长尾关键字已经不陌生了,但你知道它之于 SEO 与 SEM 扮演什么角色、又能如何运用在节省成本、挖掘商机吗?本篇从「长尾关键字」的基本概念到营销策略的应用一次搞懂,让他成为你的得力助手!继续阅读>>

    29浏览8赞2019-11-09 13:40:01
  • AMP能提高网站SEO?完整AMP信息告诉你

    AMP能提高网站SEO?完整AMP信息告诉你

    AMP为Google所推出的计划,目的是为了加速手机版的浏览体验。AMP主要适用在产出内容为主的网页,例如新闻媒体、美食评论、电影评论。AMP的架设方式可以透过埋设代码或者透过wordpress的插件来安装。而AMP对于SEO而言,是一个可间接帮助网站的工具,awoo非常鼓励大家安装。继续阅读>>

    0浏览0赞2019-12-11 11:20:02
  • 黑帽SEO是什么?不可不知的黑帽介绍与风险!

    黑帽SEO是什么?不可不知的黑帽介绍与风险!

    不论你是企业老板、营销人、或者工程师,都可能有机会听到黑帽SEO或者白帽SEO,究竟什么是黑帽SEO跟白帽SEO呢?我们透过这次的文章来说明让你了解SEO的路上可能会有的陷阱以及风险! 搜索引擎是用户与内容的桥梁,而SEO就是要加强、拓宽这座桥梁,所以SEO应当是配合搜索引擎的政策,让用户可以顺利找到对他们有帮助的内容。正确的SEO,是可以达到用户、搜索引擎、网站三者皆赢的结果。 黑帽SEO是用欺瞒争取排名的方式,在黑帽SEO运行的过程几乎不会对用户体验有任何加分,例如在无关网站购买外连来诱骗用户进站、在网站内容安插一些用户不可见的关键字(透过使字体极小化、与背景同色等方式)。黑帽SEO基本上就是在与搜索引擎抗衡,搜索引擎的目标是将好的内容送到用户面前,而黑帽SEO就是不优化内容却硬将网站塞给用户。 搜索引擎会透过网站的链接结构、内容是否正确符合消费者需求、网站是否安全可信等诸多理由来排序每个网站在每个不同关键字的排名,但搜索引擎不可能无所不知,算法有结构有逻辑,能被拆解,比如说PageRank,比如说EAT,比如说内容品质。这也就造就了他有可能被人为不当操作排名。 听起来很棒,对吧?继续阅读>>

    27浏览2赞2019-11-15 11:00:01
  • Mobile SEO必学!行动版网站健检Search Console帮你做

    Mobile SEO必学!行动版网站健检Search Console帮你做

    「手机端可用性」报表随着 Search Console 的版本更新,也重新推出了新的接口来继续提供服务,这次就让我们来了解新版的「手机端可用性」有什么功能、该如何使用吧!继续阅读>>

    13浏览2赞2019-11-24 09:40:01
  • 网站速度优化,从Google Page Speed Insights开始

    网站速度优化,从Google Page Speed Insights开始

    网页速度是影响SEO很重要的因素。网站速度所影响的层面不仅是SEO排名、曝光,也包含用户体验。若网站速度过慢,用户易因不耐等待而离站,导致企业错失许多商机。本文介绍网站速度对于SEO的影响,并了解Google Page Speed Insights,以及如何进行网站速度优化。继续阅读>>

    41浏览6赞2019-10-30 14:02:30
  • International SEO:前进国际市场,多语系网站SEO一定要做的4件事

    International SEO:前进国际市场,多语系网站SEO一定要做的4件事

    当企业有意将商品、服务推广至国际市场,除了传统的方式如参展、贸易商合作、当地设点以外,也有人以在Amazon、eBay等平台架站作为第一步,但是考察使用上的弹性与长期的品牌经营,经营网站则是一种不可错过的做法。经营网站能随时调整以符合市场需求、并且能够透过数据随时掌握成效,而网站要能有效导入访客,SEO优化依然必须要做的功课,即使原本就有一个成效良好的网站,当目标市场改变时,并不是仅仅将原有的内容翻译过后就能在不同市场获得相对应的成效。 经营网站瞄准国外市场,追求好成效最重要的原则就是让访客有「宾至如归」的感受,他们进到网站时不能有走错地方的感觉,除了必须使用目标市场的惯用语言、文本叙述自然流畅外(不要以为Google翻译是你的好朋友啊,他不是!),以下还有4大地雷是千万不能踩的: 虽然如今在全球高达92.86%,但是并非所有的地区都以Google为最主流的搜索引擎,如中国家里是以百度为主,俄罗斯则是流行Yandex。所以在策略制定前的调查千万别忘了确认当地最主流的搜索引擎,作为日后的主战场,并追踪网站在该搜索引擎的表现如何。 在选定针对不同市场应锁定的关键字时,我们要做的远远不只是翻继续阅读>>

    3浏览0赞2019-12-08 09:00:02