搜索引擎依赖语义化HTML解析内容，需用<nav><main><article><section><aside>等标签明确结构，禁用div模拟语义标签；title和description须手写、精准、含关键词且避免堆砌；viewport、img属性、原生链接、文档顺序均影响索引与权重。

搜索引擎不“读”网页，它解析HTML结构、提取语义信号、评估内容权重——所以友好的HTML不是加一堆meta，而是让每个标签都承担明确的语义职责。

用对语义化标签，别再堆

搜索引擎靠标签名判断内容层级和功能。比如把主导航包在

里，爬虫无法识别这是导航；换成

，它立刻知道这是站点核心跳转路径。

• <main>必须且仅出现一次，包裹页面唯一主体内容（如文章正文、产品列表）
• <article>用于可独立分发的内容单元（博客、新闻、商品卡片），<section>用于逻辑区块划分（如“技术细节”“用户评价”）
• <aside>放关联但非核心的信息（侧边栏推荐、作者简介），避免干扰主内容权重
• 禁用<div>模拟<button>或<h1>——视觉能仿，语义无法伪造，辅助技术和爬虫都会忽略

title和description必须手写，不能靠模板拼接

很多静态站用title: {{ site.name }} - {{ page.title }}生成<title>，结果首页是“MySite - Home”，内页是“MySite - undefined”。搜索引擎看到的是空泛、重复、无区分度的标题。

• <title>长度控制在50–60字符，前30字符含主关键词（如“HTML SEO优化｜语义化标签实战指南”）
• <meta name="description">不是摘要复述，是搜索结果中的“广告文案”，要带行动意图（如“掌握7个关键语义标签写法，提升爬虫抓取率与移动端索引优先级”）
• 禁止在<title>或<meta name="description">中堆砌关键词（如“SEO HTML SEO优化 HTML标签 SEO教程”）——百度会判定为垃圾信号

viewport和图片属性是移动索引的硬门槛

Google 和百度的移动优先索引（Mobile-First Indexing）实际以移动端渲染结果为准。如果<meta name="viewport">写错位置或漏掉参数，页面首屏被当成桌面模式抓取，直接降权。

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

立即学习“前端免费学习笔记（深入）”；

• <meta name="viewport" content="width=device-width, initial-scale=1">必须出现在<head>最顶部，不能被JS延迟注入
• 所有<img>必须带width和height属性（防止CLS偏移），且alt值需描述图像内容而非堆关键词（如alt="React组件生命周期图解"，不是alt="react seo html"）
• 禁用user-scalable=no——百度明确将其列为可访问性违规，影响E-A-T评分

避免JS驱动的导航和隐藏内容

搜索引擎不执行JS，只解析初始HTML。用onclick="location.href='...'"实现链接，或把菜单藏在JS初始化后的<div>里，等于对爬虫说“这里没东西”。

• 所有导航链接必须是原生<a href="...">，即使你用JS增强交互，也要保留真实href
• 不要用display: none或visibility: hidden隐藏关键词段落——百度会识别为关键词堆砌，轻则忽略，重则惩罚
• 动态加载的内容（如评论、相关文章）若对SEO重要，需确保服务端已渲染（SSR）或提供静态备选（如<noscript> fallback）

最容易被忽略的点：搜索引擎对HTML文档物理顺序依然敏感。导航代码如果写在

前面，即使CSS把它视觉上压到右侧，爬虫仍可能降低对主体内容的权重信任——这不是过时规则，而是2026年百度搜索白皮书仍在强调的基础信号。结构即策略，不是装饰。