• โฮมเพจ
  • บทความ
  • ทั่วไป
  • วิธีเพิ่ม Rich Snippets สำหรับรีวิวและการให้คะแนนโดยไม่ต้องใช้ปลั๊กอิน Google Structured Schema.org Microdata Markup

วิธีเพิ่ม Rich Snippets สำหรับรีวิวและการให้คะแนนโดยไม่ต้องใช้ปลั๊กอิน Google Structured Schema.org Microdata Markup

เผยแพร่แล้ว: 2020-04-21
วิธีเพิ่ม Rich Snippets สำหรับรีวิวและการให้คะแนนโดยไม่ต้องใช้ปลั๊กอิน มาร์กอัป Schema.org ที่มีโครงสร้างของ Google

คุณเคยสงสัยหรือไม่ how and why Google จึงแสดงการให้คะแนนสำหรับโพสต์บทวิจารณ์พิเศษบางรายการในหน้าผลการค้นหาของ Google (SERP)

ในบทช่วยสอนนี้ เราจะพูดถึงวิธี add rich snippet สำหรับบทวิจารณ์/การให้คะแนนในรูปแบบของ schema.org เพื่อให้ Google สามารถเข้าใจรายละเอียดเกี่ยวกับความเห็นของคุณและแสดงในหน้าค้นหา

Crunchify - ธีมปฐมกาล - Google Page มีสิทธิ์ได้รับผลการค้นหาที่เป็นสื่อสมบูรณ์

ชำระเงินผลสด: https://crunchify.me/2VAUKTK. ลิงก์ตัวอย่างข้อมูลสื่อสมบูรณ์

ก่อนที่เราจะเริ่ม เรามาทำความเข้าใจกันก่อนว่า schema.org คืออะไร?

สคีมาคือ microdata ประเภทหนึ่งที่ช่วยให้เครื่องมือค้นหาของ Google หรือ Bing สามารถแยกวิเคราะห์และตีความข้อมูลบนหน้าบล็อกของคุณได้ effectively มากขึ้น แนวคิดคือการช่วยให้เครื่องมือค้นหาเข้าใจข้อมูลทั้งหมดใน structured format เพื่อให้เครื่องมือค้นหาแสดงข้อมูลผลลัพธ์ที่เกี่ยวข้องกลับไปยังผู้ใช้ปลายทางตามคำค้นหา

มาเริ่มกันเลย:

จุดที่ 1) วิธีเพิ่มข้อมูลที่มีโครงสร้างลงในบล็อกของคุณในรูปแบบของ schema.org

ใน Crunchify เราใช้ Genesis Framework และโดยค่าเริ่มต้นจะมาพร้อมกับรูปแบบ schema.org microdata ทั้งหมด มันส่งออก microdata ในโค้ดของเว็บไซต์ของคุณ ฉันไม่ต้องเพิ่มอะไรเลย และนั่นคือความสวยงามของ Genesis Framework ยกเว้นตัวเลือก Review metadata ซึ่งเราจะ discuss below

จุดที่-2) จะตรวจสอบข้อมูลที่มีโครงสร้างของเว็บไซต์ได้อย่างไร

โดยค่าเริ่มต้น Google Search Console จะมีตัวเลือกในการดูข้อมูลที่มีโครงสร้าง ลองดูที่ไดอะแกรมด้านล่าง

Google Search Console - รายงานข้อมูลที่มีโครงสร้าง - Crunchify
ตรวจสอบข้อมูลที่มีโครงสร้าง Schema.org ทุกประเภทใน Google Search Console

หากต้องการดูข้อมูลนี้ คุณต้องเพิ่มเว็บไซต์/บล็อกใน Search Console เมื่อคุณยืนยันตัวตนของไซต์ของคุณแล้ว คุณอาจสามารถดูข้อมูลได้ทันที OR รอเป็นเวลาหนึ่งสัปดาห์เพื่อให้ข้อมูลนี้สร้างขึ้น automatically

จุดที่ 3 จะตรวจสอบได้อย่างไรว่าข้อมูลที่มีโครงสร้างของคุณถูกต้องหรือมีปัญหาใดๆ

  • ในคอลัมน์สุดท้ายเพิ่มเติมในแผนภาพด้านบน Items with Errors Google ยังมีเครื่องมือเพิ่มเติมที่เรียกว่าเครื่องมือทดสอบข้อมูลที่มีโครงสร้าง
  • เพียงไปที่นั่นแล้วคลิก Fetch URL
  • ระบุ URL และคลิกที่ FETCH & VALIDATE
  • ทางด้านขวา – คุณควรเห็นผลการตรวจสอบ schema.org
  • ในกรณีที่เกิดความล้มเหลวและ schema.org ไม่ดี – คุณควรเห็นข้อความสี แดง
เคล็ดลับเครื่องมือทดสอบข้อมูลที่มีโครงสร้างของ Google
ผลการทดสอบข้อมูลที่มีโครงสร้างสำหรับ Crunchify Post

Expand above Review section และคุณควรจะสามารถเห็น microdata โดยละเอียดทั้งหมดสำหรับการตรวจทานของคุณได้ คุณสามารถตรวจสอบได้ด้วยตัวเอง Here is a URL.

บทช่วยสอนนี้จะใช้ได้หากคุณมีคำถามใดๆ ด้านล่าง:

  • การเปิดใช้งาน Rich Snippets สำหรับคำวิจารณ์และการให้คะแนน
  • ข้อมูลที่มีโครงสร้างสำหรับการตรวจสอบ
  • ข้อมูลที่มีโครงสร้างสำหรับการให้คะแนน
  • ตัวสร้างสคีมาการให้คะแนนรวม
  • ผู้สร้างสคีมาสำหรับ microdata ของ 'ตรวจสอบ' 'ตรวจสอบ'
  • เครื่องมือสร้างรีวิวตัวอย่างข้อมูลสื่อสมบูรณ์
  • google rich snippet สำหรับรีวิว
  • เครื่องมือแสดงตัวอย่างตัวอย่างข้อมูลสื่อสมบูรณ์
  • Rich snippet for WordPress บล็อกโพสต์
  • สูตรสำหรับไซต์ตัวอย่างข้อมูลสื่อสมบูรณ์
Crunchify - กำเนิด - รายละเอียดสคีมารีวิว

ขั้นตอนที่ 4 มาเพิ่มรีวิว Schema.org snippet

นี่คือรหัส HTML ที่คุณต้องใส่ลงในแผงแก้ไขบทความของคุณภายใต้ TEXT section

1
2
3
4
5
6
7
8
9
10
< div class = "crunchify-rating" itemscope itemtype = "http://schema.org/Review" >
     < span itemprop = "itemReviewed" itemscope itemtype = "http://schema.org/Thing" style = "font-size: 14px;" > < a itemprop = "url" href = "https://crunchify.me/genesis" target = "_blank" > < span itemprop = "name" > < strong > Genesis WordPress Theme Framework Review < / strong > < / span > < / a > < / span >
     < p > < / p >
     < strong > Description : < / strong > < span itemprop = "description" > One of the best WordPress Theme Framework which we use on Crunchify . com . Default comes with Google ' s rich schema . org snippet microdata . < / span >
     < span itemprop = "author" itemscope itemtype = "http://schema.org/Person" > < strong > Written by : < / strong > < span itemprop = "name" > App Shah < / span > < / span >
     < span itemprop = "reviewRating" itemscope itemtype = "http://schema.org/Rating" > < strong > Rating : < / strong > < span itemprop = "ratingValue" > 5 < / span > out of < span itemprop = "bestRating" > 5 < / span > < / span >
     < span itemprop = "publisher" itemscope itemtype = "http://schema.org/Organization" >
         < meta itemprop = "name" content = "Crunchify, LLC." / >
     < / span >
< / div >

แก้ไขค่าตามนั้นและโค้ดด้านบนจะถูกแปลงเป็นวิดเจ็ตที่ดีด้วย CSS tricks ง่ายๆ ตามที่คุณเห็นในภาพด้านล่าง

URL พร้อมตัวอย่างการตรวจสอบแบบสด: https://crunchify.com/crunchify-co-moved-to-genesis-framework-thesis-vs-genesis/

Genesis Framework Review โดย Crunchify - ธีมที่ดีที่สุดสำหรับ schema.org microdata

และนั่นแหล่ะ เมื่อคุณเพิ่มโค้ดด้านบนในบล็อกโพสต์ของคุณแล้ว ให้กลับไปที่ Google Structured Data Validation tool อีกครั้งและตรวจสอบ URL ของโพสต์ :) อาจใช้เวลาถึงหนึ่ง week ในการอัปเดตโพสต์ของคุณใน SERP ตามอัลกอริทึมการรวบรวมข้อมูล

CSS ใดที่เราใช้บน Crunchify

บน Crunchify เราใช้ CSS ด้านล่าง เพียงเพิ่มโค้ดด้านล่างลงในไฟล์ style.css ของธีมของคุณ แก้ไขคุณสมบัติตามความต้องการของคุณ เท่านี้คุณก็เรียบร้อย

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
. crunchify - rating {
overflow : hidden ;
margin - bottom : 35px ;
border - radius : 3px ;
box - shadow : 0 0 2px 0 rgba ( 0 , 0 , 0 , . 12 ) , 0 2px 2px 0 rgba ( 0 , 0 , 0 , . 24 ) ;
font - size : 16px ;
color : #333;
padding : 30px 60px 5px ;
background : #fff;
border - left : 2px solid #157BDA;
}
. crunchify - rating : before {
content : "Rating" ! important ;
font - size : 16px ;
text - transform : uppercase ;
color : #fff;
float : left ;
margin : 2px 15px 15px 0 ;
background : #157BDA;
padding : 0px 20px ;
border - radius : 30px ;
}

ฉันจะเพิ่มไฟล์ CSS ด้านบนไปยังเพจที่เปิดใช้งาน AMP ได้อย่างไร

เพียงเพิ่มเนื้อหา CSS ด้านบนใต้ <head> ของหน้าเว็บของคุณภายใต้แท็ก HTML <style amp-custom>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
   < head >
     . . .
     <style amp-custom>
      /* any custom styles go here. */
.crunchify-rating {
overflow : hidden ;
margin-bottom : 35px ;
border-radius : 3px ;
box-shadow : 0 0 2px 0 rgba ( 0,0,0,.12 ) , 0 2px 2px 0 rgba ( 0,0,0,.24 ) ;
font-size : 16px ;
color : #333 ;
padding : 30px 60px 5px ;
background : #fff ;
border-left : 2px solid #157BDA ;
}
.crunchify-rating:before {
content : "Rating" !important ;
font-size : 16px ;
text-transform : uppercase ;
color : #fff ;
float : left ;
margin : 2px 15px 15px 0 ;
background : #157BDA ;
padding : 0px 20px ;
border-radius : 30px ;
}
     </style>
     . . .
   < / head >

โปรดแจ้งให้เราทราบหากคุณมีคำถามเพิ่มเติม

อย่าลืมรับ Genesis Framework Copy ของคุณ

มีความสุขบล็อก