Day13：小事之 HTML viewport 與 meta tag

2018 iT 邦幫忙鐵人賽

DAY 13

Modern Web

前端路上那些重要與不重要的小事系列第 13 篇

2018鐵人賽 web html meta 好想工作室

小艾 ( Cami )

團隊好想工作室第一屆鐵人賽

2018-01-01 19:49:56

25221 瀏覽

前面為了講 dir 岔太遠了，再回來 HTML 上面繼續說吧～
今天要介紹的是 meta。

HTML meta tag 的功能是用來提供網頁資訊給瀏覽器、搜尋引擎了解，也就是說 meta tag 的內容並不會直接顯示在網頁上，meta tag 通常用於指定頁面描述、關鍵字、作者等等的資訊。而瀏覽者可以透過檢視原始碼看到 meta tag 的內容。

HTML5引入了一種讓網頁設計師通過標籤控制用戶的 viewport (可見區域)的方法。viewport 隨著設備的不同而變化，而且在手機上比在電腦屏幕上更小。(如下)

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

Viewport 屬性說明

屬性	說明
width	設定畫面寬度
height	設定畫面高度
initial-scale	設定畫面的初始縮放比例
minimum-scale	設定畫面的最小縮放比例
maximum-scale	設定畫面的最大縮放比例
user-scalable	設定是否允許使用者改變縮放比例

width=device-width

因為目前手機尺寸非常多，因此，我們就只要設定為 width=device-width 就可以自動符合所有不同手機螢幕他們自己的預設最佳解析度。

initial-scale=1

設定手機螢幕畫面的初始縮放比例為 100%。

user-scalable=no

有時候網站會有特殊設定，或者業主有指定不允許使用者改變縮放比例，則會將值設為 no。

HTML meta tag 基本語法與常用屬性

因為 meta 是給瀏覽器、搜尋引擎看的，因此在 SEO 裡頭 meta 標籤滿重要的，這也是要告訴搜尋引擎和社群網站，你的網站主旨是什麼，作者是誰，分享的縮圖是什麼...等等的資訊。

接下來看看一些常用的 meta 標籤。

`<meta charset="UTF-8">`

這是後來 HTML5 支援的語法，相當簡潔，用來告訴瀏覽器網頁的編碼，而早期 HTML4.01 的寫法如下：

<meta http-equiv="屬性值" content="內容">

屬性值常見有三種，分別為 content-type、default-style、refresh，其中 content-type 用來設定網頁編碼、default-style 指定要使用的樣式表、refresh 則用來設定網頁自動刷新的間隔時間，無論是使用哪一種屬性值，都必須搭配一個 content，來告訴瀏覽器內容是什麼，整個 HTML meta http-equiv 必須寫在 HTML head 的區域內，三種屬性可以寫在同一個網頁內。[2]

要注意的是，要小心使用 refresh 因為會無法通過 W3C 的無障礙。

<head>
    <title>這是網頁標題</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta http-equiv="refresh" content="30">
</head>

`<meta name="" content="">`

常用的 meta name 的屬性值

語法	說明
meta name="author" content="作者姓名"	記錄網頁的作者名稱
meta name="description" content="網頁簡短描述"	用來寫網頁的簡短描述。
meta name="generator" content="編輯器名稱"	用來記錄網頁編輯器名稱
meta name="keywords" content="網頁關鍵字"	用來放置網頁關鍵字。
meta name="distribution" content="網頁發佈地區"	用來記錄網頁的發佈地區
不過最多人用的大概只有 description 跟 keywords。

`<meta property="og:" content="">` 用於 Facebook

在台灣最多人使用的社群之一是 Facebook，因此通常多數網站都會加上下面的 meta 值。

常用於 facebook 的屬性值

<meta property="og:title" content="標題"/>
<meta property="og:type" content="類型，例如：article"/>
<meta property="og:url" content="網址"/>
<meta property="og:image" content="要顯示的縮圖網址或路徑"/>
<meta property="og:site_name" content="公司名稱、網站名稱"/>
<meta property="og:description" content="網頁簡短描述"/>

facebook 和 google plus、twitter 使用的 meta 標籤[4]

除了 facebook，google plus、twitter 也都有各自使用的標籤，如下：

<!-- Update your html tag to include the itemscope and itemtype attributes. -->
<html itemscope itemtype="http://schema.org/Article">

<!-- Place this data between the <head> tags of your website -->
<title>Page Title. Maximum length 60-70 characters</title>
<meta name="description" content="Page description. No longer than 155 characters." />

<!-- Schema.org markup for Google+ -->
<meta itemprop="name" content="The Name or Title Here">
<meta itemprop="description" content="This is the page description">
<meta itemprop="image" content="http://www.example.com/image.jpg">

<!-- Twitter Card data -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@publisher_handle">
<meta name="twitter:title" content="Page Title">
<meta name="twitter:description" content="Page description less than 200 characters">
<meta name="twitter:creator" content="@author_handle">
<!-- Twitter summary card with large image must be at least 280x150px -->
<meta name="twitter:image:src" content="http://www.example.com/image.jpg">

<!-- Open Graph data -->
<meta property="og:title" content="Title Here" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://www.example.com/" />
<meta property="og:image" content="http://example.com/image.jpg" />
<meta property="og:description" content="Description Here" />
<meta property="og:site_name" content="Site Name, i.e. Moz" />
<meta property="article:published_time" content="2013-09-17T05:59:00+01:00" />
<meta property="article:modified_time" content="2013-09-16T19:08:47+01:00" />
<meta property="article:section" content="Article Section" />
<meta property="article:tag" content="Article Tag" />
<meta property="fb:admins" content="Facebook numberic ID" />

更完整的資訊，可以參考這裡

參考資料：
[1] https://www.w3schools.com/tags/tag_meta.asp
[2] https://www.w3schools.com/tags/att_meta_http_equiv.asp
[3] https://www.w3schools.com/tags/att_meta_name.asp
[4] https://moz.com/blog/meta-data-templates-123