mirror of
https://github.com/facebook/docusaurus.git
synced 2025-04-30 18:58:36 +02:00
a2ab4d33c8
* Markdown page-specific head metadatas * ensure mdxType attribute is not added to the final markup * polish doc * Update packages/docusaurus-theme-classic/src/theme/MDXComponents/index.tsx Co-authored-by: Joshua Chen <sidachen2003@gmail.com> * fix eslint annoying rule error Co-authored-by: Joshua Chen <sidachen2003@gmail.com>
61 lines
1.6 KiB
Text
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.
|
|
|
|
:::
|