Meta 标签

meta标签是HTML中head头部的一个辅助性标签，它位于HTML文档头部的 <head> 和 <title> 标记之间，它提供用户不可见的信息。虽然这部分信息用户不可见，但是其作用非常强大，特别是当今的前端开发工作中，设置合适的meta标签可以大大提升网站页面的可用性。

桌面端开发中，meta标签通常用来为搜索引擎优化（SEO）及 robots定义页面主题，或者是定义用户浏览器上的cookie；它可以用于鉴别作者，设定页面格式，标注内容提要和关键字；还可以设置页面使其可以根据你定义的时间间隔刷新自己，以及设置RASC内容等级，等等。

移动端开发中，meta标签除了桌面端中的功能设置外，还包括，比如viewport设置，添加到主屏幕图标，标签页颜色等等实用设置。具体可以看后面详细的介绍。

meta标签分类

meta标签根据属性的不同，可分为两大部分：http-equiv 和 name 属性。

  • http-equiv

    相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助浏览器正确地显示网页内容。

  • name属性

    主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于浏览器，搜索引擎等机器人识别，等等。

推荐使用的meta标签

　 <!-- 设置文档的字符编码 -->

    <meta charset="utf-8">

    <meta http-equiv="x-ua-compatible" content="ie=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- 以上 3 个 meta 标签 *必须* 放在 head 的最前面；其他任何的 head 内容必须在这些标签的 *后面* -->

    <!-- 允许控制资源的过度加载 -->

    <meta http-equiv="Content-Security-Policy" content="default-src 'self'">

    <!-- 尽早地放置在文档中 -->

    <!-- 仅应用于该标签下的内容 -->

    <!-- Web 应用的名称（仅当网站被用作为一个应用时才使用）-->

    <meta name="application-name" content="应用名称">

    <!-- 针对页面的简短描述（限制 150 字符）-->

    <!-- 在*某些*情况下，该描述是被用作搜索结果展示片段的一部分 -->

    <meta name="description" content="一个页面描述">

    <!-- 控制搜索引擎的抓取和索引行为 -->

    <meta name="robots" content="index,follow,noodp"><!-- 所有的搜索引擎 -->

    <meta name="googlebot" content="index,follow"><!-- 仅对 Google 有效 -->

    <!-- 告诉 Google 不显示网站链接的搜索框 -->

    <meta name="google" content="nositelinkssearchbox">

    <!-- 告诉 Google 不提供此页面的翻译 -->

    <meta name="google" content="notranslate">

    <!-- 验证 Google 搜索控制台的所有权 -->

    <meta name="google-site-verification" content="verification_token">

    <!-- 用来命名软件或用于构建网页（如 - WordPress、Dreamweaver）-->

    <meta name="generator" content="program">

    <!-- 关于你的网站主题的简短描述 -->

    <meta name="subject" content="你的网站主题">

    <!-- 非常简短（少于 10 个字）的描述。主要用于学术论文。-->

    <meta name="abstract" content="">

    <!-- 完整的域名或网址 -->

    <meta name="url" content="https://example.com/">

    <meta name="directory" content="submission">

    <!-- 基于网站内容给出一般的年龄分级 -->

    <meta name="rating" content="General">

    <!-- 允许控制 referrer 信息如何传递 -->

    <meta name="referrer" content="never">

    <!-- 禁用自动检测和格式化可能的电话号码 -->

    <meta name="format-detection" content="telephone=no">

    <!-- 通过设置为 “off” 完全退出 DNS 预取 -->

    <meta http-equiv="x-dns-prefetch-control" content="off">

    <!-- 在客户端存储 cookie，web 浏览器的客户端识别 -->

    <meta http-equiv="set-cookie" content="name=value; expires=date; path=url">

    <!-- 指定要显示在一个特定框架中的页面 -->

    <meta http-equiv="Window-Target" content="_value">

    <!-- 地理标签 -->

    <meta name="ICBM" content="latitude, longitude">

    <meta name="geo.position" content="latitude;longitude">

    <!-- 国家代码 (ISO 3166-1): 强制性, 州代码 (ISO 3166-2): 可选; 如 content="US" / content="US-NY" -->

    <meta name="geo.region" content="country[-state]">

    <!-- 如 content="New York City" -->

    <meta name="geo.placename" content="city/town">

相关的详细说明请查看：

为移动设备添加 viewport

viewport 可以让布局在移动浏览器上显示的更好。 通常会写

<meta name ="viewport" content ="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">

<!-- `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边 http://bigc.at/ios-webapp-viewport-meta.orz -->
content 参数
width viewport 宽度(数值/device-width)
height viewport 高度(数值/device-height)
initial-scale 初始缩放比例
maximum-scale 最大缩放比例
minimum-scale 最小缩放比例
user-scalable 是否允许用户缩放(yes/no)
minimal-ui iOS 7.1 beta 2 中新增属性（注意：iOS8 中已经删除），可以在页面加载时最小化上下状态栏。这是一个布尔值，可以直接这样写： 
   <meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">

而如果你的网站不是响应式的，请不要使用 initial-scale 或者禁用缩放。

    <meta name="viewport" content="width=device-width,user-scalable=yes">

适配 iPhone 6 和 iPhone 6plus 则需要写：

    <meta name="viewport" content="width=375">

    <meta name="viewport" content="width=414">

大部分 4.7~5 寸的安卓设备的 viewport 宽设为 360px，iPhone 6 上却是 375px，大部分 5.5 寸安卓机器（比如说三星 Note）的 viewport 宽为 400，iPhone 6 plus 上是 414px。

SEO 优化部分

<!-- 页面标题<title>标签(head 头部必须) -->

<title>your title</title>

<!-- 页面关键词 keywords -->

<meta name="keywords" content="your keywords">

<!-- 页面描述内容 description -->

<meta name="description" content="your description">

<!-- 定义网页作者 author -->

<meta name="author" content="author,email address">

<!-- 定义网页搜索引擎索引方式，robotterms 是一组使用英文逗号「,」分割的值，通常有如下几种取值：none，noindex，nofollow，all，index和follow。 -->

<meta name="robots" content="index,follow">

相关链接：WEB1038 – 标记包含无效的值

百度禁止转码

通过百度手机打开网页时，百度可能会对你的网页进行转码，脱下你的衣服，往你的身上贴狗皮膏药的广告，为此可在 head 内添加

<meta http-equiv="Cache-Control" content="no-siteapp" />

相关链接：SiteApp 转码声明

不推荐的 meta 属性

     <!-- 用于声明文档语言，但支持得不是很好。最好使用 <html lang=""> -->

    <meta name="language" content="en">

    <!-- Google 无视 & Bing 认为垃圾的指示器 -->

    <meta name="keywords" content="你,关键字,在这里,不使用空格,而用逗号进行分隔">

    <!-- 目前没有在任何搜索引擎中使用过的声明 -->

    <meta name="revised" content="Sunday, July 18th, 2010, 5:15 pm">

    <!-- 为垃圾邮件机器人收获 email 地址提供了一种简单的方式 -->

    <meta name="reply-to" content="email@example.com">

    <!-- 最好使用 <link rel="author"> 或 humans.txt 文件 -->

    <meta name="author" content="name, email@example.com">

    <meta name="designer" content="">

    <meta name="owner" content="">

    <!-- 告诉搜索机器人一段时间后重新访问该网页。这不支持，因为大多数搜索引擎使用随机时间间隔来重新抓取网页 -->

    <meta name="revisit-after" content="7 days">

    <!-- 在一段时间后将用户重定向到新的 URL -->

    <!-- W3C 建议不要使用该标签。Google 建议使用服务器端的 301 重定向。-->

    <meta http-equiv="refresh" content="300; url=https://example.com/">

    <!-- 描述网站的主题 -->

    <meta name="topic" content="">

    <!-- 公司概要或网站目的 -->

    <meta name="summary" content="">

    <!-- 一个已废弃的标签，和关键词 meta 标签的作用相同 -->

    <meta name="classification" content="business">

    <!-- 是否是相同的 URL，年代久远且不支持 -->

    <meta name="identifier-URL" content="https://example.com/">

    <!-- 和关键词标签类似的功能 -->

    <meta name="category" content="">

    <!-- 确保你的网站在所有国家和语言中都能显示 -->

    <meta name="coverage" content="Worldwide">

    <!-- 和 coverage 标签相同 -->

    <meta name="distribution" content="Global">

    <!-- 控制在互联网上哪些用户可以访问 -->

    <meta http-equiv="Pics-label" content="value"> 

    <!-- 缓存控制 -->

    <!-- 最好在服务器端配置缓存控制 -->

    <meta http-equiv="Expires" content="0">

    <meta http-equiv="Pragma" content="no-cache">

    <meta http-equiv="Cache-Control" content="no-cache">

移动前端不得不了解的HTML5 head 头标签 —— Meta 标签的更多相关文章

  1. [转] 移动前端不得不了解的HTML5 head 头标签

    HTML的头部内容特别多,有针对SEO的头部信息,也有针对移动设备的头部信息.而且各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元 素,有很多差异性.移动端的工作已经越来越成为前端工作的重要内容 ...

  2. Html5_移动前端不得不了解的html5 head 头标签

    移动前端不得不了解的html5 head 头标签   本文主要内容来自一丝的常用的 HTML 头部标签和百度FEX的HTML head 头标签. 移动端的工作已经越来越成为前端工作的重要内容,除了平常 ...

  3. 移动前端不得不了解的HTML5 head 头标签（2016最新版）

    小编推荐:掘金是一个高质量的技术社区,从 ECMAScript 6 到 Vue.js,性能优化到开源类库,让你不错过前端开发的每一个技术干货.各大应用市场搜索「掘金」即可下载APP,技术干货尽在掌握. ...

  4. 移动前端不得不了解的HTML5 head 头标签（中上篇）

    Meta 标签 meta标签是HTML中head头部的一个辅助性标签,它位于HTML文档头部的 <head> 和 <title> 标记之间,它提供用户不可见的信息.虽然这部分信 ...

  5. 移动前端不得不了解的html5 head 头标签

    本文主要内容来自一丝的常用的 HTML 头部标签和百度FEX的HTML head 头标签. 移动端的工作已经越来越成为前端工作的重要内容,除了平常的项目开发,HTML 头部标签功能,特别是meta标签 ...

  6. 【转】移动前端不得不了解的html5 head 头标签

    来源:http://blog.csdn.net/huang100qi/article/details/42596799 本文主要内容来自一丝的常用的 HTML 头部标签和百度FEX的HTML head ...

  7. 移动前端不得不了解的HTML5 head 头标签（首篇）

    HTML的头部内容特别多,有针对SEO的头部信息,也有针对移动设备的头部信息.而且各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元素,有很多差异性.移动端的工作已经越来越成为前端工作的重要内容, ...

  8. 移动前端不得不了解的HTML5 head 头标签 —— HTML基本的头部标签

    HTML的头部内容特别多,有针对SEO的头部信息,也有针对移动设备的头部信息.而且各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元素,有很多差异性.移动端的工作已经越来越成为前端工作的重要内容, ...

  9. 移动前端不得不了解的HTML5 head 头标签（中下篇）

    SEO 优化部分 页面标题<title>标签(head 头部必须)        <title>your title</title>    页面关键词 keywor ...

随机推荐

  1. Python面向对象 | 静态方法 staticmethod

    静态方法是类中的函数,不需要实例.静态方法主要是用来存放逻辑性的代码,逻辑上属于类,但是和类本身没有关系,也就是说在静态方法中,不会涉及到类中的属性和方法的操作.可以理解为,静态方法是个独立的.单纯的 ...

  2. len、is、==、可变于不可变类型

    a="asdfghjkl;'iuygb" b="小米" c=['a','b','c'] d= {'name':1,'age':24} # len统计字符或元素的 ...

  3. 【html css js】实现一个简易日历

    ——[效果预览] 实现了日历最基础的功能,当前日期红色显示,可通过上方的左右按钮查看上一月或下一月的日期. ——[代码部分] 1. HTML <body> <div class=&q ...

  4. 单元测试JUnit案例

    被测试模块 package packagedemo; public class Largest { public int minimal(int [] array1) { int index = 0 ...

  5. DEX文件解析---1、dex文件头解析

    DEX文件解析---1.dex文件头解析 一.dex文件     dex文件是Android平台上可执行文件的一种文件类型.它的文件格式可以下面这张图概括:     dex文件头一般固定为0x70个字 ...

  6. 【集合系列】- 深入浅出分析LinkedHashMap

    一.摘要 在集合系列的第一章,咱们了解到,Map的实现类有HashMap.LinkedHashMap.TreeMap.IdentityHashMap.WeakHashMap.Hashtable.Pro ...

  7. 微信小程序 js 计时器

    function timing(that) {  var seconds = that.data.seconds  if (seconds > 21599) {    that.setData( ...

  8. PHP Laravel 中使用简单的方法跟踪用户是否在线

    今天,我的任务是,在 Laravel 应用程序用户个人资料页面上,用户名旁边添加一个绿点,表示他们是否在线.我首先想到的是,我们将需要启动一个 node.js 服务器并跟踪每个用户的活动套接字连接.然 ...

  9. MySQL InnoDB 实现高并发原理

    MySQL 原理篇 MySQL 索引机制 MySQL 体系结构及存储引擎 MySQL 语句执行过程详解 MySQL 执行计划详解 MySQL InnoDB 缓冲池 MySQL InnoDB 事务 My ...

  10. 读取JDK API文档，并根据单词出现频率排序

    1,拿到 API 文档 登录 https://docs.oracle.com/javase/8/docs/api/ , 选中特定的类,然后 copy 其中的内容, 放入 TXT 文件中 , 2,读取T ...