Nuxt3中的常用seo标签

疆~

已于 2023-04-10 13:35:18 修改

阅读量1.4k

点赞数

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

于 2023-04-10 10:34:11 首次发布

本文链接：https://blog.csdn.net/qq_40323256/article/details/130053958

版权

nuxt 专栏收录该内容

16 篇文章

订阅专栏

文章讲述了在Nuxt.js框架中如何进行SEO优化，包括使用<Title>和<Meta>标签定义网页头部信息，利用useHead组合式函数动态设置头部元数据，以及通过titleTemplate自定义标题模板。此外，还介绍了在page目录下使用definePageMeta设置页面元信息的方法。

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

title标签：主要是为了告诉搜索引擎我们的网站标题是什么，然后搜索引擎才会根据你提供的的title给你打上tag，用户在搜索的时候才会搜索到你。
meta标签：这个标签根据name的不同有很多中，和SEO相关的主要是name=description 和name=keywords 这两种，如果不设置这两个标签，对SEO的效果就会有所影响。所以我们在开发需要SEO的网站时，对这两个标签一定要进行设置

template中的标签定义Head

Nuxt提供了<Title>, <Base>,<NoScript>,<Meta>, <Link>,<Body>,<Html>和<Head>等组件让你在组件中方便的设置和更改你项目中的metadata。

由于这些组件名与原生的HTML中的一些元素一样，所以你在template中使用时，一定要注意大写。

<Head> 和<Body>可以内部包含元标签(meta tags)。但对最终渲染成的HTML中的嵌套元标签没有什么影响。

    <Head>
          <Title>网页标题</Title>
          <Link rel="icon" href="/favicon.ico"></Link>
          <Meta name="keywords" content="网页关键字" />
          <Meta name="description" content="网页介绍网页介绍"/>
     </Head>

useHead来设置头部信息

这种方式支持响应式。

Nuxt内部是使用@vueuse/head来实现此功能的。
和所有的其它组合式函数样，只能在组件中的setup和生命周期中的钩子中使用此接口

useHead({
     title: "网页标题",
   meta: [
      { name: "description", content: "网页介绍网页介绍网页介绍" },
      { name: "keywords", content: "网页关键字" },
    ],
   link: [
        { 
          rel: 'icon', 
          href: '/favicon.ico'
        },
      ]
   });

titleTemplate标题模板

可以使用titleTemplate这个可选项，这个可以提供一个动态的模板来定制化你的网站的标题。例如给每个页面的头部添加网站名。
titleTemplate可以是一个字符串，字符串中的%s可以被标题替换。也可以是一个函数。
如果你想使用函数，那你就不能在nuxt.config配置文件中去设置了，可以在app.vue文件中去设置，这样就可以将此模板应用到全部页面了

nuxt.config.ts中配置

这种方式并不支持响应式数据。

如果需要全局的响应式数据的话，可以在app.vue中使用useHead接口

definePageMeta

在page/目录下，可以基于当前路由使用definePageMeta来设置元信息

这些信息会在项目的构建编译阶段被提取，你不能动态设置这些信息。

definePageMeta设置后，就可以在文件中使用这些路由信息了

<template>
  <div>hello 大家好</div>
</template>
<script setup>
definePageMeta({
  title: "网页标题",
});

const route = useRoute();

useHead({
  meta: [{ property: "og:title", content: `名称 - ${route.meta.title}` }],
});
</script>