跳到主要內容區塊

Microdata的應用

Microdata的應用

圖1:Google搜尋結果具有breadcrumb標記的示意圖

有沒有想過我們在搜尋引擎搜尋的時候,如果搜尋結果能直接告訴我們目前找到的資訊是位於網站的哪個頁面,是不是更能直覺判斷這是不是我們想要的內容呢?

以相同的關鍵字搜尋,被找到符合條件的各個網頁,在搜尋結果頁顯示時的內容項目可能不大相同,會有這樣的差別,主要因為搜尋引擎爬取網站的資訊時,對於網頁內容的辨識及分類程度。一般在Google搜尋結果頁上,主要顯示的內容有標題(title)、網址(url)、摘要(Snippet)[1],幫助使用者判斷是否是想要尋找的資訊內容。如果網頁有加入Microdata的標記,那在搜尋結果的摘要片段內容就會更加豐富。下圖是麵包屑(breadcrumb)示意,為Microdata的應用之一。

一般搜尋引擎與網頁內容的關係,大都是泛泛之交,就是知道網頁叫甚麼、在哪裡,以及搜尋引擎對網頁片面的主觀認識,對於網頁內涵有甚麼特色就全無所知了。那網頁要怎麼和搜尋引擎變成好朋友呢?其實,這需要靠網頁本身把自己介紹推銷出去,要跟搜尋引擎說我這裡有一些你會感興趣的東西,如此搜尋引擎就會更加了解網頁內涵,也能將這些內涵跟搜尋的使用者介紹關於網頁更多的資訊。

網頁要如何介紹自己讓搜尋引擎可以更加認識呢,這就必須透過Microdata。在這裡Microdata的用意就是用來告訴搜尋引擎{這個頁面資訊中有特定的電影、地點、人物或影片等這類的訊息},實作上是將這些共通的資訊描述性標記,結合至網頁HTML中,提供給搜尋引擎來爬取而系統性地加以辨識分類。

Microdata由 Schema.org[2](成員有Google、Bing、Yahoo)推動,目的在於推動結構化資料,相同的標記規範有W3C的RDF(Resource Description Framework)、JSON-LD。美國政府digitalgov團隊基於 Schema.org的標準,定義政府機關常見的文章(Article)與活動(Event)的內容模型。

另外有Microformat,此為較早的標記格式,描述人物簡介(hCard)、行事曆(hCalendar)、評等(hReview)、食譜(hRecipe)等[3]。然而Microformat不如Microdata的可擴展性。Microformat利用html的class,Microdata則利用URI參照外部資源,可以自行定義字典檔,如美國digitalgov的做法。

Microformat與Microdata的標記差異如下[4]:

Microformat 範例:

    <dl class="vcard">
        <dt class=" fn">
            <a href="https: //ipoint-t ech.com" cl ass="url"> Hans  Broman</a>
        </dt>
        <dd class="title">SEO Strategist</dd>
        <dd  class=" adr">
           <span class="locality">Fort  Collins </span>, 
            ​<abbr title="Colorado" class="region">CO</abbr>
           <span class="postal-code">80525</span>
        </dd>
    </dl>

Microdata 範例:

    1.<dl itemscope itemtype= "http:// dat a-vocabulary.org/Person">

    2.<dt itemprop="name">
        <a href="https://ipoint-tech.co m" itemprop="url">Ha ns Broman</a>
      </dt>
    
    3.<dd itemprop="title">SEO Strategist</dd>
    
    4.<dd item prop="address" itemscope itemtype="http://d ata-vocabulary.org/Add ress">
        <span itemprop="locality">Fort COllins</span>, 
        <abbr title="Colorado" itemprop="r egion">CO</abbr>  
        <span itemprop="postal-code">80525</span>
      </dd>
    5.</dl>

面對這些結構化資料標記格式,要採用Microdata、RDFa、JSON-LD 哪一種,也需要先 做個選擇,雖然也可Microdata、RDFa兩種混合使用[5](範例如下),但是Google不建議如此做[6]。

•Microdata 範例:

    <p itemscope itemtype="http://sche m a.org/Person ">
        <span itemprop="name">John Doe</span> is his name.
    </p>

•RDFa (Lite)範例:

    <p typeof="schema:Person">
        <span property=" sch ema: name">John Doe</span> is his  name.      
    </p>

•Microdat a 與RDFa複合範例:

    <p itemscope itemtype="http : //schema.org/Person " typeof="schema:Person">
        <span itemprop="name" property="schema:name">John D oe</span> is his name.  
    </p>

Microdata、 RDFa是屬於結合在HTML元素內的標記方式,而JSON-LD是以< script >獨立於HTML外的格式,JSON-LD範例如下:

    <script type="application/ld+json">
    {
    
      "@context": " http://schema.org/",
      "@type": "Person",
      "name": "Rose Tyler",
      "sponsor":
       {
        "@type":  "Person",
        "name": " Sarah Jane Smith"
       }
    }
</script>

對於搜尋引擎的服務 而言,Microdata比較受主流搜尋引擎所青睞。

在HTML加入M icrodata,對於人類來說是容易閱讀及理解的,但是麻煩的是,可能需要調整HTML的寫法,一個不小心,可能就會沒有標記完整。目前網路上有提供線上的工具可以讓大家針對不同主題的內容,按照所訂的內容進行編寫。不過,要讓網站內容管理人員容易上稿的話,也可以依照Microdata的要求在網站管理系統上稿時就加入Microdata的標記功能。

Microdata產生工具網址: https://webcode.tools/microdata-generator

此工具提供Sch e ma.or g其中 的14類Mic rodata編 寫,包含彙整報價、彙整評等、文章、活動、音樂專輯、音樂播放清單、組織、人物、產品報價、食譜、餐廳、評分、軟體應用程式、影片等。

圖2:webcode.tools提供14類Microdata產生器

圖2:webcode.tools提供14類Microdata產生器

以活動(Event)為例,填寫欄位為活動名稱(itemprop="name")、摘要(Description)、開始日期(startDate)、結束日期(endDate)、活動地點(location)、地址(streetAddress)、所在城市(addressLocality)、地區(addressRegion),資料輸入後即於右方產生程式碼。

圖3:webcode.tools的活動(Event)類Microdata程式碼示意

圖3:webcode.tools的活動(Event)類Microdata程式碼示意

加了活動(Event)的Microdata的網頁,在搜尋結果顯示如下圖,多了這些資訊,對於想要參加路跑活動的網友而言,是不是更容易吸引直接點選進入頁面瀏覽並完成報名。

圖4:Google搜尋顯示活動(Event) Microdata示意圖

圖4:Google搜尋顯示活動(Event) Microdata示意圖

在網頁中加入Microdata之後,可以利用Google結構化資料測試工具[7],透過自動化檢測的結果,確認標記格式的完整性或多餘的標記。

隨者行動裝置的普及,民眾瀏覽網站的慣性,也隨之轉變,而且由於資訊更容易隨時隨地取得,政府網站除了過去強調搜尋外,未來須著重主動的推播,因此,美國聯邦法院IT專家 TYRUS MANUEL觀察未來政府機關將進入沒有網頁的概念,其說法並非政府機關從此不需再有網站,而是政府網站資訊內容必須做好結構化,以利於在各種平臺管道中自動渲染(如社群網站、主題相類似的網站等)傳遞訊息,同時讓網路爬蟲抓取更精確、完整的網頁內容。因此,推動政府網站JSON-LD或

Microdata網頁內容結構化是很重要的趨勢,也有助於open API的推動。

[1]https://support.google.com/websearch/answer/35891?hl=en

[2]http://schema.org/

[3] http://microformats.org/wiki/microformats

[4] https://ipoint-tech.com/microformat-vs-microdata/

[5] http://stackoverflow.com/questions/8957902/microdata-vs-rdfa/25888436#25888436

[6]https://support.google.com/webmasters/answer/3069489?hl=en

[7]https://search.google.com/structured-data/testing-tool

作者:力信恩 中華民國資訊軟體協會