Meta Tag

什麼是 Meta Tag？

其他參考網站

其實簡單得很，html 就是一個網站的骨架，用來定義網站上應該有哪些東西(元件)，它們的排列是如何以及對應的屬性設定(就不說 CSS & Scripts了)。

對瀏覽器來說，解析 html 元件是頭等重要的工作，這樣才能依照設計者的希望來正常呈現一個網頁的樣貌，而網頁程式是怎麼知道哪一個元件代表什麼意思呢？靠的就是 html 當中每個種類元件所獨有的標記，每個標記種類都有獨特的作用，meta tag 就是其中一種，meta 的意思有一點抽象，常用來泛指關於某個東西的額外註明。

像是另一個常見單字 meta data 就是在描述「關於因資料本身存在而形成的額外資訊」，meta tag 本身則是用來註解關於某個網頁的額外資訊，提供搜尋引擎參考。

Meta tag 並不影響網頁的呈現效果，加入 meta tag 的基本用意，是幫助搜尋引擎的爬蟲程式更容易了解這個網站的內容，從而能更加正確地將該網頁配對給對應的搜尋需求。它其實有一點沒落了，但是仍然是技術 SEO 最基本的入門工作，稍後我們再多談一些。

社群分享優化：每個網站都該有的新 Meta Tag

很多人都覺得 meta 已經沒有什麼作用了，但是我們都知道社群流量對一個內容網站來說有著舉足輕重的影響力，而 meta tag 正好可以幫助網站管理者在網址被分享時呈現指定的網頁敘述、文字以及圖片，藉此提供對社群讀者來說比較友善的連結貼文(尤其是臉書)。

要做到這個效果，我們需要引用一個新的屬性「property」以及下列的幾種參數：

• og:title = 被分享時要呈現的網頁標題

• og:url = 被分享時要呈現的網址

• og:description = 被分享時要呈現的網頁敘述

• og:image = 被分享時要呈現的網頁視覺圖片

• og:type =用來補充說明這是一篇文章(article)或者一個網站(website)

詳細語法如下：

<meta property="og:title" content="標題"/>

<meta property="og:url" content="http://www.12345.com/" />

<meta property="og:description" content="這是一個範例" />

<meta property="og:image" content="http://12345.com/漂亮的圖片.jpg" />

<meta property="og:type" content="文章" />

Social meta tags 已經獲得 google+、LinkedIn、Facebook 以及 Twitter 等主要社群平台的支援，假如想要用於 Twitter 的話，則還需要一些小小的變化，像是把 og 換成 Twitter，如下例：

• twitter:card = Twitter Card 類別

• twitter:title = 文章標題

• twitter:url = 文章 URL 位置

• twitter:description = 網頁描述

• twitter:image:src = 圖片 URL 位置