作为前端,你必须要知道的 meta 标签知识

更新日期: 2022-06-29阅读: 1.1k标签: meta

前言

面试baidu的时候,面试官问:你都知道什么 meta 标签?用处是什么?尽可能多的说出来。我:嗯…… 嗯…… 我一般都自动生成… 面试官:……

后来找资料好好学了下,再看了taobao和头条的网页才知道:meta标签用处可大得很呐!今天就来浅浅总结一下。

顺便感叹一下字节这块适配做的是真的蛮好

概览

meta标签一般放在整个 html 页面的 head 部分,在 MDN 中对他这样定义:

meta是 文档级元数据元素 ,用来表示那些不能由其它 HTML 元相关元素( <base> 、 <link> , <script> 、 <style> 或 <title> )之一表示的任何元数据。

是不是感觉看起来很抽象?说白了就是为了传达信息。

先看看 meta 元素定义的元数据的类型:

  • 如果设置了 name 属性, meta 元素提供的是文档级别的元数据,应用于整个页面。
  • 如果设置了 http-equiv 属性, meta 元素则是编译指令,提供的信息与类似命名的 HTTP 头部相同。
  • 如果设置了 charset 属性, meta 元素是一个字符集声明,告诉文档使用哪种字符编码。
  • 如果设置了 itemprop 属性, meta 元素提供用户定义的元数据。

name属性

name 和 content 一起使用,前者表示要表示的元数据的 名称 ,后者是元数据的 值 。

author

用来表示网页的作者的名字,例如某个组织或者机构。

<meta name="author" content="aaa@mail.abc.com">

description

是一段简短而精确的、对页面内容的描述。以头条和taobao的 description 标签为例:

keywords

与页面内容相关的关键词,使用逗号分隔。某些搜索引擎在遇到这些关键字时,会用这些关键字对文档进行分类。还是以头条和taobao为例

viewpoint

为 viewport(视口)的初始大小提供指示。目前仅用于移动设备。

可能你也发现了,我们在 vscode 中自动生成 html 的代码片段时,会自动生成:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

width 用来设置 viewport 的宽度为设备宽度;

initial-scale 为设备宽度与 viewport 大小之间的缩放比例。

robots

表示爬虫对此页面的处理行为,或者说,应当遵守的规则,是用来做搜索引擎抓取的。

它的 content 可以为:

  1. all :搜索引擎将索引此网页,并继续通过此网页的链接索引文件将被检索
  2. none :搜索引擎讲忽略此网页
  3. index :搜索引擎索引此网页
  4. follow :搜索引擎继续通过此网页的链接索引搜索其它的网页

renderer

用来指定双核浏览器的渲染方式,比如360浏览器,我们可以通过这个设置来指定360浏览器的渲染方式

<meta name="renderer" content="webkit"> //默认webkit内核
<meta name="renderer" content="ie-comp"> //默认IE兼容模式
<meta name="renderer" content="ie-stand"> //默认IE标准模式

http-equiv

http-equiv 也是和 content 一起使用,前者表示要表示的元数据的 名称 ,后者是元数据的 值 。

http-equiv 所有允许的值都是特定 HTTP 头部的名称,

X-UA-Compatible

我们最常见的 http-equiv 值可能就是 X-UA-Compatible 了,它常常长这个样子:

它是用来是做IE浏览器适配的。

IE=edge 告诉浏览器,以当前浏览器支持的最新版本来渲染,IE9就以IE9版本来渲染。

chrome=1 告诉浏览器,如果当前IE浏览器安装了 Google Chrome Frame 插件,就以chrome内核来渲染页面。

像上图这种两者都存在的情况:如果有chrome插件,就以chrome内核渲染,如果没有,就以当前浏览器支持的最高版本渲染。

另外,这个属性支持的范围是 IE8-IE11

你可能注意到了,如果在我们的 http 头部中也设置了这个属性,并且和 meta 中设置的有冲突,那么哪一个优先呢?答案是:开发者偏好( meta 元素)优先于Web服务器设置(HTTP头)。

content-type

用来声明文档类型和字符集

x-dns-prefetch-control

一般来说,HTML页面中的a标签会自动启用DNS提前解析来提升网站性能,但是在使用https协议的网站中失效了,我们可以设置:

来打开dns对a标签的提前解析

cache-control、Pragma、Expires

和缓存相关的设置,但是遗憾的是这些往往不生效,我们一般都通过 http headers 来设置缓存策略

总结

常用了就是这些啦~实际使用时还有很多新的需要学习,这就需要俺们平时多看看其他网站是怎么设置 meta 的~ 一起加油叭

作者:花椰菜菜
https://juejin.cn/post/7089271039842058253

链接: https://www.fly63.com/article/detial/11823

meta中viewport介绍,关于移动web前端viewport详解

当你掌握了viewport,那么意味着你已经大致了解了移动平台与PC平台的不同,你可以更专注而细致的去解决某些平台差异问题。

Meta标签大全_web开发常用meta整理

meta标签提供关于HTML文档的元数据。元数据不会显示在页面上,但是对于机器是可读的。它可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 web 服务。

meta中X-UA-Compatible的作用详解

X-UA-Compatible是针对 IE8 版本的一个特殊文件头标记,用于为 IE8 指定不同的页面渲染模式,对于ie8之外的浏览器是不识别的。目前绝大多数网站都用<meta http-equiv=”X-UA-Compatible” content=”IE=EmulateIE7″ >来作为IE8的兼容方法。为了避免制作出的页面在IE8下面出现错误,

vue-router路由元信息meta

在定义路由时定义一个需要验证的meta信息 meta: {requiresAuth: true} 路由记录可以是嵌套的,因此,当一个路由匹配成功后,他可能匹配多个路由记录

HTML5中meta标签的属性有哪些?

meta属性在HTML中占据了很重要的位置。如:针对搜索引擎的SEO,文档的字符编码,设置刷新缓存等。还是有必要了解一些meta的属性,并且能够熟练使用它们。

html头部中各式各样的meta

在写网页的过程中,第一步就是创建一个html文档。meta 元素可以提供有关页面的元信息,比如针对搜索引擎和更新频度的描述和关键字。它不会显示在页面上,但是计算机可以识别

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!