CODEWITHSUNDEEP
vue.jsvuexheadnuxt.js
Victor Sanchez
Victor Sanchez

Reputation: 35

Nuxt.js head function not working in Article

I am trying to add some Open Graph tags to each Article of my blog that is hosted in Wordpress. This code is working when I run "npm run dev", but when I run "npm run generate && firebase deploy" is not doing the same.

This is the code that I am using:

head() {
return {
  title: 'This',
  meta: [

    {
      hid: `og:description`,
      name: 'og:description',
      content: 'title'
    },
    {
      hid: `og:title`,
      name: 'og:title',
      content: 'title'
    }
  ]
}

In my nuxt.config.js I have configured the following in the head

head() {
 return { 
  title: 'That',
  meta: [
  {
    hid: `og:description`,
    name: 'og:description',
    content: '3'
  },
  {
    hid: `og:title`,
    name: 'og:title',
    content: '4'
  }
]
}

In the article, the title that is showing is "This" but, the meta is showing the content in nuxt.config.js ("3","4") instead of ("title", "title")

What I would like to obtain is the meta tag of the article one in the with the SSR.

Upvotes: 0

Views: 3235

Answers (3)

Kenan Duman
Kenan Duman

Reputation: 164

I spend 3 days on it, tried all previous nuxt versions and alternative seo modules, not helped. This is not coming from nuxt, if you started already working on seo optimisations for your nuxt project, that means that you might have many <client-only>, so please find all of them and check if you have <nuxt /> inside.

I suggest check <nuxt /> in your template files and put <client-only> not to entire template, just to necessary component.

This problem is not related to ssr: true or mode: 'universal', there is really only 1 reason is <nuxt /> inside <client-only><nuxt /></client-only>

Fix it and have fun with nuxt!

Upvotes: 1

nickfrosty
nickfrosty

Reputation: 118

I would try using the nuxt-seo package. It adds full support for setting the most common social media tags, including auto generating canonical tags for each of your articles/pages.

You can checkout the docs site, which has a full nuxt blog example.

After installing the nuxt-seo package in your project, add it to your nuxt-config.js file:

{
  modules: [
    'nuxt-seo'
  ],
  seo: {
    // Module Options
  }
}

Then on each article/page, you can set the page specific title, description, and pretty much any other meta tag:

<template>
  <h1>Hello World</h1>
</template>

<script>
  export default {
    head({ $seo }) {
      return $seo({
        title: 'Home Page',
        description: 'Hello World Page',
        keywords: 'hello, world, home',
      })
    }
  }
</script>

PS: I am the maintainer of the nuxt-seo package.

Upvotes: 0

Michal Skop
Michal Skop

Reputation: 1399

My problem was using spa (single page application) mode instead of universal.

My working settings in nuxt.config.js:

export default {
  mode: 'universal', // changed from mode: 'spa'
  ...
}

Upvotes: 1

Related Questions