[HTML] 關於Mata tag

這是一種放在HTML Head裡的標籤，全名叫做 Metadata Tag，中文名為詮釋資料標籤，意即資料的資料，是用來說明這一份HTML文件的特性和功能。由於網頁技術不斷進化的關係，Meta tag也被使用的越來越廣泛，目前最流行的Meta Tag可以分成以下兩類:

  • SEO: Search Engine Optimization，搜尋引擎優化。

  • OG: Open Graph Protocol，社群分享規範。

SEO相關的Meta Tag

  1. Title

    網頁的標題名稱，會顯示於搜尋結果中的網頁名稱。

1
<title>[HTML] 關於Mata tag | 偉恩的程序世界<title>

  1. Description

    網頁的描述，會顯示於搜尋結果中的網頁描述。

1
<meta name='description' content='這是我的個人網誌，紀錄我學習的知識與技術'>

  1. Keywords

    由於此欄位容易被塞入垃圾訊息，現行主流瀏覽器皆已不採用。

1
<meta name='keywords' content='程式,網頁,物件導向,程式設計,程式語言'>

  1. Robots

    機器人模式，用來告訴搜尋引擎的機器人如何處理這一份網頁。

1
<meta name='robots' content='index, follow'>

  1. Viewport

    螢幕解析度，用來做響應式設計網頁，可以取得使用者裝置寬度來調整網頁版型。

1
<meta name='viewport' content='width=device-width, initial-scale=1.0, user-scalable=no'>

  1. Canonical

    用來整合多重網址的網頁，同一個網頁內容如果可以被多個不同的網址存取，會降低該網頁內容的搜尋權重。

1
<link rel="canonical" href="https://newnauh.github.io/">

OG相關的Meta Tag

  1. OG Title

    分享到社群後，社群網站顯示的物件標題。

1
<meta property="og:title" itemprop="name" content="[HTML] 關於Mata tag | 偉恩的程序世界">

  1. OG Site_name

    分享到社群後，社群網站顯示物件所在的網站名稱。

1
<meta property="og:site_name" content="偉恩的程序世界">

  1. OG Type

    分享到社群後，社群網站定義的物件類型。

1
<meta property="og:type" content="website">

  1. OG Url

    分享到社群後，社群網站對於物件的標準網址。

1
<meta property="og:url" itemprop="url" content="https://newnauh.github.io/">

  1. OG Image

    分享到社群後，社群網站顯示的圖片連結。

1
<meta property="og:image" itemprop="image" content="https://newnauh.github.io/images/default.png">

  1. OG Description

    分享到社群後，社群網站顯示的物件描述。

1
<meta property="og:description" itemprop="description" content="這是我的個人網誌，紀錄我學習的知識與技術">