前端 网页头部meta 设置大全 详解

lang属性

字符编码

  • 声明文档使用的字符编码，告诉浏览器用什么字符集显示该网页。当你浏览一些国外的站点时，IE浏览器会提示你要正确显示该页面需要下载xx语支持。这个功能就是通过读取HTML页面Meta标签的Content-Type属性而得知需要使用哪种字符集显示该页面的。如果系统里没有装相应的字符集，则IE就提示下载。
<meta charset="UTF-8">

防止用户缩小放大屏幕

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<!-- 
   width：设置可视口的宽度，为一个正整数，或字符"width-device"（及设备的宽度）
   initial-scale：页面的初始缩放值，为数字，可小数
   minimum-scale：允许用户的最小缩放值，为数字，可小数
   maximum-scale：允许用户的最大缩放值，为数字，可小数
   height：设置可视口的高度，这个属性对我们并不重要，很少用
   user-scalable：是否允许用户进行缩放，值为"no"或"yes"
 -->

关键字

  • 被搜索引擎检索，不应超过 874 个字符。如 天猫的
<meta name="Keywords" content="商城,网上购物,网购,进口食品,美容护理,母婴玩具,家用电器,手机数码,家居生活" />

网页的描述

  • 被搜索引擎检索，不超过150个字符。 如 天猫的
<meta name="description" content="天猫，中国线上购物的地标网站...(**此处省略**)" />

作者

  • 写这个网站的人 或 团队 的名称，还可在附上一些联系方式, 邮箱、博客等
<meta name="author" content="小明，abc@1234566.com" />

版权

  • 写版权，喜欢怎么写就怎么写
<Meta name="Copyright" Content="本页版权归xxxx公司所有。">

编辑器

  • 自己写代码时用的编辑器软件
<meta name="generator" content="vscode" />

页面刷新

  • 只要一进来这个网站，5秒后就自动跳转到https://www.baidu.com/了。（搜索引擎能够自动检测，但也很容易被引擎视作误导，故视情况使用）
<meta http-equiv="refresh" content="5;url=https://www.baidu.com/" />

搜索引擎

  • Robots用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。一般，搜索引擎机器人也称网络蜘蛛（Web Spider)，通过网页的链接地址来寻找网页，从网站某一个页面（通常是首页）开始，读取网页的内容，找到在网页中的其他链接地址，然后通过这些链接地址寻找下一个网页，这样一直循环下去，直到把这个网页都抓取完为止。（不知是否有效，没测过，也测不出来）
<meta name="robots" content="index,follow" />
<!-- 
    all：文件将被检索，且页面上的链接可以被查询；
    none：文件将不被检索，且页面上的链接不可以被查询；
    index：文件将被检索；（让robot/spider登录） 
    follow：页面上的链接可以被查询；
    noindex：文件将不被检索；(不让robot/spider登录) 
    nofollow：页面上的链接不可以被查询。(不让robot/spider顺着此页的连接下探找)
-->

禁用缓存

  • Expires：指定网页在缓存中的过期时间，一旦网页过期，必须到服务器上重新调阅。 必须使用GMT的时间格式，或直接设为0(数字表示多少时间后过期)。
<meta http-equiv="Expires" Content="Wed, 26 Feb 2020 08:21:57 GMT"> 
  • Pragma：禁止浏览器从本地机的缓存中调阅页面内容。访问者将无法脱机浏览。
  • no-cache：可以在本地缓存，可以在代理服务器缓存，但是这个缓存要服务器验证才可以使用。当服务器表示资源仍然可用时，就使用缓存。
<meta http-equiv="Pragma" content="no-cache" />
  • no-store：彻底得禁用缓冲，本地和代理服务器都不缓冲，每次都从服务器获取。即请求和响应的信息都不应该被存储在对方电脑的磁盘系统中；只有联网，才能访问
  • must-revalidate：对于客户端的每次请求，代理服务器必须向服务器验证缓存是否过时；
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
  • 但是！个人测试，以下两种方法，刷新页面，读取的依旧是缓存的。并不能清除缓存。 可能涉及到后端吧？待测试
<!-- 第一种 -->
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />

<!-- 第二种 -->
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="expires" content="0" />

补充：设置no-cache之后为什么还是会缓存？

Set-Cookie

  • 如果网页过期，那么存盘的cookie将被删除。注意：必须使用GMT的时间格式。待测试，可能得涉及后端
  • 当你希望访问者每次都刷新你广告的图标，或每次都刷新你的计数器，就要禁用缓存了。通常HTML文件没有必要禁用缓存，对于ASP等页面，就可以使用禁用缓存，因为每次看到的页面都是在服务器动态生成的，缓存就失去意义。如果网页过期，那么存盘的cookie将被删除
<meta http-equiv="Set-Cookie" content="cookievalue=xxx;expires=Wednesday, 21-Oct-98 16:14:21 GMT; path=/">

revisit-after 访问间隔

  • 通知搜索引擎多少天访问一次
<meta name="revisit-after" content="7 days">

防止别人引用自己的网站（无效，可忽略）

  • Widow-target：强制页面在当前窗口以独立页面显示。防止别人在框架里调用你的页面。Content选项：_blank、_top、_self、_parent。
  • X-FRAME-OPTIONS 
<!-- 第一种方法 -->
<meta http-equiv="Widow-target" Content="_top"> 
<!-- 第二种方法 -->
<meta http-equiv="X-FRAME-OPTIONS" content="DENY">
  • 但是！测试后，发现这两种方法都不起作用。在B网页标签 iframe 引用A网页的链接，发现依旧引用成功。

针对360浏览器

  • 指定双核浏览器，默认以何种方式渲染页面。浏览器将会按照从上到下的先后顺序选择其具备的渲染内核来处理当前网页，不支持则往下寻找
<!-- 默认webkit内核 -->
<meta name="renderer" content="webkit">
<!-- 默认IE兼容模式 -->
<meta name="renderer" content="ie-comp">
<!-- 默认IE标准模式 -->
<meta name="renderer" content="ie-stand">

<!-- 写代码时，用第一句即可，后面两句不要。360 浏览器就会在读取到这个标签后，立即切换对应的极速核。-->

相关链接：
浏览器内核控制标签meta说明

针对 ie 浏览器

<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
  • IE=Edge：告诉 ie 以当前版本所支持的最高级标准模式渲染，避免版本升级造成的影响。即什么版本 IE 就用什么版本的标准模式渲染
  • chrome=1：提示 IE 用户安装 Google Frame

百度禁止转码

  • 通过百度手机打开网页时，百度可能会对你的网页进行转码，脱下你的衣服，往你的身上贴狗皮膏药的广告，为此可在 head 内添加
<meta http-equiv="Cache-Control" content="no-siteapp" />

禁止 Chrome 浏览器中自动提示翻译

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

ios设备

  • 添加到主屏后的标题（iOS 6 新增）
<meta name="apple-mobile-web-app-title" content="标题">
  • 是否启用 WebApp 全屏模式
<meta name="apple-mobile-web-app-capable" content="yes" />
  • 设置状态栏的背景颜色
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> 
<!-- 设置状态栏的背景颜色，只有在 `"apple-mobile-web-app-capable" content="yes"` 时生效 -->
<!-- 
  content参数：
     default 默认值。
     black 状态栏背景是黑色。
     black-translucent 状态栏背景是黑色半透明。 如果设置为 default 或 black ,网页内容从状态栏底部开始。 如果设置为 black-translucent ,网页内容充满整个屏幕，顶部会被状态栏遮挡。
 -->

禁止数字识自动识别为电话号码

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

禁止自动自动识别地址

<meta name="format-detection" content="address=no"> <!-- 禁止自动自动识别地址 -->

禁止自动自动识别日期

<meta name="format-detection" content="date=no">  <!-- 禁止自动自动识别日期 -->

禁止自动自动识别 Email

<meta name="format-detection" content="email=no">  <!-- 禁止自动自动识别 Email -->

ios图标

  • rel 参数：apple-touch-icon 图片自动处理成圆角和高光等效果。 apple-touch-icon-precomposed 禁止系统自动添加效果，直接显示设计原图。 iPhone 和 iTouch(mp4)，默认 57x57 像素，必须有
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png" /> <!-- iPhone 和 iTouch，默认 57x57 像素，必须有 -->
  • iPad，72x72 像素，可以没有，但推荐有
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/apple-touch-icon-72x72-precomposed.png" /> <!-- iPad，72x72 像素，可以没有，但推荐有 -->
  • Retina iPhone 和 Retina iTouch，114x114 像素，可以没有，但推荐有
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png" /> <!-- Retina iPhone 和 Retina iTouch，114x114 像素，可以没有，但推荐有 -->
  • Retina iPad，144x144 像素，可以没有，但推荐有 
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png" /> <!-- Retina iPad，144x144 像素，可以没有，但推荐有 -->
  • IOS 图标大小在iPhone 6 plus上是180×180，iPhone 6 是120x120。 适配iPhone 6 plus，则需要在<head>中加上这段 
<link rel="apple-touch-icon-precomposed" sizes="180x180" href="retinahd_icon.png">

ios启动画面

  • iPad 的启动画面是不包括状态栏区域的。

    • iPad 竖屏 768 x 1004（标准分辨率）
      <!-- iPad 竖屏 768 x 1004（标准分辨率） -->
<link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png" />
    • iPad 竖屏 1536x2008（Retina）
      <!-- iPad 竖屏 1536x2008（Retina） -->
<link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png" />
    • iPad 横屏 1024x748（标准分辨率）
      <!-- iPad 横屏 1024x748（标准分辨率） -->
<link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png" />
    • iPad 横屏 2048x1496（Retina）
      <!-- iPad 横屏 2048x1496（Retina） -->
<link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png" />

  • iPhone 和 iPod touch 的启动画面是包含状态栏区域的。

    • iPhone/iPod Touch 竖屏 320x480 (标准分辨率)
      <!-- iPhone/iPod Touch 竖屏 320x480 (标准分辨率) -->
<link rel="apple-touch-startup-image" href="/splash-screen-320x480.png" />
    • iPhone/iPod Touch 竖屏 640x960 (Retina)
      <!-- iPhone/iPod Touch 竖屏 640x960 (Retina) -->
<link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png" />
    • iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina)
      <!-- iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina) -->
<link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png" />
    • 添加智能 App 广告条 Smart App Banner（iOS 6+ Safari） 参考链接：Safari Web内容指南
      <!-- 添加智能 App 广告条 Smart App Banner（iOS 6+ Safari） --> 
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL"> 
<!-- 这个标签是告诉iphone的safari浏览器，这个网站对应的app是什么，然后在页面上面显示一个下载banner
    • iPhone 6对应的图片大小是750×1294，iPhone 6 Plus 对应的是1242×2148 。
      <link rel="apple-touch-startup-image" href="launch6.png" media="(device-width: 375px)">
<link rel="apple-touch-startup-image" href="launch6plus.png" media="(device-width: 414px)">

    注意：
    APP启动画面图片，如果不设置，启动画面就是白屏，图片像素就是手机全屏的像素。

    1. 图片必须符合宽高标准才能正常显示。比如 768 x 1004，那图片就得那么大。
    2. 要注意横屏用图必须竖过来。

Windows 8

  • Windows 8 磁贴颜色
    <meta name="msapplication-TileColor" content="#000"/> <!-- Windows 8 磁贴颜色 -->
  • Windows 8 磁贴图标
    <meta name="msapplication-TileImage" content="icon.png"/> <!-- Windows 8 磁贴图标 -->

rss订阅

<!-- 添加 RSS 订阅 -->
<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml" />

favicon icon

<link rel="shortcut icon" type="image/ico" href="/favicon.ico" /> <!-- 添加 favicon icon -->

UC浏览器

设置屏幕方向

  • portrait 为横屏，landscape 为竖屏。
<meta name="screen-orientation" content="portrait|landscape">

设置全屏

<meta name="full-screen" content="yes">

设置适应屏幕排版（缩放是否显示滚动条）

  • UC 浏览器在标准排版效果实现的基础上，提供适应屏幕的排版方式，当设置为 uc-fitscreen=yes，页面进行缩放操作时，仅放大图片和文字等元素，但不放大屏幕宽度，保持不出现水平（横向）滚动条。
    <meta name="viewport" content="uc-fitscreen=no|yes"/>

排版模式

  • UC 浏览器提供两种排版模式，分别是适屏模式（fitscreen）及标准模式（standard），其中适屏模式简化了一些页面的处理，使得页面内容更适合进行页面阅读、节省流量及响应更快，而标准模式则能按照标准规范对页面进行排版及渲染。
    <meta name="full-screen" content="yes">

夜间模式

  • 可以帮助用户在低亮度或黑暗情况下更舒适的进行页面浏览。由于基于网页的应用愈加复杂，由浏览器实现的单一夜间模式不一定能够适应所有情况(例如游戏应用)，因此 UC 浏览器允许网页设计者对其设计的页面禁用浏览器的夜间模式，自行设计更适合用户使用的夜间模式。

    注意：页面内的 frame/iframe 中的夜间模式的 meta 不生效。

    <meta name="nightmode" content="enable|disable">
<!-- 
  设置为disable后，即使用户使用浏览器的夜间模式，页面的表现也仍然是非夜间模式
 -->

整页图片强制显示

  • 为了节省流量及加快速度，UC 为用户提供了无图模式，在实际使用中存在页面中的图片是不可缺少的，例如验证码，地图等。通过强制图片显示的功能可以保证图片显示不受用户的设置影响。

    注意：整页图片强制显示仅对当前页面生效，对页面内的 frame/iframe 不生效，也不影响前进后退的页面

    <meta name="imagemode" content="force">

开启应用模式

  • 应用模式是为方便 Web 应用及游戏开发者设置的综合开关，通过meta标签进行指示打开，当进入应用模式时，浏览器将自动调整以下参数:

    参数 状态 说明
    全屏 生效 可通过 meta 或 JS API 调用退出全屏
    长按菜单 失效 可通过 JS API 调用重新生效
    浏览器默认手势 失效 可通过 JS API 调用重新生效
    排版模式 标准模式 可通过 meta 或 JS API 调用设置其他排版模式
    强制图片显示 生效 /
    夜间模式 失效 可通过 meta 或 JS API 调用启用夜间模式 
    <meta name="browsermode" content="application">
<!-- 
  使用了application这种应用模式后，页面讲默认全屏，禁止长按菜单，禁止收缩，标准排版，以及强制图片显示 
  -->

QQ浏览器（X5内核）

<!-- 设置横屏、竖屏显示，portrait 横屏，landscape 竖屏-->
<meta name="x5-orientation" content="portrait|landscape">
<!-- 设置全屏显示 -->
<meta name="x5-fullscreen" content="true">
<!-- 开启应用模式 -->
<meta name="x5-page-mode" content="app">

移动端简约meta

<meta charset='utf-8'>
<meta name="viewport" content="width=device-widthuser-scalable=no, initial-scale=1.0maximum-scale=1.0, minimum-scale=1.0">
<!-- 优先使用 IE 最新版本和 Chrome -->
<meta http-equiv="X-UA-Compatiblecontent="IE=edge,chrome=1">
<!-- 启用360浏览器的极速模式(webkit) -->
<meta name="renderer" content="webkit">
<!--  Android 版 Chrome 在访问时状态栏自动变色  -->
<meta name="theme-color" content="#000000">

<meta name="description" content="不超过150个字符"/>
<meta name="keywords" content=""/>
<meta name="author" content="name, email@gmail.com"/>
<meta name="robots" content="index,follow"/>

<!-- iOS 设备 begin -->
  <!-- 添加到主屏后的标题（iOS 6 新增） -->
  <meta name="apple-mobile-web-app-title" content="标题">
  <!-- 是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏 -->
  <meta name="apple-mobile-web-app-capable" content="yes"/>

  <!-- 添加智能 App 广告条 Smart App Banner（iOS 6+ Safari） -->
  <meta name="apple-itunes-app" content="app-id=myAppStoreID,affiliate-data=myAffiliateData, app-argument=myURL">
  <!-- 设置苹果工具栏颜色 -->   
  <meta name="apple-mobile-web-app-status-bar-style"content="black"/>

  <!-- 忽略页面中的数字识别为电话，忽略email识别 -->
  <meta name="format-detection" content="telphone=no, email=no"/>


  <!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，如黑莓 -->
  <meta name="HandheldFriendly" content="true">
  <!-- 微软的老式浏览器 -->
  <meta name="MobileOptimized" content="320">
  <!-- uc强制竖屏 -->
  <meta name="screen-orientation" content="portrait">
  <!-- QQ强制竖屏 -->
  <meta name="x5-orientation" content="portrait">
  <!-- UC强制全屏 -->
  <meta name="full-screen" content="yes">
  <!-- QQ强制全屏 -->
  <meta name="x5-fullscreen" content="true">
  <!-- UC应用模式 -->
  <meta name="browsermode" content="application">
  <!-- QQ应用模式 -->
  <meta name="x5-page-mode" content="app">
  <!-- windows phone 点击无高光 -->
  <meta name="msapplication-tap-highlight" content="no">
  <!-- iOS 图标 begin -->
  <link rel="apple-touch-icon-precomposed" href="apple-touch-icon-57x57-precomposed.png"/>
  <!-- iPhone 和 iTouch，默认 57x57 像素，必须有 -->
  <link rel="apple-touch-icon-precomposed" sizes="114x114"href="/apple-touch-icon-114x114-precomposed.png"/>
  <!-- Retina iPhone 和 Retina iTouch，114x114 像素，可以没有，但荐有 -->
  <link rel="apple-touch-icon-precomposed" sizes="144x144"href="/apple-touch-icon-144x144-precomposed.png"/>
  <!-- Retina iPad，144x144 像素，可以没有，但推荐有 -->
  <!-- iOS 图标 end -->

  <!-- iOS 启动画面 begin -->
  <link rel="apple-touch-startup-image" sizes="768x1004" href="splash-screen-768x1004.png"/>
  <!-- iPad 竖屏 768 x 1004（标准分辨率） -->
  <link rel="apple-touch-startup-image" sizes="1536x2008" href="splash-screen-1536x2008.png"/>
  <!-- iPad 竖屏 1536x2008（Retina） -->
  <link rel="apple-touch-startup-image" sizes="1024x748" href="Default-Portrait-1024x748.png"/>
  <!-- iPad 横屏 1024x748（标准分辨率） -->
  <link rel="apple-touch-startup-image" sizes="2048x1496" href="splash-screen-2048x1496.png"/>
  <!-- iPad 横屏 2048x1496（Retina） -->

  <link rel="apple-touch-startup-image" href="splash-screen-320x480.png"/>
  <!-- iPhone/iPod Touch 竖屏 320x480 (标准分辨率) -->
  <link rel="apple-touch-startup-image" sizes="640x960" href="splash-screen-640x960.png"/>
  <!-- iPhone/iPod Touch 竖屏 640x960 (Retina) -->
  <link rel="apple-touch-startup-image" sizes="640x1136" href="splash-screen-640x1136.png"/>
  <!-- iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina) -->
  <!-- iOS 启动画面 end -->

  <!-- iOS 设备 end -->


  <meta name="msapplication-TileColor" content="#000"/>
  <!-- Windows 8 磁贴颜色 -->
  <meta name="msapplication-TileImage" content="icon.png"/>
  <!-- Windows 8 磁贴图标 -->

  <link rel="alternate" type="application/rss+xml" title="RSS"href="/rss.xml"/>
  <!-- 添加 RSS 订阅 -->
  <link rel="shortcut icon" type="image/ico" href="/favicon.ico">
  <!-- 添加 favicon icon -->
参考链接
  1. 使用HTML meta no-cache标签来禁用缓存
  2. 常用的 HTML 头部标签
  3. HTML head 头标签
  4. 超实用！Web工程师和设计师必学的10个iOS 8新鲜改变
  5. 移动端常用meta总结
  6. HTML中meta theme-color的含义
posted @ 2020-01-10 16:28  玖舞二柒  阅读(659)  评论(0)    收藏  举报