nuxt中设置默认的seo信息以及对指定路由界面的设置

最新推荐文章于 2025-03-26 18:50:02 发布

躺平阿福

最新推荐文章于 2025-03-26 18:50:02 发布

阅读量681

点赞数 10

分类专栏： nuxt 文章标签： vue.js 前端

本文链接：https://blog.csdn.net/wsfufua/article/details/135359177

版权

nuxt 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了如何在Vue应用中使用useHead功能设置全局和路由特定的SEO信息，包括默认标题、描述和关键字，以及使用官方提供的Head组件进行SEO配置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

设置默认的SEO信息，这里暂时只写了title,keywords,description三个内容，作为举例

全局默认的SEO信息设置

官网示例

在app.vue文件中的script标签中使用 useHead
功能很强大，可以用来实现原生html中的head的绝大部分功能
在这里插入图片描述

自定义例子

useHead 的非相应式类型有以下众多属性，本次只涉及title以及mate
在这里插入图片描述

代码

<script lang="ts" setup>
useHead({
  title: '这个是默认的网站标题',
  meta: [
    { name: 'description', content: '这是你网站的描述内容' },
    { name: 'keywords', content: '这个是你网站的关键字' }
  ],
})
</script>

指定路由界面的SEO信息设置

最开始想接着使用 useHead 但是冒红找不到，写了以下运行后也没有效果
在这里插入图片描述
最后使用的是官方提供的组件 Head

/pages/xx.vue 文件中的 template 区域

<div>
	<Head>
      <Title>xx页面的标题</Title>
      <Meta name="description" content="网站描述" />
      <Meta name="keywords" content="网站关键字" />
	</Head>
</div>