meta标签介绍
<meta>元素表示那些不能由其它 HTML 元相关（meta-related）元素（(base、link, script、style 或 title）之一表示的任何Metadata信息。- 人话就是加了meta标签，干了一些以前标签干不了的事
类型
- 如果设置了 name 属性，meta 元素提供的是文档级别（document-level）的元数据，应用于整个页面。
- 如果设置了 http-equiv 属性，meta 元素则是编译指令，提供的信息与类似命名的HTTP头部相同。
- 如果设置了 charset 属性，meta 元素是一个字符集声明，告诉文档使用哪种字符编码。
- 如果设置了 itemprop 属性，meta 元素提供用户定义的元数据。
常用的meta标签
<meta charset='utf-8'> <!-- 声明文档使用的字符编码 -->
<meta charset='utf-8'> <!-- 声明文档使用的字符编码 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <!-- 优先使用 IE 最新版本和 Chrome -->
<meta name="description" content="不超过150个字符" /> <!-- 页面描述 -->
<meta name="keywords" content=""/> <!-- 页面关键词 -->
<meta name="author" content="name, email@gmail.com" /> <!-- 网页作者 -->
<meta name="robots" content="index,follow" /> <!-- 搜索引擎抓取 -->
<meta name="referrer" content="no-referrer"/>//控制由当前文档发出的请求的 HTTP Referer 请求头
<!-- 为移动设备添加 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 -->
<meta http-equiv="cache-control" content="no-cache">
总结
- 描述文档编码方式
- 描述文档信息
- 控制移动端窗口
- 添加请求头的信息
- 网页重定向
- 浏览器渲染方式
ps: 整理meta标签是为了解决微信图片防盗链的问题 使用<meta name="referrer" content="no-referrer"/>的确可以解决防盗链图片不显示问题，但是页面发的请求头里origin都没了，会造成其他的问题，如果只是解决图片的请求origin可以直接在<img referrerPolicy="no-referrer" />就可以了
更多
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/meta#attr-name