SEO入门 - 技术栈

前端SEO（Search Engine Optimization），顾名思义，是指通过优化网站前端的代码、内容和用户体验，使搜索引擎能够更好地抓取、理解和索引你的网页，从而在自然搜索结果中获得更高排名的技术和实践。

简单来说，它就像是你网站的"简历"。你的工作是把这份"简历"写得结构清晰、重点突出、易于阅读，让"面试官"（搜索引擎）一眼就能看出你的优势，并把你推荐给"客户"（搜索用户）。

一个重要共识： SEO是前后端协同的工作，但前端开发者直接掌控着影响排名的重要因素，如页面速度、移动端适配、HTML结构等。前端代码的质量，直接决定了搜索引擎能"看懂"多少你的网站内容。

要做好优化，首先要理解搜索引擎爬虫的工作原理。爬虫不像人类，它看不到漂亮的图片和动画，它只关心代码。它通过分析HTML来理解：

因此，前端SEO的核心就是为爬虫提供清晰、高效、友好的代码信号。

页面加载速度： 这是Google等搜索引擎的核心排名因素。
- 优化图片： 使用现代格式（WebP/AVIF），进行压缩、懒加载（loading="lazy"），并指定宽高。
- 代码最小化： 压缩CSS、JavaScript和HTML文件，移除不必要的空格、注释和代码。
- 利用浏览器缓存： 通过设置缓存策略，让 returning visitors 更快加载页面。
- 减少关键渲染路径： 优化CSS（内联关键CSS、异步加载非关键CSS）和JavaScript（使用async或defer）。
移动端优先：
- 响应式设计： 确保网站在所有设备上都能完美显示和使用。
- 使用视口元标签： <meta name="viewport" content="width=device-width, initial-scale=1.0">
让网站可访问（Accessibility）：
- 可访问性（a11y）和SEO天生契合。为图片添加清晰的alt属性，为视频提供字幕，使用正确的ARIA标签。这不仅能帮助残障用户，也能帮助爬虫理解非文本内容。

标题标签（<title>）： 这是最重要的标签之一！每个页面应有唯一且描述准确的标题，包含核心关键词，长度控制在60个字符以内。
- 差示例： 首页 | 我的公司
- 好示例： 前端SEO优化指南 - 2024年最新实战技巧 | 前端学堂
元描述标签（<meta name="description">）： 虽然不直接影响排名，但它是搜索结果的"广告语"，影响点击率。应简洁有力，包含关键词，长度在150字符左右。
标题标签（Heading Tags）： 使用<h1>到<h6>来构建内容的逻辑层次。一个页面最好只有一个<h1>（主题），然后用<h2>作为分点，<h3>作为子分点，依此类推。这像一本书的目录，让爬虫一目了然。
语义化HTML5标签： 多用<header>, <nav>, <main>, <article>, <section>, <aside>, <footer>等标签。它们为内容提供了明确的语义，比一堆<div>更易于爬虫理解。
结构化数据（Structured Data）： 使用JSON-LD格式的Schema.org词汇表，为爬虫提供明确的"上下文"。例如，为一篇博客文章标记为Article，包含headline, author, datePublished等信息。这能让你在搜索结果中获得丰富的"富媒体片段"，如五星评分、面包屑导航等，大幅提升点击率。

清晰的URL结构： URL应简洁、可读，包含关键词。
- 差示例： example.com/p?id=123
- 好示例： example.com/blog/frontend-seo-guide
内部链接建设： 通过合理的内部链接，将重要页面的权重（Link Juice）传递到其他页面，并帮助爬虫发现更深层的内容。使用描述性的锚文本（Anchor Text）。
- 差示例： 点击这里了解更多
- 好示例： 了解更多关于前端性能优化的内容
确保可抓取性：
- 避免JS渲染核心内容： 如果导航和主要内容依赖JavaScript，确保使用服务端渲染（SSR）或静态站点生成（SSG）来解决爬虫可能无法执行JS的问题。
- 创建并提交XML Sitemap： 这是一个包含你所有重要URL的清单，直接提交给搜索引擎，确保所有页面都被发现。
- 检查robots.txt： 确保你没有意外地屏蔽了重要资源的抓取。

对于Vue, React, Angular等框架构建的SPA，最大的挑战是内容异步加载，初始HTML可能为空。解决方案是：