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:
---
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 has 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.