meta有什麼作用

Swiftly發表於2019-01-24

在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 -->複製程式碼

相關文章