每个页面必须且仅有一个含唯一核心词的，禁止跳级；须包裹全部主体内容；图片需用描述性alt；canonical必须为完整绝对url；viewport缺失将致移动端排名归零。
为什么重复或缺失会让爬虫“放弃理解”页面
搜索引擎靠
定位页面核心主题，不是靠你写在正文第一段的“欢迎来到XX网站”。缺失，爬虫会默认用内容补位；多个<h1>，它会认为页面主题混乱，直接降权或只索引部分片段。
</h1>
<p>常见错误现象：<code>h1</code>被CSS隐藏（<code>display: none</code>）、用<code>div</code>+<code>class="title"</code>模拟、CMS模板里每页都套用同一个<code><h1>首页</h1></code>。</p>
<ul>
<li>每个页面必须且仅有一个<code><h1></h1></code>，内容需包含该页唯一核心词，比如文章页写<code><h1>HTML表格SEO优化技巧</h1></code>
</li>
<li>禁止跳级：有<code><h2></h2></code>就必须先有<code><h1></h1></code>，不能<code><h1></h1></code>后直接<code><h3></h3></code>
</li>
<li>
<code><main></main></code>标签必须包裹全部主体内容（含<code><h1></h1></code>），不能漏掉侧边栏或摘要块</li>
</ul>
<h3>alt=""和alt="图片"之间差一个收录入口</h3>
<p>图片不是装饰，是内容载体。爬虫不读图，全靠<code>alt</code>描述判断是否相关、是否值得进入图搜结果。留空、写“图片”、堆关键词，都会让这张图彻底消失在搜索视野里。</p>
<p>使用场景：内容图（如教程截图）、产品图、数据图表——全部需要描述性<code>alt</code>；纯装饰性分隔线、背景图，才用<code>alt=""</code>。</p>
<ul>
<li>
<code><img src="seo-table.png" alt="HTML表格语义化写法与SEO效果对比图"></code> —— 合格</li>
<li>
<code><img src="icon-arrow.png" alt=""></code> —— 合格（装饰图）</li>
<li>
<code><img src="logo.png" alt="公司logo"></code> —— 不合格（没说明是谁的logo）</li>
</ul>
<h3>canonical href="//domain.com/path" 是无效的</h3>
<p>相对协议路径（<code>//domain.com/path</code>）或相对路径（<code>/path</code>）会导致<code>canonical</code>解析失败。Google 和 Bing 明确要求<code>href</code>值必须是完整绝对 URL，否则视为未声明，可能触发重复内容惩罚。</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/shouce/1862" title="使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件"><img
src="https://img.php.cn/upload/manual/000/000/010/170901721079108.gif" alt="使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/shouce/1862" title="使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件" class="overflowclass">使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件</a>
<p class="overflowclass">如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更</p>
</div>
<a rel="nofollow" href="/xiazai/shouce/1862" title="使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<p>性能影响：错误的<code>canonical</code>不会拖慢加载，但会让爬虫反复抓取相似页面，浪费配额，最终导致关键页面索引延迟甚至被剔除。</p>
<ul>
<li>正确写法：<code><link rel="canonical" href="https://example.com/html-seo-guide"></code>
</li>
<li>错误写法：<code><link rel="canonical" href="/html-seo-guide"></code> 或 <code><link rel="canonical" href="//example.com/html-seo-guide"></code>
</li>
<li>动态生成时务必拼接协议（<code>https://</code>）、域名、路径三段，别依赖前端JS补全</li>
</ul>
<h3>viewport缺失会让移动端排名归零</h3>
<p>Google 已将移动友好性作为硬性排名信号。<code><meta name="viewport"></code>缺失，页面会被判定为“非移动适配”，即使 CSS 做了响应式，也大概率进不了移动搜索前几页。</p>
<p>容易踩的坑：某些 CMS 模板默认不加 viewport；单页应用（SPA）在服务端渲染时漏掉该 meta；或误写成<code>content="width=device-width"</code>（缺<code>initial-scale=1</code>）。</p>
<ul>
<li>必须写全：<code><meta name="viewport" content="width=device-width, initial-scale=1"></code>
</li>
<li>不能放在<code></code>里，必须在<code></code>中，且越靠前越好</li>
<li>不要用<code>user-scalable=no</code>——这违反 Google 的可访问性要求，可能被降权</li>
</ul>
<p>语义深度不是堆标签，是让每个标签承担不可替代的坐标作用。最常被忽略的是<code><main></main></code>包裹完整性——漏掉一个<code><section></section></code>，等于地图上少画了一条街，爬虫就找不到那家店。</p>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
