بيانات دقيقة في HTML
البيانات الدقيقة في HTML (Microdata in HTML) هي طريقة لدمج البيانات المنظمة داخل صفحات الويب باستخدام سمات HTML مخصصة، مثل itemscope وitemtype وitemprop. هذه التقنية تسمح لمحركات البحث وفهارس البيانات بفهم المحتوى بشكل أفضل، مما يعزز من ظهور الموقع في نتائج البحث الغنية (Rich Snippets).
تخيل صفحة الويب كأنها مكتبة ضخمة، البيانات الدقيقة تعمل كالفهرس الذي يصنف كل كتاب (عنصر محتوى) ليسهل الوصول إليه. في مواقع الأخبار، يمكن استخدامها لوصف المقالات والناشرين؛ في التجارة الإلكترونية، يمكن تحديد المنتجات، الأسعار، والتقييمات؛ في الصفحات الشخصية، يتم وصف الشخص، المهنة، والمهارات؛ وفي بوابات الحكومة، تُستخدم لتحديد الخدمات، الوثائق الرسمية، والمواعيد.
في هذا الدرس، ستتعلم كيفية تطبيق البيانات الدقيقة باستخدام HTML، وفهم طريقة عمل كل سمة، وتطبيقها في سيناريوهات حقيقية. كما سنستخدم أمثلة عملية ومبسطة لتقريب المفاهيم، تمامًا كما لو كنا نرتب غرفة ونضع لكل شيء بطاقة تعريف لتعرف مكانه ووظيفته بدقة.
مثال أساسي
html<!-- مثال لمنتج باستخدام بيانات دقيقة -->
<div itemscope itemtype="https://schema.org/Product">
<span itemprop="name">ساعة كلاسيكية</span>
<span itemprop="price">150 ريال</span>
<span itemprop="brand">شركة الزمن</span>
</div>في هذا المثال البسيط، نستخدم البيانات الدقيقة (Microdata) لوصف منتج ضمن صفحة ويب:
itemscope: هذه السمة تُعلن بداية عنصر يحتوي على بيانات دقيقة. معناها: "كل ما بداخل هذا العنصر يُعتبر وصفًا لكيان واحد."itemtype="https://schema.org/Product": تُحدد نوع الكيان. هنا نستخدم مخطط Schema.org للإشارة إلى أن الكيان هو "منتج (Product)".itemprop: تُستخدم هذه السمة لتحديد خصائص هذا الكيان:itemprop="name"لتحديد اسم المنتج.itemprop="price"لتحديد السعر.itemprop="brand"لتحديد العلامة التجارية.
كل سطر داخل هذا الهيكل يُمثل خاصية من خصائص المنتج. محركات البحث مثل Google تستخدم هذه المعلومات لفهم المحتوى بشكل أعمق، مما يمكنها من عرض بيانات غنية في نتائج البحث (مثل السعر واسم المنتج مباشرةً).
قد يتساءل المبتدئون: هل تؤثر هذه البيانات على طريقة عرض الصفحة؟ الجواب: لا، البيانات الدقيقة لا تؤثر على مظهر الصفحة المرئي، بل تُقرأ بواسطة محركات البحث والأنظمة الذكية فقط. ومن الأفضل التحقق من صحة التنسيق باستخدام أدوات مثل Rich Results Test.
مثال عملي
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>أفضل الممارسات والأخطاء الشائعة
أفضل الممارسات:
- استخدام عناصر HTML الدلالية (Semantic HTML) مثل
article,header,timeلتقوية الفهم البنيوي. - الالتزام بمعايير Schema.org وعدم اختراع أنواع أو خصائص غير معرفة في القاموس.
- محاذاة البيانات الدقيقة مع المحتوى الظاهر: يجب أن تكون البيانات المقروءة بواسطة الآلة مطابقة لما يراه المستخدم.
-
اختبار الشيفرة باستمرار باستخدام أدوات Google أو Bing لضمان أنها تعمل وتُفسر بشكل صحيح.
الأخطاء الشائعة: -
استخدام عناصر غير دلالية مثل
divوspanبدون هيكلة مناسبة. - نسيان سمة
itemscope، مما يجعلitempropبلا معنى. - تداخل غير صحيح للعناصر مثل وضع
itempropداخل عنصر لا يحتويitemscope. - تكرار نفس السمة بدون فائدة أو ترك خصائص فارغة.
نصائح تصحيح الأخطاء (Debugging):
- استخدم أدوات فحص البيانات المنظمة في المتصفح.
- اجعل الكود بسيطًا ومقروءًا.
- علق الكود أثناء التجريب لتجنب اللبس.
توصيات عملية:
ابدأ بكيان واحد بسيط مثل منتج أو مقال، ثم قم بالتوسع التدريجي. لا تحاول تطبيق بيانات دقيقة على كل شيء دفعة واحدة.
📊 مرجع سريع
| الخاصية | الوصف | مثال |
|---|---|---|
| itemscope | تُحدد بداية عنصر يحتوي بيانات دقيقة | <div itemscope> |
| itemtype | تُحدد نوع الكيان باستخدام URL من Schema.org | itemtype="[https://schema.org/Product](https://schema.org/Product)" |
| itemprop | تُحدد خاصية داخل الكيان | itemprop="name" |
| itemref | تربط خصائص بعناصر أخرى خارج العنصر الحالي | itemref="externalID" |
| datetime | تُستخدم مع time لتوفير تاريخ آلي القراءة | <time datetime="2025-07-28"> |
| articleBody | تُستخدم لتحديد نص المقال | itemprop="articleBody" |
الملخص والخطوات التالية
البيانات الدقيقة في HTML تمثل طريقة فعالة لتوضيح المحتوى لمحركات البحث والخدمات الآلية. تعلمنا اليوم كيفية بناء عناصر itemscope، وتحديد النوع باستخدام itemtype، وربط الخصائص مع itemprop. هذه المهارات تسمح لموقعك بالظهور بشكل أغنى وأكثر تنظيمًا في نتائج البحث.
البيانات الدقيقة لا تؤثر على تصميم الصفحة (CSS)، لكنها تكملها عند العمل مع JavaScript مثل توليد المحتوى تلقائيًا أو جمع بيانات تحليلية.
للمتابعة، ننصح بدراسة عناصر Schema.org المختلفة مثل Event، Organization، وRecipe. بعد ذلك، يمكن مقارنة microdata مع JSON-LD وRDFa لفهم أي الطرق الأنسب لمشروعك.
استمر بالتجريب، وابدأ بإضافة بيانات دقيقة لصفحاتك الشخصية أو المنتجات في متجرك.
🧠 اختبر معرفتك
اختبر معرفتك
اختبر فهمك لهذا الموضوع بأسئلة عملية.
📝 التعليمات
- اقرأ كل سؤال بعناية
- اختر أفضل إجابة لكل سؤال
- يمكنك إعادة الاختبار عدة مرات كما تريد
- سيتم عرض تقدمك في الأعلى