常用meta標籤整理
- 2019 年 10 月 7 日
- 筆記
常用meta標籤列表，為了加強記憶，ytkah採用先放程式碼再放注釋的形式，獻給有需要的朋友們
<meta charset="utf-8">
↑↑↑ 設置頁面編碼為UTF8，防止亂碼，需要頁面保存為UTF8無BOM格式
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
↑↑↑ 這個屬性常用於設計移動端網頁
<meta http-equiv="X-UA-Compatible" content="IE=edge">
↑↑↑ 為IE設置兼容模式為edge
<meta name="keywords" content="關鍵詞"> <meta name="description" content="描述">
↑↑↑ 頁面關鍵詞、描述
<meta name="robots" content="all">
↑↑↑ robots用來告訴爬蟲哪些頁面需要索引，哪些頁面不需要索引。content的參數有all,none,index,noindex,follow,nofollow。默認是all。
具體參數如下：
1.none : 搜索引擎將忽略此網頁，等價於noindex，nofollow。 2.noindex : 搜索引擎不索引此網頁。 3.nofollow: 搜索引擎不繼續通過此網頁的鏈接索引搜索其它的網頁。 4.all : 搜索引擎將索引此網頁與繼續通過此網頁的鏈接索引，等價於index，follow。 5.index : 搜索引擎索引此網頁。 6.follow : 搜索引擎繼續通過此網頁的鏈接索引搜索其它的網頁。
<meta name="author" content="ytkah">
↑↑↑ 用於標註網頁作者
<meta name="generator" content="PHPStorm">
↑↑↑ 用於標明網頁是什麼軟體做的
<link rel="shortcut icon" href="/images/favicon.ico" type="image/x-icon">
↑↑↑ 顯示並指定favicon圖標的位置
<meta http-equiv="refresh" content="30">
↑↑↑ 網頁將在設定的30秒後自動刷新
<meta http-equiv="refresh" content="5" url="https://www.cnblogs.com/ytkah">
↑↑↑ 網頁將在設定的5秒時間後，自動刷新並調向設定的網址。
其他一些標籤
<meta name="copyright" content="本頁版權歸XX所有，All Rights Reserved."> 標註版權
<base href="http://www.xx.com/" target="_blank"> 為相對地址指定基地址，並設置為新窗口打開
<meta name="format-detection" content="telephone=no"> 禁止電話號碼識別
<meta name="format-detection" content="email=no"> 禁止郵箱識別
<meta name="format-detection" content="adress=no"> 禁止識別地址和跳轉到地圖功能
WebApp全螢幕模式：偽裝app，離線應用。
<meta name="apple-mobile-web-app-capable" content="yes" /> <!– 啟用 WebApp 全螢幕模式 –>
隱藏狀態欄/設置狀態欄顏色：只有在開啟WebApp全螢幕模式時才生效。content的值為default | black | black-translucent 。
<meta name="apple-mobile-web-app-capable" content="yes"> 禁用工具欄與菜單欄，蘋果系專屬
<meta name="apple-mobile-web-app-status-bar-style" content="default"> 狀態欄為默認樣式，蘋果系專屬
<meta name="apple-mobile-web-app-status-bar-style" content="black"> 狀態欄為黑色樣式，蘋果系專屬
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> 狀態欄為灰色樣式，蘋果系專屬
<meta name="apple-mobile-web-app-status-bar-style" content="blank"> 隱藏狀態欄，蘋果系專屬
