先前曾分享過網頁結構化資料的中文網站，從官網中各位應該對於結構化資料有了基本的認識，同時在官網中，也有詳細針對各類型的結構化資料有詳細的說明，但想必有不少朋友，在看完後卻不知該如何將網頁結構化資料導入到網頁中，其實在網頁結構化的標記，共有二種方式，一種是加入HTML標籤，另一種則是透過JSON，並搭配schema所提供的10大類，再依各大類的屬性，一一的將值正確的塞入到各屬性中，就可完成網頁結構化資料的標記了，但到底要如何作呢?
其實Google官方，就有提供網頁「結構化資料標記」產生器，同時無需任何IT背景，你也能將「結構化資料標記」導入到自己的網頁中，透過Step by Step的方式，讓你能正確標記出網頁的結構化，當透過這個線上「結構化資料標記」產生器，所產生出來的結構化資料標記，分別有HTML與JSON，因此建議採用JSON會比較方便些，不用再去修改原來的HTM標籤結構，當產生完的「結構化資料標記」範本後，只要再稍加修改，就可套用在WordPress中，因此現在就一塊來看看，如何使用Google官方所提供的「結構化資料標記」產生器，以及如何將「結構化資料標記」引用到WordPress中。
結構化資料標記
網站名稱：結構化資料標記協助工具
連結網址：https://www.google.com/webmasters/markup-helper/u/0/
連結網址：https://www.google.com/webmasters/markup-helper/u/0/
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
貼完後，儲存並清除暫存，重新整理頁面，再檢視原始碼，就會看到剛所建立好的結構化資料啦！
