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


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







Related Posts

[week 1] 版本控制 - Git 概念 & 基本指令

[week 1] 版本控制 - Git 概念 & 基本指令

《寫給所有人的運算思維入門》- 寫程式到底是在幹嘛?

《寫給所有人的運算思維入門》- 寫程式到底是在幹嘛?

Chapter 1 網路評估

Chapter 1 網路評估


Comments