كيفية إضافة المقتطفات المنسقة للمراجعات والتقييمات دون أي مكون إضافي؟ Google Structured Schema.org Microdata Markup

نشرت: 2020-04-21
كيفية إضافة المقتطفات المنسقة للمراجعات والتقييمات دون أي مكون إضافي؟ ترميز Google المهيكل Schema.org

هل تساءلت يومًا how and why يُظهر Google تصنيفًا لبعض منشورات المراجعة الخاصة في صفحة نتائج بحث Google (SERP)؟

سنناقش في هذا البرنامج التعليمي كيفية add rich snippet للمراجعة / التقييم في شكل schema.org بحيث يمكن لـ Google فهم التفاصيل حول مراجعتك وإظهارها في صفحة البحث.

Crunchify - موضوعات Genesis - صفحة Google مؤهلة لنتائج غنية

نتيجة الدفع المباشرة: https://crunchify.me/2VAUkTK. رابط مقتطف منسق.

قبل أن نبدأ ، دعنا نفهم ما هو schema.org؟

المخطط هو نوع من microdata التي تسهل على محركات بحث Google أو Bing تحليل المعلومات الموجودة على صفحات مدونتك وتفسيرها بشكل أكثر effectively . الفكرة هي مساعدة محركات البحث على فهم جميع البيانات structured format بحيث يعرض محرك البحث أيضًا بيانات النتائج ذات الصلة إلى المستخدمين النهائيين بناءً على استعلامات البحث.

هيا بنا نبدأ:

النقطة 1) كيف تضيف البيانات المنظمة إلى مدونتك على شكل schema.org؟

في Crunchify ، نستخدم Genesis Framework وهو يأتي افتراضيًا بجميع تنسيقات schema.org 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 ويجب أن تكون قادرًا على رؤية جميع البيانات الجزئية التفصيلية لمراجعتها. يمكنك التحقق من ذلك بنفسك. Here is a URL.

سيعمل هذا البرنامج التعليمي إذا كان لديك أي من الأسئلة التالية:

  • تمكين المقتطفات المنسقة للمراجعات والتقييمات
  • البيانات المنظمة للمراجعة
  • البيانات المنظمة للتقييم
  • إجمالي مولد مخطط التقييم
  • منشئ المخطط لـ "المراجعة" لبيانات schema.org الجزئية
  • منشئ مراجعة مقتطفات منسقة
  • المقتطف المنسق من Google للمراجعة
  • أداة معاينة المقتطفات المنسقة
  • مقتطف منسق لمنشور مدونة WordPress
  • وصفة لموقع المقتطفات المنسقة
Crunchify - genesis - مراجعة تفاصيل مخطط المقتطفات

الخطوة 4 دعنا نضيف مقتطف مراجعة Schema.org

فيما يلي رمز 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 بواسطة Crunchify - أفضل سمة لبيانات schema.org الجزئية

وهذا كل شيء. بمجرد إضافة الرمز أعلاه إلى منشور المدونة الخاص بك ، ارجع إلى 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 الخاصة بك.

مدونات سعيدة.