[HTML] meta Tag 的使用相關

前陣子研究各家網頁的時候有發現，每個網頁的head裡面塞了相當多的meta Tag，一直不了解在做甚麼的，之前學到的也只有設定編碼而已，就像下面：

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

看w3schools.com時提到的也只有大概的功能，例如：

• Metadata不會顯示於網頁上，但是會被機器解析(??)
• 提供頁面訊息，針對搜尋引擎的描述和關鍵字
• 可以設定Browsers如呵顯示內容或者重載頁面
• 使用其他web services

Example 1 - Define keywords for search engines:

<meta name="keywords" content="HTML,CSS,XML,XHTML,JavaScript">

Example 2 - Define a description of your web page:

<meta name="description" content="Free Web tutorials on HTML and CSS">

Example 3 - Define the author of a page:

<meta name="author" content="Hege Refsnes">

Example 4 - Refresh document every 30 seconds:

<meta http-equiv="refresh" content="30">
( 好奇為甚麼秒數不是使用ms )

Attributes

Attribute	Value	Description
charset	character_set	Specifies the character encodeing for the HTML document
content	text	Gives the value associated with the http-equiv or name attribute
http-equiv	content-type default-style refresh	Provides an HTTP header for the information/value of the content attribute
name	application-name author description generator keywords	specifies a name for the metadata
scheme	format/URI	Not supported in HTML5. Specifies a cheme to be used to interpret the value of the content attribute

其他基本用法：http://www.maya.com.tw/news805.php?id=137

其實這不是我要的東西，像是在奇摩程式碼可以看到的：

設定了一些twitter的東西。

搜尋關於Twitter Card就會有相關文章，以下來源：
How do I add Twitter Card META Tags to my Products?

詳細介紹我就不多說了，可以直接看上面連結。
想要使用TwitterCard功能必須加入下面code：

<!--TWITTER CARD -->
<meta name="twitter:card" content="product">
<meta name="twitter:site" content="@twitter">
<meta name="twitter:creator" content="@twitter">
<meta name="twitter:title" content="[TITLE]">
<meta name="twitter:description" content="[description]">
<meta name="twitter:image" content="[product_image]">
<meta name="twitter:data1" content="Price">
<meta name="twitter:label1" content="[price]">
<meta name="twitter:data2" content="Shop">
<meta name="twitter:label2" content="[store_url]">

最後顯示的樣子是：

Yahoo設計當在Twitter上分享連結時的標題及圖片。當然，Facebook也會有。
以下來源：Blackie的失敗筆記
文章內也有提到關於Google+的設定。

<!-- for Google -->
<meta name="description" content="test" >
<meta name="keywords" content="test" >
<meta name="author" content="test" >
<meta name="copyright" content="test" >
<meta name="application-name" content="test" >

<!-- for Facebook -->    
<meta property="og:title" content="test" >
<meta property="og:type" content="article" >
<meta property="og:description" content="test" >
<meta property="og:image" content="http://images.uncyc.org/zh-tw/thumb/1/14/Hello_Loser.jpg/180px-Hello_Loser.jpg" >
<meta property="og:url" content="http://test.com.tw" >

<!-- for Twitter -->
<meta name="twitter:card" content="summary" >
<meta name="twitter:title" content="test" >
<meta name="twitter:description" content="test" >
<meta name="twitter:image" content="" >

Facebook有提供Debug可以幫助檢測網址的meta設定是否有問題，相當方便。
至於其他是否有提供Debug我就不清楚了，還要再研究一下。

其他關於Twitter Card的文章：
Toomore Blog