網頁資訊 <meta>
<meta>
是 HTML 裡標記「網頁資訊」的元素,該元素不會顯示在頁面中,主要目的是將這份網頁的資訊,提供給瀏覽器、社群網站或搜尋引擎使用,這篇教學會介紹 <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">
意見回饋
如果有任何建議或問題,可傳送「意見表單」給我,謝謝~