[ 筆記 ] 基礎 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

使用 node.js 寫出串接 API 的程式

使用 node.js 寫出串接 API 的程式

Vue3 XML Pretty Print與Theme呈現

Vue3 XML Pretty Print與Theme呈現

Command Line Interface (CLI) 超入門

Command Line Interface (CLI) 超入門


Comments