<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 屬性一起使用時指令的行為。

特殊渲染行為

無論 <meta> 元件呈現在 React 樹狀結構中的哪個位置，React 總是會將對應的 DOM 元素放置在文件的 <head> 中。<head> 是 DOM 中 <meta> 存在的唯一有效位置，但如果代表特定頁面的元件可以自行渲染 <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 會在文件 `<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>
  );
}

使用元數據標註文件中的特定項目

您可以將 `<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>