موتورهای جست و جو چطور صفحات رو میبینن؟

انسان ها خیلی راحت میتونن صفحات رو تشخیص بدن چون یاد گرفتیم که صفحات خاص ، شکل ظاهری خاصی هم دارن. به عنوان مثال وقتی عکس محصول رو کنار قیمت و دکمه افزودن به سبد خرید میبینیم ، متوجه میشیم که در مقابل ما یک صفحه محصول وجود داره. بر خلاف ما ، تشخیص نوع صفحات برای موتورهای جست و جو یکم متفاوته چون موتورهای جست و جو درک درستی از صفحات محصول ، دکمه های افزودن به سبد خرید و از این دست المان ها ندارن. اون ها فقط کد میبینن. این مورد دقیقا دلیل استفاده از داده های ساختاریافته رو برامون توجیه میکنه. همونطور که تو درس قبلی گفتیم ، داده های ساختاریافته ، فراداده هایی هستن که در یک صفحه وب ذخیره میشن و برای کاربر ، قابل مشاهده نیستن. دقیقا مثل مختصات GPS در یک تصویر.


نمونه کد داده های ساختاریافته

داده های ساختاریافته از یه سری کد تشکیل شدن. از دیدن کدها نترسید! من اینجام تا همه چیز رو با جزئیات همراه با افزونه اسنیپ | داده های ساختاریافته برای وردپرس ، برای شما توضیح بدم. با اسنیپ شما نیازی به خوندن یا نوشتن این کدها ندارید ولی بهتون توصیه میکنم ، برای درک بهتر نحوه کارکرد داده های ساختاریافته ، یه نگاهی بهشون بندازید 😊 

{
  "@context": "http://schema.org",
  "@type": "Product",
  "name": "snip - The Rich Snippets WordPress Plugin“,
  "offers": {
    "@context": "http://schema.org",
    "@type": "Offer",
    "availability": "http://schema.org/InStock",
    "priceCurrency": "USD",
    "category": "WordPress Plugin",
    "price": "59",
  }
}

اساسا ما فقط جفتِ ، کلید و مقدار رو داریم. پس بیاین کد رو یکم زیباتر کنیم تا بهتر اون ها رو ببینیم. 

{
  "@context":         "http://schema.org",
  "@type":            "Product",
  "name":             "snip - The Rich Snippets WordPress Plugin",
  "offers": {
    "@context":       "http://schema.org",
    "@type":          "Offer",
    "availability":   "http://schema.org/InStock",
    "priceCurrency":  "USD",
    "category":       "WordPress Plugin",
    "price":          "59"
  }
}

اگه به کد دقت کنیم متوجه موارد زیر میشیم:

  • نوع داده ساختاریافته ، محصول است.
  • محصول ما یه ویژگی با نام "snip – The Rich Snippets Wordpress Plugin" داره.
  • هر محصول به پیشنهاداتی نیاز داره. در این نمونه ، فقط یک پیشنهاد داریم که اصطلاحا بهش کودک محصول میگیم.
  • این کودک ، جفتِ ، کلید و مقدار مخصوص به خودش رو داره. به عنوان مثال ، موجود بودن کالا در انبار ، قیمت ، کد واحد پول و ...

بنابراین این کدها همون چیزی هستن که در هنگام مواجهه با صفحه محصول ، به چشم خودمون میبینیم. ولی همونطور که قبلا گفتم ، تشخیص صفحه برای موتورهای جست و جو به همین راحتیا نیس ولی با وجود این کدها ورق یهو برمیگرده !! و همه چی برای موتورهای جست و جو روشن میشه :)


واژگانی که میتونید استفاده کنید

همه موتورهای جست و جو بزرگ با هم دیگه یه جا نشستن و یه سری واژگان استاندارد درست کردن. اگه دقیق تر بخوام بگم

  • گوگل
  • بینگ
  • و یاندکس

سینتکس های یکسانی رو متوجه میشن ، پس این اشتراک ، کار ما رو برای ساخت داده های ساختاریافته برای این موتورهای جست و جو آسون میکنه. به واژگان پایه ، schema.org گفته میشه. تعجب نکن ، طراحی این سایت به طراحی های دهه 90 شبیهه ولی هرچیزی رو که نیاز داری میتونی تو این سایت پیدا کنی. این وبسایت جواب سوال "آیا اسکیمایی وجود داره که بتونم برای منظور خاصی استفاده کنم؟" رو بهتون میده.


Schema.org چطوری کار میکنه؟

تنها کاری که باید انجام بدین اینه که وارد سایت schema.org بشین. از منوی بالا ، روی schemas کلیک کنید.

و آیتم Full list of types, shown on one page رو انتخاب کنید.

نکته اساسی ای که باید بهش توجه کنید اینه که ما یک نوع اسکیما به نام thing داریم که این اسکیما میتونه هرچیزی باشه. حالا از این لیست ، نوع اسکیمای مورد نظرمون رو انتخاب میکنیم. من در اینجا اسکیمای محصول یا product رو انتخاب میکنم.

نکته: اسکیمای محصول جز اسکیماهای thing عه.

مثال 1 : یک محصول

اگه سایتت درباره ماشین هاست پس باید از اسکیمای خودرو استفاده کنی. همونطور که میبینی خودرو یک وسیله نقلیه س که اونم یه محصوله که اونم یه thing عه. خودرو وسیله نقلیه  محصول  شئ (Thing) پس همه چی اینجا ساختاریافتس. با این روش میشه کل دنیا رو تعریف کرد. بخاطر همینه که سایت schema.org همش در حال تغییره.


مثال 2 : یک دستورپخت

اگه قبلا درباره یه دستورپخت جست و جو کرده باشی ، مطمئنم متوجه شدی که بعضی از نتایج با بقیه فرق میکنن. مثلا کنار نتیجه یه عکس هست یا زمان پخت و اطلاعات تغذیه ای نوشته شده.

یا یه چیز خفن تر: گوگل اولین مراحل تهیه یه غذای خاص رو به طور مستقیم در نتایج جست و جو نمایش داده باشه. اخه بهتر از این داریم؟ این جور نتایج جست و جو ، کارت های غنی نامیده میشن. و من مطمئنم که در آینده نتایج غنی بیشماری خواهیم دید. همه این اتفاقا فقط با اضافه کردن یه کد از سایت schema.org به نوشته تون میفته. بخاطر اینکه schema.org یه نوع اسکیما به نام دستورپخت داره. همونطور که تو تصویر میبینی ، دستورپخت یه دستورالعمله (HowTo) که اون هم یه کار خلاقانس (CreativeWork) که اون هم یک شی عه (Thing) دستورپخت  دستورالعمل  کار خلاقانه  شئ خب اجازه بدین که به محصول برگردیم و اونو با جزئیات بیشتری بررسی کنیم.


مثال 3 : یک محصول (دوباره :)

مثال 3 : یک محصول (دوباره :) اگه به schema.org/Productبری میتونی تمام ویژگی هایی که یه محصول میتونه داشته باشه رو ببینی. به عنوان مثال ویژگی "offers" رو میتونی در اون صفحه ببینی. اگه یکم به پایین اسکرول کنی ، ویژگی هایی رو میبینی که اسکیمای محصول از اسکیمای مادر خودش به ارث برده که در این مثال ، اسکیمای مادر همون اسکیمای Thing عه. ویژگی نام (Name) یک ویژگی به ارث برده شدس. چون هرچیزی تو این دنیا ، یه اسم داره. اگه محتوای یه سایت تو مرورگر رندر شه ، حتی مادربزرگت هم میتونه اونو بخونه ولی بدون داده های ساختاریافته ، موتورهای جست و جو نمیتونن این کارو کنن.


فرمت ها

فرمت های مختلفی برای نشانه گذاری محتوا وجود داره.

  • میکرودیتا
  • RDFa
  • JSON-LD

مورد آخر رو قبلا بهتون نشون دادم. JSON-LD ساده ترین فرمته چون فقط با جفت کلید و مقدار طرفیم. گوگل هم این فرمت رو پیشنهاد میده. میکرودیتا فرمتیه که قبل از اختراع JSON-LD مورد استفاده قرار میگرفته. ادغام و یکپارچه سازی با این فرمت خیلی سخته. مثلا هر طراح افزونه یا قالب وردپرسی باید با schema.org به طور کامل آشنا باشه. به علاوه ، بعد از به کارگیری میکرودیتا ، پروژه شما دیگه قابل خوندن نیست (چون پروژه پر از کدهای ناخوانا میشه) ☹ RDFa هم مثل میکرودیتا س. پس زیاد وارد جزئیات این دو فرمت نمیشیم چون واقعا منسوخ شدن و با اون ها کاری نداریم. اسنیپ با JSON-LD ادغام شده و با یه اشاره و کلیک ، همه چی در اختیار شماست 😊


جمع بندی

  • تو درس قبلی فهمیدیم که موتورهای جست و جو میخوان بفهمن که چه محتوایی در سایت شما وجود داره. مثلا صفحه فعلی ، درباره یک محصوله یا یه دستورپخت.
  • بخاطر اینکه موتورهای جست و جو در خوندن کدها واقعا خوب عمل میکنن ، مجبوریم که یه سری داده های ساختاریافته در اختیار اون ها قرار بدیم که فقط برای این موتورها قابل خوندن هستن و برای کاربران عادی نمایش داده نمیشن.
  • همه موتورهای جست و جوی اصلی ، با یکدیگر همکاری میکنن تا سایت schema.org رو مدام ارتقا بدن. این سایت مثل یک کتاب مرجعه که میتونید انواع اسکیماهای معتبر رو در اون پیدا کنید.
  • اسکیماها سلسله مراتب دارن که نوع اصلی ، Thing نامیده میشه.
  • انواع اسکیماها ویژگی های مختلفی دارن. با استفاده از این ویژگی ها میتونی چیزی مثل یه محصول رو توصیف کنی. تو مثالی که زدیم ، از ویژگی "offer" استفاده کردیم که به موتورهای جست و جو میگه که قیمت محصول ما چقدره. یه اسکیما همیشه صفات و ویژگی های والدش رو به ارث میبره ، پس میتونی با خیالت راحت از اون ها هم استفاده کنی.
  • داده های ساختاریافته رو میتونیم تو فرمت های مختلفی تعریف کنیم. ولی پیشنهاد من فرمت JSON-LD عه.

بعد اینکه نحوه کار داده های ساختاریافته رو فهمیدیم ، باید به سراغ ادغام schema.orgبا سایتمون بریم. میتونی این کارو به صورت دستی و با نوشتن کد انجام بدی یا از افزونه ما یعنی اسنیپ استفاده کنی تا در نوشتن هزاران خط کد صرفه جویی کنی و بدون نوشتن حتی یه خط کد ، همه چی رو به اسنیپ بسپاری. تو درس بعدی یاد میگیریم که چجوری اسکیمای مناسب رو پیدا کنیم تا تو نتایج جست و جو ، اسنیپت های غنی تولید کنیم.