HTML Meta 元素

meta 元素用於提供有關網頁的結構化後設資料。

HTML 元素

<meta> 元素通常提供後設資料,例如文件的關鍵字描述最後修改的作者,以及其他後設資料。可以在 HTML 或 XHTML 文件的頭部放置任意數量的 meta 元素。

META 的 name 屬性提供屬性名稱,而 content 屬性提供相應的值。content 屬性值可以包含文字和實體,但它可能不包含 HTML 標籤。沒有標準的元屬性列表,因此你可以定義他們喜歡的任何後設資料。這是一個例子:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="author" content="John Carter">
    <title>Defining Document's Author</title>        
</head>
<body>
    <p>Hello World!</p>
</body>
</html>

上例中的 <meta> 標記只是定義了文件的作者。

注意: 後設資料不會顯示在頁面上,但可以進行機器分析,並且可以被瀏覽器,搜尋引擎或其他 Web 服務使用。

HTML 中定義字元編碼

元標記通常用於在 HTML 文件中宣告字元編碼。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Declaring Character Encoding</title>        
</head>
<body>
    <p>Hello World!</p>
</body>
</html>

但是,要在 CSS 文件中設定字元編碼,請使用 @charset AT-規則。

注意: UTF-8 是一種非常通用且推薦的字元編碼可供選擇。但是,如果未指定,則使用平臺的預設編碼。

搜尋引擎的關鍵字和描述

一些搜尋引擎使用後設資料,特別是關鍵字和描述來索引網頁; 然而,這可能不一定是真的。為文件的關鍵字和描述賦予額外權重的關鍵字提供了頁面的簡短概要。以下示例中的元標記定義了頁面的關鍵字和描述。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="keywords" content="HTML, CSS, References">
    <meta name="description" content="Tutorials on HTML and CSS"> 
    <title>Defining Keywords and Description</title>        
</head>
<body>
    <p>Hello World!</p>
</body>
</html>

提示: 搜尋引擎通常會使用頁面的元描述為頁面在搜尋結果中顯示時建立簡短概要。瞭解更多

啟用移動裝置上的縮放功能

你可以使用元視區標記在移動裝置上啟用網站縮放。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="keywords" content="HTML, CSS, References">
    <meta name="description" content="Tutorials on HTML and CSS"> 
    <title>Defining Keywords and Description</title>        
</head>
<body>
    <p>Hello World!</p>
</body>
</html>

提示: 始終在網頁中使用 <meta> viewport 標記。它將使你的網站更容易在手機和平板電腦等移動裝置上訪問。