HTML之<meta>标签全解
一、定义
- 元素可提供相关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词等等。
- 标签位于文档的头部<head></head>标签内，不包含任何内容。 标签的属性定义了与文档相关联的【名称/值对】。
- meta标签常用的共有5个属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。
1、http-equiv属性
2、name属性
3、charset属性【该属性仅HTML5支持】
4、scheme属性【该属性HTML5不支持】
5、content属性，用来放属性值
HTML 4.01 ：<meta http-equiv="content-type" content="text/html; charset=UTF-8">
HTML5 ：<meta charset="UTF-8">
二、浏览器支持
所有浏览器都支持 <meta> 标签
三、属性
语法格式：
<meta name="参数" content="具体的参数值">
<meta http-equiv="参数" content="具体的参数值">
四、常见用法：name属性
<meta name="author" content="码代码的青年,码代码的青年@qq.com">
说明：标注网站的作者,及作者的相关信息
<meta name="keywords" content="meta,html,学习">
说明：keywords用来告诉搜索引擎你的网站关键字是什么，允许多个关键字，中间用逗号隔开。
<meta name="description" content="html的meta学习,meta是html语言head区的一个辅助性标签。">
说明：description用来告诉搜索引擎你的网站主要内容。
<meta name="topic" content="your website's topic">
<meta name="subject" content="your website's subject">
说明：topic、subject用来告诉搜索引擎你的网站主旨、主题。
<meta name ="viewport" content ="width=device-width,initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
为移动设备添加 viewport，content 参数：
* `width` viewport 宽度(数值/device-width)
* `height` viewport 高度(数值/device-height)
* `initial-scale` 初始缩放比例
* `maximum-scale` 最大缩放比例
* `minimum-scale` 最小缩放比例
* `user-scalable` 是否允许用户缩放(yes/no)
<meta name="robots" content="none">
说明：robots用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。content的值有：
all(默认)： 文件将被检索，且页面上的链接可以被查询；
none： 文件将不被检索，且页面上的链接不可以被查询；
index： 文件将被检索；
noindex： 文件将不被检索，但页面上的链接可以被查询；
follow： 页面上的链接可以被查询；
nofollow： 文件将被检索，但页面上的链接不可以被查询；
<meta name="generator" content="ultraedit">
说明：generator用来说明这网页是用什么软件生成的。
<meta name="copyright" content="XXX">
说明：copyright用来说明网站版权信息。
五、常见用法：http-equiv属性
<meta http-equiv="content-type" content="text/html;charset=gb2312">
说明：content-type用来设定页面使用的字符集：
charset的信息参数如utf-8时，代表世界通用的语言编码；
charset的信息参数如gb2312时，代表说明网站是采用的编码是简体中文；
charset的信息参数如big5时，代表说明网站是采用的编码是繁体中文；
charset的信息参数如iso-2022-jp时，代表说明网站是采用的编码是日文；
charset的信息参数如ks_c_5601时，代表说明网站是采用的编码是韩文；
charset的信息参数如iso-8859-1时，代表说明网站是采用的编码是英文；
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
说明：X-UA-Compatible对文档兼容模式的定义。
IE=edge：告诉 IE 以最高级模式渲染文档，也就是任何IE版本都以当前版本所支持的最高级标准模式渲染，避免版本升级造成的影响。
chrome=1：激活 Google Frame。【Google 官方提供了对 Google Frame 插件安装情况的检测，这里直接调用方法即可】
<meta http-equiv="content-language"content="zh-cn"/>
说明：content-language,显示语言的设定
<meta http-equiv="expires" content="0">
<meta http-equiv="expires" content="Fri,12 Jan 2001 18:18:18 GMT">
说明：expires（期限）设定网页的到期时间。一旦网页过期，必须到服务器上重新传输。必须使用GMT的时间格式。
<meta http-equiv="pragma" content="no-cache">
说明：pragma（cache模式）这样设定，禁止浏览器从本地计算机的缓存中访问页面内容，访问者将无法脱机浏览。
<meta http-equiv="cache-control" content="no-cache">
说明：cache-control指定请求和响应遵循的缓存机制。在请求消息或响应消息中设置cache-control并不会修改另一个消息处理过程中的缓存处理过程。
请求时的缓存指令包括no-cache、no-store、max-age、max-stale、min-fresh、only-if-cached，
响应消息中的指令包括public、private、no-cache、no-store、no-transform、must-revalidate、proxy-revalidate、max-age。
各个消息中的指令含义如下
public：指示响应可被任何缓存区缓存
private：指示对于单个用户的整个或部分响应消息，不能被共享缓存处理。这允许服务器仅仅描述当用户的部分响应消息，此响应消息对于其他用户的请求无效
no-cache：指示请求或响应消息不能缓存
no-store：用于防止重要的信息被无意的发布。在请求消息中发送将使得请求和响应消息都不使用缓存。
max-age：指示客户机可以接收生存期不大于指定时间（以秒为单位）的响应
min-fresh：指示客户机可以接收响应时间小于当前时间加上指定时间的响应
max-stale：指示客户机可以接收超出超时期间的响应消息。如果指定max-stale消息的值，那么客户机可以接收超出超时期指定值之内的响应消息。
<meta http-equiv="refresh" content="2;url=https://www.baidu.com/">
说明：refresh自动刷新并指向新页面。上面这样设定，代表停留2秒钟后自动刷新到新的网址：https://www.baidu.com/
<meta http-equiv="set-cookie" content="cookie value=xxx;expires=Fri,12 Jan 2001 18:18:18 GMT;path=/">
说明：如果网页过期，那么存盘的cookie将被删除,expires的时间格式必须为GMT。
<meta http-equiv="window-target" content="_top">
说明：显示窗口的设定，这样设定会强制页面在当前窗口以独立页面显示，用来防止别人在框架里调用自己的页面。
<meta http-equiv="imagetoolbar" content="false"/>
说明：指定是否显示图片工具栏，当为false代表不显示，当为true代表显示。
六、自定义meta
1、Facebook / Open Graph
<meta property ="og:url" content="https://www.example.com/">
<meta property ="og:title" content="title">
<meta property ="og:description" content="description">
<meta property ="og:site_name" content="website name">
<meta property ="og:image" content="https://example.com/image.jpg">
<meta property ="og:type" content="website">
<meta property ="og:phone_number" content="650-123-4567"/>
<meta property ="og:fax_number" content="+1-415-123-4567"/>
<meta property ="og:locale" content="en_US">
<meta property ="og:region" content="CA"/>
<meta property="og:country-name" content="CHINA"/>
<meta property ="og:postal-code" content="94304"/>
<meta property ="og:street-address" content="1601 S California Ave"/>
<meta property ="fb:app_id" content="Facebook numeric ID">
<meta property ="fb:admins" content="Facebook numeric ID">
...
说明：为了提高站外内容的传播效率，2010年9月，在F8会议上Facebook公布了一套开放图景协议(Open Graph Protocol)，任何网页只要遵守该协议，SNS就能从页面上提取最有效的信息并呈现给用户。通过Open Graph把其他社交网站建构的网络给连接起来，将创造一个更聪明、更与社交连接、更个人化也更具语意意识的网络。
2、Apple
<meta name="apple-mobile-web-app-title" content="MyApp"/> <!-- New in iOS6 -->
<meta name="apple-mobile-web-app-capable" content="yes"> <!-- 从桌面icon启动IOS Safari是否进入全屏状态（APP模式） -->
<meta name="apple-touch-fullscreen" content="yes" > <!-- 添加到主屏幕“后，全屏显示 -->
<meta name="format-detection" content="telephone=no"> <!-- ios设备上禁止默认的将数字识别为可点击的telephone link -->
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <!-- 指定状态栏的颜色 -->
3、TweetMeme
<meta name="tweetmeme-title" content="Retweet Button Explained" />
说明：Tweetmeme跟踪Twitter上的链接，以给用户更好的体验。它使用一种常用的排序系统，以在这个微博世界里找出最热门的信息。
4、博客分类
<meta name="blogcatalog" />
5、Rails
<meta name="csrf-param" content="authenticity_token"/>
<meta name="csrf-token" content="/bZVwvomkAnwAI1Qd37lFeewvpOIiackk9121fFwWwc="/>
6、个人自定义
<meta name="my" content="XXXX"/>
七、标签优化
meta标签的内容优化很有可能会成为一个网站点击率最关键的一个因素。
如何更好进行meta标签内容的优化？
1、细化监控范围和内容；
2、使用动态的，语义化的meta描述；
3、极大化配合搜索引擎的工作；
八、引用
九、结束语
暂时总结这些，有需要补充的，请在底下留言，然后我再更新到文章中，让大家彻底弄懂<meta>标签（未来可能改变世界）。
HTML之<meta>标签全解的更多相关文章
- Meta标签详解(HTML JAVASCRIPT)
Meta标签详解,在网上转的,希望对大家有用 您的个人网站即使做得再精彩,在“浩瀚如海”的网络空间中,也如一叶扁舟不易为人发现,如何推广 个人网站,人们首先想到的方法无外乎以下几种: ● 在搜索引擎中 ...
- meta标签详解(meta标签的作用)///////////////////////////转
meta标签详解(meta标签的作用) 很多人却忽视了HTML标签META的强大功效,一个好的META标签设计可以大大提高你的个人网站被搜索到的可能性,有兴趣吗,谁我来重新认识一下META标签吧 ...
- Meta标签详解
[转载]Meta标签详解 Posted on 2005-05-17 20:00 二十四画生 阅读(54195) 评论(102) 编辑 收藏 Meta标签详解,在网上转的,希望对大家有用 引言 您的个 ...
- JSP页面中的Meta标签详解
Meta标签详解 相信大家在平时开发中最常接触的页面就是html和jsp了,可在这两个页面中有一个Meta标签你天天都会看见,可是你真的了解这个标签的一些其他用处吗?今天给大家介绍一些该标签的其他应用 ...
- 网页设计：Meta标签详解
很多人忽视了HTML标签META的强大功效,一个好的META标签设计可以大大提高你的个人网站被搜索到的可能性,有兴趣吗,谁我来重新认识一下META标签吧! META标签是HTML语言HEAD区的一个辅 ...
- Meta标签详解（转）
引言 您的个人网站即使做得再精彩,在“浩瀚如海”的网络空间中,也如一叶扁舟不易为人发现,如何推广个人网站,人们首先想到的方法无外乎以下几种: ● 在搜索引擎中登录自己的个人网站 ● 在知名网站加入你个 ...
- meta标签详解:源http://blog.csdn.net/kongjiea/article/details/17092413
一.大众机型常用meta标签name的设置 1.name之viewport <meta name="viewport" content=""> 说明 ...
- HTMl中Meta标签详解以及meta property=og标签含义
meta是用来在HTML文档中模拟HTTP协议的响应头报文.META标签是HTML语言HEAD区的一个辅助性标签,它位于HTML文档头部的<HEAD>标记和<TITLE>标记之 ...
- HTML中的Meta标签详解
emta标签的组成:meta标签分两大部分:HTTP-EQUIV和NAME变量. HTTP-EQUIV:HTTP-EQUIV类似于HTTP的头部协议,它回应给浏览器一些有用的信息,以帮助正确和精确地显 ...
随机推荐
- 抽取vs2010安装包中vc++ runtime
写于2015-3-21 16:59 由qq空间转过来,格式有点乱 之前遇到一个问题,c++\cli的程序部署在服务器上面,程序运行后没有反应就退出了,日志管理器中记录两个错误信息分别如下: ...
- 使用 setTimeout 来模拟一个 setInterval
setTimeout 超时调用:在多少时间 在执行: setinterval 每隔多少时间 就调用 例如: setTimeout这个的值是1000,也就是说在页面刷新后,1000毫秒之后才调用这个函数 ...
- opencv中的图像矩（空间矩，中心矩，归一化中心矩，Hu矩）
严格来讲矩是概率与统计中的一个概念,是随机变量的一种数字特征.设 x 为随机变量,C为常数,则量E[(x−c)^k]称为X关于C点的k阶矩.比较重要的两种情况如下: 1.c=0,这时a_k=E(X^k ...
- go 算法与数据结构
数据结构 稀疏数组 package main import "fmt" /* 稀疏数组 案例:五子棋存盘与复盘 节省存储空间 */ type ValNode struct { ro ...
- CommonJs模块化（nodejs模块规范）
1.概述: Node应用由模块组成,采用CommonJS模块规范. 根据这个规范,每个文件就是一个模块,有自己的作用域.在一个文件里面定义的变量.函数.类,都是私有的,对其他文件不可见. 如果想在多个 ...
- 小白的linux笔记2：关于进程的基本操作
1.ps命令查看进程.ps -aux查看所有进程.可以用grep提取相关的部分进程,如只看python有关的:ps -aux |grep python. 进程状态:R运行中,T暂停,S休眠静止. 和进 ...
- Uva1640（统计数字出现的次数）
题意: 统计两个整数a,b之间各个数字(0~9)出现的次数,如1024和1032,他们之间的数字有1024 1025 1026 1027 1028 1029 1030 1031 1032 总共有10个 ...
- 【JavaScript】JS总结 – 乱
一. 重要:js中的function函数声明.函数表达式 // 函数声明 // Ex: 会在代码执行之前提前加载到作用域中,即js解析器会优先读取,确保在所有代码执行之前声明已经被解析:所以可以在定义 ...
- Exec msdb.dbo.sp_send_dbmail 参数详解(SQL Server 存储过程发邮件)
转载oriency755 发布于2012-12-04 11:34:45 阅读数 6870 收藏 sp_send_dbmail [ [ @profile_name = ] 'profile_name ...
- VMware桥接模式下虚拟机ping主机不通
现象: VMware设置为桥接模式,虚拟机ping主机不通,主机ping虚拟机通. 解决: 尝试以下几种方法 关闭主机(专用网络.来宾或公用网络)和虚拟机的防火墙. 更改桥接的物理网卡,确保是主机正在 ...