SEO 百科

事件与交互

本页目录

事件是浏览器发出的信号，页面上一有事发生，它就通知脚本^[1]。做 SEO 的人要关注它，因为有一类内容只在点击、滚动或悬停之后才出现。爬虫能执行脚本，却不会有这些操作。

事件在页面里的用途

事件由访客的动作或页面状态的变化触发。MDN 列举的触发场景包括：在元素上选择、点击或悬停，按下按键，调整窗口大小，页面结束加载，以及表单提交^[1]。

脚本要监听某类事件，就得给它挂一个处理函数。处理函数是一段代码，事件发生时运行。写法上给元素调用 addEventListener：

const btn = document.querySelector("button");
btn.addEventListener("click", () => {
  document.body.style.backgroundColor = "red";
});

这段代码给按钮的 click 事件挂上处理函数。按钮被点击时，页面背景色才会改变。

点击展开的折叠面板、滚到底部才追加的列表、悬停才显示的菜单，都属于这一类。内容不在源码里，要等事件触发后由脚本写进页面。

难处出在触发条件上。Google 说明，延迟加载的实现不应当依赖滚动或点击，“Google 搜索不会与您的网页互动”^[2]。渲染服务会执行脚本，但不会替访客点按钮、滚页面。

渲染阶段会把脚本跑完，产出最终的 DOM。这一步按队列排队，不跟着访客的节奏走。抓取和收录是两步，百度把搜索的工作原理概括为从互联网抓取网页、建立索引数据库、再将索引库中的数据展现给用户^[4]。

权限类交互同样不成立。Google 提醒，Googlebot 可能会拒绝用户权限请求，需要用户授权的功能对它不可用^[3]。例如页面要调用摄像头，爬虫拿不到这个权限。

所以两边能做的事不一样。访客能触发的事件，引擎大多不会触发；访客可能拒绝的权限，引擎直接拿不到结果。

关键内容要默认可见。打开页面不做任何操作，正文和链接就应该出现在源码里。

延迟加载要绑在可见性上，不绑在动作上。Google 推荐的做法有浏览器内置的延迟加载、IntersectionObserver 接口，以及数据进入视口就加载的脚本库^[2]。视口指浏览器当前可见的那块区域，元素进入这块区域就触发加载。

无限滚动还要照顾分页。Google 建议给每个分块一个独立的固定网址，并用绝对页码，例如 ?page=12^[2]。这样爬虫能按网址逐页抓取，访客也能分享和刷新具体一页。

过大的脚本也会拖慢交互。2024 Web Almanac 的统计显示，页面 JavaScript 体积的中位数在移动端达到 558 千字节^[5]。

无。