مقدمه ای بر مایکرودیتا (Microdata)

قبلا درباره اهمیت html semantic یا همان اچ تی ام ال معنا دار خواندیم. اینکه چطور سندمون را مارک آپ کنیم یا به زبان ساده، چطور کد اچ تی ام بزنیم. حالا فرض کنید که میخواهیم یک سایت طراحی کنیم و در آن به معرفی کردن فیلم ها بپردازیم. خوب هر فیلمی دارای نام، عکس، ژانر و … می باشد. فرض کنید که ما از تگ های به جا و مناسب جهت نمایش این اطلاعات استفاده کردیم اما آیا موتورهای جستجو متوجه می شوند که ما در سایتمان فیلم معرفی کردیم؟ اگر به جای فیلم کتاب معرفی کرده بودیم چطور؟ کتاب هم مانند فیلم دارای نام، عکس و ژانر است. موتورهای جستجو از کجا باید تشخیص دهند که این کتاب است یا فیلم؟ به موارد دیگر غیر از مثال فیلم و کتاب هم فکر کنید، مانند معرفی محصولات، رویدادها، مکان ها، رستوران ها، دستور پخت غذاها، معرفی سریال و … . اگر بتونیم طوری کدهای اچ تی ام ال رو بزنیم که برای موتورهای جستجو مانند گوگل مشخص باشد که دقیقا ما چه چیزی رو در سایت معرفی کردیم خیلی عالی می شود. به طوری که موتورهای جستجو تشخیص دهند که محتوای سایت ما دقیقا چیست؟ آیا فیلم است یا کتاب؟ اینجاست که مایکرودیتا (microdata) به کارمان می آید.

چرا از مایکرودیتا (Microdata) استفاده کنیم؟

توسط microdata دقیقا مشخص می کنیم که محتوای سایتمان چی هست. موتورهای جستجو دقیقا متوجه می شوند که سایت ما چه اطلاعاتی دارد. آیا کتاب معرفی کرده یا فیلم یا هر چیزی دیگری که باشد برای ماشین ها و موتورهای جستجو کاملا قابل فهم می شود. توسط مایکرودیتا (microdata) دقیقا نوع محتوا را مشخص می کنیم نه فقط شکل و شمایل آن را.

نحوه نمایش اطلاعات در موتورهای جستجو در صورت استفاده از microdata

وقتی از مایکرودیتا استفاده کنیم نتایج جستجو هم به شکل بهتری در موتورهای جستجو نمایش داده می شود. برای مثال دستور پخت ماکارونی را در گوگل جستجو می کنیم و نتایج را می بینیم. سایت هایی که از مایکرودیتا (microdata) استفاده کرده اند و سایت هایی که از مایکرودیتا استفاده نکرده اند کاملا در نتایج جستجو مشخص است.

مایکرودیتا

 

به طور کلی مایکرودیتا  فقط تعدادی ویژگی (attributes) به المنت های اچ تی ام ال اضافه می کند. برای این کار از سه ویژگی زیر استفاده می کند:
  • itemscope
  • itemtype
  • itemprop

Itemscope و Itemtype
در بالاترین سطح Itemscope و Itemprop قرار می گیرند. با اضافه کردن itemscope مشخص می کنیم که قسمت مورد نظر مشخصا در مورد محتوای بخصوصی است و با itemtype نوع آن را مشخص می کنیم. مثلا کتاب یا …

itemprop
این ویژگی مشخص می کند که چه اطلاعات اضافه ای در مورد موضوع مورد نظرمان به موتورهی جستجو می دهیم. مثلا در مورد فیلم، نام فیلم، نام کارگردان و …
 

Schema.org

با مراجعه به سایت schema.org می توانید مجموعه ای از itemtypeها یا schemaها را ببینید. در واقع هر موقعی که می خواهید از مایکرودیتا استفاده کنید حتما باید به سایت مراجعه کنید و طبق ساختار گفته شده در سایت عمل کنید. موارد مشابه مایکرودیتا RDFa و JSON-LD است. که البته در اینجا فقط در مورد مایکرودیتا صحبت شده است. اما نتیجه کار یکسان است.
 
به مثال زیر توجه کنید. در این مثال مارک آپ HTML زدیم که در آن یک کتاب معرفی می کند:

  
    <div>
      <dl>
         <dt>نام کتاب</dt>
         <dd>موش و گربه</dd>
         <dt>نویسنده</dt>
         <dd>بزرگمهر حسین‌پور</dd>
         <dt>تعداد صفحات</dt>
         <dd>123 صفحه</dd>
         <dt>شابک</dt>
         <dd>9780030426599</dd>
         <dt>ناشر</dt>
         <dd >نشر چشمه</dd>
         <dt>سال انتشار</dt>
         <dd>1397</dd>
         <dt>موضوع </dt>
         <dd>طنر و کاریکاتور</dd>
      </dl>
   </div>
  

 
حالا با استفاده از مایکرودیتا (microdate) کد بالا را به صورت زیر تغییر می دهیم:

  
    <div  itemscope="" itemtype="http://schema.org/Book">
      <dl>
         <dt>نام کتاب</dt>
         <dd itemprop="name">موش و گربه</dd>
         <dt>نویسنده</dt>
         <dd itemprop="author">بزرگمهر حسین‌پور</dd>
         <dt>تعداد صفحات</dt>
         <dd itemprop="numberOfPages">123 صفحه</dd>
         <dt>شابک</dt>
         <dd itemprop="isbn">9780030426599</dd>
         <dt>ناشر</dt>
         <dd itemprop="publisher" itemtype="http://schema.org/Organization" itemscope=""><span itemprop="name">نشر چشمه</span></dd>
         <dt>سال انتشار</dt>
         <dd itemprop="datePublished">1397</dd>
         <dt>موضوع </dt>
         <dd itemprop="genre">طنر و کاریکاتور</dd>
      </dl>
   </div>
  

 

در این حالت موتورهای جستجو مانند گوگل کاملا متوجه می شوند که محتوای اچ تی ام ال ما کتاب بوده بنابراین به شکل بهتری هم نتیجه جستجو را نشان می دهند.

 
 

نویسنده: سعید پناهی

طراح و توسعه دهنده وب، رابط کاربری. فرانت اند. علاقه مند به یادگیری و آموزش

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

احتمالا از اینها هم خوشتون بیاد

بررسی واحدهای REM -EM – VH- VW و تفاوت بین آنها

برای مدت های طولانی طراحان و توسعه دهندگان وب سایت ها برای اندازه گذاری فونت، حاشیه و یا هر عنصر دیگری از واحد px که نشان دهنده پیکسل بود استفاده می کردند. اما امروزه با توجه به گسترش استفاده از دستگاه های مختلف مانند موبایل و تبلت برای نمایش وب سایت ها لزوم استفاده از واحدهایی که کنترل بیشتری به توسعه دهنده و طراح بدهد بیشتر شد. از این رو واحدهای rem و em تقریبا جای واحد px را گرفت.

css-custom-property

تعریف و استفاده از متغیرها در CSS

مانند سایر زبان های برنامه نویسی که از متغیر ها برای نگهداری مقداری استفاده می شود که بتوان بعدا در هر زمان به آن مراجعه کرد، در سی اس اس هم برای نگهداری و یا ذخیره سازی مواردی مانند رنگ ها، نام فونت، اندازه فونت و … استفاده می شود و می توان در جاهای مختلف فایل سی اس اس آن را صدا کرد و از مقدار آن استفاده کرد. اسم رسمی و صحیح این متغیرها custom properties می باشد که معمولا در بین توسعه دهندگان و برنامه نویسان به نام متغیر جا افتاده است.

نصب و استفاده از npm

نصب و استفاده از NPM

NPM مخفف Node Package Manager است. یک پکیج منیجر یا مدیریت پکیجی است که برای NodeJs نوشته شده است. (npm قسمتی از پلتفرم NodeJs است) البته این به معنای آن نیست که حتما باید در پروژه هایی که با NodeJs نوشته می شوند از NPM استفاده کرد بلکه در خیلی از موارد دیگر هم می شود از آن استفاده کرد. اجرای دستورات NPM از طریق خط فرمان (Command line) صورت می گیرد. دانستن ان پی ام به تنهایی کاربردی ندارد اما پیش نیاز خیلی از تکنولوژی های دیگر وب است.