移动端弹窗怎么设不伤SEO？高转化弹出层搭建实操指南

为了在移动设备上弹出层既能够实现高转化，又不会损害SEO效果, 这里面的核心原则其实只有一条。也就是不能遮挡住首屏的主要的内容, 必须让用户能够一键关闭这个弹窗操作, 也不能够强制要求用户去跳转页面或者执行下载行为, 同时触发弹出的时机一定要安排得比较合理。

只要满足了上面所说的这四点情况之后, 那么无论是想要提升转化率, 还是要避免触发Google那边对于侵入式全屏弹窗的判定规则, 亦或是防止被百度冰桶算法治理, 这些都是可以做到的。

哪些弹窗会直接伤到SEO

以下这种情况属于搜索引擎明确规定要治理的问题范围, 所以在项目上线之前必须是逐个情况进行排查确认这一项工作。

全屏遮罩式的弹窗会完全把正文部分给遮住, 导致用户如果不先把这个弹窗关掉的话, 就没有办法去看正文里的内容, 因为这种行为会被Google认定为是一种具有侵入性的内页全屏广告形式, 进而对网站进行直接的降权处理。

在弹窗的里面, 嵌着“下载App”和“打开App”这两个按钮, 而且关闭的流程就被设计成了二次确认的情况, 或者是误触的情况, 这个是百度冰桶算法重点去打击的一项内容。

关闭按钮的尺寸要小于四十四乘四十四像素, 而且它可能藏在遮罩层的底部, 导致用户不容易点击到。

在页面加载完成的这个时间点, 就直接弹出来了, 而用户还没有产生任何滚动或者是停留的这种行为。

弹窗里面的显示内容, 和咱们现在这个页面的主题是完全没有任何关系的, 这种情况纯粹就是在搞广告轰炸操作。

高转化弹窗的四个设计要素

1. 触发时机为: 用户在页面滚动, 直至滚动位置达到百分之五十至百分之七十的情况下, 或者在页面停留的时间超过三十秒之后再进行触发操作, 严格禁止执行加载即弹出的动作。

2. 内容匹配就是, 那个弹出窗口的行动号召按钮, 必须跟当前的这个页面有着非常强的相关性, 如果说是在文章页面上面弹窗的话, 那么弹窗的内容就应该是让相关的工具或者是资料得以领取, 如果是在产品的落地页上面弹窗的话, 那么弹窗的内容就应该是限时优惠, 总之就是要避免出现那种跨越了不同主题的强硬塞入内容的现象。

3. 就是单一行动, 意思是一个弹窗里面只放置一个主要的按钮, 这个按钮上面的文字得是用动词来开头的情况, 比如像是“领取”或者“立即查看”这些说法, 坚决不把多个不同的选项堆叠在一块儿。

4. 尺寸克制是具体的要求, 这个要求包括弹窗的宽度, 它不能超过屏幕宽度的百分之八十, 还有高度, 它也不能超过百分之六十, 关闭按钮的位置要在右上角, 它的面积必须大于或等于四十四乘以四十四像素, 要使用原生的button元素来做。

技术实现要点

使用当前页面的HTML、CSS以及JS来直接完成弹窗的渲染工作, 不要通过iframe进行嵌套处理, 以此来实现保证搜索引擎能够抓取到弹窗外面的全部正文内容的效果。

当弹窗显示出来的时候, 不要去变动网页里面那个叫body的位置以及滚动情况。这样能够防止页面发生CLS也就是布局产生跳变的情况出现。

用户可以直接看到首屏里面的核心内容, 这里面的东西包括了标题和第一段文字以及主要的图片, 这些东西的显示动作是不需要等着那个弹窗被关闭之后才去进行的。

当那个弹窗被关闭之后, 就需要把它从网页文档对象模型里面完整地移除掉, 不要剩下一点儿遮罩层在那里, 以免影响到后续的用户交互操作。

针对移动端的画面进行适配处理, 具体操作是把弹窗这个容器的最大宽度设定为百分之九十的屏幕可见区域, 然后在水平方向上实现居中显示, 最后在底部保留足够的间距, 这个间距的大小要参考手机系统提供的安全区域底部的 inset 数值。

对于同一个用户来讲, 在二十四个小时的时间范围之内最多只能触发一次这样的情况, 我们需要通过使用localStorage以及cookie的方式来把这些记录给保存下来, 进而去避免因为反复弹出某些提示而让用户感到反感的事情发生。

上线前合规检查清单

关闭按钮的大小要大于等于44×44px, 它的位置放在弹窗的右上角, 点击的时候不会进行二次确认。

让那个遮罩层的透明数值小于或者等于零点三, 从而保证说主内容始终是看的清楚并且可以阅读的。

在弹窗的内部区域并没有自动开始播放的音频内容以及视频内容。

并没有这种, 就是必须先点击字母X这个动作, 然后才可以继续查看后面内容的阻断机制存在。

弹窗内不存在强制进行下载行为的入口, 也不存在强制打开App的入口。

我们拿了一台真机的苹果手机和一台真机的安卓手机做了测试, 结果是关掉弹窗之后该页面还能稳稳当当地正常滚动、点击以及返回。

可以使用PageSpeed Insights来进行一次运行操作, 以此来确认弹窗并没有拉高LCP, 也没有增加INP, 同时也没有产生CLS。

需要去使用百度搜索资源平台以及Google Search Console来检查移动端的抓取状况, 然后确认一下是否存在弹窗的问题, 因为这个弹窗问题会导致内容变得无法访问。

要实现前面所说的那些全部情况, 那么这个弹窗就能成为一个能够进行转化的合规性的组件, 这样的话它既能去贡献点击量以及留下资料, 同时也不会给搜索引擎去留下任何来进行降权或者是治理的借口。

常见问题

《移动端弹窗怎么设不伤SEO？高转化弹出层搭建实操指南》主要讲什么？

为了在移动设备上弹出层既能够实现高转化，又不会损害SEO效果, 这里面的核心原则其实只有一条。

文章提到了哪些重点？

触发时机为: 用户在页面滚动, 直至滚动位置达到百分之五十至百分之七十的情况下, 或者在页面停留的时间超过三十秒之后再进行触发操作, 严格禁止执行加载即弹出的动作；

文章给出了哪些建议？

当弹窗显示出来的时候, 不要去变动网页里面那个叫body的位置以及滚动情况。