docusaurus/website/versioned_docs/version-2.0.0-beta.8/guides/markdown-features/markdown-features-head-metadatas.mdx
2021-10-21 18:52:17 +02:00

61 lines
1.6 KiB
Text

---
id: head-metadatas
title: Head Metadatas
description: Declaring page-specific head metadatas through MDX
slug: /markdown-features/head-metadatas
---
# Head Metadatas
Docusaurus automatically sets useful page metadatas in `<html>`, `<head>` and `<body>` for you.
It is possible to add extra metadatas (or override existing ones) by using the `<head>` tag in Markdown files:
```md title="markdown-features-head-metadatas.mdx"
---
id: head-metadatas
title: Head Metadatas
---
<!-- highlight-start -->
<head>
<html className="some-extra-html-class" />
<body className="other-extra-body-class" />
<title>Head Metadatas customized title!</title>
<meta charSet="utf-8" />
<meta name="twitter:card" content="summary" />
<link rel="canonical" href="https://docusaurus.io/docs/markdown-features/head-metadatas" />
</head>
<!-- highlight-end -->
# Head Metadatas
My text
```
```mdx-code-block
<head>
<html className="some-extra-html-class" />
<body className="other-extra-body-class" />
<title>Head Metadatas customized title!</title>
<meta charSet="utf-8" />
<meta name="twitter:card" content="summary" />
<link rel="canonical" href="https://docusaurus.io/docs/markdown-features/head-metadatas" />
</head>
```
:::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 metadatas have been affected.
:::
:::note
This feature is built on top of the Docusaurus [`<Head>`](./../../docusaurus-core.md#head) component.
Refer to [react-helmet](https://github.com/nfl/react-helmet) for exhaustive documentation.
:::