nuxt如何设置TDK

一、为什么要设置tdk？

tdk有利于页面的SEO

二、设置tdk的两种方式？

1、在nuxt.config.js设置全局的head的TKD

module.exports = {
    
    
  head: {
    
    
    title: '全局 title',
    meta: [
      {
    
     charset: 'utf-8' },
      {
    
     hid: 'description', name: 'description', content: '全局 Meta description' }
      {
    
     hid: 'keywords', name: 'keywords', content: '全局 Meta keywords' }
    ]
  }
}

2、设置单独页面head的TKD

在xxx.vue文件中设置 hid: 'name’表示唯一标识 页面的hid: 'name’会覆盖全局的hid: ‘name’

<script>
    export default {
    
    
        head() {
    
    
            return {
    
    
                title:  '单独页面 title',
                meta: [{
    
    
                        hid: 'description',
                        name: 'description',
                        content: '单独页面Meta description'
                    },
                    {
    
    
                        hid: 'keywords',
                        name: 'keywords',
                        content: '单独页面Meta keywords'
                    },
                ]
            }
        },
    }
</script>