常用Meta整理

标签提供关于HTML文档的元数据。元数据不会显示在页面上,但是对于机器是可读的。它可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他web 服务。 ——W3School

必要属性

可选属性

通用:

<meta charset=”utf-8″> 设置页面编码为UTF8,防止乱码,需要页面保存为UTF8无BOM格式

<meta http-equiv=”X-UA-Compatible” content=”IE=edge”> 为IE设置兼容模式为edge

<meta http-equiv=”refresh” content=”30″> 30秒后自动刷新本页面

<meta http-equiv=”refresh” content=”5″ url=”http://www.xx.com”> 5秒后自动跳转到指定页面

<meta http-equiv=”expires” content=”0″> 指定缓存的生存周期为已过期,即禁止缓存

<meta http-equiv=”pragma” content=”no-cache”> 禁止缓存

<meta http-equiv=”cache-control” content=”no-cache,must-revalidate”> 禁止缓存方案2

<meta name=”author” content=”Leo,xx@xx.com”> 标注作者

<meta name=”copyright” content=”本页版权归XX所有,All Rights Reserved.”> 标注版权

<meta name=”generator” content=”WebIDE”> 标注网页开发工具

<base href=”http://www.xx.com/” target=”_blank”> 为相对地址指定基地址,并设置为新窗口打开

<link href=”favicon.ico” rel=”shortcut icon” type=”image/png”> 显示并指定favicon图标的位置

<link rel=”icon” type=”image/png” href=”favicon.ico”> 显示并指定favicon图标的位置方案2

SEO优化

页面关键词

<meta name=”keywords” content=”your tags” />

页面描述

<meta name=”description” content=”150 words” />

移动端:

viewport

<meta name="viewport" content="width=device-width; initial-scale=1.0;maximum-scale=1.0; user-scalable=no;"/>

<!-- `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边  -->

  1. width:宽度(数值 / device-width)(范围从200 到10,000,默认为980 像素)
  2. height:高度(数值 / device-height)(范围从223 到10,000)
  3. initial-scale:初始的缩放比例 (范围从>0 到10)
  4. minimum-scale:允许用户缩放到的最小比例
  5. maximum-scale:允许用户缩放到的最大比例
  6. user-scalable:用户是否可以手动缩 (no,yes)
  7. minimal-ui:可以在页面加载时最小化上下状态栏。(已弃用)

<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”> 隐藏状态栏,苹果系专属