API Reference
コンポーネント

<meta> - This feature is available in the latest Canary

Canary

React による <meta> の機能拡張は、現在 React の Canary および experimental チャンネルでのみ利用可能です。React の安定版リリースでは、<meta> は単なる組み込みのブラウザ HTML コンポーネントとして機能します。React のリリースチャンネルについてはこちらをご覧ください。

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

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

リファレンス

<meta>

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

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

さらに例を見る

props

<meta> は、一般的な要素の props をすべてサポートしています。

name、httpEquiv、charset、itemProp のうち、props としてどれかひとつだけを指定しなければなりません。これらの props のうちどれが指定されているかによって、<meta> コンポーネントの動作は異なります。

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

特別なレンダー動作

<meta> コンポーネントが React ツリー内のどこでレンダーされていても、React は対応する DOM 要素を常にドキュメントの <head> 内に配置します。<head> は DOM 内で <meta> が存在できる唯一の有効な場所ですが、ある特定のページを表すコンポーネントが自分自身で <meta> コンポーネントをレンダーできれば有用であり、コンポーネントの組み合わせやすさが保たれます。

ただし、例外がひとつあります。<meta> に props として itemProp がある場合、特別な動作は発生しません。この場合ドキュメントに関するメタデータではなく、ページの特定の部分に関するメタデータを表しているためです。

使用法

ドキュメントにメタデータによるアノテーションを加える

キーワード、概要文、著者名といったメタデータを用いて、ドキュメントにアノテーション（ラベル付け）が行えます。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 は <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> コンポーネントの props として 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>
Previous<link>
Next<script>

How do you like these docs?