移動前端第二彈：善用meta

作者：杜瑤（@doyoe）

鏈接：http://blog.doyoe.com/2015/10/20/mobile/移動前端第二彈：善用meta/

前言

在移動前端第一彈：viewport詳解中，我們講了viewport，那是一個關於meta的故事。這次我們會就將meta這個故事講得更廣闊、更有意思一些。

寫過HTML的童鞋，應該都對這個不陌生，或用它來定義頁面編碼，或用它來定義搜索引擎抓取方式，或用它定義頁面關鍵字，描述等等。

meta列表

好的meta使用，能更好地提高頁面的可用性及被檢索的機率。

這裏並不會列出所有的meta使用方式，只挑選一些常用及實際意義比較大的講講，當然也包括一些廠商私有定製的。

常規

聲明文檔使用的字符編碼

<meta charset="utf-8" />

該聲明用來指定文檔的編碼，除了utf-8，可選值還有：ISO-8859-1、BIG5、iso-8859-2, iso-2022-jp, iso-2022-kr, gb2312等

當然，你可能還見過使用另外一種方式來定義文檔字符編碼：

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

相對於這種方式，更推薦你使用第1種，言外之意，就是推薦使用HTML5。

聲明頁面刷新或跳轉

<metahttp-equiv="refresh"content="10" />

<metahttp-equiv="refresh"content="10; url=http://www.doyoe.com" />

該聲明用來指定頁面自刷新或者跳轉到其它頁面，其中的時間單位是s。

聲明頁面過期時間

<metahttp-equiv="expires"content="0" />

<metahttp-equiv="expires"content="Wed, 26 Feb 1997 08:21:57 GMT" />

該聲明用來指定頁面的過期時間，一旦網頁過期，從服務器上重新請求，其中時間必須使用GMT格式，或者直接是0（即不緩存）

聲明頁面是否緩存

<metahttp-equiv="pragma"content="no-cache" />

<metahttp-equiv="cache-control"content="no-cache" />

上述語句都可以用來指定文檔不被緩存。一些仍然在使用HTTP/1.0的可以使用第1條，第2條由HTTP/1.1提供，常用值還有：public, no-cache, no-store等

聲明作者信息

<meta name="author" content="joy, [email protected]" />

聲明文檔關鍵字

<meta name="keywords" content="CSS, HTML, JavaScript, 前端" />

多關鍵字之間以半角逗號分隔

聲明文檔描述

<meta name="description" content="這是一份meta列表" />

文檔描述內容最好是完整的一句話，以不超過50個字符爲宜

聲明使用的瀏覽器及版本

x-ua-compatible設置是從IE8開始增加的（很明顯，只適用於IE），對於過往的版本無法識別。

開發者可以通過設置x-ua-compatible來指定渲染引擎的類型和版本，並且因爲需求不同可以有多種不同的設置：

Case1:

<metahttp-equiv="x-ua-compatible"content="IE=7" />

<metahttp-equiv="x-ua-compatible"content="IE=4" />

<metahttp-equiv="x-ua-compatible"content="IE=xx" />

<metahttp-equiv="x-ua-compatible"content="IE=50" />

當直接指定content爲IE的某個具體版本，如上述代碼第1條，客戶端的IE將會使用IE7.0標準模式對頁面進行渲染，並忽略Doctype定義。

當指定的IE版本在客戶端IE中不存在時，IE將會嘗試將該值轉換爲最爲接近的版本。

例如指定一個錯誤的或者低於5.0的IE版本，如上述代碼第2，3條，客戶端的IE將會使用IE5.0對頁面進行渲染，由於IE5.0並沒有標準模式，所以將會直接使用quirks mode來渲染；

如果指定一個大於客戶端IE的版本，如上述代碼第4條，假定客戶端IE的最高版本爲9.0，那麼IE會將該值轉換爲IE=9，即使用IE9.0標準模式對頁面進行渲染。

Case2:

<meta http-equiv="x-ua-compatible" content="IE=EmulateIE7" />

當指定的content值加了Emulate前綴時，如上述代碼，客戶端IE將會根據Doctype定義來決定如何來對頁面進行渲染。假設頁面使用了標準的Doctype，那麼此定義效果等同Case1；假設頁面並沒有使用標準的Doctype，那麼將使用quirks mode來渲染。

Case3:

<meta http-equiv="x-ua-compatible" content="IE=Edge" />

當指定的content值爲IE=Edge時，如上述代碼，客戶端的IE將會使用最高的標準模式對頁面進行渲染。

Case4:

<meta http-equiv="x-ua-compatible" content="IE=7, 10, 11" />

當指定的content值有多個版本時，如上述代碼，假定客戶端IE版本爲8.0或者9.0，則使用IE7.0標準模式對頁面進行渲染；假定客戶端IE版本爲10.0或者11.0，則直接使用對應版本的標準模式對頁面進行渲染。

Case5:

<meta http-equiv="x-ua-compatible" content="IE=Edge, chrome=1" />

當指定的content值爲IE=Edge, chrome=1時，如上述代碼，假定客戶端安裝了Google Chrome Frame，則在IE中使用chrome的渲染引擎來渲染頁面，否則，將會使用客戶端IE最高的標準模式對頁面進行渲染。

聲明搜索引擎抓取方式

<meta name="robots" content="index" />

通知搜索引擎文檔是否需要被索引。可選值有：

• all（默認值，索引當前頁並跟蹤鏈接，相當於：index, follow）

• none（忽略當前頁，相當於：noindex, nofollow）

• index（索引當前頁）

• noindex（不索引當前頁）

• follow（跟蹤當前頁鏈接，不論當前頁是否被索引）

• nofollow（不跟蹤當前頁鏈接，不論當前頁是否被索引）

如果聲明衝突，某些引擎可能會做嚴格處理：

<metaname="robots"content="noindex" />

<metaname="robots"content="index" />

類似上述代碼，在Google引擎中，會執行noindex這個更爲嚴格的聲明。

需要注意的是並不是所有搜索引擎都支持robots meta，比較保守的做法是配合robots.txt使用。

聲明搜索引擎抓取間隔

<meta name="revisit-after" content="10 days" />

有時候你可能並不希望站點一直被搜索引擎抓取，而是每間隔一段時間纔來訪問一次，這時，可以聲明revisit-after meta。

移動

聲明viewport視口

<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />

該聲明用於指定在移動設備上頁面的佈局視口如何設置。對於viewport meta的詳細設置，請參考：移動前端第一彈：viewport詳解

聲明添加到主屏幕的Web App標題

iOS Safari允許用戶將一個網頁添加到主屏幕然後像App一樣來操作它。我們知道每個App下方都會有一個名字，iOS Safari提供了一個私有的meta來定義這個名字，代碼如下：

<meta name="apple-mobile-web-app-title" content="Web App名稱" />

Android Chrome31.0，Android Browser5.0也開始支持添加到主屏幕了，但並沒有提供相應的定義標題的方式，所以如果你想統一iOS和Android平臺定義Web app名稱的方式，可以使用title標籤來定義，代碼如下：

<title>Web App名稱</title>

但如果你想要網頁標題和App名字不一樣的話，那就只有iOS才行。

聲明添加到主屏幕時隱藏地址欄和狀態欄（即全屏）

當我們將一個網頁添加到主屏幕時，會更希望它能有像App一樣的表現，沒有地址欄和狀態欄全屏顯示，代碼如下：

<meta name="apple-mobile-web-app-capable" content="yes" />

該方案在 iOS 和 Android5.0+ 上都通用。

聲明添加到主屏幕時設置系統頂欄顏色

當我們將一個網頁添加到主屏幕時，還可以對 系統顯示手機信號、時間、電池的頂部狀態欄 顏色進行設置，前提是開啓了：

<meta name="apple-mobile-web-app-capable" content="yes" />

有了這個前提，你可以通過下面的方式來進行定義：

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

content只有3個固定值可選：default | black | black-translucent

• 如果設置爲 default，狀態欄將爲正常的，即白色，網頁從狀態欄以下開始顯示；

• 如果設置爲 black，狀態欄將爲黑色，網頁從狀態欄以下開始顯示；

• 如果設置爲 black-translucent，狀態欄將爲灰色半透明，網頁將充滿整個屏幕，狀態欄會蓋在網頁之上；

該設置只在 iOS 上有效。

電話號碼識別

在 iOS Safari （其他瀏覽器和Android均不會）上會對那些看起來像是電話號碼的數字處理爲電話鏈接，比如：

• 7位數字，形如：1234567

• 帶括號及加號的數字，形如：([phone]

• 雙連接線的數字，形如：00-00-00111

• 11位數字，形如：13800138000

可能還有其他類型的數字也會被識別，但在具體的業務場景中，有些時候這是不必須的，所以你可以關閉電話自動識別，然後在需要撥號的地方，開啓電話呼出和短信功能。

1.關閉電話號碼識別：

<meta name="format-detection" content="telephone=no" />

2.開啓撥打電話功能：

<a href="tel:123456">123456</a>

3.開啓發送短信功能：

<a href="sms:123456">123456</a>

在 Android （iOS不會）上，瀏覽器會自動識別看起來像郵箱地址的字符串，不論有你沒有加上郵箱鏈接，當你在這個字符串上長按，會彈出發郵件的提示。

1.關閉郵箱地址識別：

<meta name="format-detection" content="email=no" />

2.開啓郵件發送：

<a href="mailto:[email protected]">[email protected]</a>

3.如果想同時關閉電話和郵箱識別，可以把它們寫到一條 meta 內，代碼如下：

<meta name="format-detection" content="telephone=no,email=no" />

附註

部分meta定義來自於trip(https://github.com/doyoe/trip)