移动页面的优化
无论采用哪种方式进行移动 SEO,移动版本都要针对移动设备的特点进行页面优化。首先要注意两点。第一,前两章讨论的传统 SEO 原则及方法,绝大部分同样适用于
移动网站,如关键词研究、网站架构和 URL 设计、页面关键词布局、文案写作、导航及内部链接系统设计等。不要把移动优化当成和 PC 优化完全不一样的技术,说到底,它们为搜索用户提供高质量内容的目标是一样的,只不过需要额外考虑一些手机用户的特殊体验需求。
第二,无论哪种方式,移动页面都要使用自适应设计,即使都是手机,屏幕宽度差别也很大,而且还有横竖放置的不同,移动版本必须根据屏幕宽度调整页面宽度及布局。其他方面的优化基本上是围绕两个目标进行的:一是在手机上能正常浏览、点击、
使用。二是速度要快,毕竟手机的上网速度目前还比不过 PC 的上网速度。为实现这两个目的,需要考虑的地方包括如下几点。
- 确保手机用户能正常浏览、点击
这是用户体验问题,而用户体验是移动 SEO 的重要内容之一,其中包括很多细节,如下所示。
- 字号要足够大,用户无须缩放就能看清文字。通常至少要使用 12px 的文字。
- 文字与背景有足够的对比度。通常建议浅色背景,深色字体,对比度要够大。
- 行距足够大,使内容看起来不至于太过拥挤。
- 用户上下滑动页面是必要的,但不要出现需要左右拉动横向滑动条才能看全内容的情况。这对 PC 页面也适用。
- 排版清晰、美观,段落分明,布局合理。既不要使页面过于拥挤,影响用户阅读,也不能有过多空白,浪费屏幕空间。
- 主体内容与次要内容(如导航、广告、翻页等)有明显视觉差异及空间区隔,使用户能快速定位内容位置。
- 第一屏中,主体内容要占主要位置和篇幅。百度建议主体内容至少占屏幕 50%
以上,且位于屏幕的中间位置。
- 广告不能面积过大,比 PC 版还要更保守。百度要求第一屏广告不能超过屏幕面积的 10%,Google 要求广告不要超过屏幕面积的 25%。
- 不要使用弹窗、悬浮、插屏等阻碍用户浏览的广告,也不要使用抖动、闪动、轮播等干扰用户阅读的广告。
- 页面正文(从标题到翻页)之间不要插入广告。
- 任何可点击区域(包括文字、图片、按钮等)都要足够大,方便手指能够点击到。可点击区域之间有足够的距离,避免用户误点击。
- 手机横竖方向变化时,页面要自动调整显示方向和宽度。视频要支持横屏、竖屏播放。
- 确保用户能正常使用
除了确保用户能浏览页面,还要检查用户是否能完成页面功能。
- 购物或其他功能足够简单,不要让用户在手机上填写很长的表格。
- 避免放置需要特殊插件才能访问或播放的内容,如特殊格式的视频、音频。建议用 HTML5 嵌入视频或动画。
- 功能按钮(播放、下载、加入购物车、客服聊天等)位置固定,符合用户习惯,能正常使用。
- 功能按钮不要与其他内容(如广告)位置重叠,避免用户误点击。
- 正文篇幅较长时,可以使用展开全文功能,但不要在第一屏就使用。功能按钮要有清楚的“展开全文”之类的标注,与其他内容要有足够的间距,避免用户误点击。
- 不要强制用户下载 App,也不要通过功能按钮误导或强制用户打开 App。
- 确认复杂的 JavaScript 效果或功能在手机上是可以使用的。
- 重要内容不要通过 JavaScript 调用,即使用户手机能调用,搜索引擎也不一定能调用。
- 提高页面打开速度
百度在 2020 年 3 月发布的移动落地页体验白皮书中建议,页面第一屏内容要在 1 秒内加载完成,这不是一个能够轻易达到的目标。百度以前多次给页面的打开速度提出建议,从 4 秒,减到 3 秒,又减到 2 秒,要求越来越高。
提高移动页面打开速度的方法和 5.16 节中讨论的方法是一样的,只是要求比 PC 页面还要高。
还有一个要注意的地方,设置图片懒加载时,不能依靠用户互动行为(左右滑动、点击、打字等)触发懒加载,因为蜘蛛不会做这些行为。
- 非主体内容、功能精简
由于屏幕宽度、面积的限制,通常手机版本页面要精简导航系统,包括顶部导航、面包屑和侧栏导航。
同样,广告、页脚、相关文章、tag 链接等 PC 页面上常见的内容,手机上也经常难以放下。非必要的内容和功能在移动页面上可以考虑精简。
响应式设计的页面一般是通过 CSS 折叠、隐藏非必要内容。
动态服务和独立移动站则可以直接在 HTML 代码中删除非必要内容,减少 HTML及 JavaScript 下载量。但页面主体内容以及重要 meta 标签(尤其是标题标签、描述标签、 robots 标签)、结构化数据,移动版和 PC 版要保持一致。
建议 SEO 充分利用百度资源平台和 Google Search Console,里面的很多工具都支持移动网站,如移动 Sitemap、移动索引量、移动搜索关键词数据、URL 转向错误等。
本文档为站内渲染。原始文件本地路径:saas/source/seo-llm/SEO实战密码-markdown-第06章-移动-SEO-移动页面的优化-_index-c6ff63.md(仅本地保留,不入库不部署)