在进行移动端适配与收录的时候, 其核心逻辑其实非常简单。这个逻辑只有一个要点可以总结出来。那就是搜索引擎, 这里包括了百度以及Google等主流搜索平台。它们在自己去抓取你的站点, 并进行索引处理的过程中。会分别针对桌面端的情况, 以及移动端的情况, 去生成各自独立的页面快照内容。
如果你的移动端页面存在响应式布局缺失、关键内容被折叠隐藏, 或者viewport声明错误的情况, 搜索引擎会要么无法正确抓取移动端版本, 要么将移动端页面判定为低质量内容, 最终直接不予收录或者降权, 所以以下按优先级列出必须逐项排查的5个关键点。
移动端适配的5项核心检查
1. Viewport这个声明, 必须得是存在状态, 并且还得是正确的, 这个是硬性要求。
在页面的head部分里面, 必须要去加上那个meta标签, 它里面的name属性要写成viewport, content属性的值要写width=device-width, initial-scale=1, 如果把这一条给弄丢了, 就会导致搜索引擎用桌面端的宽度去把页面渲染出来, 这样就会直接让移动端的适配功能完全失效。
2. 关键内容不得因为适配这个情况而丢失掉。在响应式布局的那个环境里面, 不能通过使用display:none或者是visibility:hidden这样子的方式, 把移动端的那些正文、导航、内链之类的重要内容给隐藏掉。
搜索引擎是会去识别这些被隐藏的内容的, 并且会判定你的做法不符合要求, 也就是适配不达标的那一种情况。
3. 字体与可点击区域达标。正文字体不能小于12像素, 也就是要大于等于12像素, 一般建议大家用14像素或者更大的尺寸, 可点击的元素之间的距离也必须不小于8像素。如果间距太小, 移动端用户在操作的时候, 很容易出现困难的情况。
4. 页面加载性能, 移动端网络环境是比较差的状态的, 首屏加载的时间一定要被控制在3秒以内这件事, 压缩图片、启用懒加载、减少第三方脚本这些都是基本的操作。
5. 移动端专属URL的一致性。若是选择了使用独立域名来搭建移动端的网站这样的一种处理方案, 那就得在桌面版本的这个网站还有移动设备所访问的这个页面之间, 把对应的代码给设置正确了。与你必须把这个代码标签加上进去, 不这样的话搜索引擎那边它就没办法正确地对应上那两个不同的版本了。
移动端收录的排查路径
如果发现当前的移动端页面没有被搜索引擎收录的话, 那么就请按照下列这个顺序来进行排查工作吧。
使用搜索引擎提供的“抓取诊断”或者“URL检查”工具来提交移动端 URL, 然后查看抓取状态与渲染结果。如果抓取时返回了 403 编码、404 编码, 或者是出现了超时情况, 那么就优先解决服务器端的问题。
你需要去检查那个robots.txt文件里, 是不是有针对移动用户代理的屏蔽规则, 比如说在User-agent: *下面, 是不是把Disallow: /m/写错了。
请先进行确认, 看看这个移动端页面上到底是包不包括index这个指令, 同时还要看看它有没有被noindex这个标记给给标记了。
大家在使用移动设备访问网页的时候, 需要查看这个页面里面是不是存在大量的由JavaScript这种代码进行动态渲染的内容, 然后导致服务端没有把完整的HTML输出出来, 如果搜索引擎没有办法去执行这些JS代码的话, 那么它看到的就会是一个空白的页面。
高频疑难与解决
桌面端已收录但移动端未收录: 90%的原因是页面在移动端访问的时候返回了重定向链, 比如从 / 跳转到 /m/ , 再跳转到 /m/index , 或者是因为移动端使用了 JS 框架来进行接管, 这就导致服务端最终输出的内容变成了空的。
使用"查看源码"的功能去对比桌面端和移动端那边的原始HTML代码, 以此方式来得出具体的断点位置。
适配之后收录排名反而出现了下降的情况: 这通常都是因为在做响应式改造的过程当中, 错误地把H1标签给删掉了, 或者是内链结构被重构了, 结果导致权重分散。需要使用站点地图工具来对比一下改造前后内链层级的深度, 一定要确保核心页面不会超过连续点击3次就能到达。
大家看到了各个终端展示的样子并不一致, 这一现象需要引起重视, 具体来说我们需要去检查CSS媒体查询断点到处的设置情况, 并且要确保在设备的宽度为三百二十像素、七百六十八像素以及一千零二十四像素等关键尺度下的布局表现是良好的, 不能出现内容溢出的问题, 也不能出现元素重叠的情况。
实操建议
把上面那些排查的事情都做完之后, 要去搜索引擎的后台管理那里，提交那个移动端的网站地图也就是sitemap这个东西, 并且把自动索引加速这个功能给打开。
然后建议每过两个星期这样, 就用真的手机设备去抽查一下那些核心页面的情况, 注意不要用模拟器哦, 要去看页面渲染的效果好不好, 还有加载花了多长时间, 把这个事情变成一个经常都要做的一种检查规定。
要是你们的团队里面没有专门用来干移动端性能优化的人手, 那么就可以去看看gname.xin这个地方发布的_mobile自适应自查清单模板_, 一行一行地去打钩确认好, 等所有这些事儿都确认完了再放到线上去, 这样可以减少后面反复修改返工的情况发生。
总结
在移动端进行适配以及争取收录工作, 它并不是说, 只要你做了响应式的设计, 就可以高枕无忧认为大功告成了的, 我们而是要去切实地保证搜索引擎在进行移动端抓取页面的时候, 它所抓取到的这个页面, 和桌面端的信息是保持完全等价的状态的, 同时性能也必须得达标, 并且不能出现任何的技术阻断问题, 要是我们能把这 5 个检查点, 给强制性地固化为上线之前必须百分之百通过的一个固定流程, 那么移动端所带来的流量增量, 才真正地能够稳稳地落到你的站点上面来。
