不懂 SEO 优化？一篇文章帮你了解如何做 SEO 优化
Category（分类）: Browser Status: 已更新
本文尽量保留原文关于 TKD、语义化、站内链接、移动端、站外推广、性能优化和搜索引擎工作原理的内容。需要特别说明的是：搜索引擎算法不会公开全部排序因素，SEO 也不存在“设置一个标签就保证排名”的方法。下面的示例以通用 Web 和 Google Search Central 的公开资料为参考，其他搜索引擎可能有不同的实现和政策。
一、搜索引擎到底在做什么？
搜索引擎通常把网页发现、抓取、渲染、索引和排序分成不同阶段：
- 发现（Discovery）：通过已知页面中的链接、站点地图、手动提交等方式发现 URL；
- 抓取（Crawling）：搜索引擎的爬虫请求页面和资源，并遵守抓取限制、
robots.txt等规则； - 渲染（Rendering）：必要时执行 JavaScript，得到更接近用户所见的页面；
- 索引（Indexing）：分析文本、图片、结构化数据、规范 URL 和页面关系；
- 排序与展示（Serving）：根据查询意图、相关性、质量、可用性和其他信号生成搜索结果。
“搜索引擎只会查一个关键词数据库、看不懂 JavaScript”是早期资料中的过度简化。现代搜索引擎可以渲染许多 JavaScript 页面，但这不意味着所有脚本都一定被执行、所有用户状态都能被访问，或者客户端渲染可以完全替代可访问的 HTML。重要内容应在初始 HTML 或可靠的 SSR/预渲染结果中可见，并确保 CSS、JavaScript 和图片等必要资源没有被错误阻断。
SEO（Search Engine Optimization，搜索引擎优化）的合理目标是：帮助搜索引擎理解内容，帮助用户从搜索结果判断页面是否值得访问，并持续改善真实用户体验。它不能保证收录，也不能保证某个关键词排名第一。
二、页面标题、描述和关键词：现代 TKD
原文以掘金页面的 Title、Keywords、Description 为例。这个例子可以作为历史背景，但其中的 keywords 元标签已经不应作为现代 SEO 的重点。
1. title：给每个页面一个准确的标题
<title>前端性能监控实践：从 Web Vitals 到数据上报 | 示例站点</title>
建议：
- 每个可索引页面使用独特、清晰、简洁且能概括页面内容的标题；
- 把用户真正关心的主题放在标题中，不要重复堆砌关键词；
- 品牌名可以放在末尾或开头，保持全站一致；
- 标题应该与页面正文、主标题和链接文本相互匹配；
- 搜索结果中的标题链接可能由搜索引擎根据页面内容、
<title>、标题元素和链接文本重新生成，不能保证完全照搬title。
2. description：影响摘要展示，不是关键词排名开关
<meta
name="description"
content="介绍如何使用 PerformanceNavigationTiming、Web Vitals 和 sendBeacon 构建前端性能监控。"
>
description 应该是面向用户的自然语言摘要，说明页面解决什么问题。搜索引擎可能使用它生成结果摘要，也可能根据查询词从正文中截取其他内容。它不是“写满关键词就能提升排名”的标签。
3. keywords：保留历史认知，但不再依赖
<!-- 不建议把它当作现代 SEO 策略；Google 不使用 meta keywords 进行网页排名 -->
<meta name="keywords" content="前端性能,Web Vitals,性能监控">
Google 公开说明不使用 meta keywords 参与网页排名。其他搜索引擎可能有自己的处理方式，但新增页面不应把时间花在关键词元标签上，更不能把用户搜索词大量堆在页面中。应把主题自然地写进标题、正文、链接文本和结构化内容。
4. 规范 URL 和 Robots 元标签
如果同一内容可以通过多个 URL 访问，可以使用规范链接提示首选地址：
<link rel="canonical" href="https://www.example.com/browser/seo/">
canonical 是提示，不是绝对命令；页面内容、重定向和站点地图也应保持一致。对于确实不希望出现在搜索结果中的页面，可以使用：
<meta name="robots" content="noindex">
noindex 与 robots.txt 的作用不同：robots.txt 主要控制爬虫是否抓取，不能可靠地替代 noindex 完成去索引。若爬虫被 robots.txt 阻止，搜索引擎可能无法看到页面中的 noindex。敏感内容不能只依赖这两个机制，应使用认证和服务端访问控制。
三、页面内容优化
1. 使用语义化 HTML
语义化标签有助于浏览器、辅助技术和搜索引擎理解文档结构：
<article>
<header>
<h1>前端性能监控实践</h1>
<p>记录真实用户的页面加载和交互体验。</p>
</header>
<nav aria-label="文章目录">
<a href="#vitals">Web Vitals</a>
<a href="#reporting">数据上报</a>
</nav>
<section id="vitals">
<h2>Web Vitals</h2>
<p>使用 LCP、INP 和 CLS 观察用户体验。</p>
</section>
</article>
建议：
- 用
h1–h6表达标题层级，用nav、main、article、section、footer表达区域含义； - 只在确实是标题的地方使用标题元素，不要为了视觉大小乱用
h1； - HTML5 并没有要求每个页面只能有一个
h1，但页面应有清晰的主要标题层级； - 用真实文本表达重要内容，不能把所有正文做成图片；
- 内容应围绕用户问题自然展开，避免关键词密度、隐藏关键词和重复段落。
2. 图片的 alt 和尺寸
<img
src="/images/performance-waterfall.webp"
width="1200"
height="675"
alt="Performance Resource Timing 展示脚本和图片加载顺序的瀑布图"
>
alt 的首要目的是在图片无法显示时提供替代文本，并帮助使用屏幕阅读器的用户理解图片。它应描述图片用途，不要把关键词塞进 alt。纯装饰图片可以使用空 alt=""，不要省略属性。
为图片提供宽高或使用 aspect-ratio 可以减少布局偏移；使用现代格式、响应式图片和合适的压缩可以改善加载体验，但不能为了 SEO 牺牲图片的可读性。
3. 正文与链接
链接的可见文本应该准确描述目标：
<a href="/guides/web-vitals">阅读 Web Vitals 指标说明</a>
不要把“点击这里”作为所有链接的文本，也不要使用脚本拼接出搜索引擎无法稳定发现的关键导航。站内链接可以帮助用户和爬虫发现相关内容，但不存在“链接越多权重越高”的简单规则。
外链属性应根据关系选择：
<a href="https://example.com/sponsor" rel="sponsored">赞助商</a>
<a href="https://example.com/community" rel="ugc">社区推荐</a>
<a href="https://example.com" rel="nofollow">不希望传递推荐关系的链接</a>
nofollow 不是“爬虫点进去后就不会回来”，也不是阻止抓取的安全机制。购买链接、批量交换链接、隐藏链接和操纵锚文本可能违反搜索引擎垃圾内容政策。站外发布内容应以真实价值和自然推荐为主，不要通过伪造口碑、刷量或删除负面信息来操纵搜索结果。
4. 表格和文本排版
表格应使用表头和标题表达数据关系：
<table>
<caption>浏览器缓存策略对比</caption>
<thead>
<tr>
<th scope="col">策略</th>
<th scope="col">是否重新验证</th>
</tr>
</thead>
<tbody>
<tr>
<td>max-age 未过期</td>
<td>通常不需要</td>
</tr>
</tbody>
</table>
使用 CSS 控制缩进、间距和布局，不要用连续空格、不可见字符或大量 <br> 拼出版式。<br> 适合文本中的确切换行，不适合作为页面布局工具。
四、站点结构、导航与站内链接
1. 使用清晰、稳定的 URL
URL 可以帮助用户理解页面主题：
https://www.example.com/browser/performance/web-vitals
不必为了追求“目录不超过三级”而大规模改造既有站点。搜索引擎可以处理较深的路径，真正重要的是：
- 页面能够通过正常的
<a href>链接发现； - 链接不依赖必须执行的点击事件或登录状态；
- 目录和 URL 能表达内容关系；
- URL 稳定，重命名时提供 301 或 308 重定向；
- 同一内容尽量使用一个规范地址，避免无意义参数生成大量重复 URL。
“爬虫最多跳三次”“首页链接超过某个数量就一定降低权重”“页面必须小于 100KB”都不是通用的现代 SEO 规则。应结合站点规模、抓取预算、用户体验和真实数据评估。
2. 导航和面包屑
主导航应使用文本链接，移动端和桌面端都能操作。面包屑既能帮助用户定位，也能辅助搜索引擎理解层级：
<nav aria-label="面包屑">
<ol>
<li><a href="/">首页</a></li>
<li><a href="/browser">Browser</a></li>
<li aria-current="page">Web Vitals</li>
</ol>
</nav>
页面很多时，应提供分页或“加载更多”对应的可发现 URL。不要只提供一个无法被爬虫稳定触发的下拉框，也不要为了让爬虫遍历而生成无穷分页。
3. Sitemap 和 robots.txt
站点地图可以列出希望搜索引擎发现的规范 URL，并可包含更新时间、语言或图片等信息。它有助于发现大站、孤立页面和新页面，但不是排名保证，也不能代替站内链接。
robots.txt 示例：
User-agent: *
Disallow: /admin/
Disallow: /search?
Sitemap: https://www.example.com/sitemap.xml
确认规则不会误伤 CSS、JavaScript、图片和需要渲染的公开页面。robots.txt 不是权限控制，也不应公开列出敏感路径后就认为内容安全。
五、移动端与可访问性
搜索引擎普遍以移动端内容作为重要抓取和索引参考。现代站点通常优先使用响应式设计，而不是维护一套内容不一致的独立移动站：
<meta name="viewport" content="width=device-width, initial-scale=1">
移动端优化重点是：
- 文本可读，行高和点击目标适合触屏；
- 主要内容在窄屏上完整可见，不被弹窗和固定广告遮挡；
- 导航、表单和交互控件可用键盘和辅助技术访问；
- 图片、视频和广告预留尺寸，减少布局偏移；
- 移动端与桌面端提供等价的主要内容、标题、结构化数据和链接；
- 使用真实设备和不同网络测试，而不是依赖固定的“正文至少 10pt”“首屏占屏幕 50%”等旧规则。
可访问性不是 SEO 的装饰项。正确的标签、键盘操作、焦点管理、对比度和替代文本能同时改善用户体验和内容可理解性，但它们也不意味着可以通过堆砌隐藏文本来提升排名。
六、性能与 SEO 的关系
性能优化首先服务于用户体验。搜索引擎可能使用页面体验和核心网页指标等信号，但性能不是“越快一个标签就越高排名”，也不能替代有用内容。
1. 减少关键资源成本
- 删除不必要的脚本、样式和请求；
- 通过压缩、Brotli 或 Gzip 减少传输大小；
- 使用 HTTP 缓存、CDN 和长期缓存的带指纹静态资源；
- 对首屏关键 CSS 和字体合理预加载，避免过度
preload； - 非首屏图片和低优先级模块使用懒加载；
- 不要懒加载搜索引擎和用户进入页面就必须看到的主要内容；
- 通过
fetchpriority="high"、响应式图片和正确尺寸帮助浏览器安排优先级，但先测量再添加提示。
2. HTTP 请求和现代协议
旧资料常用 CSS Sprites、合并所有 CSS/JS 来减少 HTTP 请求。在 HTTP/1.1 下这曾经很有价值；在 HTTP/2 和 HTTP/3 中，多个资源可以复用连接并发传输，盲目合并会破坏缓存粒度、增加首屏无关代码，不应作为固定规则。应使用代码分割、缓存和实际瀑布数据决定资源组织方式。
3. 避免强制同步布局和长任务
频繁修改 DOM 后立刻读取 offsetWidth、getBoundingClientRect() 等布局信息，可能迫使浏览器同步计算样式和布局。可以批量更新 class、缓存读取结果、使用 requestAnimationFrame 协调视觉更新，并把大型计算拆分或放入 Worker。页面交互还应关注 INP 和长任务，而不只是旧资料中的“重排次数”。
七、JavaScript、iframe 和隐藏内容
搜索引擎可以渲染一部分 JavaScript，但脚本执行可能受资源、时间、网络和页面状态影响。重要内容建议：
- 服务器输出可读的 HTML，或使用可靠的 SSR/SSG/预渲染；
- 使用标准链接、表单和可访问的文本；
- 不阻断搜索引擎需要的 CSS、JS 和图片；
- 用 Search Console 的 URL Inspection 检查实际渲染结果；
- 对页面功能提供合理的错误和降级状态。
iframe 中的内容通常属于独立文档，不应把关键正文放在跨域 iframe 中并假设父页面会自动获得其 SEO 价值。嵌入视频、地图等第三方内容时，应在父页面提供标题、说明和必要的文本上下文。
display: none、visibility: hidden、折叠面板和响应式隐藏本身不是违规行为。导航菜单、手风琴和无障碍内容都可能需要隐藏状态。不要用 CSS 把大量关键词移到屏幕外、设置透明文字或用隐藏内容欺骗搜索引擎；这类做法可能被视为垃圾内容。
八、结构化数据
结构化数据使用 JSON-LD 等格式描述页面中的实体和关系，可以帮助搜索引擎理解文章、产品、面包屑、活动等内容，并可能获得富结果展示资格，但不保证一定展示：
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "前端性能监控实践",
"author": {
"@type": "Person",
"name": "示例作者"
},
"datePublished": "2026-08-18",
"mainEntityOfPage": "https://www.example.com/browser/performance"
}
</script>
结构化数据必须与用户可见内容一致，字段应符合对应类型的要求。不要把它当作隐藏关键词或虚构评价的工具。
九、站外优化与白帽 SEO
合理的站外优化包括：
- 发布原创、有引用价值的内容；
- 与真实合作方、社区和行业媒体建立自然链接；
- 在允许的情况下介绍产品和解决方案；
- 维护品牌的公开信息和联系方式；
- 通过 Search Console、日志和分析工具观察搜索表现。
不建议或可能违反政策的做法包括关键词堆砌、自动生成大量低质量页面、购买操纵性链接、隐藏文字、伪造评价、复制内容和 doorway 页面。SEO 应该建立在内容、技术质量和真实用户价值之上，而不是试图寻找算法漏洞。
十、一个可执行的 SEO 检查清单
内容和结构
- 页面有独特且准确的
title； -
description能自然概括页面； - 正文有清晰的标题层级和独特内容；
- 主要内容是可读取文本，不只存在于图片或脚本结果中；
- 站内链接使用可理解的文本；
- 图片有合适的
alt，并预留尺寸； - 规范 URL、重定向和分页策略一致。
抓取和索引
- 公开页面没有被错误的
robots.txt阻断； - 私密内容使用认证和授权保护；
- 提供有效的站点地图（适合站点规模时）；
- 服务器返回正确的状态码；
- JavaScript 渲染后仍能看到主要内容；
- 通过 Search Console 检查抓取、索引和富结果问题。
体验和维护
- 移动端内容与桌面端等价且可用；
- 页面核心内容优先加载；
- 持续观察 LCP、INP、CLS 和真实用户数据；
- 发布后检查 404、重定向链、规范 URL 和结构化数据；
- 定期更新、合并或删除过时内容。
总结
- SEO 的核心是让搜索引擎理解内容，让用户愿意点击并获得良好体验；
title、描述、语义 HTML、可访问内容、站内链接、站点地图和规范 URL 仍然重要；meta keywords、关键词密度、固定三层目录、页面必须小于 100KB、伪静态一定排名更高等说法已经过时或过度绝对化；- 现代搜索引擎能够渲染部分 JavaScript，但重要内容仍应提供可靠的 HTML 或 SSR/SSG 结果；
- 性能、移动端、可访问性和安全性应服务于真实用户，而不是只为爬虫制造页面；
- 不存在保证第一名的 SEO 技巧，长期有效的策略是原创、准确、可访问、可抓取和持续维护。