html中的meta標籤是用來表示網頁的後設資料的資訊的，用來面熟網頁問咋還能得屬性。meta 標籤由 name 和 content 屬性定義
按照它的作用我們可以大致分為四類
文件資訊相關
<meta name="author" content="作者姓名">
name為author，用來指定網頁的作者，特別是在一些學術界的網頁上作用更為明顯，因為學術論文等文章的智慧財產權意識比較強
<meta name="description" content="網頁內容的簡短描述">
name為description，用來表示網頁的簡短描述，當搜索引擎搜尋出來一列資訊的時候，那麼會展示每個連結的網頁的簡短描述，以便搜尋者判斷該網頁對他是否有用
SEO最佳化相關
<meta name="keywords" content="關鍵詞1,關鍵詞2,關鍵詞3">
當我們使用了keywords這個關鍵字的識貨，它就是專門用來給搜索引擎來看的，搜索引擎透過關鍵詞來判斷該網頁的主題
但實際中，很多爲了最佳化SEO,把這個關鍵詞用爛大了，放了非常多的不相關的關鍵詞，反正多放點也不要錢。
所以目前搜索引擎的策略也是非常的複雜，會綜合考慮這些因素
字元編碼相關
<meta charset="UTF-8">
當我們使用charset標籤的時候，他用於指定網頁的編碼格式為utf-8,utf-8是一種通用的字元編碼，能夠表示幾乎所有的字元，包括各種語言的文字、符號等。如果網頁沒有使用正確的編碼格式，那麼就有可能出現亂碼現象。
這個情況尤其在多語言網頁上亂碼的情況機率更高
視口（viewport）相關（主要用於移動端）
<meta name="viewport" content="width=device-width, initial-scale=1.0">
當我們使用viewport這個屬性，他表示定義視口，這個主要用在手機端，比如width=device-width ,也就是視口的寬度與當前裝置的寬度一致 initial-scale=1.0縮放比例為1
社交媒體分享相關（基於 Open Graph 協議等）
我們很多時候看到FB裡面有人分享網頁新聞，它分享數來的標題和介紹，以及右側的縮圖，到底是如何定義的呢
其實就是meta中定義的
基於 Open Graph 協議，說白了就是一個大家約定俗稱的規則而已
<meta property="og:title" content="網頁標題">
我們透過 og:title來定義分享時候的標題
<meta property="og:description" content="網頁內容簡介">
我們透過og:description來定義分享時候的內容簡介
<meta property="og:image" content="縮圖的URL">
我們透過og:image來定義分享時候的縮圖
最後
meta的屬性值還有很多，並且你也可以自己定義，但是常用的已緊在上面列舉出來了
作者：三年三月
連結：https://juejin.cn/post/7432310957795262490
