Technology

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
30
31
32
33
# 此元素可提供有關頁面的元資訊, 例如針對搜尋引擎和更新頻度的描述和關鍵字.
meta 標籤位於文件的頭部, 不包含任何內容, 該標籤的屬性定義了與文件相關聯的名稱/值對元資料不會顯示在頁面上，但是對於機器是可讀的。
主要面向的是搜尋引擎之類的機器人,它可用於瀏覽器（如何顯示內容或重新載入頁面），搜尋引擎（關鍵字），或其他web 服務。

<!-- more -->

## name 屬性
該屬性提供了名稱/值對中的名稱,用來描述網頁; HTML 和XHTML 標籤都沒有指定任何預先定義的meta 名稱, 通常情況下,可以自由使用對自己和源文檔的讀者來說富有意義的名稱

## content 屬性
此屬性提供了名稱/值對中的值. 該值可以是任何有效的字串,且該屬性始終要和name 或http-equiv 屬性一起使用

## http-equiv 屬性
http-equiv 為名稱/值對提供了名稱, 並指示伺服器在發送實際的文檔之前,先在要傳送給瀏覽器的MIME 文檔頭包含名稱/值對,用來告訴瀏覽器應該以哪種方式顯示之類的,主要面向的是瀏覽器

當伺服器先向瀏覽器發送文檔時,會先發送許多名稱/值對, 而且所有的伺服器都至少要發送一個: content-type:text/html,意思是告訴瀏覽器準備接受一個HTML 文檔

一個伺服器向瀏覽器發送的訊息

<meta http-equiv='charset' content='utf-8''>
<meta http-equiv="expires" content="31 Dec 2008">
這樣發送瀏覽器的頭部就包含:

charset:utf8
expires: 31 Dec 2008
屬性具體應用

## SEO 最佳化 頁面關鍵字
每個網頁應具有描述該網頁內容的一組唯一的關鍵字。使用人們可能會搜索，並準確描述網頁上所提供資訊的描述性和代表性關鍵字及短語。
標記內容太短，則搜尋引擎可能不會認為這些內容相關。另外標記不應超過874 個字元。

```html
<meta name="keywords" content='your tags'>

如果沒有提供name 屬性, 那麼名稱/值中的名稱會採用http-equiv 屬性的值

頁面描述

1
<meta name="description" content="不能大于150个字符且能准确反应网页内容的描述标签">

搜尋引擎索引方式

robotterms是一組使用逗號(,)分割的值, 通常有以下幾種取值

1
<metaname="robots" content='index, follow'>
  • none: 文件不背檢索,且頁面上的連結也不可以被查詢
  • noindex: 文件不會被檢索
  • nofollow: 頁面上的連結不會被查詢
  • all: 文件將被檢索, 且頁面上的連結可以被查詢
  • index: 文件將會被檢索
  • follow: 頁面上的連結可以被查詢

頁面重定向和刷新

1
<meta http-equiv="refresh" content="0;url=这里是链接">

content 內的數字代表時間秒, 即多久後刷新, 如果加URL ,則會重定向到指定的網頁（搜尋引擎能夠自動檢測，也很容易被引擎視作誤導而受到懲罰）。

定義作者

1
<meta name="author" content="作者名稱">

行動裝置
viewport: 能優化移動顯示器的顯示

//width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边 content 屬性值:
  • width: 寬度(數值或/device-width 裝置寬度)
  • height: 高度(數值或device-height 設備高度)
  • initial-scale: 初始的縮放比例, 範圍從0-10
  • minimum-scale: 允許使用者縮放到的最小比例
  • maximum-scale: 允許使用者縮放到的最大比例
  • user-scalable: 使用者是否可以手動縮放no, yes
    注意: 很多人使用initial-scale=1到非響應式網站上，這會讓網站以100%寬度渲染，使用者需要手動移動頁面或縮放。如果和initial-scale=1同時使用user-scalable=no或maximum-scale=1，則使用者將無法放大/縮小網頁來看到全部的內容。

apple 行動裝置
WebApp全螢幕模式偽裝app, 離線應用程式

隱藏狀態列/設定狀態列顏色只有在開啟WebApp全螢幕模式時才生效

content 的值有
  • black-translucent
  • default
  • black
    新增到主畫面後的標題
忽略數字自動辨識成電話號碼

忽略識別郵箱-apple

android 行動裝置 Android Lollipop 中的Chrome 39 增加theme-color meta 標籤，用來控制選項卡顏色。 禁止Chrome 瀏覽器中自動提示翻譯 其他 申明編碼 禁止瀏覽器從本機電腦的快取存取頁面內容 這樣設定，訪客將無法離線瀏覽。 轉碼申明 用百度開啟網頁可能會對其進行轉碼（例如貼廣告），避免轉碼可加入以下meta。 
1
<meta http-equiv="Cache-Control" content="no-siteapp" />
Share