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. .NET手撸绘制TypeScript类图——上篇

    .NET手撸绘制TypeScript类图--上篇 近年来随着交互界面的精细化,TypeScript越来越流行,前端的设计也越来复杂,而类图正是用简单的箭头和方块,反映对象与对象之间关系/依赖的好方式. ...

  2. L0、L1、L2范数正则化

    一.范数的概念 向量范数是定义了向量的类似于长度的性质,满足正定,齐次,三角不等式的关系就称作范数. 一般分为L0.L1.L2与L_infinity范数. 二.范数正则化背景 1. 监督机器学习问题无 ...

  3. Linux如何添加硬盘

    一.命令操作: df       #查看磁盘空间 fdisk     #分区/查看分区 mkfs      #格式化 df  -h(以人类易读) -m(以M为单位读取)            #查看硬 ...

  4. 怎样在PaaS平台上搭建一个会自动关闭的会议室

    首相得解释一下,什么叫做会自动关闭的会议室.我们的会议室是存在一个会议预定系统的,一般情况下,我们需要开会的时候,需要先抢占会议室.等待要开会的时候,去会议室里边开会,如果里边有别人,我们可以告诉他们 ...

  5. 深入理解Kafka必知必会（2）

    Kafka目前有哪些内部topic,它们都有什么特征?各自的作用又是什么? __consumer_offsets:作用是保存 Kafka 消费者的位移信息 __transaction_state:用来 ...

  6. python：类5——Python 的类的下划线命名有什么不同？

    首先是单下划线开头,这个被常用于模块中,在一个模块中以单下划线开头的变量和函数被默认当作内部函数,如果使用 from a_module import * 导入时,这部分变量和函数不会被导入.不过值得注 ...

  7. Itellij idea2019.2 激活码，有效期2020.5

    Itellij idea2019.2 激活码,有效期2020.5 MNQ043JMTU-eyJsaWNlbnNlSWQiOiJNTlEwNDNKTVRVIiwibGljZW5zZWVOYW1lIjoi ...

  8. Windows 10上源码编译glog和gflags 编写glog-config.cmake和gflags-config.cmake | compile glog and glags on windows from source

    本文首发于个人博客https://kezunlin.me/post/bb64e398/,欢迎阅读! compile glog v0.3.5 and glags on windows from sour ...

  9. Python 0基础开发游戏：打地鼠（详细教程）VS code版本

    如果你没有任何编程经验,而且想尝试一下学习编程开发,这个系列教程一定适合你,它将带你学习最基本的Python语法,并让你掌握小游戏的开发技巧.你所需要的,就是付出一些时间和耐心来尝试这些代码和操作. ...

  10. nginx的使用，以及反向代理，负载均衡，从安装到使用，全部步骤。

    先总结nginx实现负载均衡的原理,在这之前先的知道反向代理,因为nginx的负载均衡是在反向代理的基础上实现的: 1.反向代理:通过在nginx的配置文件 (vim /opt/nginx196/co ...