【前端】【面试】在 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', // SSGssr: 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 | 自动生成并配置 | 提升爬虫抓取效率 |