SEO meta tags with documentDriven

[dan-bowen]

I am attempting to utilize documentDriven to set the head/meta tags for blog pages on my site. However I am experiencing an issue with tags from other pages being retained as I navigate through the site.

Reproduction

npm run dev

Navigate to http://localhost:3000/ (homepage)

See the following meta tags as expected:

<meta name="copyright" content="© 2022 DanBuilds">
<meta name="description" content="This is the homepage">

Navigate to http://localhost:3000/blog/my-first-blog-post

See the following meta tags as expected:

<meta name="keywords" content="My First Blog Post : keywords">
<meta name="robots" content="My First Blog Post : robots">
<meta name="author" content="My First Blog Post : author">
<meta name="copyright" content="My First Blog Post : copyright">
<meta name="description" content="My First Blog Post : description">
<meta property="og:image" content="/assets/image1.jpg">
<meta property="og:image:width" content="400">
<meta property="og:image:height" content="300">
<meta property="og:image:alt" content="My First Blog Post : img alt">

Navigate back to http://localhost:3000/ (homepage)

Unexpectedly see the following meta tags:

<meta name="keywords" content="My First Blog Post : keywords">
<meta name="robots" content="My First Blog Post : robots">
<meta name="author" content="My First Blog Post : author">
<meta name="copyright" content="My First Blog Post : copyright">
<meta property="og:image" content="/assets/image1.jpg">
<meta property="og:image:width" content="400">
<meta property="og:image:height" content="300">
<meta property="og:image:alt" content="My First Blog Post : img alt">
<meta name="description" content="This is the homepage">

Only description was changed back. Everything else is retained from the blog post, even copyright which is defined in app.vue.

Setup

Here are the relevant parts of my setup. Also avaialble in my repo.

nuxt.config.ts

Enable documentDriven.

{
  content: {
      documentDriven: true
  }
}

package.json

Use Edge Channel

{
    "devDependencies": {
        "@nuxt/content": "npm:@nuxt/content-edge@latest",
        "@tailwindcss/typography": "^0.5.4",
        "nuxt": "3.0.0-rc.8",
        "tailwindcss": "^3.1.8"
    },
    "dependencies": {
        "@headlessui/vue": "^1.6.7",
        "@pinia/nuxt": "^0.4.1",
        "pinia": "^2.0.21"
    }
}

app.vue

I am trying to set global defaults here.

<script setup> 
useHead({
  meta: [
    {
      name: 'copyright',
      content: '© 2022 DanBuilds'
    }
  ],
  bodyAttrs: {
    class: 'bg-[#f0f2f4]'
  }
})
</script>

<template>
  <div>
    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
  </div>
</template>

pages/index.vue

Homepage. Only setting the title and meta.description here.

<script setup>
useHead({
    title: 'Homepage',
    meta: [
        {
            name: 'description',
            content: 'This is the homepage'
        }
    ]
})
</script>

<template>
    <main>
        <TheHero> A Nuxt Content v2 Blog with Tailwind </TheHero>
        <ArticleContainer>
            <BlogPostList />
        </ArticleContainer>
    </main>
</template>

pages/blog[...slug].vue

Blog catchall route.

<script setup>
const { path } = useRoute()

const { data: blogPost } = await useAsyncData(`content-${path}`, () => {
    return queryContent().where({ _path: path }).findOne()
})
</script>

<template>
    <main>
        <TheHero>
            <template v-slot:default>{{ blogPost.title }}</template>
            <template v-slot:subtitle>
                <BlogPostMeta :author="blogPost.author" :date="blogPost.dates.published" color="dark" />
            </template>
        </TheHero>
        <ArticleContainer>
            <ArticlePanel>
                <section class="prose pt-10 pb-12">
                    <div class="p-4">
                        <div class="mx-24 my-0 text-lg">
                            <ContentDoc />
                        </div>
                    </div>
                </section>
            </ArticlePanel>
        </ArticleContainer>
    </main>
</template>

content/blog/my-first-blog-post.md

Front matter for blog post.

---
title: "My First Blog Post"
description: "My First Blog Post : description"
image:
  src: "/assets/image1.jpg"
  alt: "My First Blog Post : img alt"
  width: 400
  height: 300
head:
  meta:
    - name: "keywords"
      content: "My First Blog Post : keywords"
    - name: "robots"
      content: "My First Blog Post : robots"
    - name: "author"
      content: "My First Blog Post : author"
    - name: "copyright"
      content: "My First Blog Post : copyright"
---

Additional information

As a side note, I am getting this console warning as well.

WARN  Using <NuxtLayout> inside app.vue will cause unwanted layout shifting in your application.Consider removing <NuxtLayout> from app.vue and using it in your pages.

I'm not sure what to make of this since my app.vue mirrors what is suggested in the docs.

Summary

Longtime programmer but relatively new to Vue/Nuxt. I suspect I'm missing something in my setup or maybe there is a conflict when combining useHead() and documentDriven.

My question for the community is, how would you go about setting up your head/meta tags for the following conditions?

1. Page-specific head/meta tags that are tied to their pages/routes

   Such as my attempt to use useHead() in pages/index.vue.

2. Global defaults that are used when not defined in a page/route.

   Such as my attempt to use useHead() in app.vue

Thanks in advance.