在html的head标签中,会运用许多的meta标签,例下:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="keywords" content="编程, 前端, 极客, Call, Apply, Bind">
<meta name="theme" content="xh-2">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<title>Document</title>
</head>
那末这些标签有什么作用呢?
诠释
meta,称为元数据。元数据是对数据的形貌。能够你会有些迷惑,什么叫做元数据。举个例子,之前在背单词的时刻,在单词表上只会有”hello: 你好”,以及音标信息,还会有一段对hello的诠释,而这段诠释能够理解为元数据,即形貌数据的数据。
html,自身是形貌信息的数据,而mata
就是对全部html文件信息的形貌。
在mata
中,罕见的有两种花样
<meta name="keywords" content="编程, 前端, 极客, Call, Apply, Bind">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
meta
运用k,v的构造,在content中是对name的一个详细形貌,比方name=”keywords”,content是申明当前的html中是编程, 前端, 极客, Call, Apply, Bind
症结字的形貌。比方name=”viewport”,主假如应用于挪动装备,决议当前页面的一个锚,一切的element的像素规划相当于这个viewport
定义的大小。
而http-equiv
是则是http的传输相干,如上的Cache-Control
,当前页面运用content中对应战略,no-cache
不运用客户端的缓存。
meta和SEO
由于meta
是对当前页面的内容的精简形貌,一切有利于SEO,比方在meta
中设置了keywords
,description
等,搜索引擎会放出”蜘蛛”,去抓取页面中的”症结信息”,然后放到搜索引擎的效劳中,一切设置适宜的meta
有利于搜索引擎优化
运用第三方的效劳,天生meta组
假如你不知道应该有一个什么样的meta
标签组,能够运用该网站HEY META,你只需要输入如description
,keywords
等信息,它会天生特地针对Google,Facebook,Twitter的meta
组,喜好的能够接见尝试下。如运用一个之前博客的,天生的meta
组以下
<!-- HTML Meta Tags -->
<title>Vue组件三-Slot分发内容</title>
<meta name="description" content="Vue组件三-Slot分发内容最先Vue组件是进修Vue框架最比较难的部份,而这部份难点我以为能够分为三个部份进修,即 组件的传值 - 父组件向子组件中传值 事宜回馈 - 子组件向父组件发送音讯,父组件监听音讯 分发内容 整片博客运用的源代码-请点击 所以将用三篇博客离别举行引见以上三种状况和运用 木头楔子/插槽在进修内容分发之前,我们先相识一个木匠会常常运用的一种拼接两个家具的接口——木头楔">
<!-- Google / Search Engine Tags -->
<meta itemprop="name" content="Vue组件三-Slot分发内容">
<meta itemprop="description" content="Vue组件三-Slot分发内容最先Vue组件是进修Vue框架最比较难的部份,而这部份难点我以为能够分为三个部份进修,即 组件的传值 - 父组件向子组件中传值 事宜回馈 - 子组件向父组件发送音讯,父组件监听音讯 分发内容 整片博客运用的源代码-请点击 所以将用三篇博客离别举行引见以上三种状况和运用 木头楔子/插槽在进修内容分发之前,我们先相识一个木匠会常常运用的一种拼接两个家具的接口——木头楔">
<meta itemprop="image" content="http://raw.githubusercontent.com/beyondverage0908/Blog/master/resoure/componet_slot_qizi.jpeg">
<!-- Facebook Meta Tags -->
<meta property="og:url" content="https://beyondverage0908.github.io/2018/05/13/blog-2018-05-13">
<meta property="og:type" content="website">
<meta property="og:title" content="Vue组件三-Slot分发内容">
<meta property="og:description" content="Vue组件三-Slot分发内容最先Vue组件是进修Vue框架最比较难的部份,而这部份难点我以为能够分为三个部份进修,即 组件的传值 - 父组件向子组件中传值 事宜回馈 - 子组件向父组件发送音讯,父组件监听音讯 分发内容 整片博客运用的源代码-请点击 所以将用三篇博客离别举行引见以上三种状况和运用 木头楔子/插槽在进修内容分发之前,我们先相识一个木匠会常常运用的一种拼接两个家具的接口——木头楔">
<meta property="og:image" content="http://raw.githubusercontent.com/beyondverage0908/Blog/master/resoure/componet_slot_qizi.jpeg">
<!-- Twitter Meta Tags -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Vue组件三-Slot分发内容">
<meta name="twitter:description" content="Vue组件三-Slot分发内容最先Vue组件是进修Vue框架最比较难的部份,而这部份难点我以为能够分为三个部份进修,即 组件的传值 - 父组件向子组件中传值 事宜回馈 - 子组件向父组件发送音讯,父组件监听音讯 分发内容 整片博客运用的源代码-请点击 所以将用三篇博客离别举行引见以上三种状况和运用 木头楔子/插槽在进修内容分发之前,我们先相识一个木匠会常常运用的一种拼接两个家具的接口——木头楔">
<meta name="twitter:image" content="http://raw.githubusercontent.com/beyondverage0908/Blog/master/resoure/componet_slot_qizi.jpeg">
<!-- Meta Tags Generated via http://heymeta.com -->