前端如何做 SEO 优化？

<!-- ✅ 语义化标签 -->
<header>
  <nav>导航</nav>
</header>
<main>
  <article>
    <h1>标题</h1>
    <p>内容</p>
  </article>
  <aside>侧边栏</aside>
</main>
<footer>页脚</footer>

<!-- ❌ 全 div -->
<div class="header">
  <div class="nav">导航</div>
</div>

<head>
  <title>页面标题 - 品牌（60字符以内）</title>
  <meta name="description" content="页面描述（160字符以内）">
  <meta name="keywords" content="关键词1, 关键词2">
  <link rel="canonical" href="https://example.com/page">
  
  <!-- Open Graph（社交媒体分享）-->
  <meta property="og:title" content="标题">
  <meta property="og:description" content="描述">
  <meta property="og:image" content="https://example.com/image.jpg">
  <meta property="og:url" content="https://example.com/page">
</head>

// CSR（客户端渲染）→ SEO 差
// 搜索引擎可能不执行 JS，看到空页面

// SSR（服务端渲染）→ SEO 好
// 服务器返回完整 HTML

// SSG（静态生成）→ SEO 好
// 构建时生成 HTML

// Next.js / Nuxt.js 提供 SSR/SSG

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "文章标题",
  "author": { "@type": "Person", "name": "作者" },
  "datePublished": "2024-01-01",
  "image": "https://example.com/image.jpg"
}
</script>

<!-- sitemap.xml -->
<urlset>
  <url>
    <loc>https://example.com/page1</loc>
    <lastmod>2024-01-01</lastmod>
    <changefreq>weekly</changefreq>
    <priority>0.8</priority>
  </url>
</urlset>

# robots.txt
User-agent: *
Allow: /
Disallow: /admin/
Sitemap: https://example.com/sitemap.xml

<!-- 标题层级 -->
<h1>主标题（每页一个）</h1>
<h2>次标题</h2>
<h3>三级标题</h3>

<!-- 图片 alt -->
<img src="cat.jpg" alt="一只橘猫在晒太阳">

<!-- 链接描述 -->
<a href="/about">关于我们</a>  <!-- ✅ -->
<a href="/about">点击这里</a>   <!-- ❌ -->

<!-- 面包屑导航 -->
<nav>
  <a href="/">首页</a> > <a href="/blog">博客</a> > <span>文章标题</span>
</nav>

// SPA（CSR）的问题：
// 1. 初始 HTML 为空（只有一个 <div id="app"></div>）
// 2. 路由切换不改变 URL（需要 History API）
// 3. 搜索引擎可能不执行 JS

// 解决方案：
// 1. 使用 SSR（Next.js / Nuxt.js）
// 2. 预渲染（prerender-spa-plugin）
// 3. 动态渲染（检测爬虫 UA 返回 SSR 内容）