Speakable Schema
Speakable结构化数据标注与语音搜索技术优化实战

Speakable Schema详解

Speakable是Schema.org中专门为语音搜索设计的结构化数据类型，用于标注页面中适合语音朗读的内容片段。通过Speakable标注，AI语音助手可以精确定位页面中适合朗读的部分，跳过不适合语音消费的内容（如导航栏、广告、表格等）。

Speakable的GEO价值：提高语音助手的内容定位精度——没有Speakable标注时，语音助手需要自行判断哪些内容适合朗读，可能选择不恰当的片段。减少信息噪声——标注只包含核心答案的片段，避免语音助手朗读不相关的内容。提升用户体验——被标注的内容经过口语化优化，用户听到的答案质量更高。

Speakable的使用场景：FAQ页面中标注每个答案部分（而非问题部分）。文章页面中标注核心摘要段落。教程页面中标注关键操作步骤。任何适合语音消费的简洁内容片段。

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "WebPage",
  "name": "GEO优化入门指南",
  "speakable": {
    "@type": "SpeakableSpecification",
    "cssSelector": [
      ".voice-answer",
      ".faq-answer"
    ]
  },
  "mainEntity": {
    "@type": "FAQPage",
    "mainEntity": [{
      "@type": "Question",
      "name": "什么是GEO优化？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "GEO就是让AI搜索引用你的内容"
      }
    }]
  }
}
</script>

CSS选择器与语音内容标记

Speakable Schema通过cssSelector属性指定适合语音朗读的内容片段。这要求在HTML中为语音友好的内容添加特定的CSS类名，然后在JSON-LD中引用这些类名。

最佳实践：为每个FAQ答案添加voice-answer类名。为文章的核心摘要添加voice-summary类名。为教程的关键步骤添加voice-step类名。保持选择器的简洁性——只标注真正适合语音朗读的片段，不要过度标注。避免标注表格、列表等语音朗读效果差的内容。

HTML标记示例：在FAQ答案的div上添加class="faq-answer voice-answer」，在文章摘要段落上添加class="summary voice-summary」等。这样Speakable的cssSelector只需引用.voice-answer和.voice-summary即可精准定位语音内容。

注意事项：cssSelector引用的元素不应包含图片、视频、链接等无法语音消费的元素。标注的文本长度应控制在30秒朗读时间以内（约75个中文字）。多个Speakable片段应覆盖页面的核心问答内容，形成完整的语音答案集。

• voice-answer类：标注FAQ答案，适合直接朗读的简洁回答
• voice-summary类：标注文章核心摘要，30秒内完整概括
• voice-step类：标注教程关键步骤，连贯叙述式表达
• 避免标注：表格、列表、图片、视频等语音不友好内容
• 长度控制：每个标注片段不超过75个中文字（约30秒朗读）
• 覆盖完整性：多个片段应覆盖核心问答，形成完整答案集

语音搜索技术性能优化

语音搜索对技术性能的要求比文本搜索更严苛——语音助手对页面加载时间的容忍度极低，核心内容必须在1秒内可读取。

关键性能指标：First Contentful Paint（FCP）应低于1秒。Largest Contentful Paint（LCP）应低于2秒。核心文本内容不应依赖JavaScript渲染——语音助手通常不支持JS渲染。服务器响应时间（TTFB）应低于200毫秒。

优化策略：使用SSR或SSG确保核心内容在HTML中直接可读。为语音搜索设置专用的轻量页面——去除非核心的CSS和JS，只保留文本内容和基础样式。使用预渲染（Prerender）技术为语音助手提供纯文本版本。设置适当的HTTP缓存头，减少重复请求。使用CDN加速全球访问速度。

对于SPA（单页应用）网站，特别需要注意的是：确保使用服务端渲染（如Next.js的SSR模式）或静态生成（如Next.js的SSG模式）。如果必须使用客户端渲染，考虑为语音助手提供预渲染的备用页面。