在 HTML 文件中包含元資料


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

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

語法

以下是 HTML 中元標籤的用法:

<meta attribute-name="value">

功能

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

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

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

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

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

  • 我們將元標籤寫入 head 部分。

元標籤的屬性

以下是 <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> 標籤,可以使用以下屬性值:

  • 突出顯示重要關鍵詞

  • 提供網頁描述

  • 文件修訂日期

  • 自動重新整理

  • 指定網頁作者

突出顯示重要關鍵詞

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

示例

在下面的示例中,我們嘗試突出顯示關鍵詞:

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

為網頁提供描述

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

示例

在下面的示例中,我們嘗試使用 <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> 標籤還可以提供有關上次更新文件的資訊,這有助於不同的 Web 瀏覽器在重新整理網頁時。

示例

在這裡,我們嘗試使用 <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日

273 次檢視

開啟您的 職業生涯

透過完成課程獲得認證

開始學習
廣告