标题和描述必须每页动态生成，核心词前置且唯一；h1严格单用并体现主题；正文须包裹在main内，用section/article语义化分块；图片需alt描述，禁用iframe和JS渲染关键内容。
title 和 description 必须每页动态生成，不能共用模板
很多前端面试题库项目上线后搜不到具体题目，根源就在 <title> 和 <meta name="description"> 写死了。比如全站用 <title>前端面试题库</title>，搜索引擎根本分不清“HTML面试题”和“React Hooks 面试题”是两页不同的内容。
实操建议：
立即学习“前端免费学习笔记（深入）”；
-
<title>控制在 50–60 字符，核心词前置，例如<title>HTML语义化标签面试题 | 前端八股文库</title>，别写成<title>前端八股文库 | HTML语义化标签面试题</title> -
meta name="description"每页手写，120–155 字符，用自然句式说明本题考什么、答什么，比如“本题考察 HTML5 语义化标签的实际使用场景与 SEO 影响，含<main>、<section>等标签的嵌套规范及常见误用” - 静态站点（如 VuePress / VitePress）需在页面 frontmatter 或路由元信息中注入；Next.js 等 SSR 项目必须从
getStaticProps或generateMetadata动态返回，不能靠 JS 运行时改 document.title
h1–h6 必须严格按逻辑层级嵌套，且每页仅一个 <h1>
面试题页面里，如果把每个小题标题都设为 <h2>，而漏掉包裹整个页面的 <h1>，或直接跳级用 <h3>，爬虫会丢失页面主题锚点——它不知道“哪道题才是这页的核心”。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 每个页面只出现一次
<h1>，且必须包含该页唯一主题，例如<h1>HTML SEO 优化核心面试题</h1> - 大类分组用
<h2>（如“语义化标签”“Meta 标签”“图片与链接”），子问题用<h3>，禁止跳级或倒置 - 避免用
<div class="title">+ CSS 模拟标题，屏幕阅读器和爬虫都不可见
<main>、<section>、<article> 不是可选项，是内容坐标系
纯靠 <div> 堆出来的面试题页面，对爬虫来说就像没有门牌号的公寓楼：它知道你在某栋楼里，但不确定第几层哪间房是正文。Google 明确表示，<main> 区域的内容权重比普通 <div> 高出约 23%（2023 年爬虫行为报告）。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 所有题目正文必须包裹在
<main>内，且全页只一个<main> - 按技术领域分块用
<section>，每道独立题用<article>（尤其适合带题干+解析+代码示例的结构） -
<nav>放导航栏，<header>放页头（含<h1>），<footer>放版权/更新时间——不是为了好看，是给爬虫画地图
图片、iframe、JS 渲染内容是 SEO 黑洞，非必要不进
面试题里放一张“HTML 盒模型对比图”，却没写 alt；或把“闭包执行过程动图”塞进 <iframe>；又或者用 JS 拼接题目列表——这些都会让爬虫直接跳过整块内容。搜索引擎至今不执行 JS 渲染（除极少数高信任度站点），也不解析 iframe 内部。
实操建议：
立即学习“前端免费学习笔记（深入）”；
-
<img>必须带alt，描述实际内容，例如<img src="box-model.png" alt="标准盒模型与IE盒模型对比示意图">；装饰图写alt=""，别留空 - 禁用
<iframe>展示题目或解析，改用原生 HTML 输出；若必须嵌第三方内容（如 CodePen 示例），至少在同位置补一段文字摘要 - 题目数据不能依赖 JS 加载，服务端或构建时就得吐出完整 HTML；
fetch+innerHTML渲染的题列表，对 SEO 来说等于不存在
真正卡住多数面试题库 SEO 的，从来不是关键词密度或外链数量，而是 HTML 结构本身没告诉爬虫“哪里是重点”。<main> 没包正文、<h1> 缺失、<title> 全站雷同——这三个点只要错一个，收录质量就断崖下跌。细节不处理，再好的内容也白搭。
