- 現在的網頁對於 SEO 非常重要，而在 SEO 中，也包含 meta 標籤
- HTML meta 標籤
- 提供網頁內容的資訊給瀏覽器或是搜尋引擎，例如網頁內容的描述、網頁重要關鍵字、網頁編碼等都是常用 meta 來標示的網頁資訊
- 網頁作者、網頁發佈時間、所使用的編輯器等較不重要資訊，透過 META TAG 來標示
- META 的功能僅是用來註明這些網頁資訊，提供給瀏覽器或搜尋引擎，並非寫給瀏覽網頁的 "人" 看的內容
- HTML meta 標籤寫在 head
<head>
<title>Demo Page</title>
<meta name="description" content="This is webpage's description">
<meta name="keywords" content="keyword 1, keyword 2">
</head>
| 語法 | 說明 |
<meta name="description" content="網頁簡短描述">
| 用來寫網頁的簡短描述，沒有給網站描述時，搜尋引擎通常會自動抓網頁的前25字做為網頁內容摘要，呈現在搜尋結果上。但有時網頁的前25字可能未必能表達文章的宗旨。 |
<meta name="keywords" content="網頁關鍵字">
| 用來放置網頁關鍵字，關鍵字須用逗號 (,) 隔開；最好不要有空白 |
<meta name="author" content="作者姓名">
| 記錄網頁的作者名稱 |
<meta name="generator" content="編輯器名稱">
| 用來記錄網頁編輯器名稱 |
<meta name="copyright" content="網頁版權">
| 用來標示網頁的版權或著作權聲明 |
<meta name="distribution" content="網頁發佈地區">
| 用來記錄網頁的發佈地區 |
- HTML meta name 網頁隱私
- 告知搜尋引擎該網頁是否可被搜尋，並且有幾個參數可作設定
- noindex：不要檢索
- nofollow：只檢索該頁，不檢索該頁裡的鏈結
- noindex, nofollow：搜尋引擎的小蜘蛛到這裡時，就會停止，不作任何的檢索
<meta name="robots" content="index,follow" />
<meta name="robots" content="noindex,follow" />
<meta name="robots" content="index,nofollow" />
<meta name="robots" content="noindex,nofollow" />
- HTML meta http-equiv 常用屬性
| 語法 | 說明 |
<meta http-equiv="Content-Type" content="text/html" charset="uft-8">
| 網頁內容的種類以及編碼 |
<meta http-equiv="Content-Language" content="zh-TW">
| 網頁所使用的語言種類 |
<meta http-equiv="Refresh" content="time">
| 自動更新網頁的時間 |
<meta http-equiv="Pragma" content="no-cache">
| 禁止瀏覽器用快取開啟網頁 |
<meta http-equiv="windows-Target" content="_top">
| 強制在單一視窗中顯示網頁 |
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
| 網頁相容模式，這部分若沒指定，會依照使用者所使用的瀏覽器的版本為主，因此可利用此語法跟瀏覽器說，用那個版本來作瀏覽 |
<meta http-equiv="imagetoolbar" content="no" />
| 關閉圖片選單，關閉滑鼠移到圖片上方，出現儲存圖片的相關控制選單 |
| 語法 | 說明 |
<meta charset="UTF-8">
| 設定網頁編碼，UTF-8 是萬國碼，隨著 UTF-8 萬國碼的普及，建議各位設計師在設計網頁時，盡量以 UTF-8 為主，畢竟這樣在較多國家不同版本的瀏覽器，比較不容易出錯 |
- HTML meta - Open Graph Tags
- 現在主流的社群網站平台都支援 Open Graph Tags (如：Facebook、Twitter、Google+、Pinterest、LinkedIn ... )
- The Open Graph protocol 可查詢所有資訊
| 語法 | 說明 |
<meta property="og:type" content="article" />
| 網頁內容的類型(有article, book, profile, website, music, video等類型，預設是 "website") |
<meta property="og:title" content="網頁標題或顯示內容標題" />
| 自訂網頁在Facebook, Google+等社群平台的顯示內容 |
<meta property="og:description" content="網頁內容的簡單說明" />
| 網頁內容的簡單說明、建議以二至四句話來說明 |
<meta property="og:image" content="http://Lyndonliu/Demo.png"/>
| 分享的縮圖(網頁的預覽圖) |
<meta property="og:url" content="http://Lyndonliu"/>
| 網頁的唯一網址canonical URL。如果您有手機版和電腦版二個網頁、將二個網頁的 og:url 設成電腦版的網址，兩個網頁的 facebook 按讚次數就可以加總統計在一起 |
| 語法 | 說明 |
<html itemscope itemtype="http://Lyndonliu/Article">
| 網頁類型 |
<meta itemprop="name" content="網頁標題或顯示內容標題">
| 自訂網頁在Facebook, Google+等社群平台的顯示內容 |
<meta itemprop="description" content="網頁內容的簡單說明">
| 透過社群分享中繼標籤，我們可以優化顯示在社群網站上的內容，包含標題、縮圖、說明文字、作者…等，還有其他豐富的訊息。這篇文章就要教你如何使用社群分享中繼標籤來自訂顯示在社群網站上的分享訊息 |
<meta itemprop="image" content="http://Lyndonliu/Demo.png">
| 分享的縮圖(網頁的預覽圖) |
- HTML meta - Twitter Card
- Twitter Card讓我們的網頁在 Twitter 的時候可以有較豐富的圖文資訊，依不同的 Card 類型還有影音、app下載連結等各種資訊。
- Twitter Card共有7種類型，其中以Summary Card 和 Photo Card較為常用
- 此外購物網站可以使用 Product Card 來優化商品的資訊
- Twitter Card Types 可查詢所有資訊
| 語法 | 說明 |
<meta name="twitter:card" content="summary" />
| twitter card type summary |
<meta name="twitter:site" content="@Lyndonliu118" />
| 填入 Twitter 帳號 |
<meta name="twitter:title" content="網頁標題或顯示內容標題" />
| 自訂網頁在Facebook, Google+等社群平台的顯示內容 |
<meta name="twitter:description" content="網頁內容的簡單說明" />
| 透過社群分享中繼標籤，我們可以優化顯示在社群網站上的內容，包含標題、縮圖、說明文字、作者…等，還有其他豐富的訊息。這篇文章就要教你如何使用社群分享中繼標籤來自訂顯示在社群網站上的分享訊息 |
<meta name="twitter:image" content="http://Lyndonliu/Demo.png" />
| 分享的縮圖(網頁的預覽圖)，圖片尺寸最小為 280×150 pixels |
<meta name="twitter:url" content="http://Lyndonliu" />
| |
沒有留言:
張貼留言