meta有什麼做用

時間 2019-11-16

標籤 meta 什麼欄目 HTML5 简体版

原文原文鏈接

在html的head標籤中，會使用不少的meta標籤，例下：html

<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的解釋，而這段解釋能夠理解爲元數據，即描述數據的數據。git

html，自己是描述信息的數據，而mata就是對整個html文件信息的描述。github

在mata中，常見的有兩種格式web

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

相關標籤/搜索

沒有什麼

什麼