1. Viewport

這是在HTML5引入的一種可以讓網頁頁面內容自動適應不同裝置大小的聲明

下圖為常見的meta viewport寫法

2. Charset

告訴網頁解讀編碼的方式

以我們使用的中文

在比較古老的網頁會使用big-5

而現在都是用UTF-8

最常見的寫法如下

如果沒有使用，在瀏覽器本身閱讀不了中文的編譯就會出現亂碼

3. http-equiv

這是一個告訴瀏覽器訊息的一個寫法

第一個 http-equiv是參數，後面content是參數變量

第一個參數有Expire、Pragma、Refresh、Set-Cookie、Window-target、content-Type

第二個參數變量就是根據第一個參數選擇做使用

一個最簡單的用法

refresh就是重新整理 content 他有兩個參數 第一個是時間 2 = 2秒 第二個是url

整個作用就是頁面載入完成過兩秒會自動刷新進入url

–

而在沒有其他需求的情況下

還是要打以下這串

X-UA-Compatible是設定IE以特定版本的標準呈現

content就是指定的版本 這邊寫 IE = edge 就是什麼版本的IE就用什麼版本的標準

4. Description

description是對網頁的一個簡短的形容

我們可以常常看到網頁搜尋完，除了標題連結，底下還會有一些敘述如圖

我們進到網頁打開檢查就可以發現它就是meta tag裡面的description

由此可知，這個內容會影響到搜尋的結果

這也是和大家常聽到的SEO優化有關係

而要怎麼將內容寫得更容易被搜尋到，又是另一門學問了

這邊先不探討這個問題

那description是一定要加嗎?

其實不一定

對搜尋比較好的兩個方式

1. 寫一段並非複製內文的描述
2. 不寫description，讓google自行生成

所以如果將內文複製到description可能反而讓能見度更低

所以如果沒有好的description還是讓google自動生成是比較保險的

5. Canonical

canonical是在同一個網站頁面擁有多個網址的時候

例如 abc.com和123.com是同一個網頁

我們可以給搜尋引擎一個標準的網址假設是abc.com

意思就是當搜尋引擎搜尋到123.com時會當作是abc.com

因為搜尋引擎會懲罰兩個一樣內容但網址不同的網站

所以在這種情況會需要加上這個tag

6. Robot

robot是可以決定是否要讓搜尋引擎索引的tag

他有兩個參數 noindex、nofollow

noindex 為針對有這個tag的頁面，不讓搜尋引擎索引到這個頁面的內容

nofollow則是不讓搜尋引擎檢索該頁面連出去的連結

nofollow這個用途比較常見的就是防止別人在你的論壇貼網址宣傳，利用搜尋引擎的機制透過你的論壇可以索引到別人貼的網址

7. Og

og完整名字叫做open graph

他是屬於社群相關的tag

用在網頁分享至FB、LINE等社交軟體上的呈內容

這邊繼續以這個網站作範例

把這個網站分享到LINE他所對應的title、description、image等

8. Keywords

在過去keywords原本是幫助搜尋的，但在2009年9月的時候Google已經不再讓這個功能幫助排名了

原因是遭到不當濫用(Ex: 寫和網頁無關的keywords、利用別人網站的keywords)