<meta> 元数据

Tags
html
Created
Oct 22, 2018 3:03 AM

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, referrercreator, 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 —>

https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html

<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 里面去

SuperMade with Super