title标签决定搜索标题，h1至h6定义页面内容主次；二者须语义一致、唯一且静态输出，不可混用或动态渲染缺失，否则损害SEO。
<title> 标签决定页面在搜索结果里“叫什么”，<h1> 到 <h6> 决定页面里“哪段话最重要”。两者不互换，也不能混用——搜索引擎把它们当不同信号处理。
title 标签必须写在 head 里，且只出现一次
浏览器标签页、搜索结果标题、微信/钉钉链接预览，全靠它。漏写、重复、动态渲染后为空，都会让页面“失名”。
- 静态页直接写：
<title>前端作品集｜张三的响应式项目展示</title> - Next.js 用户别只靠
useEffect(() => { document.title = ... })，得用generateMetadataAPI，确保 HTML 初始响应就含正确值 - Vue 3 + Nuxt 用
useSeoMeta，不是onMounted里改document.title；否则旧版爬虫看到的是“Loading...”或空值 - CMS 模板里避免硬编码
<title>关于我们</title>，要用变量，比如<title>{{ page.title }} | {{ site.name }}</title>
h1 必须唯一，且代表页面核心主题
<h1> 不是“页面第一个大字号文字”，而是语义上“这个页面在讲什么”的声明。搜索引擎会把它和 <title> 对比验证一致性。
- 首页
<h1>别写“欢迎光临”，而要写“张三｜前端开发与可访问性实践” - 博客文章页，
<h1>应和<title>高度一致，比如都含“HTML title 标签 SEO 写法”这个短语 - 别为了样式方便把导航栏标题也套
<h1>；多个<h1>会让搜索引擎困惑主次 - 如果 CMS 输出了两个
<h1>（比如模板 header 里一个，正文里一个），得用 CSS 隐藏其中一个，或改用<div class="logo">替代
h2–h6 要按逻辑嵌套，不能跳级或倒置
这不是排版规范，是语义结构信号。搜索引擎靠它理解“这段内容属于哪个章节”，跳级（如 <h2> 后直接 <h4>）等于告诉爬虫“这里结构断了”。
立即学习“前端免费学习笔记（深入）”；
- 文章正文：主标题
<h1>→ 章节用<h2>→ 小节用<h3>，依此类推 - 作品集列表页：
<h1>是“我的前端项目”，每个项目卡片用<h2>包项目名，项目技术栈用<h3> - 避免用
<h2>当按钮文字、筛选项或面包屑；这些该用<button>或<nav>+<ol> - 纯视觉加大字号？用 CSS，别滥用 heading 标签——屏幕阅读器会把它读成“二级标题”，造成误导
title 和 h1 内容差异太大，可能被判定为低质或作弊
比如 <title> 写“React 性能优化指南”，<h1> 却是“欢迎使用我们的在线工具”。Google 会怀疑页面标题在“骗点击”。
- 二者关键词主体应一致，顺序可微调，但核心信息不能割裂
- title 可稍作扩展（如加品牌名、修饰词），h1 更聚焦内容本身
- 动态生成时，检查 SSR/SSG 构建产物里的 HTML 源码，确认两者是否真的一致——不要只看浏览器开发者工具里 JS 渲染后的 DOM
- 特别注意单页应用（SPA）：服务端返回的初始 HTML 中
<title>和<h1>是否有意义？还是全靠客户端 JS 补全？后者对 SEO 极不友好
最常被忽略的点：SEO 不是写完 <title> 和 <h1> 就结束。它们必须和页面实际内容、URL 路径、canonical 标签指向一致——四者错位一处，信号就互相削弱。
