آموزش HTML - میکروداده (Microdata)

میکروداده (Microdata) یک روش استاندارد برای ارائه معنای اضافی در صفحات وب است. این ویژگی به ما اجازه می‌دهد عناصر سفارشی خود را تعریف کرده و شروع به تعبیه ویژگی‌های سفارشی در صفحات وب کنیم. میکروداده از مجموعه‌ای از جفت‌های نام-مقدار تشکیل شده است.

این گروه‌ها آیتم (item) نامیده می‌شوند و هر جفت نام-مقدار یک ویژگی (property) است. آیتم‌ها و ویژگی‌ها توسط عناصر معمولی نمایش داده می‌شوند.

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

پیش‌تر اشاره کردیم که میکروداده دارای مجموعه‌ای از جفت‌های نام-مقدار (ویژگی) است و این گروه به عنوان آیتم شناخته می‌شود.

• برای ایجاد یک آیتم، از صفت itemscope استفاده می‌شود.

• برای افزودن یک ویژگی به یک آیتم، صفت itemprop روی یکی از فرزندان آن آیتم استفاده می‌شود.

مثال

در این مثال، دو آیتم وجود دارد که هر کدام دارای ویژگی "name" هستند −

<html>
<body>
   <div itemscope>
      <p>My name is <span itemprop="name">Zara</span>.</p>
   </div>
   <div itemscope>
      <p>My name is <span itemprop="name">Nuha</span>.</p>
   </div>
</body>
</html>

ویژگی‌ها عموماً دارای مقادیری از نوع رشته (string) هستند، اما می‌توانند انواع داده زیر را نیز داشته باشند −

صفات عمومی (Global Attributes)

میکروداده پنج صفت عمومی را معرفی می‌کند که برای هر عنصری قابل استفاده است تا زمینه‌ای را برای ماشین‌ها درباره داده‌های شما فراهم کند.

انواع داده‌های ویژگی‌ها

ویژگی‌ها همان‌طور که در مثال بالا ذکر شد عموماً دارای مقادیری از نوع رشته هستند، اما می‌توانند مقادیری از نوع URL نیز داشته باشند. مثال زیر دارای یک ویژگی به نام "image" است که مقدار آن یک URL است −

<div itemscope>
   <img itemprop="image" src="tp-logo.gif" alt="TutorialsPoint">
</div>

ویژگی‌ها همچنین می‌توانند مقادیری شامل تاریخ، زمان، یا تاریخ و زمان داشته باشند. این کار با استفاده از عنصر time و صفت datetime آن انجام می‌شود.

<html>
<body>
   <div itemscope>
      My birthday is −
      <time itemprop="birthday" datetime="1971-05-08">
         Aug 5th 1971
      </time>
   </div>
</body>
</html>

ویژگی‌ها همچنین می‌توانند خودشان گروه‌هایی از جفت‌های نام-مقدار باشند، که این کار با قرار دادن صفت itemscope روی عنصری که ویژگی را اعلام می‌کند انجام می‌شود.

پشتیبانی از API میکروداده

اگر مرورگری از API میکروداده HTML5 پشتیبانی کند، یک تابع getItems() روی شیء عمومی document وجود خواهد داشت. اگر مرورگر از میکروداده پشتیبانی نکند، تابع getItems() تعریف‌نشده (undefined) خواهد بود.

function supports_microdata_api() {
   return !!document.getItems;
}

ابزار Modernizr هنوز از بررسی API میکروداده پشتیبانی نمی‌کند، بنابراین باید از تابعی مانند تابع ذکر شده در بالا استفاده کنیم.

استاندارد میکروداده HTML5 شامل هر دو بخش نشانه‌گذاری HTML (عمدتاً برای موتورهای جستجو) و مجموعه‌ای از توابع DOM (عمدتاً برای مرورگرها) است.

ما می‌توانیم نشانه‌گذاری میکروداده را در صفحات وب خود قرار دهیم و موتورهای جستجویی که قادر به درک صفات میکروداده نیستند، صرفاً آن‌ها را نادیده خواهند گرفت. اما اگر نیاز به دسترسی یا دستکاری میکروداده از طریق DOM داشته باشیم، باید بررسی کنیم که آیا مرورگر از API میکروداده DOM پشتیبانی می‌کند یا خیر.

تعریف واژگان میکروداده (Vocabulary)

برای تعریف واژگان میکروداده، به یک URL فضای نام (namespace) نیاز دارید که به یک صفحه وب فعال اشاره کند. به عنوان مثال، http://data-vocabulary.org/Person می‌تواند به عنوان فضای نام برای واژگان میکروداده شخصی با ویژگی‌های نام‌گذاری‌شده زیر استفاده شود −

• name − نام فرد به صورت یک رشته ساده

• Photo − یک URL به تصویر فرد.

• URL − وب‌سایتی متعلق به فرد.

با استفاده از ویژگی‌های بالا، میکروداده یک فرد می‌تواند به صورت زیر باشد −

<html>
<body>
   <div itemscope>
      <section itemscope itemtype="http://data-vocabulary.org/Person">
         <h1 itemprop="name">Gopal K Varma</h1>
         <p>
            <img itemprop="photo" src="http://www.tutorialspoint.com/green/images/logo.png">
         </p>
         <a itemprop="url" href="#">Site</a>
      </section>
   </div>
</body>
</html>

گوگل از میکروداده به عنوان بخشی از برنامه Rich Snippets خود پشتیبانی می‌کند. هنگامی که خزنده وب گوگل صفحه شما را پیمایش می‌کند و ویژگی‌های میکروداده‌ای را می‌یابد که با واژگان مطابقت دارند، آن ویژگی‌ها را استخراج کرده و در کنار سایر داده‌های صفحه ذخیره می‌کند.

برای توسعه و مطالعه بیشتر در مورد میکروداده، همیشه می‌توانید به HTML5 Microdata مراجعه کنید.