Nuxt.js head function not working in Article

Question

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.

@ljubadr I can't find something like that in my code. In .nuxt/components I have: -no-ssr.js -nuxt-child.js -nuxt-error.vue -nuxt-link.js -nuxt-loading.vue -nuxt.js The only one that has a v-if is nuxt-error.vue — Victor Sanchez
– Victor Sanchez, Commented Jan 23, 2019 at 0:12

gekkedev · Accepted Answer · 2021-09-23 13:04:26Z

1

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'
  ...
}

edited Sep 23, 2021 at 13:04

gekkedev

5934 silver badges20 bronze badges

answered Aug 12, 2020 at 16:24

Michal Skop

1,4291 gold badge19 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kenan Duman · Accepted Answer · 2023-10-01 09:51:02Z

1

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!

answered Oct 1, 2023 at 9:51

Kenan Duman

1641 silver badge5 bronze badges

Comments

nickfrosty · Accepted Answer · 2021-12-12 14:18:55Z

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.

Collectives™ on Stack Overflow

Nuxt.js head function not working in Article

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related