移动端优化 - SEO 基础入门：程序员的出海流量实战

移动端优先：不是"兼容"，而是"主场"

请记住这个事实：Google 现在是一家移动搜索引擎。

自 2019 年实施 Mobile-First Indexing（移动优先索引） 以来，Google 只根据你网站的手机版内容来决定排名。哪怕你的桌面版网站做得像 3A 大作一样华丽，如果手机版烂得一塌糊涂，你的排名就是零。

结论：设计和开发时，先看手机端效果，再看电脑端。

响应式设计 (Responsive Design)：唯一的选择

过去，我们可能会做 m.example.com 这样的独立手机站。现在不要这么做了。 维护两套代码是噩梦，而且容易造成权重分散。

最佳实践：使用一套代码，通过 CSS Media Queries 适配所有屏幕。如果你使用 Tailwind CSS，这简直易如反掌：

<!-- 手机单列，平板双列，桌面三列 -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  <div class="card">Content</div>
  <!-- ... -->
</div>

移动端优化的 4 个"致命细节"

很多开发者在 Chrome 模拟器里看着不错，真机一测就露馅。

1. 拇指法则 (Touch Targets)

手指比鼠标粗得多。

原则：任何可点击元素（按钮、链接）的尺寸至少要 48x48 px。
间距：按钮之间要有足够空隙，别让用户想点"取消"却误触"确认"。

2. 字体大小 (Font Size)

别考验用户的视力。

正文：绝对不要小于 16px。小于这个尺寸，iOS 浏览器在输入框聚焦时会自动放大页面，导致布局错乱。
行高：设置 1.5 或更高，让阅读不累。

3. 视口设置 (Viewport Meta)

这是移动端适配的"开关"。没有这行代码，手机浏览器会把网页当成桌面网页缩放显示，字小到看不见。

必须加在 <head> 中：

<meta name="viewport" content="width=device-width, initial-scale=1">

警告：千万不要加 user-scalable=no 禁用缩放，这严重违反无障碍标准（Accessibility）。

4. 避免水平滚动 (No Horizontal Scroll)

这是移动端体验的死刑。

检查：确保没有任何图片的宽度超过屏幕宽度 (max-width: 100%)。

CSS 技巧：

img, video {
  max-width: 100%;
  height: auto;
}

移动端 SEO 的隐形杀手：弹窗 (Interstitials)

Google 非常讨厌挡住主要内容的插页式广告或弹窗（尤其是那张"下载我们的 APP"的大图）。

惩罚：如果用户从搜索结果点进来，第一眼看到的是弹窗而不是内容，Google 会对该页面降权。
例外：Cookie 同意弹窗、年龄验证弹窗是允许的。
建议：使用顶部或底部的小横幅 (Smart Banner)，不要遮挡全屏。

如何测试？

不要只信赖 Chrome DevTools 的模拟器。它模拟不了真实的触摸手感和糟糕的 4G 网络。

真机测试：拿起你的手机，亲自刷一遍你的网站。
Google Mobile-Friendly Test：Google 官方测试工具（现已集成在 Search Console 中）。
Google Search Console：查看 "Experience" -> "Mobile Usability" 报告。如果这里有红色报错，必须立即修复。

小结

做移动端优化，就是为最坏的情况做设计：

屏幕很小（手机）。
手指很粗（触控）。
网速很慢（4G/信号差）。
环境很吵（注意力分散）。

如果你在如此恶劣的条件下都能给用户提供顺滑的体验，你的 SEO 表现绝对不会差。