iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 15
1
自我挑戰組

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

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

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

今天在忙時才想到.... 上回的我切版後,那頁面上的細節都沒設定到ㄟ!
那就一起分享一下,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 展示


講到head的設定,真的非常多!
有時都覺得網頁切好版,再符合瀏覽器需求外,其實在設定這些小細節才是後續收工前最麻煩的小事!但又是網站SEO,企劃端必要求的大大大大事!
如果各位還想深探相關設定,可參考我例的幾則參考資料啦

參考資料:


上一篇
[蛻變事實/D14] 設計師勇闖前端城-( SASS & SCSS 這怕怕的"程式鬼影"在哪兒!-P1)
下一篇
[蛻變事實/D16] 設計師勇闖前端城-(SASS & SCSS 這怕怕的"程式鬼影"在哪兒?-P2 )
系列文
蛻變事實-UI設計師勇闖前端城35

尚未有邦友留言

立即登入留言