# meta 和 Open Graph Protocol
###### tags: `HTML`

<title>網站標題</title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="">
<meta name="copyright" content="">

<!-- Open Graph Protocol-->
<meta itemprop="name" content="g+:網站標題">
<meta itemprop="image" content="g+:絕對路徑.圖檔.jpg">
<meta itemprop="description" content="g+:網頁描述">
<meta property="og:title" content="fb:網站內頁標題">
<meta property="og:type" content="website">
<meta property="og:url" content="fb:網址">
<meta property="og:site_name" content="fb:網站標題">
<meta property="og:description" content="fb:網站說明文字">
<meta property="og:image" content="fb:絕對路徑.圖檔.jpg">
<meta property="og:image:width" content="560">
<meta property="og:image:height" content="560">

### 請注意，上線前要 ***改內容*** 和 ***解開註解***。

因為沒資料才註解起來，但是上線前，要把相關內容都改好，然後才上線。
< title> 和 < meta description>，應該配合不同單元，寫不一樣的內容。
全站每一頁都不一樣，搜尋引擎的比分越高。

有些內容可能會需要用程式來套。

---

### < title> 限60位元，含空白。中文約25字內
寫法︰單元名稱 - 網站名稱 - 標語
例︰「側背包/斜背包/包包提袋| Pinkoi | 亞洲領先設計購物網站」

寫法︰標語 - 網站名稱
例︰「如果你是有無薪假、失業危機的職場中年人，怎麼自救？－劉潤專欄｜商業周刊」

### < meta description> 限160字元，含空白。中文約80字內
寫法︰越前面越重點，搜尋引擎的比分越高，所以要一開始就破題。
例︰「羅技G系列產品精緻打造每一個微小細節，為您提供戰無不勝的遊戲裝備，包括滑鼠、鍵盤、耳機麥克風、賽車方向盤和控制器。遊戲是我們的熱情所在。」

### < meta keywords> 不建議寫，直接空白即可
若一定要寫，限3組，用","隔開。

### < meta author>
寫客戶網站名稱，可充當一次關鍵字

### < meta copyright>
寫客戶網站名稱，可充當一次關鍵字

---
### Open Graph Protocol

<meta property="og:title" content="fb:網站內頁標題">
<meta property="og:type" content="website">
<meta property="og:url" content="fb:網址">
<meta property="og:site_name" content="fb:網站標題">
<meta property="og:description" content="fb:網站說明文字">
<meta property="og:image" content="fb:絕對路徑.圖檔.jpg">
<meta property="og:image:width" content="560">
<meta property="og:image:height" content="560">

請填寫相關內容，"fb:"或"g+:"不用留著，只是提醒用途而已。
< title> 和 < meta description>，應該配合不同單元，寫不一樣的內容。
全站每一頁都不一樣，搜尋引擎的比分越高。

### ogimage
ogimage.jpg 我都有做，放在跟目錄下
習慣上會用絕對路徑來寫，所以要等有網址了才能寫

不同單元也可以有不同圖，560 * 560 是建議尺寸
也可以不寫ogimage，系統會抓第一張圖或最大的圖來用

og:url 要帶有 http:// 或 https://

### chrome預覽外掛

想知道寫出來會長成怎樣，chrome可以裝這個外掛 **Open Graph Preview**
https://chrome.google.com/webstore/detail/open-graph-preview/ehaigphokkgebnmdiicabhjhddkaekgh

---

#### g+可刪可不刪
g+已被google停用，不過留著無妨

<meta itemprop="name" content="g+:網站標題">
<meta itemprop="image" content="g+:絕對路徑.圖檔.jpg">
<meta itemprop="description" content="g+:網頁描述">

---

## 注意

若上線後，Open Graph Preview 有改動，
facebook中的分享紀錄，是不會即時更新的，需手動處理

https://developers.facebook.com/tools/debug/

---

## 參考
https://ogp.me/

Meta Title Description 怎麼寫？別小看標題、摘要，SEO老司機就是你！ | awoo
https://www.awoo.com.tw/blog/meta-title-description/

網站 SEO優化《第一篇》Title Tag 的重要性與寫法 — SEO優化| Jeffrey Talks
https://medium.com/@jeffreywang1183/seo-title-tag-f5d5e4f52c12