[蛻變事實／D15] 設計師勇闖前端城－(HTML檔上那些head的小細節）

2019 iT 邦幫忙鐵人賽

DAY 15

自我挑戰組

蛻變事實－UI設計師勇闖前端城系列第 15 篇

2019鐵人賽

凱特麻麻桑

2018-10-30 20:53:54

1170 瀏覽

分享至

上回切版練功，說好的要收拾收拾
也就是該裝飾的要裝飾、要調整的就調整一下！
有什麼可分享就在這裡記錄一下！

今天在忙時才想到.... 上回的我切版後，那頁面上的細節都沒設定到ㄟ！
那就一起分享一下，HTML檔上那head標籤內容是可以多有用又有多複雜啦～

如果開新html檔，再用Emmet快速鍵，就可以幫你生出以下的基本架構

<head>
  <!-- 網頁編碼 -->
  <meta charset="UTF-8">
  <!-- 頁面支援RWD的設定，想了解可參考最後的參考資料 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 設置IE兼容模式，想了解可參考最後的參考資料 -->
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <!-- 網頁名稱 -->
  <title>Document</title>
  <!-- CSS 引用方式 -->
  <link rel="stylesheet" href="styles.css">
</head>

head 裡的Meta 設定非常多種，但我們大部份會用到的就如：

<!-- 以前為了排名這一定要設定，但後來這項早已經被 Google 檢索器自動無視-->
<meta name="keywords" content="網頁關鍵字,網頁關鍵字">

<!-- 頁面的短描述(至多150個字符) -->
<meta name="description" content="網頁簡短描述">

<!-- 網站由FB分享時呈現的影像圖示 -->
<meta property="og:image" content="https://developer.cdn.mozilla.net/static/img/opengraph-logo.dc4e08e2f6af.png">
<meta property="og:description" content="The Mozilla Developer Network (MDN) provides
information about Open Web technologies including HTML, CSS, and APIs for both Web sites
and HTML5 Apps. It also documents Mozilla products, like Firefox OS.">
<meta property="og:title" content="Mozilla Developer Network">

網站裝飾的ICON

<!-- 網頁版 -->
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

<!-- iPhone、iTouch、ipad  -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="XXX.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="XXXpng">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="XXX.png">
<link rel="apple-touch-icon-precomposed" href="XXX.png">

夾一個前二天看到的線上工具：
網頁圖示favicon 展示