---
# System prepended metadata

title: DAY16 - head 區域進階資料設定
tags: ['Re:0 前端工程師之路 - HTML CSS 篇章 / 進階篇']

---

# 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 篇章 / 進階篇`