搜索引擎能索引 details 里的内容，因为 Google 明确确认 是“可折叠但非隐藏”的语义容器，其内部所有子元素无论是否默认展开都会被正常爬取和索引。
直接用 <details></details> + <summary></summary> 就能提升 FAQ 的 SEO，前提是结构写对、ID 设准、不破坏语义——搜索引擎（尤其是 Google）明确表示会索引 <details></details> 内所有 HTML 内容，无论是否默认展开。
为什么搜索引擎能索引 details 里的内容
Google 在 2021 年就确认：<details></details> 是“可折叠但非隐藏”的语义容器，其内部所有子元素（包括 <p></p>、<ul></ul>、<code>）都会被正常爬取和索引。这和 display: none 或 aria-hidden="true" 有本质区别。
- 只要 HTML 源码里存在，不管有没有
open属性，答案内容都会进索引库 - 不需要服务端渲染（SSR）或 JS 动态注入——静态 HTML 就够
- 若用 JS 模拟折叠（比如
div+hidden），必须确保初始 HTML 包含全部内容，否则可能被判定为“隐藏文本”而降权
SEO 友好的 FAQ 结构怎么写
错一个嵌套层级，就可能让整条 FAQ 从搜索结果中消失。核心是三点：唯一 ID、合法 ID 值、<summary></summary> 必须是 <details></details> 的**首个且唯一**子元素。
Lesishu SEO Guide
下载
SEO全流程：诊断、页面优化、技术SEO、内容策略、外链建设；触发关键词包括SEO、搜索排名、网站优化、关键词、标题描述、结构化数据、Core Web Vitals、sitemap、robots.txt、SEO审计等。
- 每个
<details></details>必须带id，且值只能含小写字母、数字、连字符，比如id="how-to-reset-password" - 禁止写成
<details><div><summary>Q?</summary></div> <p>A</p> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p></details>——<summary></summary>不是直接子元素，Safari 和部分爬虫会跳过整个块 - 允许在
<summary></summary>里用<strong></strong>加粗关键词，但别塞<h3></h3>或<div>，否则破坏语义层级 <li>答案区可以放 <code><code>、<pre class="brush:php;toolbar:false;"></pre>、甚至<img alt="HTML网页中如何使用details标签优化FAQ的SEO结构" >，这些都会被正常解析 - 放在
URL 锚点怎么触发自动展开并被收录
用户搜“site:example.com password reset”，点击结果链接 faq.html#how-to-reset-password，页面应滚动到对应问题并展开——这对点击率和停留时间都有正向影响。但原生 <details></details> 不响应 URL hash，需补一行脚本。
