Перейти к содержанию

<meta>

Canary

Расширения React для <meta> в настоящее время доступны только в канале React canary и экспериментальном канале. В стабильных релизах React <meta> работает только как встроенный HTML-компонент браузера. Подробнее о каналах выпуска React здесь.

Встроенный компонент браузера <meta> позволяет добавлять метаданные к документу.

1
2
3
4
<meta
    name="keywords"
    content="React, JavaScript, semantic markup, html"
/>

Описание

<meta>

Чтобы добавить метаданные документа, отобразите встроенный в браузер компонент <meta>. Вы можете рендерить <meta> из любого компонента, и React всегда будет помещать соответствующий элемент DOM в голову документа.

1
2
3
4
<meta
    name="keywords"
    content="React, JavaScript, semantic markup, html"
/>

Параметры

<meta> поддерживает все общие реквизиты элементов.

Он должен иметь точно один из следующих реквизитов: name, httpEquiv, charset, itemProp. Компонент <meta> выполняет разные действия в зависимости от того, какой из этих реквизитов указан.

  • name: строка. Указывает вид метаданных, которые будут прикреплены к документу.
  • charset: строка. Указывает набор символов, используемый документом. Единственное допустимое значение - "utf-8".
  • httpEquiv: строка. Указывает директиву для обработки документа.
  • itemProp: строка. Указывает метаданные о конкретном элементе в документе, а не о документе в целом.
  • content: строка. Определяет метаданные, которые должны быть присоединены при использовании реквизитов name или itemProp, или поведение директивы при использовании реквизита httpEquiv.

Специальное поведение рендеринга

React всегда будет помещать элемент DOM, соответствующий компоненту <meta>, в <head> документа, независимо от того, в каком месте дерева React он отрисован. <head> - единственное допустимое место для <meta> в DOM, однако это удобно и позволяет сохранить композитность, если компонент, представляющий определенную страницу, может сам рендерить компоненты <meta>.

Есть одно исключение: если у <meta> есть реквизит itemProp, то никакого особого поведения не будет, потому что в этом случае он представляет не метаданные о документе, а метаданные о конкретной части страницы.

Использование

Аннотирование документа метаданными

Вы можете аннотировать документ метаданными, такими как ключевые слова, краткое содержание или имя автора. React поместит эти метаданные в <head> документа, независимо от того, в каком месте дерева React он будет отображаться.

1
2
3
4
5
6
7
8
9
<meta name="author" content="John Smith" />
<meta
    name="keywords"
    content="React, JavaScript, semantic markup, html"
/>
<meta
    name="description"
    content="API reference for the <meta> component in React DOM"
/>

Вы можете отобразить компонент <meta> из любого компонента. React поместит DOM-узел <meta> в документ <head>.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
import ShowRenderedHTML from './ShowRenderedHTML.js';

export default function SiteMapPage() {
    return (
        <ShowRenderedHTML>
            <meta name="keywords" content="React" />
            <meta
                name="description"
                content="A site map for the React website"
            />
            <h1>Site Map</h1>
            <p>...</p>
        </ShowRenderedHTML>
    );
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
import { renderToStaticMarkup } from 'react-dom/server';
import formatHTML from './formatHTML.js';

export default function ShowRenderedHTML({ children }) {
    const markup = renderToStaticMarkup(
        <html>
            <head />
            <body>{children}</body>
        </html>
    );
    return (
        <>
            <h1>Rendered HTML:</h1>
            <pre>{formatHTML(markup)}</pre>
        </>
    );
}

Аннотирование конкретных элементов в документе с помощью метаданных

Вы можете использовать компонент <meta> с параметром itemProp для аннотирования конкретных элементов в документе с метаданными. В этом случае React не будет размещать эти аннотации внутри документа <head>, а разместит их как любой другой компонент React.

1
2
3
4
5
6
7
8
<section itemScope>
    <h3>Annotating specific items</h3>
    <meta
        itemProp="description"
        content="API reference for using <meta> with itemProp"
    />
    <p>...</p>
</section>

Источник — https://react.dev/reference/react-dom/components/meta

Комментарии