【前端】【面试】在 Nuxt.js SSR/SSG 应用开发的 SEO 优化方面，你采取了哪些具体措施来提高页面在搜索引擎中的排名？

在 Nuxt.js 的 SSR（服务器端渲染）或 SSG（静态站点生成）应用中，SEO 优化是非常核心的工作内容之一。利用 Nuxt.js 的特性，我们可以通过多个维度系统地提升搜索引擎排名。

下面是我在实际项目中采取的 SEO 优化措施。

---

Nuxt.js SSR/SSG 应用中的 SEO 优化实战

一、基础 SEO 元信息优化

1. 动态设置每页的 title 与 meta 标签

export default {
  head() {
    return {
      title: '产品详情 - 某某商城',
      meta: [
        { hid: 'description', name: 'description', content: '这是一款高性能的产品...' },
        { hid: 'keywords', name: 'keywords', content: '产品,电商,商城' }
      ]
    }
  }
}

• ✅ 优势：每个页面都有唯一的标题与描述，提升搜索引擎相关性评分。

2. 使用 hid 防止 meta 重复

Nuxt 自动去重 meta，但必须提供 hid，防止重复插入。

---

二、结构化数据（Schema.org）增强

1. 嵌入 JSON-LD 格式的数据结构

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "苹果手机",
  "description": "最新款 iPhone 15，拍照更清晰",
  "brand": { "@type": "Brand", "name": "Apple" }
}
</script>

• ✅ 优势：帮助 Google 更好理解页面内容，出现在富文本卡片中（如商品卡片、评分星级等）。

---

三、页面性能与渲染优化（影响核心 Web Vitals）

1. 采用 SSR 或 SSG 模式

• SSR：适合频繁更新的页面（如新闻、论坛）
• SSG：适合固定内容，如博客、商品页

export default {
  target: 'static', // SSG
  ssr: true         // SSR 开启
}

• ✅ 优势：首屏加载快，搜索引擎可直接抓取完整 HTML。

2. 图片懒加载 + 使用 <nuxt-img>

<nuxt-img src="/banner.jpg" width="600" height="300" lazy />

• ✅ 优势：减少首次加载资源大小，提高页面速度评分（影响 SEO 排名）。

---

四、路由与链接结构优化

1. URL 语义化 + 静态化

pages/
├── product/
│   └── _id.vue  →  /product/123

• ✅ 使用动态路由生成语义化路径，利于搜索引擎理解页面。

2. 配置 sitemap.xml 自动生成

使用 @nuxtjs/sitemap 模块：

modules: ['@nuxtjs/sitemap'],
sitemap: {
  hostname: 'https://example.com',
  routes: async () => {
    const products = await axios.get('/api/products')
    return products.map(p => `/product/${p.id}`)
  }
}

---

五、社交媒体优化（Open Graph + Twitter Card）

head() {
  return {
    meta: [
      { property: 'og:title', content: '爆款苹果手机特卖' },
      { property: 'og:image', content: 'https://example.com/iphone.jpg' },
      { name: 'twitter:card', content: 'summary_large_image' }
    ]
  }
}

• ✅ 优势：在微信、微博、Twitter、Facebook 分享时展现卡片，提升点击率。

---

六、其他细节优化

1. 使用 Nuxt I18n 处理多语言 SEO

modules: ['@nuxtjs/i18n'],
i18n: {
  locales: ['en', 'zh'],
  defaultLocale: 'zh',
  seo: true
}

• 自动注入 hreflang，告诉搜索引擎页面对应语言版本。

2. 自动生成 robots.txt

modules: ['@nuxtjs/robots'],
robots: {
  UserAgent: '*',
  Disallow: '',
  Sitemap: 'https://example.com/sitemap.xml'
}

• 帮助搜索引擎确定抓取策略。

---

七、Nuxt SEO 模块推荐组合（开箱即用）

功能	模块名
SEO 元数据管理	@nuxtjs/head（已内置）
sitemap.xml	@nuxtjs/sitemap
robots.txt	@nuxtjs/robots
多语言 SEO	@nuxtjs/i18n
图片优化	@nuxt/image

---

八、总结一张表

优化点	工具/做法	作用
标题描述优化	head() 函数	提高相关性，吸引点击
Schema 标注	JSON-LD 嵌入	生成富卡片，提高可见度
SSR/SSG 渲染模式	ssr: true / target: 'static'	提高首屏速度，利于爬虫抓取
图片懒加载	<nuxt-img lazy>	减少页面体积，提高性能评分
路由语义化	文件命名 + 动态路由	清晰的链接结构，提升权重
社交分享优化	Open Graph / Twitter Card 元信息	提高社交媒体曝光
多语言 SEO	nuxt-i18n 模块	对不同语言做精准定位
robots/sitemap	自动生成并配置	提升爬虫抓取效率

---