入门篇八 Nuxt4页面元信息与 SEO：让搜索引擎爱上你的网站

文章目录

• • [一、全局 meta 配置](#一、全局 meta 配置)
  • [二、页面级 meta 配置](#二、页面级 meta 配置)
  • [三、动态 meta](#三、动态 meta)
  • [四、Open Graph 社交分享](#四、Open Graph 社交分享)
  • 五、结构化数据（JSON-LD）
  • [六、规范链接（Canonical URL）](#六、规范链接（Canonical URL）)
  • [七、robots.txt 和 sitemap](#七、robots.txt 和 sitemap)
  • [八、性能优化 meta](#八、性能优化 meta)
  • [九、调试 SEO](#九、调试 SEO)
  • 总结

网站做得再漂亮，如果搜索引擎搜不到，用户就发现不了你。SEO（搜索引擎优化）对网站至关重要。Nuxt 内置了完善的 meta 管理功能，让你轻松搞定页面标题、描述、关键词等 SEO 元素。

一、全局 meta 配置

在 nuxt.config.ts 中配置全局默认 meta：

export default defineNuxtConfig({
  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.xml

Nuxt 有专门的 sitemap 模块：

pnpm add @nuxtjs/sitemap

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxtjs/sitemap'],
  site: {
    url: 'https://example.com'
  }
})

会自动根据 pages 目录生成 sitemap.xml。

八、性能优化 meta

一些 meta 能提升页面加载性能：

// nuxt.config.ts
export default defineNuxtConfig({
  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 是否生效：

1. 打开开发者工具
2. 切换到 Elements 面板
3. 查看 <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完整系列，持续更新中。。

---

内容有帮助？点赞、收藏、关注三连！评论区等你 💪