Skip to content

Page missing title in useHead

What this means

The page calls useHead() or useSeoMeta(), which is the right pattern, but does not include a title property. Without a title, search engines use whatever the root layout’s titleTemplate generates from an empty string, or nothing at all. The browser tab shows a blank or generic label.

How to fix it

Add a title property to the existing useHead() or useSeoMeta() call.

Updating an existing useHead call

<!-- Before -->
<script setup>
useHead({
  meta: [
    { name: 'description', content: 'Learn about our studio.' },
  ],
})
</script>

<!-- After -->
<script setup>
useHead({
  title: 'About',
  meta: [
    { name: 'description', content: 'Learn about our studio.' },
  ],
})
</script>

Updating an existing useSeoMeta call

<!-- Before -->
<script setup>
useSeoMeta({
  description: 'Learn about our studio.',
  ogDescription: 'Learn about our studio.',
})
</script>

<!-- After -->
<script setup>
useSeoMeta({
  title: 'About',
  description: 'Learn about our studio.',
  ogTitle: 'About | Acme',
  ogDescription: 'Learn about our studio.',
})
</script>

If you have a titleTemplate set in app.vue, the title value here is the short page-specific part. The template appends the brand name automatically.

<!-- app.vue sets: useHead({ titleTemplate: '%s | Acme' }) -->

<script setup>
useHead({
  title: 'About',
  // Renders as: "About | Acme"
})
</script>

Verify the fix

curl -s https://example.com/about | grep -i '<title'

The output should show the page-specific title. Re-run the audit:

npx orino audit .