响应式网站设计对SEO优化有什麽影响

响应式网站设计(Responsive Web Design，简称RWD)，即网页内容适应各种屏幕尺寸，也就是同一个HTML文本，通过CSS编写，能根据不同设备的尺寸，无论是直立还是横放，都能适应且流畅播放。那麽，响应式网站设计对SEO优化有什麽影响呢?

建立手机版网页的方式有哪些?

一般来说，建立手机版网页的方式主要有三种，分别是：响应式网站设计、自适应式网站以及手机、电脑各自为独立网站。下面，南宁网页制作公司为大家详细介绍一下。

响应式网站：手机和电脑是采用同一个网址，同一个HTML文本，但CSS编写会根据不同屏幕尺寸来改变网站排版。

自适应式网站(Adaptive Web Design，即AWD)：虽然手机和电脑的网址可做到完全一样，但在不同设备开启时，会优先判断哪种设备，再给予不同的CSS，继而改变排版。

手机、电脑各自为独立网站(Separate URLs)：手机和电脑各自制作独立网站，且网址也不一样。

如何制作响应式网站?

要制作响应式网站之前，首先我们先了解下响应式网站的原理是什麽?

响应式网站是通过检查屏幕的尺寸，让网页内容可直接改变文字大小、行距、整体排版、区块位置、图片缩放等，满足各种设备的版面设置。

制作响应式网站的方式：

1. 设置viewport

响应式网站会根据「屏幕尺寸」，即viewport，来改变网页内容的排版。在HTML本文上，应注明「meta name=viewport」的标签，让浏览器知道」尺寸变化」与「内容缩放」的比例。

要点：

* 利用meta viewport标签，检测浏览器大小变化时，网页内容的尺寸改如何调整;

* 注明width=device-width，让网页css像素：装置独立像素=1:1，确保设备的摆放都能完整适应屏幕尺寸。

2. 使用 CSS @media

响应式网站能根据设备尺寸改变版型，其最大的功劳就是CSS模式。

要点：

* 在CSS中，大型元素应使用「相对」尺寸，避免使用「绝对」尺寸，如：设定width: 100%，而非使用width: 344px，确保所有设备都能正常显示。

* 使用CSS @media，应针对不同屏幕，套用不同样式。

制作响应式网站对SEO优化有什麽影响?

在SEO优化中，Google一直强调「用户体验」，而这也是响应式网站的技术重点。

响应式网站如何符合SEO优化?

1. 使用「 meta name=viewport」标记，向浏览器生命，网页内容可根据设备尺寸调整大小;

2. 切勿使用robots.txt 或其他方式，以免Google无法正确解读响应式网站的网页配置;

3. 响应式网站上线後，使用Google行动设备相容性测试，检测Googlebot能否正确解读，并预防有不小心阻挡Googlebot抓取的情况。

4. 采用响应式图片技术(Responsive Images)，除了根据设备尺寸调整图片比例外，还可以结合CSS的@media筛选功能，对於不同设备尺寸，给予合适的图片档案，避免图片档案过大。

5. Google建议适应「适应性JavaScript(JavaScript-adaptive)」。

哪种手机网站制作方式对SEO优化比较好?

目前，Google官方表明，并不偏向哪种网站制作技术，只要确保Googlebot能存取网页内容及网页上所使用的CSS、JavaScript，就可以了。

事实上，哪种制作方式对SEO优化会比较好呢?

1. 重复内容

若手机版、电脑版网址不同，如果Googlebot判断发生问题，如：没有在手机版HTML文件着名「电脑版得对应网址」，会导致Google算法收录不正确的网页作为电脑版网址;或将手机版视为电脑版的「重复内容」，这在SEO优化处理上都相当棘手。

所以，关於这个问题，南宁网页制作公司推荐可以做到「同一网址」的适应性网站和自适应式网站会比较好。

2. 减少重定向或重定向错误

手机版和电脑版网址不同时，可能需要透过「重定向」，将用户带到合适的页面。但是重定向极有可能会让用户花费太多时间等待，因而直接放弃或跳出。此外，设定重定向时也会常常发生错误，影响搜索结果的排名。

所以，关於这个问题，南宁网页制作公司推荐可以做到「同一网址」的适应性网站和自适应式网站会比较好。

3. Googlebot赚取有预算上限

当手机版和电脑版网址不同时，需要在各版本的HTML文件中指明各设备相对应的网址，Googlebot会顺着这个指示，前往不同版本进行抓取。但手机和电脑网址不同，会导致Googlebot花费更多抓取预算到不同版本、相似内容上的网站。

这对规模小的网站，并不会有太大影响;但对规模大且更新频率高的网站，会有较大的影响。

所以，关於这个问题，南宁网页制作公司推荐可以做到「同一网址」的适应性网站和自适应式网站会比较好。

4. 网页加载速度

网页加载速度一直是用户体验的主要指标，Google也曾经多次表示，网页加载速度是决定自然排名、关键字广告排名的因素之一。

一般来说，能专门为「手机设备」、「手机网络宽频」等量身订做的HTML、JavaScript、CSS，是最能保证手机版网页加载速度的方式之一。

自适应式技术，就是专门为手机装置所开发，能充分为网页加载速度优化的方式;响应式技术，则因为手机、电脑都存取同一份HTML、JavaScript、CSS，若网站层级、资料量大，有可能会影响网页的加载速度。

除了按照SEO优化选择网页制作方式，还需要考虑其他方面。南宁网页制作公司表示，从网站开发时间来看，响应式设计>手机、电脑独立网站>自适应网站设计。从管理及维护上看，响应式设计会比其他两种方式更容易管理和维护;自适应式设计在管理上会比较容易，但维护上会相对复杂，因为需要同时维护多种版本网页资源;手机、电脑独立网站，无论管理还是维护，难度都比较高。至於成本，三种方式都需要视乎网站制作难度、需求、版面复杂度等决定。

因此，想选择最适合的方式，就需要评估最适合的成本，以及考虑後续维护。