Skip to main content
Version: 2.0.0-beta.14

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) by using the <head> tag in Markdown files:

markdown-features-head-metadata.mdx
---
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/markdown-features/head-metadata" />
</head>

# Head Metadata

My text
tip

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 have been affected.

tip

You don't always need this for typical SEO needs. 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.

note

This feature is built on top of the Docusaurus <Head> component.

Refer to react-helmet for exhaustive documentation.