WordPress

Google官方提供網頁「結構化資料標記」產生器,並套用到WordPress中

梅干2017/11/13
梅問題-透過Google官方提供「結構化資料標記」產生器,套用到WordPress中
  先前曾分享過網頁結構化資料的中文網站,從官網中各位應該對於結構化資料有了基本的認識,同時在官網中,也有詳細針對各類型的結構化資料有詳細的說明,但想必有不少朋友,在看完後卻不知該如何將網頁結構化資料導入到網頁中,其實在網頁結構化的標記,共有二種方式,一種是加入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/

Step1
首先,進到Google官方的「結構化資料標記協助工具」平台中,先選擇要標記的類型,以及將要標記的網址,貼到下方的網址輸入框中,再按「開始標記」鈕。
梅問題-透過Google官方提供「結構化資料標記」產生器,套用到WordPress中
Step2
接著左邊是來源區,將要標記的文字選擇起來,放開後,再選擇該文字的屬性。
梅問題-透過Google官方提供「結構化資料標記」產生器,套用到WordPress中
Step3
當標記好時,右邊的欄位,就會顯示剛所標記的文字。
梅問題-透過Google官方提供「結構化資料標記」產生器,套用到WordPress中
Step4
當有些無法透過選擇標記時,可點下方的「新增缺少標記」鈕。
梅問題-透過Google官方提供「結構化資料標記」產生器,套用到WordPress中
Step5
再從下拉選單中,選擇要標記的屬性,以及屬性的內容,都弄好後,再按「儲存」。
梅問題-透過Google官方提供「結構化資料標記」產生器,套用到WordPress中
Step6
當都標記好後,再按右上的「建立HTML」鈕。
梅問題-透過Google官方提供「結構化資料標記」產生器,套用到WordPress中
Step7
預設會產出HTML的標記,這時點上方的微資料,再選擇「JSON」選項。
梅問題-透過Google官方提供「結構化資料標記」產生器,套用到WordPress中
Step8
接著將下方的原始碼,貼到網頁的</head>上方,而只限於靜態頁面,因此當有十頁的話,從需重覆1~8,依序的將碼貼到各個HTML頁面中,這樣就可完成結構化資料的標記啦!
梅問題-透過Google官方提供「結構化資料標記」產生器,套用到WordPress中
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>
梅問題-透過Google官方提供「結構化資料標記」產生器,套用到WordPress中
Step10
貼完後,儲存並清除暫存,重新整理頁面,再檢視原始碼,就會看到剛所建立好的結構化資料啦!
梅問題-透過Google官方提供「結構化資料標記」產生器,套用到WordPress中
UAG軍規iPhone防摔殼