在 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>