富媒体内容需三层文本保障：基础层用描述性alt属性，增强层配figcaption说明上下文，语义层正文复述核心信息；音视频内嵌自然语言摘要；SVG含title和desc，Canvas配aria-label；SSR预渲染首帧文本骨架并同步JSON-LD结构化数据。
富媒体内容（如图片、视频、音频、SVG 动画）本身不可被搜索引擎直接理解，必须通过可读、可索引、可降级的文本描述来传递语义。处理的关键不是“要不要加文字”，而是“怎么加，才能在 JS 失效、爬虫不执行、网络异常或屏幕阅读器环境下依然准确传达信息”。
为图片提供多层文本回退
不能只依赖 alt 属性应付了事。需构建三层文本保障：
-
基础层：每个
<img>必须带alt，且是**描述性短语**（非关键词堆砌），如alt="React Router v6 useNavigate 异步调用报错的控制台截图"；纯装饰图写alt=""，不空着也不填“图片” -
增强层：对关键图，在下方紧邻添加
<figcaption>（配合<figure>），用一两句说明上下文，比如“图1：服务端渲染时 navigate 调用时机错误导致的 TypeError 堆栈” - 语义层：若图片承载核心论据（如对比表格图、流程图），正文前或后必须有对应文字复述，确保即使所有媒体加载失败，结论仍完整可读
视频与音频的强制文本镜像
搜索引擎无法解析视频画面或音频内容，<video> 和 <audio> 标签内的文本内容就是唯一可信摘要来源：
- 在
<video>或<audio>开闭标签之间，直接写一段**自然语言摘要**（非“点击播放”这类提示），例如：<video controls>本视频演示了如何在 Next.js App Router 中使用 server actions 实现表单提交并触发 revalidation，全程无客户端状态管理。</video> - 避免仅放
<source>标签后留空——空内容会被爬虫忽略，也违反无障碍要求 - 长视频建议配套提供带时间戳的文字稿（
<details><summary>展开文字稿</summary>…</details>），既服务用户，也向爬虫暴露高密度语义
SVG 和 Canvas 的可访问性兜底
内联 SVG 或 Canvas 绘制的图表、图标、交互元素，极易变成“视觉黑箱”：
立即学习“前端免费学习笔记（深入）”；
- 内联 SVG 必须含
<title>（用于鼠标悬停提示）和<desc>（用于屏幕阅读器），二者内容不同：<title>是简短名称，<desc>是功能/数据说明，例如：<svg aria-labelledby="chart-title chart-desc"><title id="chart-title">2024 年各框架 SSR 支持度</title><desc id="chart-desc">Next.js 占 78%，Nuxt 为 62%，Remix 为 45%，Gatsby 已停止维护 SSR 文档</desc></svg> - Canvas 必须配
role="img"+aria-label或aria-labelledby，且 label 内容需体现动态结果（如“当前加载进度：63%”而非静态“进度条”） - 任何由 JS 渲染的 SVG/Canvas 图表，初始 HTML 中应保留一份简化版 HTML 表格或列表作为语义锚点，确保首屏静态 HTML 就含核心数据
动态媒体组件的 SSR 强制注入
用 React/Vue 构建的轮播图、画廊、交互式图表等，若仅靠客户端 JS 渲染，Googlebot 抓取到的就是空容器或占位符：
- 服务端必须预渲染出第一帧可见内容的文本骨架，例如轮播图至少输出第一个图的
<img alt="…">+ 标题 + 简介段落 - 禁止用
display: none隐藏备用文本再靠 JS 显示媒体——爬虫会跳过隐藏内容，且违背优雅降级原则 - 结构化数据（JSON-LD）中同步声明媒体类型与文本摘要，例如对视频页添加
"@type": "VideoObject"并填入"description"字段，与 meta description 语义一致但更结构化
