文章目录
- 一、全局 meta 配置
- 二、页面级 meta 配置
- 三、动态 meta
- 四、Open Graph 社交分享
- 五、结构化数据（JSON-LD）
- 六、规范链接（Canonical URL）
- 七、robots.txt 和 sitemap
- 八、性能优化 meta
- 九、调试 SEO
- 总结
网站做得再漂亮，如果搜索引擎搜不到，用户就发现不了你。SEO（搜索引擎优化）对网站至关重要。Nuxt 内置了完善的 meta 管理功能，让你轻松搞定页面标题、描述、关键词等 SEO 元素。
一、全局 meta 配置
在nuxt.config.ts中配置全局默认 meta：
exportdefaultdefineNuxtConfig({app:{head:{title:'我的网站',titleTemplate:'%s - 我的网站',// 页面标题模板meta:[{name:'description',content:'这是一个使用 Nuxt 4 构建的网站'},{name:'keywords',content:'Nuxt, Vue, SSR, 前端开发'},{name:'author',content:'Your Name'},{charset:'utf-8'},{name:'viewport',content:'width=device-width, initial-scale=1'}],link:[{rel:'icon',type:'image/x-icon',href:'/favicon.ico'}],htmlAttrs:{lang:'zh-CN'}}}})现在所有页面都会有这些基础的 meta 信息。
二、页面级 meta 配置
每个页面可以覆盖或追加 meta 信息。使用useHead或useSeoMeta：
<script setup lang="ts"> useHead({ title: '首页', meta: [ { name: 'description', content: '这是首页的描述信息' } ] }) </script>更推荐使用useSeoMeta，它有更好的类型提示：
<script setup lang="ts"> useSeoMeta({ title: '文章详情', description: '这是文章详情页面的描述', ogTitle: '文章详情 - 我的网站', // Open Graph 标题 ogDescription: '分享到社交媒体时显示的描述', ogImage: 'https://example.com/article-cover.jpg', // 分享图片 twitterCard: 'summary_large_image' // Twitter 卡片类型 }) </script>三、动态 meta
页面标题和描述经常需要动态生成，比如文章详情页：
<script setup lang="ts"> const route = useRoute() const articleId = route.params.id // 获取文章数据 const { data: article } = await useFetch(`/api/articles/${articleId}`) // 动态设置 meta useHead({ title: computed(() => article.value?.title || '加载中...'), meta: [ { name: 'description', content: computed(() => article.value?.summary || '') } ] }) </script>四、Open Graph 社交分享
想让你的网站分享到微信、微博、Facebook 时显示漂亮的卡片，需要配置 Open Graph：
<script setup lang="ts"> const article = { title: 'Nuxt 4 完全指南', summary: '从入门到精通，一文掌握 Nuxt 4', cover: 'https://example.com/cover.jpg', author: 'Your Name' } useSeoMeta({ // 基本信息 title: article.title, description: article.summary, // Open Graph（微信、Facebook 等） ogTitle: article.title, ogDescription: article.summary, ogImage: article.cover, ogUrl: 'https://example.com/articles/nuxt4-guide', ogType: 'article', ogSiteName: '我的网站', // Twitter twitterCard: 'summary_large_image', twitterTitle: article.title, twitterDescription: article.summary, twitterImage: article.cover }) </script>现在分享到社交媒体时，就会显示带图片的精美卡片了。
五、结构化数据（JSON-LD）
结构化数据能让搜索引擎更好理解你的内容，提升搜索排名。比如文章类型：
<script setup lang="ts"> const article = { title: 'Nuxt 4 完全指南', author: 'Your Name', date: '2024-01-15', image: 'https://example.com/cover.jpg' } useHead({ script: [ { type: 'application/ld+json', children: JSON.stringify({ '@context': 'https://schema.org', '@type': 'Article', headline: article.title, author: { '@type': 'Person', name: article.author }, datePublished: article.date, image: article.image }) } ] }) </script>常见结构化数据类型：
| 类型 | 用途 |
|---|---|
| Article | 文章 |
| Product | 产品 |
| Recipe | 食谱 |
| Event | 活动 |
| Organization | 组织 |
| BreadcrumbList | 面包屑导航 |
六、规范链接（Canonical URL）
避免重复内容被搜索引擎降权，需要设置规范链接：
<script setup lang="ts"> const route = useRoute() const canonicalUrl = `https://example.com${route.path}` useHead({ link: [ { rel: 'canonical', href: canonicalUrl } ] }) </script>七、robots.txt 和 sitemap
让搜索引擎知道哪些页面可以抓取：
创建public/robots.txt：
User-agent: * Allow: / Disallow: /admin/ Disallow: /api/ Sitemap: https://example.com/sitemap.xmlNuxt 有专门的 sitemap 模块：
pnpmadd@nuxtjs/sitemap// nuxt.config.tsexportdefaultdefineNuxtConfig({modules:['@nuxtjs/sitemap'],site:{url:'https://example.com'}})会自动根据pages目录生成sitemap.xml。
八、性能优化 meta
一些 meta 能提升页面加载性能：
// nuxt.config.tsexportdefaultdefineNuxtConfig({app:{head:{meta:[// DNS 预解析{rel:'dns-prefetch',href:'https://fonts.googleapis.com'},// 预连接{rel:'preconnect',href:'https://fonts.googleapis.com'},// 预加载关键资源{rel:'preload',href:'/fonts/main.woff2',as:'font',type:'font/woff2',crossorigin:'anonymous'}],link:[// 预加载{rel:'preload',href:'/critical.css',as:'style'}]}}})九、调试 SEO
Chrome 开发者工具可以查看 meta 是否生效：
- 打开开发者工具
- 切换到 Elements 面板
- 查看
<head>标签内的内容
也可以用在线工具检查：
- Facebook Sharing Debugger
- Twitter Card Validator
- Google Rich Results Test
总结
SEO 是一个持续优化的过程，核心要点：
| 功能 | 实现方式 |
|---|---|
| 全局 meta | nuxt.config.ts的app.head |
| 页面 meta | useHead()或useSeoMeta() |
| Open Graph | ogTitle,ogDescription,ogImage |
| 结构化数据 | JSON-LD script 标签 |
| 规范链接 | <link rel="canonical"> |
| sitemap | @nuxtjs/sitemap模块 |
入门篇到这里就结束了！接下来进入基础篇，我们会深入聊聊路由、组件、样式等核心概念。
相关文章
入门篇三：Nuxt4组件自动导入：写代码少敲一半字
入门篇二：Nuxt 4路由自动生成：告别手动配置路由的日子
延伸阅读
nuxt4完整系列，持续更新中。。
内容有帮助？点赞、收藏、关注三连！评论区等你 💪
