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.
However, when I inspect element, I get the correct meta tag in the head section.
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.
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?Make the title and meta tags first letter capital, Like
<Title>
And
<Meta ...your code />