在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 -->