<meta>标签介绍及常用属性

2018-09-04

meta 标签位于文档的 head 标签内,不会在页面上显示任何内容。

其最常用的场景包含SEO优化、移动端H5适配。

本文旨在以通俗的描述让人知道meta的作用以及常用场景.

meta介绍

What is meta

首先meta是一个html标签

提供有关页面的元信息（meta-information），比如针对不同浏览设备定义不同的页面样式；针对搜索引擎和更新频度的描述和关键词。

Why use meta

从web的发展历史来看，发展初期基本用于各门户网站、企业、政府网站等作为宣传目的，作为宣传首先希望自己的网站能被更多人看到或者搜索到，所以巴不得把本网站的产品or功能告诉全世界。

而作为初期互联网的主要入口——“搜索引擎”（Search Engine 后记SE）就需要去收录各个网站的作用、方向，可以把它想象成月老，为用户和网站牵线搭桥。

举例：一个销售汽车轮胎的网站，肯定希望用户在搜索“汽车轮胎”这样的关键字时，能显示在用户前面。

1 2	<meta name="description" content="一家专业销售汽车轮胎的网站"> <meta name="keyword" content="汽车,轮胎,汽车轮胎,小车轮胎,小汽车">

meta的作用此时就体现出来了，它告诉SE本网站是做什么的。

How to meta

meta标签由2个部分组成，下表是常见搭配

属性	常用值	作用
name	author / description / keywords / generator / revised / others	一般给SE看的
http-equiv	content-type / expire / refresh / set-cookie	一般给浏览器看的
scheme	H5已弃用	H5已弃用

文章底部附上个人收录的较常用meta标签及其作用、用法。

用meta做SEO SEM优化

meta最常用的场景就是SEO了.
SEO（Search Engine Optimization ）搜索引擎优化
SEM（Search Engine Marketing）搜索引擎营销

SEO是SEM的一个组成部分，具体定义可自行搜索，此文不赘述。

meta的用法比较简单，且数量较少，所以我们最好的方式是学习各大网站如何使用，如淘宝。

淘宝（taobao.com）用到的meta

截止目前2018-9-4 20:15:53，淘宝首页使用的meta标签如下：

<!-- 字符集 -->
<meta charset="utf-8">
<!-- 文档兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<!-- 多核时指定渲染内核为webkit -->
<meta name="renderer" content="webkit">
<!-- 网站描述 -->
<meta name="description" content="淘宝网 - 亚洲较大的网上交易平台，提供各类服饰、美容、家居、数码、话费/点卡充值… 数亿优质商品，同时提供担保交易(先收货后付款)等安全交易保障服务，并由商家提供退货承诺、破损补寄等消费者保障服务，让你安心享受网上购物乐趣！">
<!-- 网站关键字 -->
<meta name="keyword" content="淘宝,掏宝,网上购物,C2C,在线交易,交易市场,网上交易,交易市场,网上买,网上卖,购物网站,团购,网上贸易,安全购物,电子商务,放心买,供应,买卖信息,网店,一口价,拍卖,网上开店,网络购物,打折,免费开店,网购,频道,店铺">
<!-- 自定义？ -->
<meta name="aplus-xplug" content="NONE">
<!-- 自定义？ -->
<meta name="spm-id" content="a21bo">

结语

web发展确实很快，发展出来的分支也很多，时至今日web开发说的最多的可能是移动端H5、各种MVVM框架，这是趋势也是未来。

记得15年给公司写官网的时候还因为网站不能被搜索引擎优先显示出来而专程学习SEO相关的知识，而后配置meta和申请站长平台等让官网慢慢上升到前三显示，收获的喜悦也不胜言表。

对一般前端er而言，掌握这些知识就像一个城市人学会钻木取火，虽然基本用不到（由专人负责SEM），但是当你右键审查某个页面时，看到上面head里的一大串meta是否会感觉亲切。

附录-常用meta（持续更新

name属性-通用

<!-- 页面作者 -->
<meta name="author" content="author name" />

<!-- 页面描述 -->
<meta name="description" content="(网站描述信息，不超过150字符)" />

<!-- 页面关键词 -->
<meta name="keywords" content="lonhon,博客,前端开发,前端博客（一般不超过30个）" />

<!-- 页面修改信息 -->
<meta name="revised" content="story,2018/09/04" />

<!-- 版权信息 -->
<meta name="copyright" content="by lonhon.top" />

<!-- 页面爬虫设置 -->
<meta name="robots" content="index,follow" />
<!-- robots的content取值 -->
<!-- all：文件将被检索，且页面上的链接可以被查询 -->
<!-- none：文件将不被检索，且页面上的链接不可以被查询 -->
<!-- index：文件将被检索 -->
<!-- follow：页面上的链接可以被查询 -->
<!-- noindex：文件将不被检索，但页面上的链接可以被查询 -->
<!-- nofollow：文件将被检索，但页面上的链接不可以被查询 -->

name属性-移动端H5

<!-- IE时以edge或强制chrome渲染-->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<!-- IOS启用 WebApp 全屏模式 -->
<meta name="apple-mobile-web-app-capable" content="yes" />

<!-- IOS全屏模式下隐藏状态栏/设置状态栏颜色 content的值为default | black | black-translucent  -->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

<!-- IOS添加到主屏后的标题 -->
<meta name="apple-mobile-web-app-title" content="标题">

<!-- IOS添加智能 App 广告条 Smart App Banner -->
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">

<!-- 去除iphone 识别数字为号码 -->
<meta name="format-detection" content="telephone=no">

<!-- 不识别邮箱 -->
<meta name="format-detection" content="email=no">

<!-- 禁止跳转至地图 -->
<meta name="format-detection" content="adress=no">

<!-- 可以连写-->
<meta name="format-detection" content="telephone=no,email=no,adress=no">

http-equiv属性

<!-- 字符编码 -->
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />

<!-- 禁止从本地缓存中读取页面 -->
<meta http-equiv="Pragma"content="no-cache"> 

<!-- 页面到期时间 -->
<meta http-equiv="expire" content="Wed,22Jul201511:11:11GMT" />

<!-- 页面重刷新，0秒后刷新并跳转 -->
<meta http-equiv="refresh" content="0;URL=''" />

<!-- cookie设置 -->
<meta http-equiv="set-cookie" content="cookie value=xxx;expires=Wed,22-Jul-201511:11:11GMT；path=/" />

<!-- 脚本类型 -->
<meta http-equiv="Content-Script-Type"Content="text/javascript">