إنشاء Breadcrumbs للسيو – الدليل الشامل

في عالم تحسين محركات البحث (SEO)، تعتبر Breadcrumbs (أو ما يعرف بخطوط التنقل) من العناصر الأساسية التي تساعد محركات البحث والمستخدمين على فهم بنية موقعك بسرعة.

Breadcrumbs هي:

• روابط تظهر أعلى الصفحة توضح مسار المستخدم في الموقع، مثل:
  Home > Blog > WordPress > Breadcrumb SEO
• تساعد محركات البحث على فهرسة موقعك بشكل أفضل.
• تحسن تجربة المستخدم UX وتزيد من مدة التصفح داخل الموقع.

---

القسم 1: فوائد الـ Breadcrumbs للسيو

1. تحسين تجربة المستخدم (UX):
   • يظهر للمستخدم المسار الحالي ويتيح الرجوع لأي صفحة رئيسية بسهولة.
2. تحسين فهرسة الموقع:
   • محركات البحث مثل Google تستخدم Breadcrumbs لفهم الهيكل الداخلي للموقع.
3. تحسين ظهور موقعك في نتائج البحث:
   • Google يعرض Breadcrumbs في الـ SERPs بدلًا من روابط URL الطويلة، مما يزيد معدل النقر (CTR).
4. تسهيل التنقل الداخلي:
   • تقلل معدل الارتداد وتحسن الوقت الذي يقضيه الزائر داخل الموقع.

---

القسم 2: أنواع الـ Breadcrumbs

1. Hierarchy-based Breadcrumbs (الهيكلية)
   • تعرض المسار من الصفحة الرئيسية إلى الصفحة الحالية.
   • مثال:
     Home > Blog > SEO Tips > Breadcrumb Guide
2. Attribute-based Breadcrumbs (الصفات)
   • تستخدم للمتاجر الإلكترونية لتوضيح خصائص المنتج.
   • مثال:
     Home > Electronics > Smartphones > Samsung
3. History-based Breadcrumbs (تاريخ التصفح)
   • تظهر الصفحات التي تم زيارتها بالفعل.
   • نادر الاستخدام مقارنة بالأنواع الأخرى.

---

القسم 3: كيفية إنشاء Breadcrumbs باستخدام HTML وCSS

1️⃣ مثال بسيط HTML

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="/">الرئيسية</a></li>
    <li class="breadcrumb-item"><a href="/blog">المدونة</a></li>
    <li class="breadcrumb-item"><a href="/blog/seo-tips">نصائح السيو</a></li>
    <li class="breadcrumb-item active" aria-current="page">دليل البرودكرامب</li>
  </ol>
</nav>

2️⃣ تنسيق CSS

.breadcrumb {
    display: flex;
    list-style: none;
    padding: 10px 0;
    background: #f8f9fa;
    border-radius: 5px;
}.breadcrumb-item + .breadcrumb-item::before {
    content: ">";
    margin: 0 8px;
    color: #6c757d;
}.breadcrumb-item a {
    text-decoration: none;
    color: #007bff;
}.breadcrumb-item a:hover {
    text-decoration: underline;
}.breadcrumb-item.active {
    color: #495057;
    font-weight: bold;
}

---

القسم 4: إنشاء Breadcrumbs ديناميكي في ووردبريس

1️⃣ استخدام PHP داخل قالب single.php

<?php
function custom_breadcrumb() {
    echo '<nav aria-label="breadcrumb"><ol class="breadcrumb">';
    if(!is_home()) {
        echo '<li class="breadcrumb-item"><a href="'.home_url().'">الرئيسية</a></li>';
        if(is_category() || is_single()) {
            $categories = get_the_category();
            if($categories){
                $category = $categories[0];
                echo '<li class="breadcrumb-item"><a href="'.get_category_link($category->term_id).'">'.$category->name.'</a></li>';
            }
            if(is_single()){
                echo '<li class="breadcrumb-item active" aria-current="page">'.get_the_title().'</li>';
            }
        } elseif(is_page()){
            if($post->post_parent){
                $parent_id  = $post->post_parent;
                $breadcrumbs = array();
                while ($parent_id) {
                    $page = get_page($parent_id);
                    $breadcrumbs[] = '<li class="breadcrumb-item"><a href="'.get_permalink($page->ID).'">'.$page->post_title.'</a></li>';
                    $parent_id = $page->post_parent;
                }
                $breadcrumbs = array_reverse($breadcrumbs);
                foreach ($breadcrumbs as $crumb) { echo $crumb; }
            }
            echo '<li class="breadcrumb-item active" aria-current="page">'.get_the_title().'</li>';
        }
    }
    echo '</ol></nav>';
}
?>

2️⃣ استدعاء البرودكرامب في القالب

<?php
if(function_exists('custom_breadcrumb')){
    custom_breadcrumb();
}
?>

---

القسم 5: إضافة Breadcrumbs باستخدام Schema Markup لتحسين SEO

1️⃣ JSON-LD Schema

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [{
    "@type": "ListItem",
    "position": 1,
    "name": "الرئيسية",
    "item": "https://example.com/"
  },{
    "@type": "ListItem",
    "position": 2,
    "name": "المدونة",
    "item": "https://example.com/blog"
  },{
    "@type": "ListItem",
    "position": 3,
    "name": "نصائح السيو",
    "item": "https://example.com/blog/seo-tips"
  },{
    "@type": "ListItem",
    "position": 4,
    "name": "دليل البرودكرامب"
  }]
}
</script>

هذا يسمح لمحركات البحث بعرض البرودكرامب في نتائج البحث مباشرة، مما يحسن CTR.

---

القسم 6: Breadcrumbs في المتاجر الإلكترونية

مثال WooCommerce

<?php
add_action('woocommerce_before_main_content', 'woocommerce_breadcrumb', 20);
function woocommerce_breadcrumb() {
    $args = array(
        'delimiter' => ' &gt; ',
        'wrap_before' => '<nav class="woocommerce-breadcrumb" itemprop="breadcrumb">',
        'wrap_after'  => '</nav>',
        'home'        => 'الرئيسية',
    );
    woocommerce_breadcrumb($args);
}
?>

CSS مخصص للمتجر

.woocommerce-breadcrumb {
    background: #fff3cd;
    padding: 12px;
    border-radius: 4px;
    font-size: 14px;
}
.woocommerce-breadcrumb a {
    color: #856404;
    text-decoration: none;
}
.woocommerce-breadcrumb a:hover {
    text-decoration: underline;
}

---

القسم 7: تحسين SEO للبرودكرامب

1. استخدم الكلمات المفتاحية في أسماء الصفحات والفئات.
2. ضع البرودكرامب في مكان ثابت أعلى المحتوى.
3. دمج Schema Markup لزيادة ظهور الموقع في SERPs.
4. تجنب تكرار نفس البرودكرامب على صفحات مختلفة.
5. اربط بين البرودكرامب و القائمة الرئيسية لتعزيز التنقل الداخلي.

---

القسم 8: تحسين تجربة المستخدم UX

• اجعل البرودكرامب مرئيًا ومقروءًا بسهولة.
• أضف نقاط فاصلة أو أسهم لتوضيح المسار.
• استجب للـ أجهزة الموبايل بتقليل حجم الخط والمسافات.

---

القسم 9: أكواد ضخمة إضافية للـ Breadcrumbs

إنشاء برودكرامب ديناميكي كامل لجميع الصفحات

<?php
function full_breadcrumb(){
    echo '<nav aria-label="breadcrumb"><ol class="breadcrumb">';
    echo '<li class="breadcrumb-item"><a href="'.home_url().'">الرئيسية</a></li>';
    if(is_category()){
        $category = get_category(get_query_var('cat'));
        if($category->parent != 0){
            $ancestors = array_reverse(get_ancestors($category->term_id,'category'));
            foreach($ancestors as $ancestor){
                $anc = get_category($ancestor);
                echo '<li class="breadcrumb-item"><a href="'.get_category_link($anc->term_id).'">'.$anc->name.'</a></li>';
            }
        }
        echo '<li class="breadcrumb-item active" aria-current="page">'.$category->name.'</li>';
    }
    elseif(is_single()){
        $categories = get_the_category();
        if($categories){
            $category = $categories[0];
            if($category->parent != 0){
                $ancestors = array_reverse(get_ancestors($category->term_id,'category'));
                foreach($ancestors as $ancestor){
                    $anc = get_category($ancestor);
                    echo '<li class="breadcrumb-item"><a href="'.get_category_link($anc->term_id).'">'.$anc->name.'</a></li>';
                }
            }
            echo '<li class="breadcrumb-item"><a href="'.get_category_link($category->term_id).'">'.$category->name.'</a></li>';
        }
        echo '<li class="breadcrumb-item active" aria-current="page">'.get_the_title().'</li>';
    }
    elseif(is_page()){
        global $post;
        if($post->post_parent){
            $ancestors = array_reverse(get_post_ancestors($post->ID));
            foreach($ancestors as $ancestor){
                echo '<li class="breadcrumb-item"><a href="'.get_permalink($ancestor).'">'.get_the_title($ancestor).'</a></li>';
            }
        }
        echo '<li class="breadcrumb-item active" aria-current="page">'.get_the_title().'</li>';
    }
    echo '</ol></nav>';
}
?>