For useSeoMeta() should we use .seo or .title and .description?

[MickL]

The docs dont have many words about SEO, only thing I found was on installation page:

<script setup lang="ts">
const { data } = await useAsyncData(() => queryCollection('content').path('/').first())

useSeoMeta({
  title: data.value?.title,
  description: data.value?.description
})
</script>

But I noticed that page types have a specific seo object, from the docs:

SEO metadata (to be used with Nuxt's useSeoMeta composable)

So I am wondering if one should do instead:

<script setup lang="ts">
const { data } = await useAsyncData(() => queryCollection('content').path('/').first())

useSeoMeta(data.value?.seo)
</script>

The examples / ui templates, e.g. portfolio, do:

const title = page.value?.seo?.title || page.value?.title
const description = page.value?.seo?.description || page.value?.description

useSeoMeta({
  title,
  description,
  ogDescription: description,
  ogTitle: title
})

And what would be the benefit of the two options. And should one then in md files declare title + description, seo object or both?

---
title: 'Page title'
description: 'Meta description'
seo:
    title: 'SEO title'
    description: 'SEO description'
---

In any case, the docs may add a bit more informations about the seo topic imo :)

[yudin-s]

I would use the seo object when it exists, and fall back to title / description only when you want a simpler setup.

For page collections, title and description are content fields. The seo field is generated specifically for Nuxt useSeoMeta, so it is the better default if you want Content to carry SEO-specific values separately from what you render on the page.

Example:

<script setup lang="ts">
const route = useRoute()

const { data: page } = await useAsyncData(route.path, () => {
  return queryCollection("content").path(route.path).first()
})

useSeoMeta({
  title: page.value?.seo?.title ?? page.value?.title,
  description: page.value?.seo?.description ?? page.value?.description,
  ogTitle: page.value?.seo?.title ?? page.value?.title,
  ogDescription: page.value?.seo?.description ?? page.value?.description,
})
</script>

If your frontmatter only has title and description, the installation-page example is perfectly fine:

useSeoMeta({
  title: page.value?.title,
  description: page.value?.description
})

But if you start adding SEO-specific frontmatter, such as a different search/social title, then keeping it under seo avoids mixing display content with metadata.