SEO小常識 : JSON-LD 是什麼? part 1

有沒有常常在Google搜尋結果上面常常看到不一樣的選項?

2024年5月22日
html portfolio seo
SEO小常識 : JSON-LD 是什麼? part 1

JSON-LD

JSON-LD 是 Google 推薦的結構化資料格式。

他可以藉由這個格式來優化搜尋引擎，來讓你的網站更容易被搜尋。

比如目前這個網頁的JSON-LD就長這樣

<script type="application/ld+json">
      {
        "@context": "https://schema.org",
        "@type": "BlogPosting",
        "mainEntityOfPage": {
          "@type": "WebPage",
          "@id": "http://localhost:4321/blog/json-ld-1.html"
        },
        "headline": "SEO小常識 : JSON-LD 是什麼? part 1",
        "description": "有沒有常常在Google搜尋結果上面常常看到不一樣的選項?",
        "image": "content/blogs/images/jsonld1-1.webp?origWidth=719&origHeight=169&origFormat=webp",
        "author": {
          "@type": "Person",
          "name": "RongHao Tsai",
          "url": "/author/ronghao-tsai"
        },
        "datePublished": "Wed May 22 2024 08:00:00 GMT+0800 (Taipei Standard Time)"
      }
</script>

JSON-LD 通常要被塞在<script type="application/ld+json"> </script>裡面。

然後照著 Scheme 的格式去做，那當然，因為太多格式了．

通常常用的就只有幾個格式，那本篇文章底部有一個網站是jsonld的產生器，只要造著產生就可以了，非常方便．

有那個產生器真的是懶人的福音，我是沒有精力看完所有的scheme

既然有優化到，那具體是優化了哪些？

最常見

  1. 商品 商品1

  2. 新聞 商品2

  3. 人物 商品3

還有很多，但是我想要的就是第一個。

@context

這是一個非常重要的屬性，這告訴網站跟搜尋引擎你的格式化資料要怎麼被理解

那通常都用 https://schema.org 這個格式

"@context": "https://schema.org",

@type

在設定完@context之後，就可以開始設定@type了

@type可以讓我們讓搜尋引擎知道該怎麼呈現我們的網站在Google搜尋結果上面。

比如用商品的方式呈現，或是以新聞的方式呈現

重點來了，好用的網站

  1. Rank Ranger
  2. Technical SEO

如果你沒有寫程式的能力，或是想直接產出JSON-LD的格式，可以參考這個網站來產生JSON-LD

那Ronghao我是先用這個網站產出我想要的格式

然後再用Typescript來寫出一個產出JSON-LD的程式

畢竟 我是一個超懶的人嘛．哈哈哈哈

Thank you for reading, I hope you like it. Here is the link to my website

感謝您的觀看，希望對您有幫助． 如果希望找我合作的話，點擊這裡可以連結到我的網站

Feel free to ask questions and add any other recommendation you think might be useful ⚡️