web開發的meta標籤 - 總結篇

總結一些用到的和遇到的，服務以後可能會用到的地方。

文章目錄

• web開發的meta標籤 - 總結篇
• 一、常見meta標籤 ，及含義
• 二、關於icon的端區別及設定
• 三、其餘部分

一、常見meta標籤 ，及含義

<!-- 優先使用 IE 最新版本和 Chrome -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>

<!-- 頁面描述 -->
<meta name="description" content="不超過150個字元"/>

<!-- 頁面關鍵詞 -->
<meta name="keywords" content=""/>

<!-- 搜尋引擎抓取 -->
<meta name="robots" content="index,follow"/>

<!-- 啟用360瀏覽器的極速模式(webkit) -->
<meta name="renderer" content="webkit">

<!-- 避免IE使用相容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<!-- 不讓百度轉碼 -->
<meta http-equiv="Cache-Control" content="no-siteapp" />

<!-- 針對手持裝置優化，主要是針對一些老的不識別viewport的瀏覽器，比如黑莓 -->
<meta name="HandheldFriendly" content="true">

<!-- 微軟的老式瀏覽器 -->
<meta name="MobileOptimized" content="320">

<!-- uc強制豎屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ強制豎屏 -->

<meta name="x5-orientation" content="portrait">
<!-- UC強制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ強制全屏 -->

<meta name="x5-fullscreen" content="true">
<!-- UC應用模式 -->
<meta name="browsermode" content="application">
<!-- QQ應用模式 -->
<meta name="x5-page-mode" content="app">


<!-- 新增 RSS 訂閱 -->
<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml"/>

<!-- 新增 favicon icon -->
<link rel="shortcut icon" type="image/ico" href="/favicon.ico"/>


<!-- sns 社交標籤 begin -->
    <!-- 參考微博API -->
    <meta property="og:type" content="型別" />
    <meta property="og:url" content="URL地址" />
    <meta property="og:title" content="標題" />
    <meta property="og:image" content="圖片" />
    <meta property="og:description" content="描述" />
<!-- sns 社交標籤 end -->


<!-- Windows 8 磁貼顏色 -->
<meta name="msapplication-TileColor" content="#000"/>
<!-- Windows 8 磁貼圖示 -->
<meta name="msapplication-TileImage" content="icon.png"/>

 <!-- windows phone 點選無高光 -->
<meta name="msapplication-tap-highlight" content="no">

 

二、關於icon的端區別及設定

1.先說說mate標籤裡的viewport：

viewport即可視區域，對於桌面瀏覽器而言，viewport指的就是除去所有工具欄、狀態列、滾動條等等之後用於看網頁的區域。對於傳統WEB頁面來說，980的寬度在iphone上顯示是很正常的，也是滿屏的，但對於webapp而言，可能就有點問題了，在iphone上我們的webapp在豎屏下通常寬度都是320。

因此我們必須改變viewport，我們就有如下幾種屬性值可以設定：

width: viewport 的寬度 （範圍從 200 到 10,000 ，預設為 980 畫素 ）

height: viewport 的高度 （範圍從 223 到 10,000 ）

initial-scale: 初始的縮放比例 （範圍從>0到 10 ）

minimum-scale: 允許使用者縮放到的最小比例

maximum-scale: 允許使用者縮放到的最大比例

user-scalable: 使用者是否可以手動縮放

對於這些屬性，我們可以設定其中的一個或者多個，並不需要你同時都設定，iPhone 會根據你設定的屬性自動推算其他屬性值 ，而非直接採用預設值。

如果你把initial-scale=1 ，那麼 width 和 height在豎屏時自動為320*356 （不是320*480 因為位址列等都佔據空間 ），橫屏時自動為 480*208。類似地 ，如果你僅僅設定了 width ，就會自動推算出initial-scale 以及height。例如你設定了 width=320 ，豎屏時 initial-scale 就是 1 ，橫屏時則變成 1.5 了

那麼到底這些設定如何讓 Safari 知道 ？其實很簡單 ，就一個 meta ，形如 ：

<meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;” /> 設定了meat後我們頁面將如此呈現了

2.meta標籤裡的name屬性

   name 屬性
(1)、＜meta name="Generator" contect=""＞用以說明生成工具（如Microsoft FrontPage 4.0）等；

(2)、＜meta name="keywords" contect=""＞向搜尋引擎說明你的網頁的關鍵詞；

(3)、＜meta name="Description" contect=""＞告訴搜尋引擎你的站點的主要內容；

(4)、＜meta name="Author" contect="你的姓名"＞告訴搜尋引擎你的站點的製作的作者；

(5)、＜meta name="Robots" contect="all | none | index | noindex | follow | nofollow"＞

其中的屬性說明如下：

設定為all：檔案將被檢索，且頁面上的連結可以被查詢；

設定為none：檔案將不被檢索，且頁面上的連結不可以被查詢；

設定為index：檔案將被檢索；

設定為follow：頁面上的連結可以被查詢；

設定為noindex：檔案將不被檢索，但頁面上的連結可以被查詢；

設定為nofollow：檔案將不被檢索，頁面上的連結可以被查詢

3.webapp裡主要的mate用途

<meta name="apple-touch-fullscreen" content="yes">  新增到主屏幕後，全屏顯示。

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

這meta的作用就是刪除預設的蘋果工具欄和選單欄。content有兩個值”yes”和”no”,當我們需要顯示工具欄和選單欄時，這個行meta就不用加了，預設就是顯示。

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

預設值為default（白色），可以定為black（黑色）和black-translucent（灰色半透明）。
注意： 若值為“black-translucent”將會佔據頁面px位置，浮在頁面上方（會覆蓋頁面20px高度–iphone4和itouch4的Retina螢幕為40px）。

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

在iOS中有兩個meta值，apple-mobile-web-app-capable和apple-mobile-web-app-status-bar-style，這兩個會讓網頁內容以應用程式風格顯示，並使狀態列透明。

<link rel="apple-touch-icon-precomposed" href="http://spion.blog.163.com/blog/iphone_milanoo.png" />
說明： 這個link就是設定web app的放置主螢幕上icon檔案路徑。
圖片尺寸可以設定為57*57（px）或者Retina可以定為114*114（px），ipad尺寸為72*72（px）

<meta content="telephone=no" name="format-detection" />
<meta content="email=no" name="format-detection" /> //將不識別郵箱
告訴裝置忽略將頁面中的數字識別為電話號碼


<link rel="apple-touch-icon" href="/static/images/identity/HTML5_Badge_64.png" />
<link rel="apple-touch-icon-precomposed" href="/static/images/identity/HTML5_Badge_64.png" />

iOS用rel="apple-touch-icon",android 用rel="apple-touch-icon-precomposed"。這樣就能在使用者把網頁存為書籤時，在手機HOME介面建立應用程式樣式的圖示。

<meta name="sharecontent" data-msg-img="縮圖地址" data-msg-title="標題" data-msg-content="簡介" data-msg-callBack="" data-line-img="縮圖地址" data-line-title="標題" data-line-callBack=""/>  

微信分享頁面設定
 

三、其餘部分

一、大眾機型常用meta標籤name的設定 
1、name之viewport 

說明：螢幕的縮放

content的幾個屬性： 
width viewport的寬度[device-width | pixel_value]width如果直接設定pixel_value數值，大部分的安卓手機不支援，但是ios支援； 
height – viewport 的高度 （範圍從 223 到 10,000 ） 
user-scalable [yes | no]是否允許縮放 
initial-scale [數值] 初始化比例（範圍從 > 0 到 10） 
minimum-scale [數值] 允許縮放的最小比例 
maximum-scale [數值] 允許縮放的最大比例 
target-densitydpi 值有以下（一般推薦設定中等響度密度或者低畫素密度，後者設定具體的值dpi_value，另外webkit核心已不準備再支援此屬性） 
– dpi_value 一般是70-400//沒英寸畫素點的個數 
– device-dpi裝置預設畫素密度 
– high-dpi 高畫素密度 
– medium-dpi 中等畫素密度 
– low-dpi 低畫素密度

完整案例：
<meta name="viewport" content="width=device-width,height=device-height, user-scalable=no,initial-scale=1, minimum-scale=1, maximum-scale=1,target-densitydpi=device-dpi ">  

------------------------------------------------

name之format-detection忽略電話號碼和郵箱 

說明：忽略頁面中的數字識別為電話號碼 

說明：忽略頁面中的郵箱格式為郵箱 
也可以寫成：

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