seo Question posted in
Some basic information to get you started with this can be found here.

Seo – Nuxt 3 individual page Meta data not detected

I have created my online portfolio using Nuxt 3. I followed the Nuxt 3 guide as well as watched a few tutorials online on adding Meta data to individual Nuxt 3 pages.

I have provided each page with a different meta description content. i.e. Home page – ‘This is my Home page meta’, About page – ‘This is my About page meta’

My problem is, when I analyse each of my pages using online tools that check for Meta description data, it displays the Meta ‘description’ I have provided in my nuxt.config.js file. How can I make it so that any tool that analyses any of the pages in my online portfolio will get the relevant Meta description data related to that page?

Here’s my nuxt.config.js file:

export default defineNuxtConfig ({
  app: {
    head: {
      meta: [
        { name: 'description', content: 'This is the fallback meta description' }
      ]
    }
  }
})

Here’s the meta in my Home page:

<script setup>
  useHead({
    meta: [
      { name: 'description', content: 'This is my Home page meta description' }
    ]
  });
</script>

Here’s the meta in my About page:

<script setup>
  useHead({
    meta: [
      { name: 'description', content: 'This is my About page meta description' }
    ]
  });
</script>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I tried @ToddPawick's solution which worked perfectly when I tested on multiple online meta tag analysing tools, however, it failed to reflect the updated meta data on the browser tab itself when switching pages. I changed the name oof the composable to useSeoMeta instead.

    useSeoMeta({
  title: 'My Amazing Site',
  ogTitle: 'My Amazing Site',
  description: 'This is my amazing site, let me tell you all about it.',
  ogDescription: 'This is my amazing site, let me tell you all about it.',
  ogImage: 'https://example.com/image.png',
  twitterCard: 'summary_large_image',
})

    Although KUDOS to Todd for pointing me in the right direction! :)


  2. 0

    https://nuxt.com/docs/getting-started/seo-meta
    Use defineSeoMeta composable – this can be used globally on app.vue, and then on page level in your page components to override the global ones.
    There is also a defineServerSeoMeta, but I’m not actually sure why thats needed as from testing, it looks like the other still renders on the server too.

    
useServerSeoMeta({
  title: 'My Amazing Site',
  ogTitle: 'My Amazing Site',
  description: 'This is my amazing site, let me tell you all about it.',
  ogDescription: 'This is my amazing site, let me tell you all about it.',
  ogImage: 'https://example.com/image.png',
  twitterCard: 'summary_large_image',
})
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search