[ 筆記 ] 基礎 SEO 標籤 - meta、og、JSON-LD

#SEO

Posted by

krebikshaw on 2020-07-14

`<title>` 標題

title 會出現在
1. 搜尋結果
2. 瀏覽器標籤
3. 社群分享
建議中文保持在 30 個字元、英文 60 個字元以內。
Title tag 的寬度最大到 600 pixels
理想 title 寫法：
- 主要關鍵字 — 次要關鍵字 | 廠牌名稱
- [FE101] 前端基礎：HTML 與CSS | Lidemy 鋰學院

`<meta>` description 摘要

<meta name="description" content="...">
建議中文保持在 80 個字元、英文 160 個字元以內。
description 就是摘要，也就是搜尋列表標題底下的文字。（上圖藍色字部分）
Description 裡不要有雙引號
- 量都使用語言與數字(alphanumeric characters)，而不要有一些符號，如果一定放可以用 HTML entity。
好的 description 可以讓使用者更快速了解、此網頁內容是不是他需要的，找到「更精準」的 TA ，提高點擊率、降低跳出率，才是讓你的排名提高的關鍵。也就是說，description 吸引用戶點擊，點擊數才會影響排名。
- 如果網頁內容裡的關鍵字很多，不知道該怎麼下，其實也可以「不要下」，讓搜尋引擎去爬你的文章，如果有出現使用者的關鍵字，就會把那段標出來，出現在 description 上

`<meta>` og 社群相關 tag

og 全名為： Open Graph Protocol
og 適用於台灣人最常用的 facebook 跟 Line
og 就是給社群媒體分享的 meta ，跟上面的內容很像，一樣是有 title, description，比較特別且重要的是 image 屬性，也可以直接設定分享圖的寬高等等。

<head>
    <meta property="og:type" content="type" />  
    <meta property="og:title" content="site_title" />
    <meta property="og:description" content="site_description" />
    <meta property="og:image" content="site_image" />
    <meta property="og:url" content="site_url" />
    <meta property="og:site_name" content="site_name" />
</head>

如果想知道分享到社群的預覽樣貌，可以利用 Facebook debugger 進行偵錯，把網址貼上去，他就會說明 Facebook 抓取到的內容有哪些，呈現出來的分享結果會是怎樣。

( 有興趣了解更多的話， Facebook 官方文件：網站與行動應用程式的分享最佳作法說得很清楚，該如何優化你的 og tag )

JSON-LD

全名為 JSON for Linking Data
跟 meta 有點像，目的是用一個固定格式呈現網頁內容，讓機器更快速且精準的判讀內容。在搜尋列表中出現更多的資訊，進而吸引使用者點擊。
JSON-LD 即是 JSON 格式的結構化資料，簡單來說就是在描述這個網頁的型態及內容。Google 會去讀取網頁中這樣的結構化資料，並能針對不同的網頁型態做對應的搜尋結果呈現

圖片來源

有興趣可以看官方文件說明，想要測試可以使用 Google 提供的結構化資料測試工具。

參考資料：
網站 SEO優化《第一篇》Title Tag 的重要性與寫法
 網站 SEO優化《第二篇》Meta Description 的寫法 — SEO優化
 網站與社群連結常用的 SEO 中繼標籤

#SEO

krebikshaw

Related Posts

Comments