9.Nuxt的SEO实践

1. 引言

Nuxt框架在SEO方面的优势主要体现在以下几个方面:

服务器端渲染(SSR): Nuxt默认支持SSR,这意味着搜索引擎爬虫可以直接看到完整的页面内容,而不需要执行JavaScript。
内置的元标签管理: Nuxt提供了比Next更简单的API来管理<head>标签,包括title, meta描述等关键SEO元素。
静态站点生成(SSG): 通过nuxt generate命令,可以生成完全静态的网站,进一步提高了性能和SEO友好度。

2. Nuxt内置的SEO功能

Nuxt框架内置了多个强大的SEO工具,让开发者可以轻松地优化他们的应用程序。让我们详细了解这些功能:

useHead 和 useSeoMeta 组合式函数

Nuxt有2个组合式函数,使得管理头部元标签变得更加简单和灵活:

useHead: 这个函数允许你动态设置<head>标签的内容。

useHead({
  title: 'My Amazing Site',
  meta: [{ name: 'description', content: 'This is my amazing site built with Nuxt 3' }],
  link: [{ rel: 'canonical', href: 'https://example.com' }]
})

useSeoMeta: 这个函数专门用于设置SEO相关的元标签。

useSeoMeta({
  title: 'My Amazing Site',
  ogTitle: 'My Amazing Site - The Best Site Ever',
  description: 'This is my amazing site built with Nuxt 3',
  ogDescription: 'Experience the best site ever built with Nuxt 3',
  ogImage: 'https://example.com/image.jpg'
})

这两者最终达成的效果是一致的，都是在head里面去设置源数据标签，并没有很特殊的区别使用场景，只是有ts类型和进行结构简化了当使用useSeoMeta的时候。

动态元标签管理

Nuxt允许你根据页面内容或路由动态地更新元标签。这对于创建独特的、针对每个页面优化的元描述和标题非常有用。

const route = useRoute()

useHead(() => ({
  title: `${route.params.productName} - Our Store`,
  meta: [
    { name: 'description', content: `Learn more about ${route.params.productName} and purchase it from our store.` }
  ]
}))

这个场景的考虑是这样的，因为有lazy标识，会直接进入页面进行客户端渲染，但因为是新进入页面此时请求还没有拿到数据，title在浏览器上方显示的就是undefined-product, 而当请求结束后，因为data是一个响应式对象，会直接更新页面的title。

const { data } = await useFetch('/api/products/[id]', {
  lazy: true
})
useHead(() => ({
  title: `${data.title}-product`
}))

这只是个小demo，更好的做法是，当没数据的时候，有一个title的占位标志文本。

自动生成规范链接（canonical URLs）

Nuxt可以自动为你的页面生成规范链接,这有助于防止重复内容问题。你可以在nuxt.config.js中配置这个功能:

export default defineNuxtConfig({
  app: {
    head: {
      link: [{ rel: 'canonical', href: 'https://example.com' }]
    }
  }
})

这些语法糖能为Nuxt应用提供了坚实的SEO基础。在下一节中,我们将探讨如何使用@nuxtjs/seo模块来进一步增强你的SEO策略。

3. @nuxtjs/seo 模块

@nuxtjs/seo 是一个功能强大的 Nuxt.js 模块，专门用于优化网站的搜索引擎表现。它提供了一套全面的 SEO 工具，使开发者能够轻松实现各种 SEO 最佳实践。

功能介绍和使用方法

@nuxtjs/seo 模块主要提供以下功能：

自动生成和管理元标签
创建结构化数据（Schema.org）
生成站点地图（Sitemap）
配置 robots.txt
提供动态 SEO 规则生成

要使用 @nuxtjs/seo 模块，首先需要安装：

npm install @nuxtjs/seo

然后在 nuxt.config.ts 文件中添加模块：

export default defineNuxtConfig({
  modules: ['@nuxtjs/seo']
})