你的网站可能正悄悄赶走一批用户——而你根本没察觉

上周帮朋友看一个新上线的本地生活网站，他挺兴奋：“SEO都做了，关键词也铺了，怎么流量还是上不去？”
我打开页面，用键盘 tab 键试了三秒，就卡在轮播图里出不来了。
他愣了一下：“啊？这……还能这么测？”

做优化的人总盯着搜索框里的排名，但忘了：网页的第一批“用户”，其实是读屏软件和搜索引擎爬虫。它们不会点鼠标、不会拖进度条、更不会猜图片里写了啥。你漏掉的那些细节，不是技术债，是直接关上的门。

为什么搜索引擎“看不见”你的页面内容？

你写了一篇很用心的攻略，结果搜不到？很可能不是关键词没埋好，而是爬虫压根没“读”到它。

搜索引擎爬虫没有眼睛，也没有耳朵。它看不到图片里的字，听不见视频里的讲解，也搞不定一堆 JavaScript 渲染出来的“假内容”。

之前帮一家社区团购平台排查，他们首页大 banner 上的“今日爆品：鲜肉小笼包限时抢”全打在图里。爬虫过去一看，只有 <img src="banner.jpg" alt=""> ——空的 alt，没文字，没结构。那段时间新品页几乎不被收录，运营还以为是被限流了。

其实只要两步：

• 所有关键信息必须是真实文字，别藏在图里、动效里、弹窗里；
• 图片补上说得清的 alt，比如“玻璃蒸锅套装，含3层蒸格和防烫手柄”，而不是“product_01.jpg”。

这事对视障用户是刚需，对爬虫是入口，顺手就做了。

放弃花哨的交互，用户和搜索引擎都受不了

见过太多首页做得像电影预告片：视差滚动、悬浮动画、渐入文字……
视觉上很抓人，但一开读屏软件，整个页面就开始“复读机模式”——因为 DOM 被反复重绘，读屏软件被迫一遍遍重读导航栏。

更麻烦的是，很多效果依赖 JavaScript 初始化。爬虫不执行 JS，或者只浅层抓取，结果正文还没加载出来，它已经翻页了。

我们帮一个职场课程网站砍掉了所有非必要动效，把核心课程列表改用纯 HTML + CSS 实现。改完后：

• 视障用户反馈“终于能一口气听完课程简介了”；
• 网站收录速度变快，新课上线第二天就被抓取；
• 移动端用户跳出率也降了不少——原来很多人根本等不到动画结束。

记住：内容不是装饰的陪衬，它是唯一该被优先看见的东西。

3个让你的网站既对用户友好又对搜索引擎友好的改动

1. 给所有非文字内容加上“文字替身”

这不是填个 alt="图片" 就完事。
你要想象自己在电话里跟一位完全没见过图的人描述它：

• 产品图 → “深灰色帆布托特包，宽肩带可调节，内侧有拉链暗袋和手机插袋”；
• 数据图表 → 在图下方紧跟着一个精简表格，列明核心数值和趋势；
• 视频 → 至少配字幕文件（.vtt），再加一段 200 字以内的文字摘要。

搜索引擎会把这些文字当页面“说明书”来读。你连 alt 都懒得写，它自然觉得这页内容不重要。

2. 用语义化HTML搭建骨架

还在满屏写 <div class="header">、<div class="main-wrap">？
读屏软件听到的，就是一串“div、div、div……”，像走进没门牌号的老胡同，根本分不清哪是门面、哪是厨房、哪是卧室。

换成这些标签，系统立刻能听懂：

• <nav> 是导航区，支持一键跳转；
• <main> 是主内容，读屏软件可直奔主题；
• <article> 包住每篇笔记或教程，方便聚合和理解上下文；
• 标题老老实实用 <h1> 到 <h3>，别全用 <div style="font-size:24px"> 伪装。

有个知识类公众号的静态页，只把 <div id="post-body"> 换成 <main>，两周后 Google 搜索结果里摘要显示更准了，点击率也涨了一截——结构清晰，真的会被看见。

3. 让所有交互都能用键盘完成

别假设用户都有鼠标、都爱点来点去。
有人手部不便，有人在用触控板不方便点小按钮，还有人只是习惯用 Tab+Enter 快速操作——包括搜索引擎爬虫，它本质上就是个“全自动键盘用户”。

检查这几件事：

• 按 Tab 键时，焦点是否能顺序落到每个链接、按钮、输入框上？
• 焦点落在元素上时，有没有明显视觉反馈（比如蓝色边框、底色高亮）？
• 弹窗按 Esc 能否关闭？表单提交后，有没有文字提示“已预约成功”？

之前修过一个医院挂号页：确认按钮只绑了 onclick，键盘用户按回车毫无反应。加上 onkeydown="if(event.key==='Enter') submitForm()" 后，不仅投诉没了，后台数据显示“提交失败重试”次数也少了近一半——原来真有不少人一直靠回车操作。

别把“无障碍”当成负担，它其实是你的排名杠杆

无障碍不是加功能，是去掉障碍。
你加的 alt，是给读屏软件读的，也是给爬虫当文本索引的；
你理清的 <h2> 层级，是帮用户快速扫读的，也是让搜索引擎判断内容权重的依据；
你确保的键盘可操作性，是照顾行动不便者的，也让爬虫能顺着链接稳稳爬到下一页。

而且，这些改动常常带来“溢出价值”：

• 字幕不只服务听障用户，也帮通勤族在地铁里看清重点；
• 高对比度配色不只为色觉差异者，也让所有人屏幕反光时看得更清楚；
• 清晰的标题结构，不只方便读屏，也让普通用户一眼抓住逻辑主线。

它不是额外工作，是你本该做好的基本功。

今天就能做的1件事

打开 Chrome 浏览器，访问你的网站首页，然后：
✅ 关掉鼠标（拔掉、盖住、或者单纯提醒自己“不用它”）；
✅ 只用键盘：按一次 Tab，看焦点落在哪；继续按，观察是否能顺序访问到导航、主标题、文章链接、按钮；
✅ 遇到卡住、跳不出、按了没反应的地方，截图记下来；
✅ 今天下班前，把第一个卡点修掉——比如给那个没 alt 的 banner 图补上描述，或者给按钮加上 tabindex="0"。

这个测试不需要工具、不装插件、不注册账号，5 分钟就能做完。但它会暴露你网站最真实的“可访问缺口”。