Meta Tags Not showing correctly with Netlify and Nuxt

Support
, ,
#1

Hi,

My site is http://tekanaid.com

I’m building a website with Nuxt and Netlify. Things work fine when in dev mode on my laptop. I can see the meta tags correctly when viewing the page source and when inspecting the page.

When building the site on Netlify, I’m seeing the meta data correctly for static pages. However, with dynamic pages, I don’t see the correct meta data. I still see the same meta data for my front/root page: https://tekanaid.com on my dynamic blog pages

For example, if you check my website right now for this source page: https://tekanaid.com/posts/terraform-vsphere-windows-example-to-join-ad-domain

and for simplicity let’s look at the title and the twitter:image

You get this:

<title>TeKanAid | TeKanAid</title>
<meta data-n-head="1" data-hid="twitter:image" name="twitter:image" content="/images/Superhero-TeKanAid-Square.png">

whereas if you inspect the page, you get the correct meta data:

<title>Terraform vSphere Windows Example to Join an AD Domain | TeKanAid</title>
<meta data-n-head="1" data-hid="twitter:image" name="twitter:image" content="/images/blog/terraform-vsphere-windows-example-to-join-ad-domain/setup.png">

Any idea why this is?

Thanks.

#2

Yes, it’s because Nuxt used JavaScript to modify page data after the page loads. So, the HTML for all the pages is more or less the same, it’s only the page chunks that differ.

If you disable JS in your browser and load the page, then use Inspect Element, you’d still see incorrect metadata.

You ca try to use pre-rendering to serve the correct metadata to the bots.