移动端友好检测 - 测试移动端SEO兼容性
检查HTML代码的移动端友好性，包括viewport Meta、字体大小、点击目标和响应式设计。
使用说明
- 查看网页源码（右键→查看页面源码）并复制所有HTML。
- 将HTML粘贴到上方文本区域。
- 点击"检测移动端友好性"运行所有移动端兼容性检测。
- 查看评分和各项检测结果——绿色表示通过，黄色表示警告，红色表示失败。
- 按照每个失败或警告检测项的建议改善移动端友好性。
关于移动端友好SEO
移动优先索引
自2019年起，Google对所有新网站使用移动优先索引，这意味着它主要抓取和索引内容的移动版本进行排名。对移动端不友好的网站在移动搜索和桌面搜索结果中排名都会更低。全球超过60%的网络流量来自移动设备，因此移动端优化对SEO成功和用户参与至关重要。
Viewport Meta标签
Viewport Meta标签（<meta name='viewport' content='width=device-width, initial-scale=1'>）是移动端兼容性中最关键的单一元素。没有它，移动端浏览器会以桌面宽度（约980px）渲染页面然后缩小，导致文字和元素极小。'width=device-width'将视口设置为设备屏幕宽度，'initial-scale=1'防止初始缩放。Google要求此标签才会将页面视为移动端友好。
点击目标大小
Google建议所有可点击元素（按钮、链接、表单输入）应至少为48×48 CSS像素，相邻目标之间至少有8px间距，以防止意外点击。点击目标过小是移动端可用性问题的主要来源。如果链接或按钮太小或太近，用户必须放大才能准确点击，导致挫败感和高跳出率。
响应式设计技术
响应式设计使用CSS媒体查询使布局和内容适应不同屏幕尺寸。关键技术包括：弹性网格（使用百分比而非固定像素）、弹性图片（max-width: 100%）、在断点处应用不同样式的媒体查询、避免宽度超过视口的固定宽度元素，以及对字体大小和间距使用相对单位（em、rem、vw、vh）而非绝对像素。
主要特性
- 检查viewport Meta标签的存在和正确配置
- 检测可能需要放大才能在移动端阅读的小字体
- 识别在现代移动设备上无法工作的Flash/插件使用
- 检查表明响应式设计的响应式CSS媒体查询
常见应用场景
- 在Google索引前审查现有页面的移动端友好性问题
- 检查第三方页面模板和主题的移动端兼容性
- 诊断页面未通过Google移动端友好测试的原因
- 对开发者进行移动端SEO要求和最佳实践培训