<meta> 是 HTML 裡標記「網頁資訊」的元素，該元素不會顯示在頁面中，主要目的是將這份網頁的資訊，提供給瀏覽器、社群網站或搜尋引擎使用，這篇教學會介紹 <meta> 網頁資訊元素。
原文參考：網頁資訊 meta
<meta><meta> 是 HTML 裡標記「網頁資訊」的元素，該元素放在 HTML 的 <head> 裡，並不會顯示在頁面中，主要目的是將這份網頁的資訊，提供給瀏覽器、社群網站或搜尋引擎，可提供的資訊包含了頁面編碼、作者資訊、關鍵字、頁面描述、網站縮圖、頁面發布時間...等。
<meta>屬於「空元素」，只需要「起始標籤」。<meta>的內容由一個特定屬性搭配 content 屬性所組成。
<meta> 基本的寫法如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="oxxo.studio">
<meta name="description" content="STEAM 教育學習網秉持著 STEAM/STEM 的精神，讓所有人都能輕鬆跨入 STEAM 的學習領域。">
<title>網頁標題</title>
</head>
<body>
<p>網頁內容</p>
</body>
</html>
<meta> charset 屬性<meta> 的 charset 屬性可以設定「網頁的編碼」，通常會將編碼設定為 utf-8 ( 8-bit Unicode Transformation Format )，這是一種針對 Unicode 的可變長度字元編碼，是目前電子郵件、網頁及其他儲存或傳送文字最優先採用的編碼方式，就算是在語系不同的國家，仍然可以看到正確的顯示而不會出現亂碼，設定的方法如下：
<meta charset="utf-8">
<meta> name 屬性<meta> 的 name 屬性可以設定「作者」、「網頁描述」、「關鍵字」、「版本訊息」和「開發軟體」...等資訊，常用的設定內容如下表所示：
| name 屬性值 | 說明 |
|---|---|
| author | 作者資訊。 |
| description | 網頁的內容描述 ( 通常會出現在搜尋引擎的描述說明 )。 |
| keywords | 網頁內容關鍵字，使用逗號分格 ( 通常提供給搜尋引擎使用 )。 |
| generator | 開發網頁的軟體。 |
| revised | 網頁新版本訊息。 |
| viewport | 設定行動裝置的顯示資訊。 |
| robots | 禁止搜尋引擎索引。 |
使用 name 時需要搭配 content 屬性，設定方法如下：
<meta name="author" content="oxxo.studio">
<meta name="description" content="STEAM 教育學習網秉持著 STEAM/STEM 的精神，讓所有人都能輕鬆跨入 STEAM 的學習領域。">
<meta name="keywords" content="STEAM 教育,STEAM">
<meta name="revised" content="2022/11/11">
設定 name="viewport" 可以讓網頁在行動裝置上正常顯示 ( 不會以桌面版的方式顯示而導致字體太小 )，常用的設定值如下：
| 設定值 | 說明 |
|---|---|
| width=device-width | 頁面寬度等同裝置 ( device ) 寬度。 |
| initial-scale=1 | 頁面初始縮放比例為 100%，不放大縮小。 |
| minimum-scale=1 | 頁面最小縮小尺寸為 100%。 |
| maximum-scale=1 | 頁面最大放大尺寸為 100%。 |
| user-scalable=no | 使用者無法縮放。 |
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
設定 name="robots" 可以定義禁止搜尋引擎搜尋的方式 ( 通常不會去做設定，除非該頁面不想被搜尋到 )，常用的設定值如下：
| 設定值 | 說明 |
|---|---|
| noindex | 不要為這個網頁在搜尋結果中建立索引。 |
| nofollow | 不要追蹤這個網頁上的連結。 |
| none | 等同 noindex, nofollow。 |
| noarchive | 不要在搜尋結果中顯示快取連結。 |
| nosnippet | 不要在搜尋結果中顯示這個網頁的文字摘要或影片預覽畫面。 |
| notranslate | 不要在搜尋結果中提供這個網頁的翻譯。 |
| noimageindex | 不要為這個網頁的圖片在搜尋結果中建立索引。 |
| unavailable_after:[date/time] | 在指定的日期時間後，不要在搜尋結果顯示這個網頁。 |
<meta name="robots" content="noindex, nofollow">
<meta> http-equiv 屬性設定 http-equiv="refresh" 可以讓網頁在指定的秒數後，自動重新整理或自動跳轉到其他頁面，設定方法如下：
五秒後自動重新整理頁面
<meta http-equiv="refresh" content="5">
五秒後自動跳轉到新頁面
<meta http-equiv="refresh" content="5; https://www.oxxostudio.tw">
<meta> itemprop 和 property 屬性<meta> 的 itemprop 和 property 屬性通常是為了「社群網站」的分享使用，不同的社群網站會有不同的設定值，常用的設定值如下：
| 設定值 | 說明 |
|---|---|
| itemprop="name" | ( Google 搜尋 ) 作者。 |
| itemprop="image" | ( Google 搜尋 ) 網站分享時的圖片網址。 |
| itemprop="description" | ( Google 搜尋 ) 網站描述。 |
| property="og:title" | ( Facebook ) 網站標題。 |
| property="og:url" | ( Facebook ) 網站網址。 |
| property="og:image" | ( Facebook ) 網站分享時的圖片網址。 |
| property="og:description" | ( Facebook ) 網站描述。 |
| property="twitter:title" | ( Twitter ) 網站標題。 |
| property="twitter:image" | ( Twitter ) 網站分享時的圖片網址。 |
| property="twitter:description" | ( Twitter ) 網站描述。 |
| property="twitter:card" | ( Twitter ) 網站資訊卡。 |
| property="twitter:site" | ( Twitter ) 分享的作者。 |
<meta itemprop="name" content="STEAM 教育學習網">
<meta itemprop="image" content="https://steam.oxxostudio.tw/webp/index.webp">
<meta itemprop="description" content="STEAM 教育延伸 STEM 的精神，讓所有人都能輕鬆跨入 STEAM 的學習領域。">
<meta property="og:title" content="STEAM 教育學習網">
<meta property="og:url" content="https://steam.oxxostudio.tw/">
<meta property="og:image" content="https://steam.oxxostudio.tw/webp/index.webp">
<meta property="og:description" content="STEAM 教育延伸 STEM 的精神，讓所有人都能輕鬆跨入 STEAM 的學習領域。">
<meta property="twitter:title" content="STEAM 教育學習網">
<meta property="twitter:image" content="https://steam.oxxostudio.tw/webp/index.webp">
<meta property="twitter:description" content="STEAM 教育延伸 STEM 的精神，讓所有人都能輕鬆跨入 STEAM 的學習領域。">
<meta property="twitter:card" content="summary">
<meta property="twitter:site" content="@OxxoStudio">
大家好，我是 OXXO，是個即將邁入中年的斜槓青年，我有個超過一千篇教學的 STEAM 教育學習網，有興趣可以參考下方連結呦～ ^_^
iThome鐵人賽
看影片追技術