就是愛尚生活 - 94i3 Life

 找回密碼
 免費註册

人氣: 3985|回復: 0

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

  [複製鏈接]
字體大小: 正常 放大

新浪微博達人勛

總積分排名︰1
簽到
1925
鮮花(66) 雞蛋(2)
累計在線
306679分鐘
發表於 2017-11-14 17:47:27 | 顯示全部樓層 |閱讀模式
  
0.jpg
  先前曾分享過網頁結構化資料的中文網站,從官網中各位應該對於結構化資料有了基本的認識,同時在官網中,也有詳細針對各類型的結構化資料有詳細的說明,但想必有不少朋友,在看完後卻不知該如何將網頁結構化資料導入到網頁中,其實在網頁結構化的標記,共有二種方式,一種是加入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官方的「結構化資料標記協助工具」平台中,先選擇要標記的類型,以及將要標記的網址,貼到下方的網址輸入框中,再按「開始標記」鈕。
1.jpg
Step2
接著左邊是來源區,將要標記的文字選擇起來,放開後,再選擇該文字的屬性。
2.jpg
Step3
當標記好時,右邊的欄位,就會顯示剛所標記的文字。
3.jpg
Step4
當有些無法透過選擇標記時,可點下方的「新增缺少標記」鈕。
4.jpg
Step5
再從下拉選單中,選擇要標記的屬性,以及屬性的內容,都弄好後,再按「儲存」。
5.jpg
Step6
當都標記好後,再按右上的「建立HTML」鈕。
6.jpg
Step7
預設會產出HTML的標記,這時點上方的微資料,再選擇「JSON」選項。
7.jpg
Step8
接著將下方的原始碼,貼到網頁的</head>上方,而只限於靜態頁面,因此當有十頁的話,從需重覆1~8,依序的將碼貼到各個HTML頁面中,這樣就可完成結構化資料的標記啦!
8.jpg
Step9
若是使用WordPress的朋友,梅干就利用,剛所產生的碼,修改成WordPress專用的,因此只需將以下的原始碼,一樣貼到佈景主題的</head>結尾前就可以了。
WordPress 文章類型的結構化資料碼:
  1. <!-- 由 Google 結構化資料標記協助工具產生的 JSON-LD 標記。 -->
  2. <script type="application/ld+json">
  3. {
  4.   "@context" : "http://schema.org",
  5.   "@type" : "Article",
  6.   "name" : "<?php the_title(); ?>",
  7.   "author" : {
  8.   "@type" : "Person",
  9.   "name" : "<?php $author_id=$post->post_author; ?><?php the_author_meta( 'user_nicename' , $author_id );?>"
  10.   },
  11.   "datePublished" : "<?php the_time('Y-m-d') ?>",
  12.   "image" : "<?php $thumbnail = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID),'lage'); echo $thumbnail[0];?>",
  13.   "url" : "<?php the_permalink() ?>"
  14. }
  15. </script>
複製代碼
9.jpg
Step10
貼完後,儲存並清除暫存,重新整理頁面,再檢視原始碼,就會看到剛所建立好的結構化資料啦!
10.jpg
梅干


就是愛尚生活 - 94i3Life - 歡迎您 加入 !

回復 鮮花(66) 雞蛋(2)論壇版權

使用道具 舉報

您需要登錄後才可以回帖 登錄 | 免費註册 | 新浪微博登陸

本版積分規則


快速回復 返回列表 聯繫我們 搜索

QQ|關于我們|聯絡我們|就是愛尚生活 - 94i3 Life |簡體中文

GMT+8, 2017-11-24 12:52 AM

Powered by 就是愛尚 - 94i3.tw - X3.2

© 2007-2017 愛上誠信。愛上精緻。愛上專業。愛上時尚。愛上分享

94i3就是愛尚是一個經驗分享平台,網友均可以在94i3免費互相學習別人分享之經驗。
※本站只提供空間,網友自由發表使用,也請會員網友尊重論壇規則論壇注意事項,本網站內容均從網路上收集或網友們提供,其內容及言論的完整性以及正確性並不代表本站立場,本站不負任何法律責任,均與本站無關。倘若文章、圖片或是內容言論等有任何問題,請聯絡我們,我們將會第一時間優先處理或刪除。

快速回復 返回頂部 返回列表