Breadcrumbs: المفهوم وطريقة التطبيق
رغم أن Google يسميها بشيء من الغرابة "مسار التصفح"، يطلق قطاع SEO رسمياً على هذه الميزة اسم breadcrumbs. ومع وجود مستجدات كثيرة في هذا الموضوع مؤخراً، أعددنا دليلاً يشرح ما هي، وكيف نطبقها خطوة بخطوة، وكيف نتحقق من التطبيق، وأخيراً كيف نتابع تقدمها في Search Console.
لنبدأ!
ما هي breadcrumbs؟
breadcrumbs ميزة هدفها تحسين تصفح المستخدم وإبلاغ كل من محرك البحث والمستخدم بشكل واضح بالتسلسل الهرمي للصفحة. هكذا يتمكن المستخدم من زيارة لا الصفحة النهائية فحسب، بل أيضاً الفئة التي تنتمي إليها الصفحة.
كيفية تطبيق breadcrumbs
من ناحية التطبيق، ثمة حالياً خياران: الخيار المرئي للمستخدم وخيار الكود. في الواقع لا يجب تطبيقهما بشكل منفصل، بل يجب تطبيقهما معاً دائماً.
المرئي (Visible)
في الخيار المرئي، يعرض الموقع breadcrumbs في أعلى كل صفحة كي يعرف المستخدم الذي يزور الصفحة بدقة موقعه. على سبيل المثال، إذا كنا نشاهد صفحة منتج (حاسوب HP Envy) في موقع تجارة إلكترونية، فستظهر breadcrumbs بهذا الشكل:
الرئيسية > حواسيب > HP > Envy بهذا نخبر المستخدم بأن المنتج الذي يشاهده ينتمي إلى فئة الحواسيب، وأيضاً إلى مجموعة حواسيب HP. على مستوى التصفح، هذه الميزة بالغة الأهمية، لأنها تتيح للمستخدم بنقرة واحدة رؤية مزيد من موديلات HP أو الاستمرار في تصفح فئة الحواسيب، إن أراد.
دون هذه الميزة يصبح التصفح أصعب بكثير وتزداد احتمالية مغادرة المستخدم الموقع.
الكود (Code)
إذا كان الخيار السابق يضيف breadcrumbs للمستخدم، فهذا الخيار يُبلغ محركات البحث بكيفية تصنيف محتوانا. من المهم جداً تنفيذ هذا التطبيق بشكل صحيح لأن Google لا يفهم breadcrumbs المعروضة بصرياً فقط.
أدناه يمكنك الاطلاع على مثال تطبيق breadcrumbs باستخدام snippet JSON-LD.
<script type="application/ld+json"> { "@context": "https://schema.org", "@type": "BreadcrumbList", "itemListElement": [{ "@type": "ListItem", "position": 1, "name": "Books", "item": "https://example.com/books" },{ "@type": "ListItem", "position": 2, "name": "Authors", "item": "https://example.com/books/authors" },{ "@type": "ListItem", "position": 3, "name": "Ann Leckie", "item": "https://example.com/books/authors/annleckie" },{ "@type": "ListItem", "position": 4, "name": "Ancillary Justice", "item": "https://example.com/books/authors/ancillaryjustice" }] } </script> يخبرنا الكود السابق بأن الكتاب المسمى "Ancillary Justice" كتبته الكاتبة Ann Leckie.
Books > Authors > Ann Leckie > Ancillary Justice
في حال التطوير المخصص أو عند بناء الموقع باللغات الرئيسية، يجب تطبيقها مباشرة. لكن إن كنت تستخدم Wordpress، فثمة plugins عديدة تساعدك على هذا التطبيق.
- Rank Math
- Yoast SEO
التحقق من التطبيق
عند الانتهاء من التطبيق، الأهم هو التحقق من تنفيذه بشكل صحيح. التطبيق "المرئي" بسيط جداً، إذ يكفي التأكد من ربط جميع العناصر بشكل صحيح وعملها بشكل سليم، أما التحقق من تطبيق الكود فيتطلب جهداً إضافياً.
ومع ذلك، بحوزتنا أداة Google وإضافة Chrome تجعلان هذه المهمة أسهل بكثير.
أداة Google للبيانات المنظمة:
تتيح لك أداة Google التحقق من البيانات المنظمة على مستوى الكود، عبر URL أو بإدخال snippet مباشرة.
أداة البيانات المنظمة من Google
بإدخال URL، يُرجع Google تحليلاً لجميع البيانات المنظمة المكتشفة.
مثال لتحليل URL في أداة البيانات المنظمة من Google.
في المقابل، إن أردت اختبار كود JSON-LD لـ breadcrumbs قبل تطبيقها، يمكنك استخدام أداة "snippet"، وستحصل على نتيجة كالتالية.
أداة التحقق من snippet للبيانات المنظمة.
Structured Data Testing Tool (إضافة Google Chrome)
إن أردت التحقق من breadcrumbs (وغيرها من البيانات المنظمة) مباشرة من المتصفح دون زيارة أداة Google، يمكنك استخدام إضافة "Structured Data Testing Tool". فهي تعرض جميع البيانات المنظمة المكتشفة وحتى الأخطاء.
إضافة Chrome للتحقق من البيانات المنظمة، مثال على مقال SEOcrawl.
متابعة breadcrumbs في Google Search Console
أخيراً، بعد إنهاء التطبيق والتحقق، يبقى متابعة الأداء في Google Search Console. هكذا يمكن إجراء متابعة يومية ورصد أي حالات شاذة.
عرض تقرير breadcrumbs في Search Console (أُطلق في سبتمبر 2019).
أخيراً، أود سؤالكم، ما أكثر الأخطاء التي صادفتموها عند تطبيق breadcrumbs؟
أرغب في تجميعها وإضافتها إلى هذا المقال كي يستفيد منها متخصصون آخرون في SEO.
شكراً جزيلاً، ولا تنسوا مشاركة تعليقاتكم!
مراجع
بقلم: David Kaufmann
قضيتُ السنوات العشر الأخيرة منشغلًا تمامًا بـ SEO — وبصراحة، لم أكن لأبدّل ذلك بأي شيء آخر.
تطوّرت مسيرتي إلى مستوى جديد عندما عملت أخصّائيَّ SEO أوّل في Chess.com — أحد أكثر 100 موقع زيارةً على الإنترنت بأكمله. العمل على هذا النطاق علّمني ما لم تعلّمه لي أي دورة أو شهادة.
من هذه التجربة، أسّستُ SEO Alive — وكالة للعلامات التجارية الجادّة بشأن النموّ العضوي. وبما أنّي لم أجد أداةً تُتقن العالَمَين الكلاسيكي وعصر الذكاء الاصطناعي، بنيتُ SEOcrawl. إن كنت تبحث عن شريك SEO خبير يعشق هذا المجال — يسعدني التواصل معك!
اكتشف المزيد من محتوى هذا الكاتب
