Populating <head>
Gridsome uses vue-meta to populate Head.
Add global head metadata
Global head metadata is added in src/main.js by using head.{property}.push()
export default function (Vue, { head }) {
// Add inline CSS
head.style.push({
type: 'text/css',
cssText: '.some-custom-css {color: red}'
})
// Add an external CSS file
head.link.push({
rel: 'stylesheet',
href: 'https://some-server.com/external-styleheet.css'
})
// Add an external Javascript before the closing </body> tag
head.script.push({
src: 'https://some-server.com/external-script.js',
body: true
})
// Add a meta tag
head.meta.push({
name: 'keywords',
content: 'HTML,CSS,XML,JavaScript'
})
}Add head meta data to pages & templates
Page metadata is added inside page .vue components.
For example, src/pages/About.vue would look something like this:
<script>
export default {
name: 'About',
metaInfo: {
title: 'About us',
meta: [
{ name: 'author', content: 'John Doe' }
],
link: [
{ rel: 'stylesheet', href: '/css/index.css' },
]
// etc...
}
}
</script>How to overwrite from child component
If you need to overwrite meta tags, add key property.
Gridsome is passing tagIdKeyName: 'key' to vue-meta as default option.
// parent component
{
metaInfo: {
meta: [
{ key: 'description', name: 'description', content: 'foo' }
]
}
}
// child component
{
metaInfo: {
meta: [
{ key: 'description', name: 'description', content: 'bar' }
]
}
}Available Properties
| Property | Description | Link |
|---|---|---|
| style | Adds a style tag | Docs |
| script | Adds a script tag | Docs |
| meta | Adds a meta tag | Docs |
| title | Changes title text | Docs |
| titleTemplate | Dynamic title text | Docs |
| link | Adds a link tag | Docs |