<meta>

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

<meta name="keywords" content="React, JavaScript, semantic markup, html" />

Ссылка
- <meta>
Использование
- Аннотирование документа метаданными
- Аннотирование отдельных элементов документа метаданными

Ссылка

`<meta>`

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

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

<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 поместит <meta> DOM-узел в заголовок документа <head>.

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>
  );
}

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

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

<section itemScope>
  <h3>Annotating specific items</h3>
  <meta itemProp="description" content="API reference for using <meta> with itemProp" />
  <p>...</p>
</section>

© 2013–present Facebook Inc.
Licensed under the Creative Commons Attribution 4.0 International Public License.
https://react.dev/reference/react-dom/components/meta