登录/注册
当前位置:
useHead的使用:Nuxt3 如何添加meta-title等SEO信息
熊孩子 |  2023-11-05 16:36:51
 101人浏览
摘要:useHead的使用:Nuxt3 如何添加meta-title等SEO信息

Nuxt2中

在nuxt 如果要配置meta熟悉,设置title,可以在nuxt.config.js中使用


 /*
    ** Headers of the page
    */
    head: {
        // title: process.env.npm_package_name || '',
        title: '中国传统颜色_中国风_古风' || '',
        meta: [
            {charset: 'utf-8'},
            {name: 'viewport', content: 'width=device-width, initial-scale=1'},
            {hid: 'description', name: 'description', content: process.env.npm_package_description || ''},
            {name: 'keywords', content: "中国传统颜色合集,中国风、古风颜色全集,纯色颜色RGB全集,古风美颜色"}
        ],
        link: [
            {rel: 'shortcut icon external nofollow"', type: 'image/x-icon', href: '/favicon.ico'}
        ],
        script: [
            {src: 'https://hm.baidu.com/hm.js?909f488f732957652670b622379eb99c'}]
    },

但是在nuxt3中,这样不行了

Nuxt3

nuxt有些变化,官方推荐使用usehead方式

我还是在nuxt.config.ts里配置的,如下


meta: {
    titleTemplate: 'Prefix - %s',
    meta: [
      { charset: 'utf-8' },
      {
        name: 'viewport',
        content: 'width=device-width, initial-scale=1, user-scalable=0',
      },
      {
        hid: 'keywords',
        name: 'keywords',
        content: 'nuxt3',
      },
      {
        hid: 'description',
        name: 'description',
        content:
          '月穿云',
      },
    ],
    link: [],
    script: [],
  },

我这里title使用的是模板titleTemplate,这样在页面配置了前缀。


 <Title> {{ metaTitle }}</Title>

这样页面渲染的时候,就会把页面的设置title加入到模板中。

总结

nuxt和nuxt3,配置有差别,都可以在config下配置

nuxt3官方有专门的Head Management介绍,通过definePageMeta搭配usehead-composable,有兴趣可以详细研究下。

本文由美丽水墨(www.meili.ink)提供。


上一篇: 暂无相关文章