移动搜索的占比已破60%同时，我们就不得不将模板JS项目的SEO的优化工作先从移动端的体验入手来优化了。可即便在选用了如Vue/React等主流的前端框架后，也常常会发现页面的收录和关键词的排名都依然不理想，这其中最大的一个原因就是我们还停留在了PC的SEO思路中，完全忽略了移动端的用户体验以及移动端的搜索引擎的特点和规则.。借助以真实的案例将模板JS项目的三大移动端的优化的“命门”拆解开来，从解决长期困扰我们的小收录难题到对页面的权重的进一步的提升，让你都能通过简单的几步就能实现流量的三级跳。

一、为什么你的模板JS网站不被收录？

但在百度的蜘蛛对JS渲染的页面的抓取中，却经常会遇到两大拦路虎：一是那些通过异步的方式将内容加载的页面的内容就被完全的给“瞒过”了蜘蛛的眼睛；二是由于移动端的渲染速度的比较慢，直接的将页面的JS文件都下载了下来，造成了对服务器的极大的负担。不过也就最近一两年，一个不起眼的电商案例就让我们对react的单页应用的可优化性又有了更深的体会，据说他们的React单页应用上线就三个月的时间就就把收录量都不到20%，后来经过一系列的调研和诊断才发现了主要的原因就是他们的首屏的关键的内容都被包裹在了动态的路由里了。

具体解法分三步走：

‌预渲染关键路径‌：用Nuxt.js/Next.js的静态生成功能，把商品列表页等核心路由预渲染成HTML

依托于对懒加载的优化，我们可以将首屏的组件全部先加载好再渲染，也可以将非首屏的组件改为交互的触发加载，如点击事件的触发等比如将之前的import('./Modal')的写法直接改成点击事件的触发就能实现懒加载的效果了

将通过对nginx的配置将百度的蜘蛛UA都返回预渲染的版本，而将真实的用户都返回 CSR 的版本，提高了用户的首屏时间和首屏的转化率

凭借对这套组合拳的实测实证不难发现，其能将之前的15%的收录率一举提到了78%，同时对TTFP的控制也能将其控制的十分之几近的1.2秒之内。

二、移动端关键词布局的黄金法则

但在移动端的应用中却常常把传统的PC端的“关键词”堆砌了，结果却适得其反，反而造成了用户的不便。经我们的优化服务后，该旅游类的SPA站点的在移动端的“周边游的攻略”一系列的关键词的搜索中也都能大幅的提高了排名，从而为其带来了不少的用户流量。其中就有一个关键词的“周边游的攻略”就一直都没能在移动端的搜索中取得理想的排名，经我们对其网站的相关的优化后，其在“周边游的攻略”的关键词的排名也都得到了大幅的提高了。由此可见，其实问题就出在了内容的结构上，移动端的用户对信息的需求都更趋紧凑的高密度的信息。

有效做法包括：

通过将长的篇幅的内容拆分为若干个相对独立的段落，并分别用H3的形式为其打上标签，如“三处不错的冷门露营地”“露营的必备装备清单”等，对于读者来说更能将其内容的脉络和脏腑有一个清晰的把握，对于作者来说也更能将其内容的脉络和脏腑有一个清晰的把握，从而更好的将其内容的脉络和脏腑展现的淋漓尽致

‌图片ALT双保险‌：不仅添加alt="北京周边游帐篷图片"，还要在相邻段落自然包含关键词

将常见的用户疑问通过“用户还问”板块的形式在文章的底部统一的将其用JSON-LD的形式标注出来，从而提高了用户的阅读体验和文章的可读性

调整后该站点移动端流量环比增长214%，尤其长尾词"周末亲子游去哪"排名从第8页跃升至第2页。

三、让移动页面权重飙升的交互设计

百度最新的MIP2.0标准特别强调用户行为数据。有个B2B企业站做过对比测试：A版本用传统分页器，B版本用无限滚动+骨架屏，结果B版本的停留时长高出47%，页面浏览量增加2.3倍。

关键优化点：

将页面的首屏的最关键的行动点都提前到了导航栏的右侧，使得用户的操作路径更直接更直观，也将原本的底部的CTA的作用转化到了更高的位置上，从而更好的提升了用户的点击率和转化率

‌减少输入摩擦‌：用<input type="tel">自动调起数字键盘收集手机号

通过对微交互的优化，我们将表单的提交不再仅仅停留在简单的弹窗的形式，而是将其升级为更加的温柔的浮动toast的提示并在3秒后自动的关闭从而给用户带来更加的舒适的操作体验

不仅将该站的转化率从原来的1.8%一路提升到了5.4%，更是将核心的词“工业设备采购”稳住了前三的强势地位。

四、三个被低估的移动端SEO工具

根据Lighthouse的移动报告我们尤其需要重点关注的就是“避免了巨大的网络负载”和“减少了大量的未使用的JavaScript”这两方面的优化了

‌百度搜索资源平台-移动专区‌：里面的"快速收录"功能对JS站点特别友好

‌Screaming Frog的SPA模式‌：能模拟抓取JS渲染后的DOM树

有个工具类网站用这套工具组合，两周内就发现了137个移动端阻塞问题，修复后自然流量增长了89%。

五、移动适配的终极验证方法

当你做完所有优化后，千万别忘了这个验证三部曲：

采用在百度App上对测试的页面的扫码的过程中我们就可以对其所呈现的页面的外观作出初步的判断手段，主要的就是看一下其是否存在白屏的现象.

只需在搜索框中输入“你的域名+关键词”就能快速的在Google中将该网站的内容过一遍并展示出来了

通过对百度站长平台的“百度移动适配”工具的准确的提交我们就能更好的优化我们的网站的移动端的用户体验了

去年有个金融案例，他们发现移动搜索展示的摘要还是老版本的电话号码，通过适配工具更新后，咨询量当天就涨了30%。

六、持续优化的数据看板该盯哪些指标

移动SEO不是一锤子买卖，建议每周监控：

移动端的逐步普及之际，近期移动端的收录增长率都高于5%/周，呈现了较快的增长趋势

以3秒的警戒线为标准的首屏加载时间就足以让我们感受到网页的快慢了

下拉刷新深度（优质内容能达到2.5屏）

借助对该母婴社区的这一微小的“看板”上的调整，我们惊奇地发现了一个奇妙的现象：每一秒的视频的加载速度的减慢，都会直接将用户的停留率降低9%，而最终的最关键的结果就是优化了了22%的跳出率。

从技术层面看，模板JS的移动SEO确实比传统网站复杂，但回报也更丰厚。那些认为"移动适配就是加个viewport"的开发者，正在把流量红利拱手让人。记住：百度蜘蛛如今已经学会用Chrome 85内核渲染页面，你的优化策略也该进化了。