搜尋

網頁資訊 <meta>

<meta> 是 HTML 裡標記「網頁資訊」的元素,該元素不會顯示在頁面中,主要目的是將這份網頁的資訊,提供給瀏覽器、社群網站或搜尋引擎使用,這篇教學會介紹 <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> 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">

意見回饋

如果有任何建議或問題,可傳送「意見表單」給我,謝謝~

HTML 教學

基本介紹

認識 HTML 使用 HTML 編輯器

基礎知識

HTML 標籤與架構 HTML 格式規範 HTML 縮排與註解 HTML 元素顯示類型 HTML 元素屬性 HTML 特殊字元 HTML 色彩表示法 HTML 尺寸單位 HTML 網址與路徑 HTML 套用 CSS 樣式 HTML 套用 JavaScript 如何觀察 HTML 原始碼

網頁資訊元素

網頁標題 <title> 網頁資訊 <meta> 載入外部資源 <link> 重設根目錄 <base>

常用元素

標題 <h1>~<h6> 段落 <p> 行內容器 <span> 區塊容器 <div> 超連結 <a> 圖片 <img> 換行 <br> 水平分隔線 <hr> 內嵌頁框 <iframe>

文字樣式元素

粗體字 <strong><b> 斜體字 <em><i> 刪除線文字 <del> 插入 ( 底線 ) 文字 <ins> 小型文字 <small> 上標下標 <sup><sub> 凸顯文字 <mark> 引用 <blockquote><q> 預先格式化 <pre> 程式碼內容 <code> 收折文字內容 <details> 標示注音 <ruby><rt> 標示聯絡方式 <address> 標示鍵盤按鍵 <kbd> 標示時間日期 <time> 標示縮寫 <abbr> 標示可換行位置 <wbr>

表格&清單元素

無序清單 <ul><li> 有序清單 <ol><li> 自訂清單 <dl><dt><dd> 表格 <table><tr><td> 表格 <th><caption> 表格 <thead><tbody> 表格 <colgroup><col>

表單元素

表單 <form> 輸入 <input> 按鈕 <button> 多行文字輸入 <textarea> 下拉選單 <select> 進度條 <progress> 欄位標題 <label> 欄位資料清單 <datalist> 表單元素分組 <fieldset>

語意結構元素

頁首區塊 <header> 主要區塊 <main> 章節區塊 <section> 文章區塊 <article> 側邊欄區塊 <aside> 引用區塊 <figure> 導航連結區塊 <nav> 頁尾區塊 <footer>

影音&圖形元素

播放影片 <video> 播放聲音 <audio> 響應式圖片 <picture> 點陣畫布 <canvas> 向量圖形 <svg>

網頁嵌入應用

嵌入 YouTube 影片 嵌入 Google 地圖 嵌入 Google 日曆 嵌入 Google 表單 嵌入 Google 簡報 嵌入 Google 文件 嵌入 Google 試算表 嵌入 Google 試算表圖表 嵌入 Twitter 推文 嵌入 Facebook 粉絲團 嵌入 Facebook 影片