什麼是 HTML 元標記以及它們的用途是什麼?
##＃ 快速鏈接
⭐什麼是元標籤?
⭐基本元標籤
⭐自訂元標籤
要點
元標籤是網頁的重要組成部分，可將重要資料傳遞給搜尋引擎、網際網路瀏覽器和各種基於網路的平台。這些元資料元素在提供網頁內容的簡潔摘要、促進搜尋引擎演算法的最佳索引以及透過改進的導航和自訂選項增強用戶體驗方面發揮著不可或缺的作用。
某些關鍵 HTML 標籤包含基本功能，例如元描述、開放圖屬性、視窗配置和 HTTP 等效設定。
自訂元標籤提供一定程度的多功能性，但需要徹底的記錄保存和策略準備才能有效利用。
除了網頁的標題及其腳本語言和樣式表之外，HTML 頭部部分還可以包含元標記。這些元素在優化搜尋引擎排名 (SEO)、增強可訪問性功能和確保最佳網站功能方面發揮著至關重要的作用。
元標籤是網站優化的一個重要方面，它提供搜尋引擎在索引網頁時使用的有價值的資訊。這些標籤包括標題標籤、描述標籤和關鍵字標籤，它們可以深入了解網頁的內容和用途。了解這些標籤的正確使用對於提高線上可見度和吸引目標流量至關重要。
什麼是元標籤?
元標籤作為網站的補充資料來源，可以被搜尋引擎、網路瀏覽器和其他線上平台等一系列數位工具使用。這些元素通常不會完整顯示在瀏覽器介面中，但它們為各種應用程式的這些技術提供了寶貴的見解。
元標籤是網路開發的重要組成部分，可以顯著影響網站在各種平台上的效能。透過元標籤提供相關資訊（例如關鍵字或描述），人們可以優化其網站以提高搜尋引擎排名、縮短頁面載入時間、提高用戶體驗以及在社群媒體來源上提供更好的視覺呈現。因此，確保準確和簡潔的元資料輸入以獲得這些好處至關重要。
元標記是獨立的元素，不需要結束標記，因為它們在屬性中包含所有資訊。這些標籤可以合併在 HTML 文件的標頭部分中。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width-device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
HTML 基礎的目前實例在頭部包含兩個元標記。這些元素分別提供有關字元編碼 (UTF-8) 和視口的詳細資訊。
基本元標籤
最常見的是，元標記由各種屬性組成，以便封裝其關聯資訊。
名稱屬性用作元資料的標識符，而內容屬性用於儲存與其關聯的相應資訊。該構造提供了一個多功能框架，使用戶能夠以無縫方式包含他們可能需要的任何附加元資料。
property屬性可以用來取代name屬性，而且它執行的功能與後者的功能相當。
標籤是一種 HTML 屬性，用於在網頁內容中定義 HTTP 標頭，指示其對應的值。它代表“HTTP 等價”，表示兩個實體之間的關係。
當「方案」屬性與「名稱」結合使用時，用於描述「內容」屬性中表示的特定資料類型。
在眾多網路服務和瀏覽平台中遇到各種廣泛支援的元標記並不罕見。
元描述標籤
元描述的長度通常為 155 個字符，作為網頁內容的摘要，顯示在搜尋引擎結果頁面的頁面標題和 URL 下方。此簡短概述的準確性和簡潔性對於吸引用戶點擊並訪問網站至關重要。
<meta name="description" content="A brief description of your page">
開放圖元標籤
Facebook 和各種社群媒體平台大量使用開放圖元標籤，以增強用戶分享時特定網頁連結的視覺表示。這些標籤包含 og:title、og:description 和 og:image 等基本屬性，這些屬性有助於優化社群媒體平台上的內容顯示。
<meta property="og:title" content="Your Page Title">
<meta property="og:description" content="A brief description of your page">
<meta property="og:image" content="URL of a related image">
SEO 元標籤
上述元標籤透過提供增強網頁在搜尋結果中的可見性的相關數據來充當搜尋引擎優化的手段。儘管它們在當代 SEO 方法中的相關性逐漸減弱，但由於其固有的功能和實用性，它們仍然是網頁開發不可或缺的組成部分。此類標籤的一些範例包括用於指示爬行器應將哪些頁面編入索引或從搜尋結果中排除的「機器人」標籤，以及指示特定內容片段的創建者的「作者」標籤。
<meta name="robots" content="index, follow">
<meta name="author" content="Your Name">
視口元標記
視口元標記在響應式網頁設計中發揮關鍵作用，它引導瀏覽器根據裝置螢幕的尺寸修改網站的佈局。這使得內容能夠在各種手持裝置上適當地顯示和可讀地觀看。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
HTTP-Equiv 元標籤
元標籤的使用對於規範與瀏覽器和伺服器處理網頁相關的各個方面至關重要。此類屬性包括「刷新」和「X-UA-相容」等屬性。儘管它們與搜尋引擎優化 (SEO) 的直接關係可能有所不同，但這些標籤會顯著影響網頁的行為和相容性。
<meta http-equiv="refresh" content="5;url=https://example.com">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
雖然並非所有元標記都可以在各個專案中同時使用，但理解可用元標記的陣列對於確保最佳的 Web 開發實踐仍然至關重要。此外，實施元標記有助於增強 HTML 文件的結構組織。
自訂元標籤
元標記很靈活，因為:
您可以自由選擇和使用適合您偏好的名稱，以保留您想要的任何資訊。
儘管瀏覽器不在其介面上顯示內容，但透過檢查網頁的底層程式碼仍然可見且可存取。
以下是客製化元標記的範例，示範如何在 Web 開發中有效利用 HTML 元標記。此範例展示了元標記用於搜尋引擎優化 (SEO) 目的的適當使用，同時還提供有關頁面內容和結構的附加資訊。透過在元標記中包含相關關鍵字和描述，網站所有者可以提高其網站在 Google、Bing 或 Yahoo 等搜尋引擎上的可見度。此外，此範例強調了優化標題標籤和描述標籤以獲得最大 SEO 影響的重要性。
<meta name="target-audience" content="developers">
本實例例示了一種情況，其中客製化元資料描繪了由開發人員組成的預期讀者群。
自訂元標籤提供了增強普遍認可的傳統標籤集的機會。儘管如此，仔細記錄所使用的客製化標籤並全面了解其預期應用至關重要。其他服務本身不會利用或承認這些標籤，因此需要開發個人化程式碼來處理它們。