0%

HTML複習整理-標籤meta

參考來源:

SEO網站優化教學 2-1如何被收錄-建立Meta Title,Description,Keywords
SEO 網站搜尋優化 - 不要再用 Meta Keywords 關鍵字了,改用 Description 吧!
應該避免的過時語法
HTML meta標籤常用屬性及其作用總結
【HTML】瀏覽器內核控制meta name="renderer" 說明文檔
使用 Veiwport 設定手機網頁的螢幕解析度



關於meta元素

meta元素可以定義文件的各種後設資料,提供各種文件資訊,通俗點說就是可以理解為提供了關於網站的各種資訊。html文件中可以包含多個meta元素,每個meta元素只能用於一種用途,如果想定義多個文件資訊,則需要在head標籤中新增多個meta元素。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<meta name="屬性值" content="內容">

HTML meta name 常用屬性

name="description" content="網頁簡短描述"
有機會顯示在搜尋結果的網頁摘要中

name="keywords" content="關鍵字1.關鍵字2"
關鍵字標籤,但現在已少用(Google引擎已不使用此屬性)

name="author" content="作者姓名"
記錄網頁的作者名稱

meta name="renderer" content="webkit|ie-comp|ie-stand"
用於預設用哪種瀏覽器核心渲染版面

name="generator" content="編輯器名稱"
記錄網頁編輯器名稱

name="copyright" content="網頁版權"
用來標示網頁的版權或著作權聲明

name="distribution" content="網頁發佈地區"
用來記錄網頁的發佈地區

name="viewport" content="width=device-width, initial-scale=1.0"
設定手機網頁的螢幕解析度
註1:設定為 width=device-width 就可以自動符合所有不同手機的預設最佳解析度
註2:設定 initial-scale=1 手機螢幕畫面的初始縮放比例為 100%

每個 meta 使用 name 的時候,都會搭配 content 來呈現資訊內容,簡單來說,name 代表資訊項目,content 代表資訊值。

1
2
3
4
5
6
7
8
9
10
<meta http-equiv="屬性值" content="內容">
HTML5中能使用的屬性
http-equiv="Content-Type" content="text/html"; charset="uft-8″
網頁內容的種類以及編碼

http-equiv="Refresh" content="time"
指定一個時間間隔(以秒為單位),在此時間過去之後從伺服器重新載入當前頁面,也可以另外指定一個頁面

http-equiv="default-style" content="text/css"
定義預設的樣式表
1
2
<meta charset="UTF-8">
網頁編碼,UTF-8是萬國碼