提升 SEO

1. Meta 信息（title、description）

<head>
  <title>京东(JD.COM)-正品低价、品质保障</title>
  <meta name="description" content="京东JD.COM-专业的综合网上购物商城...">
  <meta name="keywords" content="网上购物,家电,手机,电脑">
</head>

标签	重要性	说明
`<title>`	⭐⭐⭐ 最重要	每个页面唯一，直接显示在搜索结果标题
`<meta description>`	⭐⭐ 重要	显示在搜索结果摘要，影响点击率
`<meta keywords>`	⭐ 几乎无效	Google 2009 年起已忽略此字段，仅部分小搜索引擎参考

title、description 字数不宜过长，超出部分被截断
不要堆砌关键词，搜索引擎会降权甚至惩罚

2. 语义化 HTML

搜索引擎通过标签语义理解内容权重，正确使用语义标签等于给内容"打标签"。

<!-- 每个页面只有一个 h1，描述页面核心主题 -->
<h1>商品详情 - iPhone 15</h1>

<!-- 用 h2-h6 构建内容层级 -->
<h2>产品规格</h2>

<!-- 强调重要内容 -->
<strong>限时特惠</strong>

<!-- 图片必须有 alt，搜索引擎无法"看图" -->
<img src="product.jpg" alt="iPhone 15 黑色 256GB 正面图">

<!-- 广告、外链加 nofollow，避免分散权重 -->
<a href="ad.com" rel="nofollow">广告链接</a>

3. SSR / SSG

服务端直接输出内容到 HTML 后再返回给浏览器，搜索引擎可以在第一次抓取就能获取到完整内容

4. 扁平化网站层次

层级控制在 3 层以内，层级越深爬虫越不愿意深入
URL 语义清晰，优先使用描述性路径

❌ example.com/p?id=123
✅ example.com/product/iphone-15

❌ 首页 → 分类 → 子分类 → 详情（4层）
✅ 首页 → 分类 → 详情（3层）

5. 性能优化（Core Web Vitals）

Google 将页面性能纳入排名算法，三个核心指标：

指标	全称	含义	目标
LCP	Largest Contentful Paint	最大内容渲染时间	< 2.5s
INP	Interaction to Next Paint	交互响应延迟	< 200ms
CLS	Cumulative Layout Shift	页面布局稳定性	< 0.1

加载超时搜索引擎会放弃爬取，性能差也会直接影响排名。

6. 框架的 SEO 方案

SPA（Vue/React）默认是 CSR（客户端渲染），爬虫拿到的是空 HTML，SEO 极差。

方案一：SSR（服务端渲染）

每次请求都在服务端实时生成 HTML 返回，内容实时。

适合：内容频繁更新的页面（新闻、商品详情）
工具：Next.js、Nuxt.js

方案二：SSG（静态生成）

构建时生成所有页面的静态 HTML 文件，Nginx 直接返回。

适合：内容相对固定的页面（博客、文档、官网）

生成目录结构：
dist/
  home/index.html
  about/index.html
  product/iphone-15/index.html

# Nginx 配置：history 模式路由映射到对应 HTML 文件
location / {
  try_files $uri $uri/index.html /index.html;
}

动态设置每个页面的 Meta 信息

// 路由配置
const routes = [
  {
    path: '/product/:id',
    component: ProductDetail,
    meta: {
      title: 'iPhone 15 - 京东',
      description: '购买 iPhone 15，享受正品保障',
      keywords: 'iPhone 15, 苹果手机, 京东'
    }
  }
]

// 路由守卫动态更新
router.beforeEach((to) => {
  const { title, description, keywords } = to.meta
  document.title = title
  document.querySelector('meta[name="description"]').setAttribute('content', description)
  document.querySelector('meta[name="keywords"]').setAttribute('content', keywords)
})

7. 其他辅助手段

sitemap.xml：列出网站所有 URL，帮助搜索引擎发现页面

<urlset>
  <url>
    <loc>https://example.com/product/iphone-15</loc>
    <lastmod>2024-01-01</lastmod>
    <priority>0.8</priority>
  </url>
</urlset>

robots.txt：告诉爬虫哪些页面可以/不可以抓取

User-agent: *
Disallow: /admin/     # 禁止爬取后台页面
Disallow: /api/       # 禁止爬取接口
Allow: /              # 其余允许
Sitemap: https://example.com/sitemap.xml