在 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>
資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP