How to set up TDK with nuxt

1. Why set up tdk?

tdk is beneficial to the SEO of the page

2. Two ways to set up tdk?

1. Set the global head TKD in nuxt.config.js

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

2. Set the TKD of a separate page head

Setting hid: 'name’ in the xxx.vue file represents a unique identifier. The page’s hid: 'name’ will override the global 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>