# 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: (titleChunk) => {
// If undefined or blank then we don't need the separator
return titleChunk ? `${titleChunk} | Site Title` : 'Site Title';
},
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: 'Page 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'
}
]
},