mirror of
https://github.com/facebook/docusaurus.git
synced 2025-04-29 18:27:56 +02:00
61 lines
1.6 KiB
Text
61 lines
1.6 KiB
Text
---
|
|
id: head-metadata
|
|
title: Head Metadata
|
|
description: Declaring page-specific head metadata through MDX
|
|
slug: /markdown-features/head-metadata
|
|
---
|
|
|
|
# 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:
|
|
|
|
```md title="markdown-features-head-metadata.mdx"
|
|
---
|
|
id: head-metadata
|
|
title: Head Metadata
|
|
---
|
|
|
|
<!-- highlight-start -->
|
|
<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>
|
|
<!-- highlight-end -->
|
|
|
|
# Head Metadata
|
|
|
|
My text
|
|
```
|
|
|
|
```mdx-code-block
|
|
<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>
|
|
```
|
|
|
|
:::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.
|
|
|
|
:::
|
|
|
|
:::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.
|
|
|
|
:::
|