视频技术

FFmpeg red5 nginx Html5 rtsp rtmp

·您当前的位置：首页 > 技术教程 > Html5技术 >

[html5]移动端推荐使用的meta标签详解

时间:2016-12-28 17:51酷播
meta标签是HTML中head头部的一个辅助性标签，它位于HTML文档头部的 head 和 title标记之间,[html5]移动端推荐使用的meta标签详解

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标签

html 代码:
  1. <!-- 设置文档的字符编码 -->
  2. <meta charset="utf-8">
  3. <meta http-equiv="x-ua-compatible" content="ie=edge">
  4. <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  5. <!-- 以上 3 个 meta 标签 *必须* 放在 head 的最前面；其他任何的 head 内容必须在这些标签的 *后面* -->
  6.  来源：www.cuplayer.com
  7. <!-- 允许控制资源的过度加载 -->
  8. <meta http-equiv="Content-Security-Policy" content="default-src 'self'">
  9. <!-- 尽早地放置在文档中 -->
  10. <!-- 仅应用于该标签下的内容 -->
  11.  
  12. <!-- Web 应用的名称（仅当网站被用作为一个应用时才使用）-->
  13. <meta name="application-name" content="应用名称">
  14.  
  15. <!-- 针对页面的简短描述（限制 150 字符）-->
  16. <!-- 在*某些*情况下，该描述是被用作搜索结果展示片段的一部分 -->
  17. <meta name="description" content="一个页面描述">
  18.  
  19. <!-- 控制搜索引擎的抓取和索引行为 -->
  20. <meta name="robots" content="index,follow,noodp"><!-- 所有的搜索引擎 -->
  21. <meta name="googlebot" content="index,follow"><!-- 仅对 Google 有效 -->
  22.  
  23. <!-- 告诉 Google 不显示网站链接的搜索框 -->
  24. <meta name="google" content="nositelinkssearchbox">
  25.  
  26. <!-- 告诉 Google 不提供此页面的翻译 -->
  27. <meta name="google" content="notranslate">
  28.  
  29. <!-- 验证 Google 搜索控制台的所有权 -->
  30. <meta name="google-site-verification" content="verification_token">
  31.  
  32. <!-- 用来命名软件或用于构建网页（如 - WordPress、Dreamweaver）-->
  33. <meta name="generator" content="program">
  34.  
  35. <!-- 关于你的网站主题的简短描述 -->
  36. <meta name="subject" content="你的网站主题">
  37.  
  38. <!-- 非常简短（少于 10 个字）的描述。主要用于学术论文。-->
  39. <meta name="abstract" content="">
  40.  来源：www.cuplayer.com
  41. <!-- 完整的域名或网址 -->
  42. <meta name="url" content="https://example.com/">
  43.  
  44. <meta name="directory" content="submission">
  45.  
  46. <!-- 基于网站内容给出一般的年龄分级 -->
  47. <meta name="rating" content="General">
  48.  
  49. <!-- 允许控制 referrer 信息如何传递 -->
  50. <meta name="referrer" content="never">
  51.  
  52. <!-- 禁用自动检测和格式化可能的电话号码 -->
  53. <meta name="format-detection" content="telephone=no">
  54.  
  55. <!-- 通过设置为 “off” 完全退出 DNS 预取 -->
  56. <meta http-equiv="x-dns-prefetch-control" content="off">
  57.  
  58. <!-- 在客户端存储 cookie，web 浏览器的客户端识别 -->
  59. <meta http-equiv="set-cookie" content="name=value; expires=date; path=url">
  60.  
  61. <!-- 指定要显示在一个特定框架中的页面 -->
  62. <meta http-equiv="Window-Target" content="_value">
  63.  来源：www.cuplayer.com
  64. <!-- 地理标签 -->
  65. <meta name="ICBM" content="latitude, longitude">
  66. <meta name="geo.position" content="latitude;longitude">
  67. <!-- 国家代码 (ISO 3166-1): 强制性, 州代码 (ISO 3166-2): 可选; 如 content="US" / content="US-NY" -->
  68. <meta name="geo.region" content="country[-state]">
  69. <!-- 如 content="New York City" -->
  70. <meta name="geo.placename" content="city/town">

相关的详细说明请查看：

热门文章推荐

请稍候...

保利威视云平台-轻松实现点播直播视频应用

酷播云数据统计分析跨平台播放器