iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 13
2

前面為了講 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-typedefault-stylerefresh,其中 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


上一篇
Day12:小事之 HTML dir Attribute 與 CSS writing-mode 下篇
下一篇
Day14:小事之 HTML 語意化標籤 上篇
系列文
前端路上那些重要與不重要的小事30

尚未有邦友留言

立即登入留言