<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 树的哪个位置渲染 `<meta>` 组件，React 始终会将其对应的 DOM 元素放置在文档的 `<head>` 中。`<head>` 是 `<meta>` 在 DOM 中唯一有效的位置，但是如果代表特定页面的组件本身可以渲染 `<meta>` 组件，这会很方便，并且保持良好的可组合性。

这有一个例外：如果 `<meta>` 具有 `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 会在文档的 `<head>` 中放置一个 `<meta>` DOM 节点。

Fork

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

使用元数据注释文档中的特定项目

您可以使用带有 `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>

上一页<link>

下一页<script>