内置浏览器 <meta> 组件 让你可以向文档添加元数据。

🌐 The built-in browser <meta> component lets you add metadata to the document.

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

参考

🌐 Reference

<meta>

要添加文档元数据，请渲染内置浏览器 <meta> 组件。你可以从任何组件渲染 <meta>，React 将始终在文档头部放置相应的 DOM 元素。

🌐 To add document metadata, render the built-in browser <meta> component. You can render <meta> from any component and React will always place the corresponding DOM element in the document head.

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

查看更多示例。

属性

🌐 Props

<meta> 支持所有 常用元素属性

它应该恰好拥有以下其中一个属性：name、httpEquiv、charset、itemProp。<meta> 组件的行为会根据指定的是哪一个属性而有所不同。

🌐 It should have exactly one of the following props: name, httpEquiv, charset, itemProp. The <meta> component does something different depending on which of these props is specified.

  • name：一个字符串。指定要附加到文档的元数据类型。
  • charset：一个字符串。指定文档使用的字符集。唯一有效的值是 "utf-8"。
  • httpEquiv：一个字符串。指定处理文档的指令。
  • itemProp：一个字符串。指定有关文档中某个特定项的元数据，而不是整个文档的元数据。
  • content：一个字符串。指定在与 name 或 itemProp 属性一起使用时要附加的元数据，或在与 httpEquiv 属性一起使用时指令的行为。

特殊渲染行为

🌐 Special rendering behavior

React 将始终将对应于 <meta> 组件的 DOM 元素放置在文档的 <head> 内，无论它在 React 树中的渲染位置如何。<head> 是 <meta> 在 DOM 中存在的唯一有效位置，但如果表示特定页面的组件可以自己渲染 <meta> 组件，这样既方便又保持组合性。

🌐 React will always place the DOM element corresponding to the <meta> component within the document’s <head>, regardless of where in the React tree it is rendered. The <head> is the only valid place for <meta> to exist within the DOM, yet it’s convenient and keeps things composable if a component representing a specific page can render <meta> components itself.

对此有一个例外：如果 <meta> 有一个 itemProp 属性，则没有特殊行为，因为在这种情况下，它不是表示文档的元数据，而是表示页面特定部分的元数据。

🌐 There is one exception to this: if <meta> has an itemProp prop, there is no special behavior, because in this case it doesn’t represent metadata about the document but rather metadata about a specific part of the page.

用法

🌐 Usage

使用元数据注释文档

🌐 Annotating the document with metadata

你可以使用元数据对文档进行注释，例如关键字、摘要或作者名称。无论在 React 树的哪个位置渲染，React 都会将这些元数据放置在文档 <head> 中。

🌐 You can annotate the document with metadata such as keywords, a summary, or the author’s name. React will place this metadata within the document <head> regardless of where in the React tree it is rendered.

<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 节点。

🌐 You can render the <meta> component from any component. React will put a <meta> DOM node in the document <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>
  );
}

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

🌐 Annotating specific items within the document with metadata

你可以使用 <meta> 组件和 itemProp 属性来为文档中的特定项目添加元数据注释。在这种情况下，React 不会 将这些注释放置在文档的 <head> 中，而是像放置其他 React 组件一样放置它们。

🌐 You can use the <meta> component with the itemProp prop to annotate specific items within the document with metadata. In this case, React will not place these annotations within the document <head> but will place them like any other React component.

<section itemScope>
  <h3>Annotating specific items</h3>
  <meta itemProp="description" content="API reference for using <meta> with itemProp" />
  <p>...</p>
</section>
上一章<link>
下一章<script>