把课程大纲从图片换成 HTML 的 45 天:课程站 AI 引用与试听转化的前后数据对比
一、起点:一个"看起来没问题"的课程详情页
这个对比项目的起点是一次例行的站点审计。审计对象是一个职业教育类课程站,60 多门课程,详情页由设计团队按品牌规范精修:头图、课程亮点图标化、大纲部分是一张按周排课的长图,视觉上确实好看。
问题出在机器视角。用爬虫模拟器抓一遍课程详情页,大纲长图在 HTML 里就是一个 <img> 标签,图片内部的信息——每周学什么、做几个项目、达到什么水平——对搜索引擎和 AI 引擎全部不可见。详情页可抓取的有效文本只有页头页脚加上三行简介,全文不到 500 字。
在设计圈这叫"设计完整性",在爬虫眼里这叫"空页面"。我们把这次改造的前后数据完整记录了下来,结论放在前面:45 天里,课程页的 AI 引用从每周个位数涨到两位数,试听转化率涨了约三成,而这个改动连一行业务逻辑都没动。
二、改造前的基线测量
改造前先花一周建立基线,口径如下:
| 基线指标 | 数值 | 测量方式 |
|---|---|---|
| 课程页均文本量 | 约 480 字 | 爬虫抓取正文统计 |
| AI 爬虫日均抓取课程页 | 约 140 次 | 服务器日志按 UA 分组 |
| AI 回答引用课程页/周 | 6 次 | 30 个固定问题的每日探测 |
| 试听转化率 | 2.1% | 试听点击/详情页访问 |
| 详情页平均停留 | 47 秒 | 站点统计 |
有两个数字当时就被认为偏低:试听转化 2.1% 在行业里属于中游偏下,停留 47 秒说明用户也在大纲长图上划来划去找信息。也就是说,图片化大纲不仅机器读不了,人的阅读效率同样受损——这一点后面数据会验证。
补充一个测量口径的提醒:AI 引用探测的 30 个固定问题里,"课程学什么"类占 12 个、"值不值得学"类占 10 个、其余是品牌与价格类。这个配比决定了探测结果对大纲改造的敏感度,如果问题池里全是价格类问题,改造效果就会被系统性低估。做同类对比实验前,先校准问题池,否则前后数据没有可比性。
三、改造方案:大纲数据化
3.1 数据结构先行
把大纲从"一张图"还原成"一份数据"。课程大纲入库为章节数组,每个章节带标题、要点列表和预计学时:
{
"course_id": 1024,
"title": "Python 数据分析实战",
"sections": [
{
"week": 1,
"title": "环境搭建与数据获取",
"points": ["Anaconda 与 Jupyter 配置", "requests 与 API 数据获取", "CSV/Excel 数据读写"],
"hours": 6
},
{
"week": 2,
"title": "数据清洗实战",
"points": ["缺失值与异常值处理", "pandas 分组与透视", "实战:电商订单数据清洗"],
"hours": 8
}
]
}
这里有个执行细节值得强调:大纲文本不是让运营自由发挥,而是按"动宾结构 + 可量化结果"的模板重写。比如"学习爬虫"改成"使用 requests 抓取并解析三个公开数据源"。模板化的好处是写作门槛低、产出即可引用——AI 引擎引用片段时,"动宾结构"句式天然是完整的语义单元。
重写 60 多门课的大纲听起来工作量惊人,实际按每门课 6~10 个章节、每章 3~4 个要点计算,熟练后一门课的重写大约 40 分钟,两个人一周完成全部初稿。真正费时间的是审核环节:课程主讲老师逐门确认要点与实际授课一致,这一步占了整个内容周期的一半。回头看,这个时间花得不冤——大纲是课程的"事实清单",事实清单错了,被引用得越多,反噬越大。
3.2 页面渲染与结构化输出
详情页的大纲区块改为服务端直出的 HTML 列表,同时输出 FAQPage 与 Course 双 Schema:
<section class="syllabus">
<h2>课程大纲</h2>
<div class="section">
<h3>第 1 周:环境搭建与数据获取(6 学时)</h3>
<ul>
<li>Anaconda 与 Jupyter 配置</li>
<li>requests 与 API 数据获取</li>
<li>CSV/Excel 数据读写</li>
</ul>
</div>
<div class="section">
<h3>第 2 周:数据清洗实战(8 学时)</h3>
<ul>
<li>缺失值与异常值处理</li>
<li>pandas 分组与透视</li>
<li>实战:电商订单数据清洗</li>
</ul>
</div>
</section>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Course",
"name": "Python 数据分析实战",
"description": "8 周从零完成 4 个数据分析项目,覆盖采集、清洗、分析与可视化。",
"provider": { "@type": "Organization", "name": "Example 学院" },
"hasCourseInstance": {
"@type": "CourseInstance",
"courseMode": "online",
"courseWorkload": "PT56H"
}
}
</script>
视觉上没有牺牲:大纲区块的样式仍由设计团队控制,数据与样式彻底分离。原来那张精修长图保留在页面下方作为"效果预览",兼顾品牌展示与机器可读。设计团队最初的顾虑是"大纲变成纯文字列表会拉低页面质感",最终用"上方可读列表 + 下方效果长图"的组合打消了分歧:机器读列表,人看长图选风格,两不耽误。事后看这个组合还带来一个小收益——长图的转化证据(截图、作品展示)与事实信息(大纲、学时)分工明确,页面信息架构比改造前更清晰了。
四、45 天的数据对比
4.1 核心指标变化
改造分两批上线(前 30 门课第 0 天,其余第 12 天),按同样的口径测量到第 45 天:
| 指标 | 改造前 | 第 45 天 | 变化 |
|---|---|---|---|
| 课程页均可抓取文本 | 480 字 | 2,300 字 | 近 5 倍 |
| AI 爬虫日均抓取课程页 | 140 次 | 620 次 | 4.4 倍 |
| AI 回答引用课程页/周 | 6 次 | 47 次 | 近 8 倍 |
| 试听转化率 | 2.1% | 2.8% | 相对提升 33% |
| 详情页平均停留 | 47 秒 | 96 秒 | 翻倍 |
| 传统搜索长尾词进入前 20 名的课程页 | 11% | 34% | 明显改善 |
4.2 引用内容分析
对 47 次被引用的回答做了内容归类,分布很能说明问题:
| 引用内容类型 | 占比 | 对应页面元素 |
|---|---|---|
| 某周具体学习内容 | 41% | 大纲 HTML 列表 |
| 课程总时长/学时 | 23% | courseWorkload 与学时 |
| 适合人群/前置要求 | 19% | 简介与 FAQPage |
| 价格与开班时间 | 11% | Offer Schema |
| 其他 | 6% | — |
64% 的引用直接来自大纲区块。换句话说,AI 引擎回答"XX 课程学什么"这类高频问题时,引用的正是这次数据化的产出。同时,"适合人群"类引用全部来自 FAQPage 的重写——改造时顺带把原来的"适合谁学"长图段落拆成了 4 组问答,这部分的投入产出比同样很高。
4.3 分引擎的差异
按引擎拆开看引用来源,差异对后续资源分配很有参考价值:
| 引擎 | 引用次数占比 | 引用偏好 | 对改造的启示 |
|---|---|---|---|
| DeepSeek | 36% | 大纲细节、学时 | 细粒度事实权重高 |
| 豆包 | 29% | 适合人群、价格 | FAQ 与 Offer 重要 |
| Kimi | 21% | 大纲与课程定位 | 标题与简介的准确性 |
| 其他 | 14% | 分散 | 长尾价值 |
样本量还不足以做严格统计,但方向上与各引擎抓取行为的一般观察一致:越偏"工具型"回答的引擎越依赖细粒度结构化事实,越偏"对话型"的引擎越依赖语义完整的问答内容。两块都覆盖,才是完整的改造。
4.4 意外收获:付费咨询问题下降
课程顾问团队反馈,上线一个月后"课程具体学什么"类的售前咨询下降约四分之一,详情页自主获取信息的时间翻倍。图片大纲时代,用户要么费力看图,要么直接问人;大纲可读之后,售前咨询的问题分布向"价格优惠""就业服务"这类真正需要人回答的问题集中,顾问的人效反而提升,回答质量也更容易保证。这个收益当初完全没在方案预期里,属于数据化改造的正外部性。
五、执行中的三个坑
一是旧图片 URL 的处理。大纲长图在老页面存在了两年,有外部分享链接指向图片文件本身,直接删除产生了一批 404。处理方式是图片保留可访问、页面撤下入口,不用跳转打断外链。二是大纲更新的同步问题:课程迭代改大纲时,编辑后台改了数据忘了重新生成 Schema,出现过一周的口径不一致,后来在保存动作里把 Schema 生成做成同步步骤才根治。三是模板句式的矫枉过正:早期把所有要点都写成"使用 X 完成 Y",读起来机械,第二轮迭代允许了自然表达,保留"包含可量化结果"这一条底线即可。
除了这三个坑,还有一条流程建议:大纲数据入库后,立刻把"详情页可抓取文本量"加进发布检查项,低于 1500 字阻断发布。这个门槛值来自本次改造的观察——被引用的课程页改造后文本量全部在 2000 字上下,而 1000 字以下的页面即使改造了,引用也明显偏少。门槛不追求精确,追求的是把"页面太空"这类问题在发布前暴露出来,而不是等一个季度后的数据回顾才发现。
六、结论与趋势
回到标题的问题:课程大纲从图片换成 HTML,到底值多少?这 45 天的答案是——AI 渠道引用近 8 倍、试听转化相对提升三成、停留翻倍,代价是两周的内容重写加一周的前端改造。对任何以内容说服用户的知识付费产品,这是投入产出比极高的一类改造。
往前看,课程类目是 AI 引擎回答"学什么、怎么学、哪家强"时引用密度高的类目,大纲、学时、前置要求这些细粒度事实的权重会持续上升;图片化内容在生成式引擎时代的可发现性会进一步走低。另一个可以预判的变化是引用粒度:随着引擎对课程实体的理解加深,回答会从"推荐某门课"细化到"某门课第几周讲什么",届时大纲数据的结构质量会直接决定课程在细粒度回答中的出现方式。技术上的收尾建议只有一句:先把大纲、师资、价格这三样从图片和纯设计稿里解救出来,再谈其他优化——它们是课程页被引用的基本盘。如果你也在做课程页的可读化改造,欢迎在评论区交流大纲模板和 Schema 组装的细节。
关键词:Course Schema、hasCourseInstance、courseWorkload、FAQPage、GEO 生成式引擎优化、AI 优化 AIO、课程详情页改造、数据化大纲