میکرودیتا در HTML
میکرودیتا (Microdata) در HTML یکی از ویژگی‌های قدرتمند HTML5 است که امکان افزودن داده‌های معنایی (semantic data) به محتوای صفحات وب را فراهم می‌کند. این داده‌ها به موتورهای جستجو، مرورگرها و برنامه‌های دیگر کمک می‌کنند تا بهتر بفهمند محتوای هر بخش از یک صفحه وب چیست. درست مانند اینکه کتابی در کتابخانه را با اطلاعات نویسنده، ژانر، و سال انتشار برچسب‌گذاری کنیم، میکرودیتا هم به عناصر HTML معنا می‌بخشد.
در فروشگاه‌های آنلاین، می‌توان با میکرودیتا اطلاعات مربوط به محصول (نام، قیمت، برند) را مشخص کرد. در وب‌سایت‌های خبری، تاریخ انتشار و نویسنده خبر را نشانه‌گذاری کرد. در بلاگ شخصی، عنوان و محتوای مقاله را معنا داد و در پرتال‌های دولتی اطلاعات تماس یا موقعیت مکانی دفاتر را ساخت‌یافته کرد.
در این آموزش یاد می‌گیرید که میکرودیتا چیست، چرا استفاده از آن در سئو اهمیت دارد، چگونه از آن در پروژه‌های مختلف استفاده کنید و چه ویژگی‌هایی مانند itemscope، itemtype و itemprop در این زمینه کلیدی هستند.
مثال پایه
html<!-- اطلاعات مربوط به یک محصول با استفاده از میکرودیتا -->
<div itemscope itemtype="https://schema.org/Product">
<span itemprop="name">گوشی هوشمند</span>
<span itemprop="price">12000000 تومان</span>
<span itemprop="brand">TechNova</span>
</div>در این مثال ساده از میکرودیتا، یک محصول (Product) در صفحه وب نشانه‌گذاری شده است.
- ویژگی
itemscopeبه مرورگر و موتور جستجو اعلام می‌کند که این عنصر شامل یک شیء اطلاعاتی مستقل است. - ویژگی
itemtypeمشخص می‌کند که نوع این داده چیست؛ در اینجا Product (محصول) از سایت schema.org. - هر
itempropیک ویژگی از آن داده را مشخص می‌کند: name: نام محصولprice: قیمتbrand: برند محصول
موتورهای جستجو با استفاده از این اطلاعات می‌توانند در نتایج جستجو رندر بهتری از محتوای صفحه ارائه دهند (Rich Snippets).
اگر شما مبتدی هستید، ممکن است بپرسید: آیا این کد ظاهر صفحه را تغییر می‌دهد؟ پاسخ منفی است. میکرودیتا فقط به کد HTML معنا می‌دهد، اما ظاهر بصری تغییری نمی‌کند. برای بررسی صحت میکرودیتا می‌توانید از ابزار تست گوگل استفاده کنید.
مثال کاربردی
html<!-- نشانه‌گذاری مقاله خبری -->
<article itemscope itemtype="https://schema.org/NewsArticle">
<h1 itemprop="headline">توسعه هوش مصنوعی در ایران</h1>
<p>نویسنده: <span itemprop="author">سارا احمدی</span></p>
<time itemprop="datePublished" datetime="2025-07-28">۲۸ تیر ۱۴۰۴</time>
<div itemprop="articleBody">
<p>هوش مصنوعی در بسیاری از حوزه‌ها از جمله پزشکی، آموزش و صنعت در حال گسترش است...</p>
</div>
</article>بهترین روش‌ها و خطاهای رایج
بهترین روش‌ها:
- از عناصر معنایی (semantic HTML) مانند
<article>،<section>،<header>استفاده کنید. itemtypeرا از مرجع معتبر schema.org تعیین کنید.- داده‌های دقیق و مرتبط را با
itempropنشانه‌گذاری کنید. -
میکرودیتا را با ساختار تمیز و واضح بنویسید و از تو در تو شدن نامناسب اجتناب کنید.
خطاهای رایج: -
استفاده از
itempropبدونitemscopeکه باعث می‌شود مرورگر ارتباط بین داده‌ها را درک نکند. - جای‌گذاری اشتباه عناصر (مثلاً
divداخلspan). - استفاده از
itemtypeنامعتبر یا اشتباه. - فراموش کردن مقادیر کلیدی مانند
datetimeدر تاریخ‌ها.
نکات دیباگ:
- از ابزار Google Rich Results Test استفاده کنید.
- بررسی کنید که تمام
itempropها درون یک عنصرitemscopeباشند. - از ویژگی‌های غیر رسمی یا منسوخ‌شده استفاده نکنید.
📊 مرجع سریع
| Property/Method | Description | Example |
|---|---|---|
| itemscope | شروع یک شیء داده مستقل در HTML | <div itemscope> |
| itemtype | مشخص کردن نوع شیء بر اساس schema.org | itemtype="[https://schema.org/Product](https://schema.org/Product)" |
| itemprop | ویژگی خاص آن شیء داده | itemprop="name" |
| datePublished | تاریخ انتشار محتوای خبری | itemprop="datePublished" |
| articleBody | بدنه مقاله یا خبر | itemprop="articleBody" |
| headline | عنوان مقاله یا خبر | itemprop="headline" |
جمع‌بندی و مراحل بعدی
در این آموزش یاد گرفتید که چگونه با استفاده از میکرودیتا (Microdata) داده‌های HTML را ساخت‌یافته کرده و معنا ببخشید. با ویژگی‌هایی مانند itemscope, itemtype, و itemprop می‌توان اطلاعات صفحات را برای موتورهای جستجو قابل فهم‌تر کرد.
میکرودیتا مستقیماً با CSS یا JavaScript تداخلی ندارد اما می‌توان با استفاده از JavaScript اطلاعات نشانه‌گذاری‌شده را استخراج و تحلیل کرد. مثلاً در پرتال دولتی می‌توان از این داده‌ها برای بهینه‌سازی دسترس‌پذیری استفاده کرد.
پیشنهادهای آموزشی بعدی:
- آشنایی با JSON-LD
- تفاوت‌های RDFa و Microdata
- بررسی دقیق‌تر schema.org
- بهینه‌سازی SEO با داده‌های ساختاریافته
🧠 دانش خود را بیازمایید
دانش خود را بیازمایید
خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید
📝 دستورالعمل‌ها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده می‌شود