Open Graph protocol(og:): https://ogp.me/
https://github.com/joshbuchea/HEAD
head 中如果有不支持的元素则从它开始全部会被渲染到 body 中
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta
examples:
<meta charset="utf-8">
<meta http-equiv="refresh" content="3;url=http://www.mozilla.org/"> //跳转或者刷新,不推荐使用
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="renderer" content="webkit">
- 如果设置了 name , 一个 document 级的元素据 将附着在整个页面上。
- 如果设置了 http-equiv , 网络服务器将会给出一个 pragma directive, 即,指示页面应如何承载的指令信息。
- 如果设置了 charset,将对网页使用的字符集作出声明
- 如果设置了 itemprop,将定义一个用户自定义的元数据,也因此语义声明,这个定义将对用户代理完全开放。如果此属性存在,则此meta元素属于流内容(跟style元素一种)
http-equiv (特定的 http 头) 可能的值 Content-Security-Policy、default-style、refresh
content 属性关联到 http-equiv、name 属性,具体取决于上下文
name可能的值 application-name, author, description, generator, keywords, referrer, creator, googlebot, publisher, robots, slurp, viewport
设置移动端的默认缩放:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,height=...,user-scalable=no">
// 在移动下不设置 viewport 会将页面显示成 800px-1000px(占满整个屏幕),文字可能被浏览器自动放大,可以通过 text-size-adjust 来设置或禁用此行为
<meta name=”robots” content=”noindex, nofollow” />
<!-- Chrome, Firefox OS and Opera -->
<meta name="theme-color" content="#4285f4">
<!-- Windows Phone -->
<meta name="msapplication-navbutton-color" content="#4285f4”>
<!-- iOS Safari —>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<!-- iOS Safari webapp启动图标-->
<link rel="apple-touch-startup-image" href="icon.png">
<link rel="icon" sizes="192x192" href="nice-highres.png">
// 部分可以写到 manifest.json 里面去