The useContentHead() composable provides a binding between your content data and useHead() composable.


useContentHead() is available everywhere in your app where useHead would be.

It takes two arguments:

  • document: A document data (of any type)
  • to: A route path
    • Default: useRoute()
<script setup lang="ts">
const { data: page } = await useAsyncData('my-page', queryContent('/').findOne)



When using the <ContentDoc /> component or the default document-driven page, the composable will be automatically used.

To disable the automation, you can set the contentHead option to false in your nuxt.config:

export default defineNuxtConfig({
  content: {
    contentHead: false


These parameters can be used from the Front-Matter section of your pages.

headobjectA useHead compatible object
titlestringWill be used as the default value for head.title
head.titlestringParsed titleSets the <title> tag
descriptionstringWill be used as the default value for head.description
head.descriptionstringParsed descriptionSets the <meta name="description"> tag
imagestring | objectWill be used as the default value for head.image
image.srcstringThe source of the image
image.altstringThe alt description of the image
image.xxxstringAny og:image:xxx compatible attribute
head.imagestring | objectOverrides the <meta property="og:image">

At the exception of title, description and image, the head object behaves exactly the same in Front-Matter as it would in useHead({ ... }) composable.

You can specify any value that is writeable in yaml format.
title: 'My Page Title'
description: 'What a lovely page.'
  src: '/assets/image.jpg'
  alt: 'An image showcasing My Page.'
  width: 400
  height: 300
    - name: 'keywords'
      content: 'nuxt, vue, content'
    - name: 'robots'
      content: 'index, follow'
    - name: 'author'
      content: 'NuxtLabs'
    - name: 'copyright'
      content: '© 2022 NuxtLabs'