Meta Tags do not display properly in Page Source for Nuxt.js app

user_4682184 0
Viewed 2384

I am trying to understand why the correct title and meta tags do not display when I click "View Page Source". What does display are the meta tag information from my nuxt.config.js file.

How do I get the meta data from my specific page to display in the page source? I need this for SEO purposes.

Here is my pages/index.vue file

<template>
  <h1>{{ title }}</h1>
</template>

<script>
export default {
  head () {
    return {
      title: "this is the page specific title",
      meta: [
        { hid: 'description', name: 'description', content: 'Page 1 description' }
      ]
    }
  }
}
</script>

Here is my nuxt.config.js file (I'm just posting the part where I have default title and meta tags:

module.exports = {
  mode: "universal",
  head: {
    title: "this is the nuxt.config title",
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { name: 'keywords', content: 'keyword 1, keyword 2' },
      { hid: 'description', name: 'description', content: 'This is the generic description.' }
    ],
  },

This is the page source title and meta tags. As you can see, it is pulling from nuxt.config.js file instead of the index.vue file.

enter image description here

However, when I inspect element, I get the correct meta tag in the head section.enter image description here

Can anyone explain what I am doing wrong? I need the page specific title and page specific meta tags to appear in the page source for SEO purposes.

nuxt.js vue.js
2 Answers

I haven't personally used Nuxt, but is it possible that since you are developing locally, you are not experiencing the SSR part of Nuxt, and just the dynamic rendering part?

If you try building your app (probably with npm run build if Nuxt follows standard practices), and view the built index.html file, does it have the <title> you are expecting?

user_128537970

Make the title and meta tags first letter capital, Like <Title> And <Meta ...your code />

user_135904180
Related