使用 useSeoMeta 进行 SEO 配置

news/2024/9/22 21:35:44/文章来源:https://www.cnblogs.com/Amd794/p/18333232

title: 使用 useSeoMeta 进行 SEO 配置
date: 2024/7/30
updated: 2024/7/30
author: cmdragon

excerpt:
摘要：本文介绍了Nuxt3中的useSeoMeta组合函数，用于简化和优化网站的SEO配置。通过这个工具，开发者可以在Nuxt3项目中方便地设置页面元标签，包括标题、描述以及Open Graph和Twitter Card标签等，支持静态与动态元数据配置，提升网站在搜索引擎和社交媒体上的表现。

categories:

  • 前端开发

tags:

  • SEO优化
  • Nuxt3
  • Web开发
  • 代码示例
  • 元标签
  • 动态配置
  • 前端技术

image
image

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

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

什么是 useSeoMeta？

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

如何使用 useSeoMeta

1. 安装 Nuxt3

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

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

2. 配置 useSeoMeta

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

示例 1: 静态元标签

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


<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: 动态元标签

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


<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: 是否允许全屏模式（yes或no）
  • 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
来帮助你完成任务。

余下文章内容请点击跳转至 个人博客页面 或者 扫码关注或者微信搜一搜：编程智域 前端至全栈交流与成长，阅读完整的文章：使用 useSeoMeta 进行 SEO 配置 | cmdragon's Blog

往期文章归档：

  • Nuxt.js必读：轻松掌握运行时配置与 useRuntimeConfig | cmdragon's Blog
  • Nuxt.js 路由管理：useRouter 方法与路由中间件应用 | cmdragon's Blog
  • useRoute 函数的详细介绍与使用示例 | cmdragon's Blog
  • 使用 useRequestURL 组合函数访问请求URL | cmdragon's Blog
  • Nuxt.js 环境变量配置与使用 | cmdragon's Blog
  • 服务端渲染中的数据获取：结合 useRequestHeaders 与 useFetch | cmdragon's Blog
  • 使用 useRequestEvent Hook 访问请求事件 | cmdragon's Blog
  • 使用 useNuxtData 进行高效的数据获取与管理 | cmdragon's Blog
  • Nuxt 3 使用指南：掌握 useNuxtApp 和运行时上下文 | cmdragon's Blog
  • 使用 useLazyFetch 进行异步数据获取 | cmdragon's Blog
  • 使用 useLazyAsyncData 提升数据加载体验 | cmdragon's Blog
  • Nuxt.js 中使用 useHydration 实现数据水合与同步 | cmdragon's Blog
  • useHeadSafe：安全生成HTML头部元素 | cmdragon's Blog
  • Nuxt.js头部魔法：轻松自定义页面元信息，提升用户体验 | cmdragon's Blog
  • 探索Nuxt.js的useFetch：高效数据获取与处理指南 | cmdragon's Blog
  • Nuxt.js 错误侦探：useError 组合函数 | cmdragon's Blog
  • useCookie函数：管理SSR环境下的Cookie | cmdragon's Blog

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/774209.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

史上最便宜的服务器

史上最便宜的服务器

史上最便宜的服务器：免费空间 10米永久使用，不过空间容量只有100M 提示：不是广告，有时候需要用的时候找老半天，干脆做个随笔记录
阅读更多...
格式举例

格式举例

文章目录a markdown unordered list which will be replaced with the toc, * 号前面和后面需要有个空格。文本 这是一个段落，我要把它设置为蓝色，只需在前面的标签上嵌入style属性即可，style用于内联css。 to bold text, use <strong>. to italicize text, use <e…
阅读更多...
代码随想录二刷(链表章节)

代码随想录二刷(链表章节)

代码随想录二刷(链表章节)链表就是通过指针串联在一起的线性结构，每个节点都是由一个数据域和指针域(存放下一个节点的指针)。 双链表就是每个节点中既有指向前一个节点的，也有指向后一个节点的。循环链表就是把头和尾连起来。性能分析如下：下面来看下链表的具体题目： Leet…
阅读更多...
[Redis]哨兵

[Redis]哨兵

这次聊聊，Redis 的哨兵机制。为什么要有哨兵机制？ 在 Redis 的主从架构中，由于主从模式是读写分离的，如果主节点（master）挂了，那么将没有主节点来服务客户端的写操作请求，也没有主节点给从节点（slave）进行数据同步了。这时如果要恢复服务的话，需要人工介入，选择一个…
阅读更多...
一屏掌控物流风云：数据大屏开启高效运营时代

一屏掌控物流风云：数据大屏开启高效运营时代

在日新月异的数字化浪潮中，物流行业正以前所未有的速度迈向智能化、高效化的新纪元。作为这一变革的核心驱动力之一，山海鲸可视化搭建的物流订单数据监控大屏以其强大的信息整合能力、实时的数据可视化展示以及精准的业务决策支持，成为了现代物流企业不可或缺的智慧中枢。想…
阅读更多...
ofd轻阅读超大文件优化方案

ofd轻阅读超大文件优化方案

本人使用Typescript开发了一款ofd 阅读器，参见文章《ofd轻阅读》。web端实现阅读功能有两种方案： ofd转svg；使用h5 canvas。 两种方案各有优劣，本人采用了canvas方案， 劣势：开发难点较大，需要处理更多的细节（比如：文字选中）。 优势：对细节掌控能力更强，能满足用户更…
阅读更多...
笔记：从Aurora 8b/10b 到Aurora 64b/66b (一)：Aurora 8b/10b

笔记：从Aurora 8b/10b 到Aurora 64b/66b (一)：Aurora 8b/10b

参考： https://www.xilinx.com/products/intellectual-property/aurora8b10b.html#documentation https://docs.amd.com/r/en-US/pg046-aurora-8b10b https://docs.amd.com/v/u/en-US/aurora_8b10b_ds797 https://mp.weixin.qq.com/s/gT4QUgvoFF6UI0PAhfEPvQ 补丁： Aurora 系…
阅读更多...
矩阵指数的定义

矩阵指数的定义

人就像是被蒙着眼推磨的驴子，生活就像一条鞭子；当鞭子抽到你背上时，你就只能一直往前走，虽然连你也不知道要走到什么时候为止，便一直这么坚持着。
阅读更多...
虚树【学习笔记】

虚树【学习笔记】

为什么要用虚树？ 例题 在某些树上问题中，对于某次询问，我们并不需要用到全部的树上的点： 例如，例题中：总点数 \(n \le 2.5\times10^5\) 询问次数 \(m \le 5\times10^5\) 询问的点数 \(\sum k_i \le 5\times10^5\)我们可以发现其实每次询问均摊下来的询问点数k并不多，但如…
阅读更多...
组合机床与自动化加工技术的网站开发

组合机床与自动化加工技术的网站开发

这两天一直在学习如何排版，开发一个网站，我运用了前几天所学的vue基本语法将网站的大致模样copy下来这期间我查找了不少知识 比如照片如何在网页中不变性的缩放，通过研究我运用class固定结构和class="container"属性将组件固定形成此网页
阅读更多...
火山引擎VeDI数据技术分享：两个步骤，为Parquet降本提效

火山引擎VeDI数据技术分享：两个步骤，为Parquet降本提效

本文将介绍字节跳动基于Parquet格式降本增效的技术原理和在具体业务中的实践，首先介绍了Parquet格式在字节跳动的应用，然后将结合具体的应用场景：小文件合并和列级TTL ，从问题产生的背景和解决问题的技术方案出发，介绍如何基于Parquet格式实现降本增效的目标。更多技术交流…
阅读更多...
图片预加载和懒加载

图片预加载和懒加载

🧑‍💻 写在开头 点赞 + 收藏 === 学会🤣🤣🤣图片预加载和图片懒加载是网页优化的两种常见技术，它们可以提升用户体验并改善网页性能。 图片预加载（Image Preloading）： 图片预加载是指在页面加载时提前加载图片，使其缓存在浏览器中，当用户需要查看这些图片时，…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023