組み込みブラウザの<meta>コンポーネントを使用すると、ドキュメントにメタデータを追加できます。

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

リファレンス

<meta>

ドキュメントメタデータを追加するには、組み込みブラウザの<meta>コンポーネントをレンダリングします。どのコンポーネントからでも<meta>をレンダリングでき、Reactは常に対応するDOM要素をドキュメントヘッドに配置します。

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

以下の例をご覧ください。

プロパティ

<meta>はすべての共通要素のプロパティをサポートしています。

次のプロパティのうち、ちょうど1つを持つ必要があります：name、httpEquiv、charset、itemProp。これらのプロパティのどれが指定されているかによって、<meta>コンポーネントは異なる動作をします。

  • name：文字列。ドキュメントに添付するメタデータの種類を指定します。
  • charset：文字列。ドキュメントで使用される文字セットを指定します。有効な値は"utf-8"のみです。
  • httpEquiv：文字列。ドキュメントの処理に関するディレクティブを指定します。
  • itemProp：文字列。ドキュメント全体ではなく、ドキュメント内の特定のアイテムに関するメタデータを指定します。
  • content：文字列。nameまたはitemPropプロパティと共に使用される場合は添付するメタデータを指定し、httpEquivプロパティと共に使用される場合はディレクティブの動作を指定します。

特別なレンダリング動作

React は、React ツリーのどこにレンダリングされていても、常に <meta> コンポーネントに対応する DOM 要素をドキュメントの <head> 内に配置します。<head> は、DOM 内で <meta> が存在できる唯一の有効な場所ですが、特定のページを表すコンポーネントが <meta> コンポーネント自体をレンダリングできる場合、それは便利であり、構成要素を維持します。

これには1つの例外があります。<meta> に itemProp プロパティがある場合、特別な動作はありません。なぜなら、この場合、ドキュメントに関するメタデータではなく、ページの特定の部分に関するメタデータを表すためです。

使用方法 （SVGアイコンは省略）

ドキュメントにメタデータで注釈を付ける （SVGアイコンは省略）

キーワード、概要、作成者名などのメタデータを使用してドキュメントに注釈を付けることができます。 React は、React ツリーのどこにレンダリングされていても、このメタデータをドキュメント <head> 内に配置します。

<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 は、ドキュメント <head> に <meta> DOM ノードを配置します。

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

ドキュメント内の特定のアイテムにメタデータで注釈を付ける （SVGアイコンは省略）

itemProp プロパティを持つ <meta> コンポーネントを使用して、ドキュメント内の特定のアイテムにメタデータで注釈を付けることができます。 この場合、React はこれらの注釈をドキュメント <head> 内に配置*せず*、他の React コンポーネントと同様に配置します。

<section itemScope>
  <h3>Annotating specific items</h3>
  <meta itemProp="description" content="API reference for using <meta> with itemProp" />
  <p>...</p>
</section>
（リンク要素は省略）