纯静态HTML难以满足经典音乐专栏的结构化、兼容性与SEO需求，需用Eleventy或Hugo等静态生成器管理元数据、统一路径、多格式音频及JSON-LD微数据。
纯静态 HTML 能搭出可用的音乐专栏，但「经典音乐」这个需求自带几个硬约束：曲目元数据要结构化、音频需兼容老设备、专辑/作曲家/年代等维度得能交叉检索——这些光靠 index.html + <audio> 往往撑不住。
为什么不用框架反而更麻烦？
很多人以为“静态=简单”，实际恰恰相反：没有构建工具，album-list.html 里每加一张新唱片，就得手动改三处链接（首页、作曲家页、分类页）；没有模板继承，页眉页脚改个 logo 得打开 12 个文件挨个复制粘贴；更别说搜索——纯前端 JS 搜索对几百首曲目的 JSON 文件响应慢，且无法被搜索引擎索引。
实操建议：
- 用
eleventy或Hugo这类静态生成器，它们吃YAML前置数据，写一个beethoven.yml就自动生成作曲家页、作品页、年代归档页 - 放弃手写
<nav>，把导航抽成_includes/nav.njk，所有页面{% include "nav.njk" %}即可统一更新 - 音频路径统一用
/audio/beethoven/op97-1.mp3这种绝对路径，避免相对路径在子目录下失效
<audio> 标签的兼容性陷阱
Chrome 支持 .m4a，Safari 对 .ogg 支持差，IE11 只认 .mp3。经典音乐常需保留高保真音源，但用户可能用 iPad OS 14 打开——它不支持 opus，也不解码 flac 在 <audio> 里的流式播放。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 每个音频提供至少两种格式：
op97-1.mp3（主用）+op97-1.m4a（iOS 备用），用<source src="..." type="audio/mp3">显式声明 - 禁用
preload="auto"，改用preload="metadata"，否则移动端会预加载整张专辑导致流量暴增 - 别信浏览器自动 fallback：iOS Safari 遇到不支持的
type会静默失败，必须用 JS 检测canPlayType()后再插入<source>
让搜索引擎真正“听懂”你的音乐
Google 不会解析 <audio> 里的 ID3 标签，也不会从 title="月光奏鸣曲 第一乐章" 里提取结构化信息。结果就是：用户搜“贝多芬 1801 年作品”，你的页面根本不会出现在结果里。
实操建议：
- 在每首曲目的 HTML 里嵌入
JSON-LD微数据，明确标注@type: "MusicRecording"、composer、dateCreated、duration - 用
<link rel="canonical" href="https://music.example.com/beethoven/op27no2/">防止同一作品因路径参数（如?ref=homepage）产生重复收录 - 生成
sitemap.xml时，为每张专辑单独设<priority>0.8</priority>，比首页低但高于分类页，符合音乐内容权重逻辑
最易被忽略的点：经典音乐的时间属性是刚性的。1802 年《英雄交响曲》草稿和 1804 年定稿是不同实体，不能共用一个 URL；作曲家生卒年必须用 YYYY-MM-DD 格式写进 JSON-LD，否则 Schema.org 验证器会报错——这些细节没做对，再漂亮的 HTML 也只是一张电子海报。
