SEO HTML Head example with Nuxt.js

Исходный код


Nuxt.js uses vue-meta to update the headers and html attributes of your applications.

Nuxt.js configures vue-meta with these options:

  keyName: 'head', // the component option name that vue-meta looks for meta info on.
  attribute: 'n-head', // the attribute name vue-meta adds to the tags it observes
  ssrAttribute: 'n-head-ssr', // the attribute name that lets vue-meta know that meta info has already been server-rendered
  tagIDKeyName: 'hid' // the property name that vue-meta uses to determine whether to overwrite or append a tag

Updating the title

To update the title of the page, just add head.title in your page component.


  <h1>Home page 🚀</h1>

export default {
  head: {
    title: 'Home page 🚀'

Meta tags and more

To know the list of options you can give to head, take a look at vue-meta documentation.

Using data values inside head

You might want to use the component data to display different headers, like a post title for example. Just use head as a function and you can use this inside to access your component data.

Example of displaying the post title:

export default {
  data ({ params }) {
    // fetch the post from the API
    return axios.get(`https://my-api/posts/${}`)
    .then((res) => {
      return { title: }
  head () {
    return {
      title: this.title

Defaults metas

Nuxt.js let you define all the defaults metas for your application inside the nuxt.config.js, use the same field head:

module.exports = {
  head: {
    titleTemplate: '%s - Nuxt.js',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: 'Meta description' }