先前曾分享過網頁結構化資料的中文網站，從官網中各位應該對於結構化資料有了基本的認識，同時在官網中，也有詳細針對各類型的結構化資料有詳細的說明，但想必有不少朋友，在看完後卻不知該如何將網頁結構化資料導入到網頁中，其實在網頁結構化的標記，共有二種方式，一種是加入HTML標籤，另一種則是透過JSON，並搭配schema所提供的10大類，再依各大類的屬性，一一的將值正確的塞入到各屬性中，就可完成網頁結構化資料的標記了，但到底要如何作呢?

其實Google官方，就有提供網頁「結構化資料標記」產生器，同時無需任何IT背景，你也能將「結構化資料標記」導入到自己的網頁中，透過Step by Step的方式，讓你能正確標記出網頁的結構化，當透過這個線上「結構化資料標記」產生器，所產生出來的結構化資料標記，分別有HTML與JSON，因此建議採用JSON會比較方便些，不用再去修改原來的HTM標籤結構，當產生完的「結構化資料標記」範本後，只要再稍加修改，就可套用在WordPress中，因此現在就一塊來看看，如何使用Google官方所提供的「結構化資料標記」產生器，以及如何將「結構化資料標記」引用到WordPress中。

結構化資料標記

Step1
首先，進到Google官方的「結構化資料標記協助工具」平台中，先選擇要標記的類型，以及將要標記的網址，貼到下方的網址輸入框中，再按「開始標記」鈕。

Step2
接著左邊是來源區，將要標記的文字選擇起來，放開後，再選擇該文字的屬性。

Step3
當標記好時，右邊的欄位，就會顯示剛所標記的文字。

Step4
當有些無法透過選擇標記時，可點下方的「新增缺少標記」鈕。

Step5
再從下拉選單中，選擇要標記的屬性，以及屬性的內容，都弄好後，再按「儲存」。

Step6
當都標記好後，再按右上的「建立HTML」鈕。

Step7
預設會產出HTML的標記，這時點上方的微資料，再選擇「JSON」選項。

Step8
接著將下方的原始碼，貼到網頁的</head>上方，而只限於靜態頁面，因此當有十頁的話，從需重覆1~8，依序的將碼貼到各個HTML頁面中，這樣就可完成結構化資料的標記啦！

Step9
若是使用WordPress的朋友，梅干就利用，剛所產生的碼，修改成WordPress專用的，因此只需將以下的原始碼，一樣貼到佈景主題的</head>結尾前就可以了。

WordPress 文章類型的結構化資料碼：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

<!-- 由 Google 結構化資料標記協助工具產生的 JSON-LD 標記。 -->
<script type="application/ld+json">
{
  "@context" : "http://schema.org",
  "@type" : "Article",
  "name" : "<?php the_title(); ?>",
  "author" : {
  "@type" : "Person",
  "name" : "<?php $author_id=$post->post_author; ?><?php the_author_meta( 'user_nicename' , $author_id );?>"
  },
  "datePublished" : "<?php the_time('Y-m-d') ?>",
  "image" : "<?php $thumbnail = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID),'lage'); echo $thumbnail[0];?>",
  "url" : "<?php the_permalink() ?>"
}
</script>

Step10
貼完後，儲存並清除暫存，重新整理頁面，再檢視原始碼，就會看到剛所建立好的結構化資料啦！