در حال بارگذاری...

میکرودیتا در HTML

میکرودیتا (Microdata) در HTML یکی از ویژگی‌های قدرتمند HTML5 است که امکان افزودن داده‌های معنایی (semantic data) به محتوای صفحات وب را فراهم می‌کند. این داده‌ها به موتورهای جستجو، مرورگرها و برنامه‌های دیگر کمک می‌کنند تا بهتر بفهمند محتوای هر بخش از یک صفحه وب چیست. درست مانند اینکه کتابی در کتابخانه را با اطلاعات نویسنده، ژانر، و سال انتشار برچسب‌گذاری کنیم، میکرودیتا هم به عناصر HTML معنا می‌بخشد.
در فروشگاه‌های آنلاین، می‌توان با میکرودیتا اطلاعات مربوط به محصول (نام، قیمت، برند) را مشخص کرد. در وب‌سایت‌های خبری، تاریخ انتشار و نویسنده خبر را نشانه‌گذاری کرد. در بلاگ شخصی، عنوان و محتوای مقاله را معنا داد و در پرتال‌های دولتی اطلاعات تماس یا موقعیت مکانی دفاتر را ساخت‌یافته کرد.
در این آموزش یاد می‌گیرید که میکرودیتا چیست، چرا استفاده از آن در سئو اهمیت دارد، چگونه از آن در پروژه‌های مختلف استفاده کنید و چه ویژگی‌هایی مانند itemscope، itemtype و itemprop در این زمینه کلیدی هستند.

مثال پایه

html

HTML Code

<!-- اطلاعات مربوط به یک محصول با استفاده از میکرودیتا -->
<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

HTML Code

<!-- نشانه‌گذاری مقاله خبری -->
<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 با داده‌های ساختاریافته

🧠 دانش خود را بیازمایید

آماده شروع

آزمون دانش شما

درک خود از این موضوع را با سوالات کاربردی بسنجید.

❓

سوالات

🎯

70%

برای قبولی

♾️

∞

زمان

🔄

∞

تلاش‌ها

📝 دستورالعمل‌ها

هر سوال را با دقت بخوانید
بهترین پاسخ را برای هر سوال انتخاب کنید
می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
پیشرفت شما در بالا نمایش داده می‌شود

زبان