使用 useSeoMeta 进行 SEO 配置

avatar
cmdragon 渡劫
image image

扫描二维码关注或者微信搜一搜:编程智域 前端至全栈交流与成长

在创建现代网站时,搜索引擎优化(SEO)是不可忽视的一个环节。良好的 SEO 配置不仅能提升你的网站在搜索引擎中的排名,还能在社交媒体上更好地展示你的内容。Nuxt3
提供了一个强大的工具 useSeoMeta 来帮助你实现这一目标。

什么是 useSeoMeta

useSeoMeta 是 Nuxt3 提供的一个组合函数(composable),用于定义网站的 SEO 元标签。通过使用 useSeoMeta
,你可以以类型安全的方式指定各种元标签,包括标题、描述、Open Graph 标签等。这有助于避免常见的错误,如拼写错误或使用错误的属性名,同时确保你的标签配置符合标准并具有
XSS 安全性。

如何使用 useSeoMeta

1. 安装 Nuxt3

首先,你需要有一个 Nuxt3 项目。如果还没有项目,可以使用以下命令创建一个新的 Nuxt3 项目:

1
2
3
npx nuxi@latest init my-nuxt3-app
cd my-nuxt3-app
npm install

2. 配置 useSeoMeta

在 Nuxt3 项目中,你通常会在页面组件中配置 SEO 元标签。以下是一个简单的 app.vue 文件示例,展示了如何使用 useSeoMeta
来设置页面的元标签。

示例 1: 静态元标签

在这个示例中,我们设置了一些静态的 SEO 元标签:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<template>
<div>
<h1>欢迎来到我的网站</h1>
</div>
</template>

<script setup lang="ts">

useSeoMeta({
title: '我的神奇网站',
ogTitle: '我的神奇网站',
description: '这是我的神奇网站,让我告诉你关于它的一切。',
ogDescription: '这是我的神奇网站,让我告诉你关于它的一切。',
ogImage: 'https://example.com/image.png',
twitterCard: 'summary_large_image',
});
</script>

在上面的代码中,我们使用 useSeoMeta 来设置以下元标签:

  • title: 网页的标题
  • ogTitle: Open Graph 的标题,用于社交媒体分享
  • description: 网页的描述
  • ogDescription: Open Graph 的描述,用于社交媒体分享
  • ogImage: Open Graph 的图像 URL,用于社交媒体分享
  • twitterCard: Twitter 卡片的类型,如 summary_large_image
示例 2: 动态元标签

有时候,你可能需要根据组件的状态动态生成元标签。以下是如何使用计算属性来实现这一点:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<template>
<div>
<h1>{{ title }}</h1>
<input v-model="title" placeholder="修改标题"/>
</div>
</template>

<script setup lang="ts">

const title = ref('我的标题');

useSeoMeta({
title,
description: computed(() => `这是 ${title.value} 的描述`),
});
</script>

在这个示例中,我们使用 ref 来创建一个响应式的标题,并且通过 computed 来动态生成描述。这样,当标题发生变化时,描述也会自动更新。

参数列表

useSeoMeta 支持超过 100 个参数,用于定义各种元标签。以下是一些常见的参数:

基本元标签

  • title: 页面标题
  • description: 页面描述
  • keywords: 页面关键词
  • robots: 指示搜索引擎爬虫如何处理页面(如index, follow,noindex, nofollow

Open Graph 标签

  • ogTitle: Open Graph 标题
  • ogDescription: Open Graph 描述
  • ogImage: Open Graph 图像 URL
  • ogImageAlt: Open Graph 图像替代文本
  • ogType: Open Graph 类型(如website,article,profile
  • ogUrl: 当前页面的 URL
  • ogSiteName: 网站名称
  • ogLocale: Open Graph 语言区域(如en_US

Twitter Card 标签

  • twitterCard: Twitter 卡片类型(如summary,summary_large_image,app,player
  • twitterTitle: Twitter 标题
  • twitterDescription: Twitter 描述
  • twitterImage: Twitter 图像 URL
  • twitterImageAlt: Twitter 图像替代文本
  • twitterSite: Twitter 账户用户名(通常是@开头)
  • twitterCreator: 内容作者的 Twitter 账户用户名(通常是@开头)
  • twitterPlayer: Twitter 播放器 URL(用于视频卡片)

Facebook 和其他社交平台标签

  • fbAppId: Facebook 应用 ID
  • fbPages: Facebook 页面 URL(如果有多个,使用逗号分隔)

结构化数据

  • schema: JSON-LD 格式的结构化数据(如schema.org类型)

    • @context: JSON-LD 上下文
    • @type: 数据类型(如WebPage,Product,Article
    • name: 名称
    • description: 描述
    • url: URL
    • image: 图像 URL
    • author: 作者信息
    • publisher: 发布者信息
    • datePublished: 发布日期
    • dateModified: 修改日期

链接相关标签

  • canonical: 规范化 URL
  • alternate: 指定其他语言版本的 URL(如hrefLang
  • rel: 链接关系(如nofollow,noopener

视口和移动设备标签

  • viewport: 视口设置(如width=device-width, initial-scale=1
  • appleMobileWebAppTitle: iOS 应用的标题
  • appleMobileWebAppCapable: 是否允许全屏模式(yesno
  • appleMobileWebAppStatusBarStyle: 状态栏样式(如black-translucent

网站图标和徽标

  • favicon: 网站图标(通常在<link rel="icon">中设置)
  • appleTouchIcon: iOS 应用图标(<link rel="apple-touch-icon" href="/path/to/icon.png">
  • msapplicationTileImage: Windows 8/10 触摸屏图标
  • themeColor: 移动设备浏览器工具栏的主题颜色

安全和隐私相关标签

  • Content-Security-Policy: 内容安全策略
  • X-Content-Type-Options: 防止 MIME 类型嗅探
  • X-Frame-Options: 防止点击劫持(如DENY,SAMEORIGIN
  • X-XSS-Protection: 启用或禁用 XSS 保护

预加载和预渲染

  • preload: 预加载资源(如<link rel="preload" href="/path/to/resource" as="script">
  • prefetch: 预取资源(如<link rel="prefetch" href="/path/to/resource">
  • prerender: 预渲染页面(如<link rel="prerender" href="/path/to/page">

图像优化

  • imageSrcSet: 图像的不同分辨率(用于响应式设计)
  • imageSizes: 图像的大小(用于响应式设计)

自定义元数据

  • applicationName: 应用程序名称
  • themeColor: 浏览器的主题颜色
  • ogVideo: Open Graph 视频 URL
  • ogVideoType: Open Graph 视频类型(如video/mp4

更多参数可以参阅官方文档或源代码中的参数列表。SEO Starter HTML Tags · HTML Tag Collections · zhead

总结

使用 useSeoMeta 是在 Nuxt3 中设置 SEO 元标签的一种推荐方式。它不仅支持
TypeScript,并且通过类型安全的配置避免了许多常见错误。无论是静态还是动态的元标签配置,useSeoMeta 都能提供清晰的 API
来帮助你完成任务。

往期文章归档: