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