meta大全
未知
2024-03-18 10:24:11
0
本文的目的是搜集当前主流的meta配置，方便开发者快速开发调试。在这里不会做各种meta的深入分析，只是简单的介绍，让大家知道有这个东西。
meta简述
meta用于描述HTML文档的元数据。通常用于指定网页的描述，关键词，作者及其他元数据。元数据可以被使用浏览器（如何显示内容或加载页面），搜索引擎（关键词），或其他
Web服务调用。meta从一定程度上影响seo。
meta支持哪些属性
| 属性 | 值 | 描述 |
|---|---|---|
| charset | character_set | 定义文档的字符编码。 |
| content | text | 定义与 http-equiv 或 name 属性相关的元信息。 |
| http-equiv | content-type default-style refresh | 把 content 属性关联到 HTTP 头部。 |
| name | application-name author description generator keywords | 把 content 属性关联到一个名称。 |
| scheme | format/URI | HTML5不支持。定义用于翻译 content 属性值的格式。 |
http-equiv
meta标签上的http-equiv属性与http头部信息相关，而且是响应头，因为html本质上是通过服务器响应得到的。http-equiv用于伪装 HTTP 响应头部信息。那么http-equiv有哪些类型呢？让我们一起看下。
| 值 | 描述 |
|---|---|
| cache-control | 控制文档的缓存机制。允许的值如下：public：所有内容都将被缓存(客户端和代理服务器都可缓存)private：内容只缓存到私有缓存中(仅客户端可以缓存，代理服务器不可缓存)no-cache：不缓存，前提是通过服务器的缓存验证机制，如过期，内容改变等校验规则no-store：所有内容都不会被缓存到缓存或 Internet 临时文件中（设置了貌似无效，还是说不会出现在响应头吗？哪位大神可以解释下） |
| content-language | 响应体的语言。如zh-CN, en-US等（设置了貌似无效） |
| content-type | 返回内容的MIME类型 |
| date | 原始服务器消息发出的时间，GMT时间格式 |
| expires | 响应过期的日期和时间，GMT时间格式<meta http-equiv="expires" content="Fri, 30 Dec 2011 12:00:00 GMT">（设置了貌似无效） |
| last-modified | 请求资源的最后修改时间，GMT时间格式（设置了貌似无效） |
| location | 用来重定向接收方到非请求URL的位置来完成请求或标识新的资源（设置了貌似无效） |
| refresh | 定义间隔多久后刷新页面。单位是秒。 |
| set-cookie | 创建一个 cookie ，包含 cookie 名，cookie 值，过期时间。（设置了貌似无效） |
| window-target | 用来防止别人在框架里调用自己的页面。<meta http-equiv="Window-target" content="_top">（设置了貌似无效） |
| Pragma | 向后兼容只支持 HTTP/1.0 协议的缓存服务器，那时候 HTTP/1.1 协议中的 Cache-Control 还没有出来。<meta http-equiv="Pragma" content="no-cache">（设置了貌似无效） |
注意：以上都是在chrome浏览器最新版本， vue dev环境下测试的，不代表所有浏览器和服务器表现。
常见meta
指定字符编码
<meta charset="UTF-8">
IE杀手，推荐所有前端工程师采用，让我们干掉IE的市场份额。
<!-- renderer适用于国产双内核浏览器 -->
<!-- 使用Blink（Webkit） -->
<meta name="renderer" content="webkit">
<!-- IE兼容模式，使用ie低版本兼容 -->
<meta name="renderer" content="ie-comp">
<!-- IE标准模式，使用ie高版本兼容 -->
<meta name="renderer" content="ie-stand">
<!-- force-rendering适用于其他双内核浏览器 -->
<meta name="force-rendering" content="webkit">
<!-- 强化对IE的兼容性，强制IE使用最新版标准模式渲染或者使用Chrome Frame渲染 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
viewport常见设置，一般适用于移动端。视口宽度设为理想宽度，禁止缩放。
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
meta三剑客
<meta name="description" content="Tusi博客,专注大前端技术架构与分享,关注用户体验">
<meta name="keyword" content="Tusi博客,web前端,nodejs全栈,响应式,用户体验">
<meta name="author" content="Tusi">
UC浏览器私有meta
<!-- 横屏/竖屏 -->
<meta name="screen-orientation" content="landscape|portrait">
<!-- 全屏 -->
<meta name="full-screen" content="yes">
<!-- 缩放不出滚动条 -->
<meta name="viewport" content="uc-fitscreen=yes|no">
<!-- 排版，fitscreen简化页面，适合阅读省流量，standard模式和标准浏览器一致 -->
<meta name="layoutmode" content="fitscreen|standard"
<!-- 夜间模式的启用和禁用 -->
<meta name="nightmode" content="enable|disable"/>
<!-- 强制图片显示 -->
<meta name="imagemode" content="force"/>
<!-- 强制图片显示，只作用于单图 -->
<img src="..." show="force">
<!-- 应用模式,默认全屏，禁止长按菜单，禁止手势，标准排版，以及强制图片显示。 -->
<meta name="browsermode" content="application">
QQ浏览器X5内核私有meta（现在微信内置浏览器的内核也是X5哦）
<!-- 横屏/竖屏 -->
<meta name="x5-orientation" content="landscape|portrait">
<!-- 全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- 应用模式 -->
<meta name="x5-page-mode" content="app">
苹果机适配
<!-- "添加到主屏幕“后，全屏显示 -->
<meta name="apple-touch-fullscreen" content="yes">
<!-- 隐藏菜单栏和状态栏，类似于应用模式 -->
<meta name="apple-mobile-web-app-capable" content="yes|no">
<!-- 设置状态栏颜色，貌似只有default白色，black黑色，black-translucent灰色半透明 -->
<meta name=”apple-mobile-web-app-status-bar-style” content=black”>
<!-- 取消电话号码识别，防止误触拨号 -->
<meta name="format-detection" content="telephone=no">
其他优化和适配手段
<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320">
<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no">
<!-- robots 用来告诉搜索机器人哪些页面需要被检索 -->
<!-- index 搜索引擎抓取这个页面 -->
<!-- noindex 搜索引擎不抓取这个页面 -->
<!-- follow 抓取外链 -->
<!-- nofollow 不抓取外链 -->
<meta name="robots" content="index,follow">
<meta name="robots" content="index,nofollow">
<meta name="robots" content="noindex,follow">
<meta name="robots" content="noindex,nofollow">
<!-- referrer 控制http请求头的referer，暂时没想到什么实际应用场景 -->
<!-- no-referrer 不发referer -->
<!-- origin 只发送origin部分 -->
<!-- no-referrer-when-downgrade 默认值，当目的地是先验安全的(https->https)则发送origin作为 referrer，但是当目的地是较不安全的(https->http)时则不发送referrer -->。
<!-- origin-when-crossorigin 在同源请求下，发送完整的URL(不含查询参数)，其他情况下则仅发送当前文档的origin -->
<!-- unsafe-URL 在同源请求下，发送完整的URL(不含查询参数) -->
origin-when-crossorigin
<meta name="referrer" content="no-referrer">
<!-- og: Open Graph Protocol，一种友好的配置，让自己的网站在社交网络分享中更得心应手，更多的配置可以去自行搜索 -->
<!-- og:type 告诉SNS，我这是一个什么类型的网站 -->
<meta property=”og:type” content=”article”/>
<!-- og:title 告诉SNS，分享时告诉用户我这个网站的标题是什么，别自己瞎搞个标题 -->
<meta property=”og:title” content=”Tusi博客”/>
<meta property=”og:url” content=”https://blog.wbjiang.cn”/>
<!-- og:image 缩略图 -->
<meta property=”og:image” content=”/static/imgs/thumbnail.png”/>
<meta property=”og:description” content=”专注于大前端技术架构与分享，关注用户体验”/>
https://github.com/joshbuchea/HEAD
原文链接：https://www.cnblogs.com/cangqinglang/p/14787273.html
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符，请将相关资料发送至 service@p2hp.com 进行投诉反馈，一经查实，立即处理!
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符，请将相关资料发送至 service@p2hp.com 进行投诉反馈，一经查实，立即处理!
相关内容
在HTML上添加integrity，验证js和css的has...
近期甲方做了什么安全检查防止html、js被串改，要求加上integrity属性这边记录下...
2024-03-21 10:42:10
在网页中禁用和启用google翻译
在网页中禁用和启用google翻译
meta大全
本文的目的是搜集当前主流的meta配置，方便开发者快速开发调试。在这里不会做各种meta的深入分析，...
innerHTML中标签可以换行的方法有哪些?
本文给大家分享的是一个在javascript中使用innerhtml输出的时候如何实现换行的小技巧，...
增强 HTML 的神器来了
如今，Web 用户期望得到单页应用（SPA）提供的流畅、动态的体验。然而，创建 SPA 往往需要使用...
在HTML上添加integrity，验证js和css的hash，防止篡改
近期甲方做了什么安全检查防止html、js被串改，要求加上integrity属性这边记录下如何生成h...
最新文章
在HTML上添加integrity，验证js和css的hash，防止篡改
近期甲方做了什么安全检查防止html、js被串改，要求加上integrity属性这边记录下如何生成h...
innerHTML中标签可以换行的方法有哪些?
本文给大家分享的是一个在javascript中使用innerhtml输出的时候如何实现换行的小技巧，...
在网页中禁用和启用google翻译
在网页中禁用和启用google翻译
meta大全
本文的目的是搜集当前主流的meta配置，方便开发者快速开发调试。在这里不会做各种meta的深入分析，...
增强 HTML 的神器来了
如今，Web 用户期望得到单页应用（SPA）提供的流畅、动态的体验。然而，创建 SPA 往往需要使用...