مولّد Breadcrumb Schema وHTML

أنشئ بيانات BreadcrumbList المنظمة وHTML لمسار تنقل سهل الوصول (nav وol وaria-current) من قائمة أسماء صفحات وروابطها. JSON-LD جاهز للنسخ.

عناصر مسار التنقل (من الصفحة الرئيسية حتى الصفحة الحالية)
1.
2.
3.
JSON-LD (BreadcrumbList)
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Home",
      "item": "https://example.com/"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "Blog",
      "item": "https://example.com/blog/"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "Cold Brew Guide",
      "item": "https://example.com/blog/cold-brew"
    }
  ]
}
</script>
HTML
<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="https://example.com/">Home</a></li>
    <li><a href="https://example.com/blog/">Blog</a></li>
    <li aria-current="page">Cold Brew Guide</li>
  </ol>
</nav>
يتبع JSON-LD نوع schema.org BreadcrumbList، ويمكن حذف رابط العنصر الأخير لأنه الصفحة الحالية. تستخدم شيفرة HTML قائمة مرتّبة داخل <nav> مع aria-current="page" لإمكانية الوصول؛ نسّق الفواصل باستخدام CSS.

ما هو مولّد مسار التنقل؟

يحوّل هذا المولّد قائمة عناصر مسار التنقل (الاسم + الرابط، من الصفحة الرئيسية نزولاً إلى الصفحة الحالية) إلى مخرجين: JSON-LD من نوع schema.org BreadcrumbList لمحركات البحث وترميز HTML سهل الوصول للزوار.

كيفية استخدام مولّد مسار التنقل

  1. عدّل العناصر: صف لكل مستوى باسمه ورابطه المطلق.
  2. أضف صفوفاً أو احذفها؛ والصف الأخير هو الصفحة الحالية وقد يخلو من رابط.
  3. اضبط aria-label لعنصر التنقل بلغة موقعك.
  4. انسخ كتلة JSON-LD وHTML إلى صفحتك.

مثال

الإدخال
Home → Blog → Cold Brew Guide
الإخراج
<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="https://example.com/">Home</a></li>
    <li><a href="https://example.com/blog/">Blog</a></li>
    <li aria-current="page">Cold Brew Guide</li>
  </ol>
</nav>

متى تستخدم مولّد مسار التنقل

استخدمه للصفحات التي تعرض مسار تنقل، خصوصاً في هياكل المواقع العميقة مثل المتاجر والتوثيق. ينبغي أن تطابق البيانات المنظمة مسار التنقل الظاهر في الصفحة. نسّق الفواصل بـ CSS بدلاً من إضافة أحرف إلى الترميز.

كيف يعمل مولّد مسار التنقل

يصبح كل صف غير فارغ ListItem بموضع يبدأ من 1 والاسم ورابط item (يُحذف إن كان فارغاً). HTML هو <nav aria-label> يحتوي قائمة مرتبة؛ العناصر السابقة روابط والأخير يحصل على aria-current="page" وفق نمط مسار التنقل في WAI-ARIA. تُهرَّب الأسماء والروابط بـ HTML؛ وتؤدي الروابط النسبية إلى تحذير لأن البيانات المنظمة ينبغي أن تستخدم روابط مطلقة.

حالات الاستخدام الشائعة

  • إضافة نتائج مميزة لمسار التنقل في صفحات الفئات والمنتجات.
  • إنشاء HTML لمسار تنقل سهل الوصول لموقع توثيق.
  • استبدال مسار تنقل بفواصل نصية عادية بترميز دلالي.
  • توليد ترميز لموقع ثابت بلا إضافة مسار تنقل.

الأسئلة الشائعة

هل يحتاج العنصر الأخير إلى رابط؟

لا. تسمح Google بحذف item للصفحة الحالية؛ ويُضمَّن هنا إن أدخلته.

هل يضمن ترميز مسار التنقل ظهوره في نتائج البحث؟

لا. يساعد محركات البحث على فهم بنية الموقع ويجعل النتيجة مؤهلة لمسار بنمط التنقل، لكن Google تقرر ما تعرضه.

هل يمكن أن يكون للصفحة عدة مسارات تنقل؟

نعم، أضف BreadcrumbList واحدة لكل مسار إذا كانت الصفحة يمكن الوصول إليها عبر مسارات عدة.

استكشف المزيد من الفئات

CRC
خوارزميات التحقق من التكرار الدوري لاكتشاف الأخطاء
MD
خوارزميات ملخص الرسالة (MD2، MD4، MD5)
SHA-1
خوارزمية التجزئة الآمنة 1 - دالة تجزئة 160 بت
SHA-2
عائلة خوارزمية التجزئة الآمنة 2 (SHA-224، SHA-256، SHA-384، SHA-512)