不少站点在桌面端看着挺完整,用手机打開却換了一副面孔:導航折叠、正文缩水、图片撑破布局,甚至關键内容全藏在彈窗後面。現在搜尋引擎基本以移動端版本作為主要索引依據,也就是说,蜘蛛看到的那一版,很可能就是你手机上打開的那一版。桌面端做得再漂亮,移動端過不了關,收錄和展示都會打折扣。
移動端與桌面端,内容應当一致
最常见的坑是「移動端少给一点」:桌面端有的參數表、價格說明、規格列表,移動端為了頁面轻快就砍掉了。如果這些内容對頁面主题重要,砍掉就等于告诉搜尋引擎這頁没那么多信息。比較稳妥的做法是:核心正文、标题、主要連結保持一致,只在展示形式上做取舍。
- H1 與主标题一致,不要移動端換成一句营销口号;
- 正文主体(含關键表格、列表)两邊都要有,可以折叠,但別刪除;
- 结构化資料、canonical、meta 描述两邊保持同一套。
几種移動化做法,各有代價
响應式设計
同一套 URL、同一份 HTML,靠 CSS 适配屏幕。维護成本最低,也是目前最省心的選擇。需要注意的是別用 JS 按屏幕宽度替換正文,那會让蜘蛛拿到两種内容。
獨立移動域名或子域
m.example.com 這類结构,需要做好双向标注:移動頁指向桌面頁,桌面頁也要指回移動頁,同时保證移動端能正常被抓取,別把 m 站整段挡在 robots.txt 里。歷史上常见的错誤就是移動站不让抓,结果索引里一直是老的桌面版。
動態返回不同 HTML
同一個 URL 根據 UA 返回不同内容,理论上可行,但容易出問题。如果一定要做,務必保證两邊内容等價,並且不要對搜尋引擎的 UA 返回與普通用戶不同的版本,那属于另一類風險。
移動端自己的抓取障碍
- 彈窗與浮层遮挡:首屏被優惠券彈窗盖住,蜘蛛解析到的正文位置很靠後;
- 懒加载没兜底:图片、長列表滚動才加载,没有 noscript 或预渲染,蜘蛛可能只拿到占位图;
- 视口缺失:没有 viewport 声明,移動端被当成 980px 宽渲染,内容被压缩成一小块;
- 拦截滚動:為了做全屏体驗鎖死滚動,反而让内容無法展開;
- 字体與脚本阻塞:移動端先加载一個大字体文件,首屏 HTML 迟迟不完整。
上线前後可以這样自查
- 用手机真机打開核心頁面,看首屏有没有正文,而不是只有導航和 banner;
- 查看頁面源代碼(不是開發者工具渲染後的 DOM),確認正文是否在初始 HTML 里;
- 检查移動頁與桌面頁的标题、canonical、robots 指令是否一致;
- 用搜尋引擎官方的移動端測試工具或抓取工具跑一遍核心 URL;
- 從服務器日誌里篩選移動蜘蛛的 UA,看看它抓的是不是關键頁面。
把它放進日常巡检
移動端的問题往往是渐進出現的:改了一次模板、上了一套新组件、接入了一個第三方脚本,都可能让首屏變空。與其等收錄掉了再回头查,不如把移動端检查固定成模板改版後的一個動作。
判断标准其實很简單:手机打開這頁,不用滚動、不用点開任何東西,能不能看到這頁在讲什么。蜘蛛的判断和你的第一眼,差不太多。