Head metadata
Customizing head metadata
Docusaurus automatically sets useful page metadata in <html>, <head> and <body> for you. It is possible to add extra metadata (or override existing ones) with the <head> tag in Markdown files:
---
id: head-metadata
title: Head Metadata
---
<head>
<html className="some-extra-html-class" />
<body className="other-extra-body-class" />
<title>Head Metadata customized title!</title>
<meta charSet="utf-8" />
<meta name="twitter:card" content="summary" />
<link rel="canonical" href="https://docusaurus.io/docs/mdx-features/head-metadata" />
</head>
# Head Metadata
My text
This <head> declaration has been added to the current Markdown doc as a demo. Open your browser DevTools and check how this page's metadata has been affected.
This feature is built on top of the Docusaurus <Head> component. Refer to react-helmet for exhaustive documentation.
Content plugins (e.g. docs and blog) provide front matter options like description, keywords, and image, which will be automatically applied to both description and og:description, while you would have to manually declare two metadata tags when using the <head> tag.
Markdown page description
The Markdown pages' description metadata may be used in more places than the head metadata. For example, the docs plugin's generated category index uses the description metadata for the doc cards.
By default, the description is the first content-ful line, with some efforts to convert it to plain text. For example, the following file...
# Title
Main content... May contain some [links](./file.mdx) or **emphasis**.
...will have the default description "Main content... May contain some links or emphasis". However, it's not designed to be fully functional. Where it fails to produce reasonable descriptions, you can explicitly provide one through front matter:
---
description: This description will override the default.
---
# Title
Main content... May contain some [links](./file.mdx) or **emphasis**.