SEO搜索引擎优化：基础、案例与实战（第3版）
第9章
移动网站SEO
目录 Contents
移动端网页的发展趋势
移动端网页的版式设计
本章实训
移动网站的优化
移动端网页的发展趋势
随着移动互联网的不断发展，用户通过移动设备获取信息的需求也越来越大。目前，
使用移动设备访问网络的用户已经超过了PC端用户。因此，建立移动端网站并进行移
动端网站SEO以获取更多的移动端流量是网站发展的必然趋势。
相较于PC端网站，移动端网站具有以下优势。
1 2 3
更多的用户 更高的转化率 更好的用户体验和更高的互动性
目录 Contents
移动端网页的发展趋势
移动端网页的版式设计
本章实训
移动网站的优化
移动端网页与PC端网页的差别
移动端网页和PC端网页的显示效果如图所示，它们的区别主要体现在以下3个方面。
页面宽度：PC端网页的页面宽度是固定的；而移动端
网页的宽度是自适应的。
用户体验：PC端网页在移动设备上显示会被缩放后，
需要上下左右频繁地滑动页面，用户体验非常差；而
移动端网页转为移动设备而设计，只需上下滑动来显
示内容，更方便用户浏览。
页面结构：PC端网页的页面是由固定的宽度、高度不
同的板块组成；而移动端网页通常只在水平方向上进
行分割，且每个板块的宽度都与屏幕宽度相同，会自
适应屏幕宽度，显示内容的数量。
设计移动端网页的版式
栅格系统通过一系列的行
与列的组合来管理页面布局。
栅格系统不仅可以让网页的信
息呈现更美观易读、更具可用
性，而且，还可以使网页更灵
活与规范。
PC端网页和移动端网页的
栅格系统是不同的，如图所示
为PC端、iPad和手机三者的
栅格模式。
1．栅格系统
设计移动端网页的版式
由于移动设备的屏幕较小，一般会减去PC端网页的一些不太重要的功能，并设置相应
的链接，使其在其他页面中进行显示。如图所示为功能减去示意图。这样可以优先展示重
要的内容，吸引用户并提高用户的浏览体验。
2．功能减去
设计移动端网页的版式
面对小屏幕，在功能减少的情况下，修饰也必须减少。在PC端中可以显示的加强视
觉效果的一些设计，在移动端则要去掉。
一般情况下，PC端的设计除了要满足功能的要求外，还要考虑版面的设计，通过合
理的图片和文字版面布局来加强用户的观感。其版面的功能和视图安排一般各占50%左
右。但是在手机等移动端，功能和视图的安排要变成功能占80%，视图占20%。
3．修饰减去
设计移动端网页的版式
PC端页面的布局方式通常是固定的，这种
固定式布局在转向移动端时，因为屏幕的变化
就会出现每个板块虽然上面很整齐，但是下面
出现了镂空的现象，这样会使视觉效果不美观。
4．流式布局
固定版式布局
流式布局
转换为流式布局后，则会根据屏幕的大小
自动调整布局结构，因为流式布局是以百分比
进行设置的，非常灵活，且出现空余的部分会
自动填充，这就使得网页布局更加紧凑，浏览
效果也更好。
目录 Contents
移动端网页的发展趋势
移动端网页的版式设计
本章实训
移动网站的优化
适配方式
独立移动网站是专门针对移动设备设计和开发的移动端网站，使用和PC端网站不同的
子域名进行访问。
独立移动网站有着更为简洁和优化的内容和功能，可以提高网站的访问速度和用户交
互性。然而，独立移动网站需要单独维护和更新，会增加开发和管理成本。
因为独立移动网站使用了不同的网址，搜索引擎无法自动识别它们与PC端网站之间的
对应关系。因此，可以采用3种方法来告知搜索引擎。
1．独立移动网站
1 2 3
自动跳转 Head标签 移动适配提交
适配方式
实现动态服务的关键在于服务器能够根据用户访问的设备类型动态地返回不同的网页
代码。在这个过程中，用户代理（User Agent）头信息是非常重要的，因为它能够告诉服
务器用户使用的设备类型、浏览器类型和版本等信息，从而使服务器可以根据这些信息判
断用户的设备类型，并返回相应的网页代码。
在Apache服务器中设置Vary HTTP头信息，需要在配置文件中找到以下代码。
2．动态服务
删除该行代码前面的“#”号，使其生效。
然后在配置文件中添加如下代码。
适配方式
由于网址一样、PC端和移动端浏览器所获得的代码也一样，所以对于SEO来说，响应
式设计的优势非常明显，搜索引擎不用检测PC端网页和移动端网页的对应关系。
要实现响应式布局，首先需要设置视口（viewport），告诉浏览器和搜索引擎要按照设
备的宽度自动调整排版。设置代码如下。
3．响应式设计
此外，还需要添加如下代码，告诉搜索引擎此网页同时适合PC端和移动端。
最后在CSS样式文件中通过媒体查询设置不同设备下的CSS样式，以实现在不同设备
中采用不同的网页布局，其代码结构如下。
前期准备
确定好适配方式后就要开始做前期准备，主要包括以下3个方面的内容。
使用HTML5域名的选择 服务器的选择
应选择正规服务器提供
商，避免与大量的垃圾
网站共用IP，提高上网
的速度与稳定性。
用户对网站的第一印象
是域名，其应该越短越
好，在方便记忆的同时
便于操作。
HTML5本身有着多设
备跨平台、自适应网站
设计和即时更新的优点。
搜索引擎友好度
搜索引擎友好度是获得搜索引擎收录的基础，在优化时需要注意以下6个方面。
内容或者链接就都要以文
本的形式进行显示。
机器可读
使用户快速了解网站的
内容，找到信息。
结构扁平
使搜索引擎快速有效地抓
取信息。
网状的链接
方便搜索引擎抓取和判断
网页内容。
简单的URL
保证主旨清晰、内容简洁
即可提高网站排名。
涵盖主旨的锚文本
应设置为301永久性重定向。
设置合理的返回码
排名优化
和PC端网站的排序一样，移动端网站的排序也受到多个因素的影响，同时移动端网站
的排序还有自身的一些优化要求。
整体上，移动搜索的结果是由PC的搜索结果加上移动端的一些特点进一步调整而来的。
百度会优先对移动页面进行排序，所以没有移动页面的网站的首要任务就是进行网站的移
动化，移动化后即针对网站内容进行优化。移动网站与排序需注意以下4个方面。
持续不断的优质原创内容 地理信息的标注 加载速度的提升主旨明确的标题
良好展示
良好展示的重点是网站页面。主要有两个要求：一是页面主题中的文本颜色应与背景
颜色有明显的差异；二是页面中的文本内容应段落分明、排版精良。
移动网页的浏览体验图 某移动网站的链接
良好展示
移动网页的内容展示应注意以下内容。
正文 文本链接 交互手势 音/视频 文档页
App下载Flash其他可点
击区域
图片
搜索结果
页
表单页产品页
良好展示
在网站建设上还要考虑增益体验，这样不仅可以受到搜索引擎的优待，同时还可以改善
用户体验，增强用户黏性，提高用户回访率。如图所示这两者都有助于增强网站增益体验。
新浪移动网站中的增益体验 百度中的增益体验
良好展示
网站增益体验主要包括以下4项内容。
01 02
0304
访问路径上的增益
提供导航或面包屑导航，
以去往上一级或下一级页
面。
效率上的增益
提供拨打电话、地址定位
等功能，使用户不用切换
到其他应用即可使用。
页面效果增益
提供夜间模式、字体大小
调整、背景图片/颜色设
置等功能。
输入方式上的增益
提供语音输入、图像输入、
扫码等功能。
目录 Contents
移动端网页的发展趋势
移动端网页的版式设计
本章实训
移动网站的优化
实训背景
为了提升网站的移动SEO效果，了解不同移动端网站的适配方式是至关重要的。因
此，可以通过EDGE浏览器查看不同网站的动态服务、独立移动网站和响应式布局，以
便更好地了解它们的特点和适用场景，为移动端网站的SEO提供更多的思路。
掌握如何评估不同移动端网站的适配方式，了解不同适配技术的优缺点，并能够
将适配技术应用于网站。
培养独立思考能力和团队协作能力，能够分析不同适配方式的选择依据，并与团
队成员合作，共同制订适合网站的移动端优化策略。
实训要求
在EDGE浏览器中查看百度、京东商城和jQuery移动网站的适配方式。
实训步骤
1 查看百度PC端网页 2 查看百度移动端网页
实训步骤
3 查看京东商城PC端网页
4 查看京东商城移动端网页
实训步骤
5 查看jQuery PC端网页
6 查看jQuery移动端网页
SEO搜索引擎优化：基础、案例与实战（第3版）
学习进步
海量图书方便查询
免费申请样书
下载配套资源
优惠购书
成为作者
更多样书申请和资源下载需求，请登录人邮教育社区
（)
囊括各大品类，您想要的应有
尽有
教师免费申请样书，
我们将安排快递迅速送达
教学视频、PPT课件、教学案例、
习题答案、模拟试卷等丰富资源
免费下载
教师可以申请最低折扣
学生直接优惠购买图书
欢迎写文章／投稿，我们强
大的编辑团队将为您提供专
业和高效的编辑出版服务
