当前位置：首页 > news >正文

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

news 来源：原创 2025/5/5 6:17:32

在 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	自动生成并配置	提升爬虫抓取效率