# DAY16 - head 區域進階資料設定 ### `<head>` ... `<head/>` 中間還有很多可以被設定的項目: - 認識以下標籤吧： #### 常用 1. title - 網站顯示標題。 ``` <title>練習用網站</title> ``` ![](https://i.imgur.com/TDnlHkK.png) --- #### 常用 2. 分頁籤 logo 圖: - yahoo 這個 logo ，副檔名為 ico: 基本資訊: 寬高為 `32*32` ![](https://i.imgur.com/uBM31xp.png) ``` <link rel="shortcut icon" href="https://s.yimg.com/rz/l/favicon.ico" /> ``` --- #### 常用 3. 描述網站基本資訊: - meta / og: description 打開網頁，右鍵:檢視網頁原始碼可參考: ``` <meta property="og:description" content="描述網站所用" /> ``` ![](https://i.imgur.com/tq6xqWA.png) --- #### 4. 增加被使用者搜尋到的機會: - meta / keywords 裡面可設定一些**關鍵字**，輸入這些關鍵字，可以搜尋到該網站。 且可用 , 來隔開，這些都是權重前後順序。 ``` <meta name="keywords" content="練習用 , 新手教學 , 新手上路" /> ``` --- #### 5. og type / 設定到臉書上的標籤 - meta / og 這個標籤，主要針對 facebook 連結分享時會被設定的 ![](https://i.imgur.com/HFlrRot.png) --- #### 結語;補充: - 常用 head 語法補充資訊 ``` <head> <meta charset="UTF-8"> <title>HTML、CSS教學</title> <link rel="shortcut icon" href="favicon.ico"> <meta name="description" content="網站描述文字" /> <meta property="og:title" content="FB的標題" /> <meta property="og:description" content="FB的描述" /> <meta property="og:type" content="website" /> <meta property="og:url" content="FB上的網址" /> <meta property="og:image" content="FB的圖片" /> <link href="圖片路徑" rel="apple-touch-icon" /> <meta http-equiv="X-UA-Compatible" content="IE=Edge" /> <link rel="stylesheet" href="CSS檔案路徑"> <script type="text/javascript" src="JS檔案路徑"></script> </head> ``` ###### tags: `Re:0 前端工程師之路 - HTML CSS 篇章 / 進階篇`