切換語言為:簡體

meta標籤有什麼作用,常用的meta標籤有哪些

  • 爱糖宝
  • 2024-11-02
  • 2045
  • 0
  • 0

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

0則評論

您的電子郵件等資訊不會被公開,以下所有項目均必填

OK! You can skip this field.