必须使用语义化HTML标签（如<h1><nav><main><article>）包裹Tailwind类，首屏内容需静态输出、viewport声明必须完整、CSS须配置Purge以压缩体积，任一环节缺失都将导致SEO失效。
必须用语义化标签包裹Tailwind类，不能只靠class撑结构
搜索引擎不解析text-2xl或flex-col，它靠<h1>、<main>、<article>这些标签理解内容权重和层级。Tailwind只是样式层，如果全用<div class="text-3xl font-bold">替代<h1>，百度爬虫会认为页面没有主标题，首屏内容重要性归零。
常见错误现象：页面在Search Console里显示“未检测到有效标题”或“内容结构扁平”。
- 每个页面仅一个
<h1>，且放在首屏最上层视觉区域（不是隐藏的sr-only） -
<nav>包导航，<header>包品牌区与主CTA，<main>包核心信息流 - 卡片列表用
<section>包裹，每张卡用<article>，别堆<div>
首屏HTML必须静态输出，禁用JS动态注入关键内容
Tailwind本身不执行JS，但很多人用v-if、useState或IntersectionObserver延迟加载首屏文案、按钮、产品图——这直接导致百度爬虫抓到空容器或占位符。
使用场景：Nuxt.js或Next.js项目里，<HeroSection>组件若依赖fetch()后才渲染title和description，首屏HTML源码就是<div class="...">，无文本节点。
立即学习“前端免费学习笔记（深入）”；
- 首屏所有文案、链接、图片
src必须在服务端/构建时写死，或通过SSR直出 - 避免用
useEffect(() => { setTitle(...) }, [])设置<title>，改用框架的元数据API（如useHead或Head组件） - 图片懒加载只对非首屏启用：
loading="lazy"不能加在首屏<img>上
viewport声明缺失会让整个响应式逻辑失效
没加<meta name="viewport" content="width=device-width, initial-scale=1.0">，移动端浏览器强制以桌面宽度（通常980px）渲染页面，sm:flex、md:grid-cols-2等断点类根本不会触发——你写的“移动端优先”布局实际在真机上是缩放一团的错乱状态。
容易踩的坑：Next.js 14+ App Router默认插入<meta>，但若你在layout.tsx里手动写了<head>又漏掉initial-scale=1.0，或第三方插件覆盖了它，就会静默失效。
- 检查页面源码，确认
<head>里存在且唯一一条viewport meta - 真机调试前，先在Chrome DevTools Device Toolbar选具体机型（如iPhone 14），别用“Responsive”模式糊弄
- 安卓平板常见宽度800px，若按默认
md:768px切，可能卡在断点缝隙里——查设计稿真实需求，该调就调tailwind.config.js里的screens.md
首屏CSS体积要压到最低，否则LCP指标直接翻车
百度搜索已将LCP（最大内容绘制）纳入核心排名因子。Tailwind默认生成的CSS含大量未用类，首屏加载冗余样式会拖慢渲染，尤其弱网环境下。
性能影响：未开启Purge的开发版CSS常超300KB，压缩后仍150KB+；正确配置后可压到15–25KB，LCP从3.2s降至0.8s内。
- 确保
tailwind.config.js中purge（v3）或content（v4）字段准确指向所有模板文件路径，例如['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'] - 避免在
@layer components里定义全局复用类，除非真被多处引用；否则它们逃逸出Purge范围 - 首屏关键元素（如
<h1>、主按钮）的类名，不要用任意值语法text-[#1e293b]，它无法被Purge识别
<h1>被JS塞进去、CSS没Purge——任一环节断裂，SEO友好性就归零，其他所有样式优化都白搭。 
