html5中的meta标签用法详解

meta标签用法详解

来源：视频砖家

html5中的meta标签主要用于描述网页的元数据，它可以用于描述网页的标题、关键词、描述、作者、版权等信息，还可以用于设置网页的字符集、设置网页的刷新时间、设置网页的跳转页面等。

• <meta charset="utf-8">：用于定义网页的字符集为 UTF-8，UTF-8 - Unicode 字符编码 ISO-8859-1 - 拉丁字母表的字符编码。

• <meta name="viewport" content="width=device-width, initial-scale=1.0">：用于设置网页的视口（viewport），视频砖家提示，移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域。

• <meta name="description" content="网页描述">：用于指定网页的描述，通常在搜索结果中显示。

• <meta name="keywords" content="关键字">：用于指定网页的关键字，有助于搜索引擎更好地索引和识别网页内容。

• <meta name="author" content="作者名">：用于指定网页的作者。

• <meta name="robots" content="index,follow">：用于控制搜索引擎索引和跟踪网页。

• <meta http-equiv="refresh" content="5; url=baidu.com">：用于指定网页在多少秒后自动刷新，并跳转到指定的 URL。

meta标签用法示例

<meta charset="utf-8"> 
<!-- 设置文档字符编码 -->
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- 告诉IE浏览器，IE8/9及以后的版本都会以最高版本IE来渲染页面。 -->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- 指定页面初始缩放比例。-->
<!-- 上述3个meta标签须放在head标签最前面;其它head内容放在其后面，如link标签-->
<!-- 允许控制加载资源 -->
<meta http-equiv="Content-Security-Policy" content="default-src ‘self‘">
<!-- 尽可能早的放在文档 -->
<!-- 只适用于下面这个标签的内容 -->
<!-- 使用web应用程序的名称(当网站作为一个应用程序的时候)-->
<meta name="application-name" content="Application Name">
<!-- 页面的简短描述(限150个字符)-->
<!-- 在某些情况下这个描述作为搜索结果中所示的代码片段的一部分。-->
<meta name="description" content="A description of the page">
<!-- 控制搜索引擎爬行和索引的行为 -->
<meta name="robots" content="index,follow,noodp"><!-- 所有搜索引擎 -->
<meta name="googlebot" content="index,follow"><!-- 谷歌 -->
<!-- 告诉谷歌搜索框不显示链接 -->
<meta name="google" content="nositelinkssearchbox">
<!-- 告诉谷歌不要翻译这个页面 -->
<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="your website‘s subject">
<!-- 很短(10个词以内)描述。主要学术论文 -->
<meta name="abstract" content="">
<!-- 完整的域名或网址 -->
<meta name="url" content="https://example.com/">
<meta name="directory" content="submission">
<!-- 对当前页面一个等级衡量，告诉蜘蛛当前页面在整个网站中的权重到底是多少。General是一般页面，Mature是比较成熟的页面，Restricted代表受限制的。 -->
<meta name="rating" content="General">
<!-- 隐藏发送请求时请求头表示来源的referrer字段。 -->
<meta name="referrer" content="no-referrer">
<!-- 禁用自动检测和格式的电话号码 -->
<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">
<meta name="geo.region" content="country[-state]">
<!-- 国家代码 (ISO 3166-1): 强制性, 州代码 (ISO 3166-2): 可选; 如 content="US" / content="US-NY" -->
<meta name="geo.placename" content="city/town">
<!-- 如 content="New York City" -->

我的热门文章推荐

• 多路视频直播用在线云导播切换的效果测试

• 如何把视频转换生成二维码，扫码直接播放？

• 有哪些网站上传视频是不会插入广告的？

• 怎么把视频生成二维码？微信扫二维码就可以观看？不要广告的

• 常用照片尺寸对照表，照片大小看这个表就对了

• 视频直播推流攻略（整理的各大平台推流界面）

• html5视频倍速播放功能

• 教你一招：多个视频如何实现列表播放？

• 微信公众号如何实现视频列表播放视频的功能

• h5视频倍速播放功能(视频多倍速观看功能的实例)

• 怎样配置FTP服务器

• 如何使用FTP上传文件（FTP文件传输）

• OBS直播工具使用指南/OBS推送直播视频源到服务器的工具

• QQ浏览器劫持video标签加载自己的广告（怎么解决？）