# Meta

Nuxt automatically includes Vue Meta, so you don't have to do anything. If you need it added for vue, figure it out some other way.

# Nuxt config.js Meta

This is for global meta data information. These will trickle down to the pages if they don't have anything to override it. You can also make title templates. This is also a good place to put Font Awesome and Google Fonts.

head: {
    title: "Title 1 | ",
    titleTemplate: '%s Website', // Produces 'Title 1 | Website'
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      {
        hid: 'description',
        name: 'description',
        content:
          'This is a global description'
      }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
      {
        rel: 'stylesheet',
        href:
          'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css'
      }
    ]
  },

# Add Meta Data to Pages

Use this on each page. The hid is to make sure that the content is not duplicated.

head () {
    return {
        title: this.title,
        meta: [
            // hid is used as unique identifier. Do not use `vmid` for it as it will not work
            { hid: 'description', name: 'description', content: 'My custom description' }
        ]
    }
}

# Dynamically Add Title

This code will show only the title template until the object is populated.

head() {
    return {
        title: this.object.title ? this.object.title + ' | ' : ''
    }
},

# Robots

If there is a page you want available, but don't want Google or other search engines to find it, you can use the following to hide the page from search engines. A good use case would be for a UI Kit, or a demo page.

head: {
  meta: [
    {
      name: 'robots',
      content: 'noindex,nofollow'
    },
  ]
},

# Favicon Meta

If you use the content generated by Real Favicon Generator, then you will get some raw HTML to plug in to your site. Since Nuxt does things a little different, it is a little bit of a hassle to put in. Here is the basic layout to add that metadata to your page.

head: {
  meta: [
    {
      name: "apple-mobile-web-app-title",
      content: "Nathan Blaylock Media"
    },
    {
      name: "application-name",
      content: "Nathan Blaylock Media"
    },
    {
      name: "msapplication-TileColor",
      content: "#671110"
    },
    {
      name: "msapplication-config",
      content: "/img/browserconfig.xml"
    },
    {
      name: "theme-color",
      content: "#671110"
    }
  ],
  link: [
    {
      rel: 'icon',
      type: 'image/x-icon',
      href: '/favicon.ico'
    },
    {
      rel: 'apple-touch-icon',
      sizes: '180x180',
      href: '/img/apple-touch-icon.png'
    },
    {
      rel: 'icon',
      type: 'image/png',
      sizes: '32x32',
      href: '/img/favicon-32x32.png'
    },
    {
      rel: 'icon',
      type: 'image/png',
      sizes: '16x16',
      href: '/img/favicon-16x16.png'
    },
    {
      rel: 'manifest',
      href: '/img/site.webmanifest'
    },
    {
      rel: 'mask-icon',
      href: '/img/safari-pinned-tab.svg',
      color: '#671110'
    },
    {
      rel: 'shortcut icon',
      href: '/img/favicon.ico'
    }
  ]
},

← Vue CLI Nuxt →