在 HTML 文件中包含元資料


要在 HTML 文件中包含元資料,我們使用 <meta> 標籤。元資料提供有關 HTML 文件的重要資訊。它用於新增值對以描述 HTML 文件的屬性,例如文件作者、關鍵字列表、過期日期、作者姓名等。

元資料僅包含一個標籤,即開始標籤 <meta>。元資料在其屬性中攜帶資訊。<meta> 標籤不會改變文件的物理外觀,即使我們在基於資訊的網頁文件中包含一個或多個元標籤。

語法

以下是 meta 標籤在 HTML 中的用法:

<meta attribute-name="value">

特性

以下是使用 <meta> 標籤時需要注意的重要事項。

  • HTML 中的 <meta> 資料不可見,但可以被機器解析。

  • 它只是幫助我們提供有關 HTML 文件的附加資訊。

  • 我們新增 <meta> 標籤是為了搜尋引擎最佳化。

  • <meta> 標籤被網頁瀏覽器、搜尋引擎和其他網站使用。

  • 我們將把 meta 標籤寫在 head 部分。

Meta 標籤的屬性

以下是 <meta> 標籤用於執行操作的屬性。

  • name − 定義屬性的名稱。

  • http-equiv − 用於獲取 HTTP 響應訊息頭。

  • content − 指定屬性值。

  • charset − 指定 HTML 檔案的字元編碼。

  • scheme − 它確定可用於解讀內容屬性值的方案。

示例

以下示例演示了 <meta> 標籤的用法:

<html>
<head>
   <title>HTML meta tag</title>
   <meta name="keywords" content="HTML, meta tag, metadata" />
   <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0">
   <meta name="description" content="Description of the document" />
   <meta http-equiv="refresh" content="10" />
</head>
<body style="background-color:orange">
   <p> Meta data used to add value pairs for describing the properties of HTML documents, like document author, list of keywords, expiry date, author name, etc.</p>
</body>
</html>

有不同的方法可以實現 <meta> 標籤,可以使用以下屬性值:

  • 突出顯示重要關鍵字

  • 提供網頁說明

  • 文件修訂日期

  • 自動重新整理

  • 指定網頁作者

突出顯示重要關鍵字

meta 標籤提供網頁上存在的關鍵字,網頁瀏覽器使用這些關鍵字根據搜尋結果對頁面進行排名。為了最佳化內容的 SEO 排名,我們使用搜索引擎最佳化。

示例

在以下示例中,我們嘗試突出顯示關鍵字:

<!DOCTYPE html>
<html>
<head>
   <meta name="keywords" content="Meta Tags, Metadata" />
</head>
<body>
   <p>Welcome to TutorialsPoint</p>
</body>
</html>

為網頁提供說明

網頁的簡短說明可以包含在 meta 標籤中,這有助於在網際網路上對頁面進行排名。

示例

在以下示例中,我們嘗試使用 <meta> 標籤提供網站說明:

<!DOCTYPE html>
<html>
<head>
   <!-- meta tag starts -->
   <meta name="keywords" content="Meta Tags, Metadata" />
   <meta name="description" content="Tutorials Point is a leading Ed Tech company " />
   <!-- meta tag ends -->
</head>
<body>
   <p>TutorialsPoint.com</p>
</body>
</html>

文件修訂日期

<meta> 標籤還可以提供有關上次更新文件的資訊,這在重新整理網頁時可幫助不同的網頁瀏覽器。

示例

在這裡,我們嘗試使用 <meta> 標籤檢索有關上次更新的資訊:

<!DOCTYPE html>
<html>
<head>
   <meta name="keywords" content="Meta Tags, Metadata" />
   <meta name="description" content="Learn about Meta Tags." />
   <meta name="revised information" content="last updated time" />
</head>
<body>
   <p>TutorialsPoint WebSite</p>
</body>
</html>

自動重新整理

<meta> 標籤用於在給定持續時間後自動重新整理網頁。在 <meta> 標籤中提到特定時間後,網頁必須自動重新整理。

示例

以下是在 <meta> 標籤中包含重新整理屬性值的示例。

<!DOCTYPE html>
<html>
<head>
   <meta name="keywords about" content="Meta Tags, Metadata" />
   <meta name="description" content="Knowing about Meta Tags." />
   <meta name="revised about" content="Tutorials" />
   <meta http-equiv="refresh" content="8" />
<body>
   <p>TutorialsPoint WebSite</p>
</body>
</html>

提及網頁作者

如果我們想提及網頁作者,我們使用 <meta> 標籤。

示例

以下是在 <meta> 標籤中包含作者姓名作為屬性值的示例。

<!DOCTYPE html>
<html>
<head>
   <meta name="keywords used " content="Meta Tags, Metadata" />
   <meta name="description about" content="Meta tags." />
   <meta name="author" content="Bhanu Priya" />
</head>
<body>
   <p>TutorialsPoint WebSite</p>
</body>
</html>

更新於:2023年10月10日

272 次瀏覽

啟動您的 職業生涯

透過完成課程獲得認證

開始學習
廣告
© . All rights reserved.