Meta 标签常用设置

基本介绍

meta 标签主要是用来描述一个 html 网页文档的属性的，例如作者、日期、时间、页面刷新
用于 seo 的搜索优化

设置浏览器不缓存

<!-- 避免HTML页面缓存 -->
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">

name 属性

meta是用来在HTML文档中模拟HTTP协议的响应头报文。meta 标签用于网页的 <head></head> 中，meta 标签的用处很多。meta 的属性有两种：name和http-equiv。name属性主要用于描述网页，对应于content（网页内容），以便于搜索引擎机器人查找、分类（目前几乎所有的搜索引擎都使用网上机器人自动查找meta值来给网页分类）。这其中最重要的是description（站点在搜索引擎上的描述）和keywords（分类关键词），所以应该给每页加一个meta值。比较常用的有以下几个：

<!-- 语言格式 -->
<meta charset="utf-8">

<!-- 关键字 和 描述 html 主体内容 -->
<meta name="keywords" content="关于meta标签,网页">
<meta name="description" content="HTML中<meta>标签如何正确使用">

<!-- 作者信息 -->
<meta name="author" content="author-name">

<!-- 便于 seo 搜索 -->
<meta name="robot" content="none">

robot 属性有 all、none、index、noindex、follow 和 nofollow。默认为 all。

设定为all：文件将被检索，且页面上的链接可以被查询；
设定为none：文件将不被检索，且页面上的链接不可以被查询；
设定为index：文件将被检索；
设定为follow：页面上的链接可以被查询；
设定为noindex：文件将不被检索，但页面上的链接可以被查询；
设定为nofollow：文件将不被检索，页面上的链接可以被查询。

http-equiv

<!-- 文档类型 -->
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<!-- 定义网页的缓存过期时间 必须是 GMT 格式 -->
<meta http-equiv="expires" content="Wed, 02 Jan 2019 07:31:31 GMT">
<!-- 由于这是一个过去的日期，所以这个网页只要一打开，就会直接到网站服务器重新下载页面内容，而不是从cache调用。这是一种防止网页被cache缓存的措施。 -->

<!-- 设定是否从缓存中访问网页内容 -->
<meta http-equiv="pragma" content="no-cache">

<!-- 等待一定时间自动刷新或跳转 -->
<meta http-equiv="refresh" content="1; url=https://www.baidu.com"/>

其他常用设置

<!-- 根据浏览器的屏幕大小自适应的展现合适的效果 -->
<meta name="applicable-device" content="pc,mobile" />

<!-- 移动端 浏览器中页面将以原始大小显示，不允许缩放 -->
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

<!-- 优先使用 IE 最新版本和 Chrome -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!-- 它必须显示在网页中除 title 元素和其他 meta 元素以外的所有其他元素之前。如果不是的话，它不起作用 -->

<!-- iphone会把一串数字识别为电话号码，点击的时候会提示是否呼叫，屏蔽这功能则把telephone设置为no;禁止自动识别邮箱 -->
<meta content="telephone=no,email=no" name="format-detection" />

<!-- iphone的私有标签，默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明） -->
<meta content="black" name="apple-mobile-web-app-status-bar-style">

<!-- iphone设备的是有标签 允许全屏模式浏览，隐藏浏览器导航栏 开启网站对web app程序的支持 -->
<meta content="yes" name="apple-mobile-web-app-capable" />

<!-- 全屏显示 -->
<meta content="yes" name="apple-touch-fullscreen" />

<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">

<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">

<!-- 屏蔽百度转码 -->
<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />

条件注释

<!--[if lt IE 9]> 
<script src="lib/html5shiv/html5shiv.min.js"></script> 
<script src="lib/respond/respond.min.js"></script> 
<![endif]-->

html5shiv让浏览器可以识别html5的新标签
respond让低版本浏览器可以使用CSS3的媒体查询