HTML - 元資料標籤

HTML <meta> 標籤允許我們以各種方式指定元資料，元資料是關於文件的其他重要資訊。META 元素可用於包含描述 HTML 文件屬性（如作者、過期日期、關鍵詞列表、文件作者等）的**名稱**和**內容**對。

HTML <meta> 標籤可用於提供額外資訊。它是一個自閉合元素，這意味著它不需要結束標籤，但會在其屬性中攜帶資訊。您可以根據需要在文件中包含一個或多個元標籤，但通常情況下，元標籤不會影響文件的物理外觀，因此從外觀角度來看，包含它們與否無關緊要。

使用元標籤向網頁新增元資料

您可以透過將 <meta> 標籤放置在文件的頭部（由 <head> 標籤表示）中來向您的網頁新增元資料。

可以使用 <meta> 標籤新增以下元資料

指定關鍵詞
文件修訂日期
頁面重定向
設定作者姓名

文件描述
文件重新整理
設定 Cookie
指定字元集

下面，您可以檢視所有示例，這些示例都透過程式碼很好地描述了我們應該如何在網站上使用個別元標籤。

指定關鍵詞

您可以使用 <meta> 標籤指定與文件相關的重要的關鍵詞，稍後搜尋引擎在索引您的網頁以供搜尋時會使用這些關鍵詞。

示例

以下是一個示例，其中我們將“HTML、元標籤和元資料”作為關於文件的重要關鍵詞新增。

<!DOCTYPE html>
<html>
<head>
   <title>Meta Tags Example</title>
   <meta name="keywords" content="HTML, Meta Tags, Metadata" />
</head>
<body>
   <p>Hello HTML5!</p>
</body>
</html>

文件描述

您可以使用 <meta> 標籤提供關於文件的簡短描述。這同樣可以被各種搜尋引擎在索引您的網頁以供搜尋時使用。

示例

以下示例演示瞭如何為網頁定義元描述。

<!DOCTYPE html>
<html>
<head>
   <title>Meta Tags Example</title>
   <meta name="keywords" content="HTML, Meta Tags, Metadata" />
   <meta name="description" content="Learning about Meta Tags." />
</head>
<body>
   <p>Hello HTML5!</p>
</body>
</html>

文件修訂日期

您可以使用 <meta> 標籤提供關於上次更新文件的資訊。各種網路瀏覽器在重新整理您的網頁時可以使用此資訊。

示例

以下示例演示瞭如何定義修訂日期。

<!DOCTYPE html>
<html>
<head>
   <title>Meta Tags Example</title>
   <meta name="keywords" content="HTML, Meta Tags, Metadata" />
   <meta name="description" content="Learning about Meta Tags." />
   <meta name="revised" content="Tutorialspoint, 3/7/2014" />
</head>
<body>
   <p>Hello HTML5!</p>
</body>
</html>

文件重新整理

<meta> 標籤可以用來指定網頁自動重新整理的持續時間。

示例

如果希望您的頁面每 5 秒重新整理一次，請使用以下語法。

<!DOCTYPE html>
<html>
<head>
   <title>Meta Tags Example</title>
   <meta name="keywords" content="HTML, Meta Tags, Metadata" />
   <meta name="description" content="Learning about Meta Tags." />
   <meta name="revised" content="Tutorialspoint, 3/7/2014" />
   <meta http-equiv="refresh" content="5" />
</head>
<body>
   <p>Hello HTML5!</p>
</body>
</html>

頁面重定向

您可以使用 <meta> 標籤將您的頁面重定向到任何其他網頁。如果您希望在一段時間後重定向頁面，還可以指定持續時間。

示例

以下是如何在 5 秒後將當前頁面重定向到另一個頁面的示例。如果要立即重定向頁面，則不要指定 content 屬性。

<!DOCTYPE html>
<html>
<head>
   <title>Meta Tags Example</title>
   <meta name="keywords" content="HTML, Meta Tags, Metadata" />
   <meta name="description" content="Learning about Meta Tags." />
   <meta name="revised" content="Tutorialspoint, 3/7/2014" />
   <meta http-equiv="refresh" content="5; url=https://tutorialspoint.tw" />
</head>
<body>
   <p>Hello HTML5!</p>
</body>
</html>

設定 Cookie

Cookie 是儲存在您計算機上的小型文字檔案中的資料，它在 Web 瀏覽器和 Web 伺服器之間交換，以根據您的 Web 應用程式需求跟蹤各種資訊。

您可以使用 <meta> 標籤在客戶端儲存 Cookie，稍後 Web 伺服器可以使用此資訊來跟蹤網站訪問者。如果您不包含過期日期和時間，則 Cookie 被視為會話 Cookie，並在使用者退出瀏覽器時被刪除。

示例

以下是如何在 5 秒後將當前頁面重定向到另一個頁面的示例。如果要立即重定向頁面，則不要指定content屬性。

<!DOCTYPE html>
<html>
<head>
   <title>Meta Tags Example</title>
   <meta name="keywords" content="HTML, Meta Tags, Metadata" />
   <meta name="description" content="Learning about Meta Tags." />
   <meta name="revised" content="Tutorialspoint, 3/7/2014" />
   <meta http-equiv="cookie" content="userid=xyz; expires=Wednesday, 08-Aug-15 23:59:59 GMT;" />
</head>
<body>
   <p>Hello HTML5!</p>
</body>
</html>

注意：您可以檢視 PHP 和 Cookie 教程以獲取有關 Cookie 的完整詳細資訊。

設定作者姓名

您可以使用 <meta> 標籤在網頁上設定作者姓名。可以透過將“author”值分配給“name”屬性來指定作者姓名。

示例

以下示例演示瞭如何設定作者姓名。

<!DOCTYPE html>
<html>
<head>
   <title>Meta Tags Example</title>
   <meta name="keywords" content="HTML, Meta Tags, Metadata" />
   <meta name="description" content="Learning about Meta Tags." />
   <meta name="author" content="Mahnaz Mohtashim" />
</head>
<body>
   <p>Hello HTML5!</p>
</body>
</html>

指定字元集

您可以使用 <meta> 標籤指定網頁中使用的字元集。預設情況下，Web 伺服器和 Web 瀏覽器使用 ISO-8859-1 (Latin1) 編碼來處理網頁。

示例

以下是如何設定 UTF-8 編碼的示例。

<!DOCTYPE html>
<html>
<head>
   <title>Meta Tags Example</title>
   <meta name="keywords" content="HTML, Meta Tags, Metadata" />
   <meta name="description" content="Learning about Meta Tags." />
   <meta name="author" content="Mahnaz Mohtashim" />
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
   <p>Hello HTML5!</p>
</body>
</html>

示例

要使用繁體中文字元提供靜態頁面，網頁必須包含一個 <meta> 標籤來設定 Big5 編碼。

<!DOCTYPE html>
<html>
<head>
   <title>Meta Tags Example</title>
   <meta name="keywords" content="HTML, Meta Tags, Metadata" />
   <meta name="description" content="Learning about Meta Tags." />
   <meta name="author" content="Mahnaz Mohtashim" />
   <meta http-equiv="Content-Type" content="text/html; charset=Big5" />
</head>
<body>
   <p>Hello HTML5!</p>
</body>
</html>

影片：HTML 元標籤

列印頁面