過去,搜尋引擎難以理解網站的內容屬性,這時就依靠結構化資料(structured data),這是Google、Yahoo、Bing等搜尋引擎根據schema.org制定的標記,共同的去支援。這些標記多半是關於網站內容的一些分類,麵包屑(breadcrumb)、文章(article)、活動(event)、影片(video)等等。

structureddata

當你網站有依照規範使用這些標記,就會有助於搜尋引擎理解網站的內容。最重要、也最有回饋感的是,會直接讓網站在搜尋結果顯示更不一樣,間接地幫助提高網站點擊率。google官方有非常詳盡的支援標籤,以及使用過後搜尋結果的變化。

接下來會分享些使用標籤的範例、心得。

google介紹 : google structured data info

google 支援標籤 : google support structured data

結構化標記語法

有三種語法可以使用,分別為JSON-LD(google推薦)、Microdata、RDFa,JSON-LD是javascript的語法類型,這只是javascript的資料所以不會顯示在畫面上,Microdata則是在html上標記,所以就需要依賴實際存在的html來加入,RDFa類似Microdata,是基於html5的標記,但語法與Microdata不大相同,但邏輯非常類似。

我個人是比較喜歡用JSON-LD的語法,因為比較簡潔好讀寫,看下面範例比較應該很好理解。google官方是表示三種方法並沒有差異,選擇方便使用的語法即可,但是提醒一下滿多屬性並不支援Microdata。

稍微介紹一下JSON資料的概念,大概就是 key -> value,key可以當作名稱,value則當作值。{ } 稱作為物件,相同一筆的資料都會包覆在這個符號內,[ ] 則是代表陣列,多筆資料的意思。

  • JSON-LD Course範例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <script type="application/ld+json">
    {
    "@context": "http://schema.org/",
    "@type": "schema:Course",
    "name": "The Data Scientist's Toolbox",
    "description": "In this course you will get an introduction
    to the main tools and ideas in the
    data scientist's toolbox...",
    "hasCourseInstance": {
    "@type": "CourseInstance",
    "courseMode": ["MOOC","online"],
    "endDate": "March 21",
    "startDate": "February 15"
    }
    }
    </script>
  • RDFa Course範例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    <body vocab="http://schema.org/">
    <main typeof="Course">
    <h1 property="name">The Data Scientist's Toolbox</h1>
    <h2>About this Course</h2>
    <p property="description">
    In this course you will get an introduction to the main tools and
    ideas in the data scientist's toolbox...
    </p>
    <div rel="hasCourseInstance" typeof="CourseInstance">
    <meta property="courseMode" content="MOOC" />
    <meta property="courseMode" content="online" />
    <h2>Session dates</h2>
    <span property="startDate">February 15</span> -
    <span property="endDate">March 21</span>
    </div>
    </main>
    </body>

最實用也最常用的莫過於麵包屑了,通常網站內容都會有不同的分類,例如說今天有某篇ga的文章歸類在marketing,那結構大概會是 marketing › ,俗稱麵包屑。再來來使用JSON-LD方法來標記。

首先使用@content來宣告使用結構化標記,再來以@type來使用標籤類型BreadcrumbList,再以陣列[] 來列出多筆,第一筆資料會是marketing,position代表排在第一位,name列上marketing,item則列上網址。以此類推往下增加下去,

  • JSON-LD breadcrumb
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    <script type="application/ld+json">
    {
    "@context": "http://schema.org",
    // use schema type BreadcrumbList
    "@type": "BreadcrumbList",
    // use array as list
    // key name is itemListElement
    "itemListElement": [{
    "@type": "ListItem",
    "position": 1,
    "name": "marketing",
    "item": "https://iandays.com/categories/marketing/"
    },{
    "@type": "ListItem",
    "position": 2,
    "name": "Google Analytics 工作階段介紹、定義",
    "item": "https://iandays.com/2018/07/30/gasession/index.html"
    }]
    }
    </script>

測試結構化資料

進入網站 google 測試結構化資料,點擊輸入程式碼片段,輸入剛剛那段JSON,點擊下方驗證後,就可以看到語法有沒有成功,如果有錯誤的話,上面會提供修正的方式。

structured data tool

之後再進入search console,提交網站索引或是sitemap,等待搜尋引擎更新索引就大功告成了。

structured breadcrumb

搜尋結果錨點 (非structured data)

最後再提供一個最近特別用到修改,下方的搜尋結果出現頁面內的錨點,原本blog頁面架構就有用id錨點),查閱結構化資料過後發現,並沒有錨點可以使用的功能,於是我針對搜尋結果有出現錨點的頁面都看過一次html。

1
<h2 id="#錨點名稱">{{content}}</h2>

發現都有相同概念,就是要當你搜尋結果要出現錨點,頁面上就必須要有實體連結可以點過去。於是我就做了頁面左邊的那個點擊scroll區塊,大約過了一週後搜尋結果就開始出現錨點。雖然常常一下只顯示麵包屑,一下又只顯示錨點…。

structured searchlink

  • 目錄範例
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    <div class="toc-article" id="toc">
    <div class="toc-title">文章目錄</div>
    <ol class="toc">
    <li class="toc-item toc-level-2">
    <a class="toc-link" href="#Google-analytics-設定事件">
    <span class="toc-text">Google analytics 設定事件</span>
    </a>
    </li>
    <li class="toc-item toc-level-2">
    <a class="toc-link" href="#實作測試">
    <span class="toc-text">實作測試</span>
    </a>
    </li>
    <li class="toc-item toc-level-2">
    <a class="toc-link" href="#ga-event產生器">
    <span class="toc-text">ga event產生器</span>
    </a>
    </li>
    ...
    </ol>
    </div>

心得

結構化資料出了大概3、4年了,突然想到search console有螢光筆工具,它可以直接畫記結構資料屬性,我在3年前有用過,完成但搜尋結果並沒任何變化。

剩下還有很多的標籤屬性(event、product、recipe、video、article等等),其實也沒有技術難度,就依照官方文件範例照著填入需要的資料就好了,唯一難處可能是缺資料XD。

再分享個最近實作結構化資料經驗,完成標記提交網站索引後,大概都要一週後才會漸漸地有變化。