القوائم التوجيهية لـ SEO: دليل تنفيذ علامات التبويب المخططية

تعزيز تحسين محركات البحث باستخدام مخططات breadcrumb والبيانات المهيكلة

Page content

التنقل بالكعكية المدمجة مع العلامات الدلالية المناسبة هي واحدة من أكثر تقنيات تحسين محركات البحث فعالية ولكنها مُهمَلة، ويمكن أن تحسّن بشكل كبير من وضوح موقعك على الويب وتجربة المستخدم.

عند تنفيذها بشكل صحيح، تظهر الكعكية في Google في نتائج البحث، وتقدم سياقًا بصريًا وتزيد من معدلات النقر بنسبة تصل إلى 30%.

الكعكية لتحسين محركات البحث

فهم التنقل بالكعكية وتحسين محركات البحث

التنقل بالكعكية يعمل كنظام تنقل ثانوي يعرض المستخدمين موقعهم الحالي داخل هيكل الموقع الهرمي. سميت الكعكية بهذا الاسم نسبةً إلى القصة الشعبية “هانزل وغريتيل”، وتخلق مسارًا يساعد المستخدمين على فهم موقعهم وكيفية العودة إلى الصفحات الأبوية.

من منظور تحسين محركات البحث، توفر الكعكية فوائد حاسمة. تستخدم محركات البحث علامات الكعكية الدلالية لفهم هيكل موقعك، مما يؤثر على تصنيف الصفحات وترتيبها. وبالطبع، عندما يتم تنفيذها بشكل صحيح مع علامات دلالية، يمكن أن تظهر الكعكية مباشرة في نتائج بحث Google، لتُحل محل أو تكمل العرض تحت عنوان الصفحة.

ما الذي يجعل علامات الكعكية الدلالية مهمة لتحسين محركات البحث؟ تستخدم البيانات المُنظمة باستخدام نموذج BreadcrumbList الدلالية لتوضح محركات البحث كيف تنظّم محتواك. تستخدم Google هذه المعلومات لعرض مسارات الكعكية الغنية في نتائج البحث، مما يحسّن تجربة المستخدم قبل أن ينقر الزوار على موقعك. هذا العرض المحسّن يمكن أن يزيد بشكل كبير من معدلات النقر، حيث يمكن للمستخدمين رؤية سياق المحتوى وملاءمته فورًا. للمزيد من الدليل الشامل حول تنفيذ أنواع مختلفة من العلامات الدلالية المُنظمة في Hugo، بما في ذلك BreadcrumbList مع أنواع أخرى من العلامات الدلالية، راجع دليلنا التفصيلي.

تنفيذ نموذج BreadcrumbList JSON-LD

الأساس التقني لتحسين الكعكية يكمن في تنفيذ نموذج BreadcrumbList بشكل صحيح باستخدام تنسيق JSON-LD (JavaScript Object Notation for Linked Data). يوصي Google بتنسيق JSON-LD كتنسيق مثالي للبيانات المُنظمة لأنه سهل التنفيذ والصيانة.

كيف أقوم بتنفيذ نموذج BreadcrumbList JSON-LD على موقع الويب؟ ابدأ بإضافة علامة <script> مع type="application/ld+json" في قسم <head> من الصفحة أو بالقرب من نهاية علامة </body>، إليك مثالًا كاملاً:

<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-guides"
    },
    {
      "@type": "ListItem",
      "position": 4,
      "name": "تنفيذ الكعكية",
      "item": "https://example.com/blog/seo-guides/breadcrumbs"
    }
  ]
}
</script>

يتألف الهيكل من عدة مكونات رئيسية. تحدد خاصية @context مفردات المخطط، وتُحدد دائمًا إلى “https://schema.org”. تُحدد خاصية @type هذا كـ “BreadcrumbList”. تُحدد المصفوفة itemListElement العناصر الفردية للكعكية، كل منها تمثيلًا لـ “ListItem” مع ثلاث خصائص رئيسية: position (الترتيب العددي بدءًا من 1)، name (النص المعروض)، وitem (العنوان المطلق).

التفاصيل المهمة للتنفيذ تؤثر بشكل كبير. يجب دائمًا استخدام العناوين المطلقة بما في ذلك البروتوكول (https://). يجب أن تكون أرقام المواقع متسلسلة بدءًا من 1. يجب أن يتطابق التنقل بالكعكية المرئي على الصفحة مع العلامات الدلالية تمامًا، فالمتباينات قد تربك محركات البحث وتؤدي إلى غرامات.

أفضل الممارسات للكعكية لعام 2025

اتباع أفضل الممارسات الحالية يضمن أن تقدم الكعكية قيمة قصوى لتحسين محركات البحث مع تجربة مستخدم ممتازة. تطورت طريقة تنفيذ الكعكية، ويجب الالتزام بمعايير عام 2025.

ما هي أفضل الممارسات لعمق التنقل بالكعكية؟ حافظ على مسارات الكعكية بين 3 إلى 5 مستويات. هذا النطاق يوفر سياقًا هرميًا كافيًا دون إرباك المستخدمين أو إنشاء تنقل معقد بشكل غير ضروري. المواقع الضحلة (1-2 مستويات) لا توفر معلومات هيكلية كافية، بينما المواقع العميقة (6+ مستويات) قد تربك المستخدمين ومحركات البحث.

تلعب وضوح التسمية دورًا حاسمًا. استخدم تسميات غنية بالكلمات المفتاحية وواضحة توضح ما سيجد المستخدمون في كل مستوى. على سبيل المثال، “ال أحذية الرياضية للنساء” أفضل بكثير من “الفئة 2” أو “المنتجات”. تحليل محركات البحث هذه التسميات لفهم تنظيم المحتوى، ويتخذ المستخدمون قرارات التنقل بناءً عليها.

هل يجب أن تكون الصفحة الحالية قابلة للنقر في التنقل بالكعكية؟ لا، يجب ألا يكون العنصر الأخير في الكعكية (الذي يمثل الصفحة الحالية) رابطًا قابلًا للنقر. هذا يمنع التنقل المكرر ويتوافق مع المعايير المعتمدة لتجربة المستخدم. بدلًا من ذلك، قم بتنسيقه بشكل مختلف (غالبًا بцвет مختلف أو وزن خط مختلف) وقم بتسميته بـ aria-current="page" للقراء من شاشات.

التوافق مع الأجهزة المحمولة أصبح غير قابل للتفاوض. يجب تصميم الكعكية بحيث تكون متجاوبة وسهلة الاستخدام باللمس. فكر في استخدام الفواصل المدمجة (مثل “/” أو “>")، تنفيذ تقليم الأسماء الطويلة على الشاشات الصغيرة، وضمان حجم كافٍ للهدف اللمس (الحد الأدنى 44x44 بكسل) للمستخدمين على الأجهزة المحمولة.

لا يمكن التأكيد على توافق الكعكية المرئية مع العلامات الدلالية أكثر من اللازم. يجب أن يتطابق مسار الكعكية الذي يراه المستخدم تمامًا مع هيكل JSON-LD. تباينات تشير إلى محاولة التلاعب محركات البحث ويمكن أن تؤدي إلى إزالة النتائج الغنية من قائمة النتائج.

تنفيذ الكعكية في المواقع الثابتة لـ Hugo

Hugo، وهو أحد أكثر مولّدي المواقع الثابتة شعبية، يوفر وظائف مدمجة تجعل تنفيذ الكعكية سهلًا. كيف أقوم بتنفيذ الكعكية في مولّد المواقع الثابتة لـ Hugo؟ تتضمن العملية إنشاء نموذج جزئي يستفيد من هيكل الصفحة الهرمي لـ Hugo.

أولاً، أنشئ نموذجًا جزئيًا للكعكية في layouts/partials/breadcrumbs.html:

<nav aria-label="breadcrumb">
  <ol class="breadcrumb" itemscope itemtype="https://schema.org/BreadcrumbList">
    <li class="breadcrumb-item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <a itemprop="item" href="{{ .Site.BaseURL }}">
        <span itemprop="name">الرئيسية</span>
      </a>
      <meta itemprop="position" content="1" />
    </li>
    {{ $position := 2 }}
    {{ range .Ancestors.Reverse }}
      <li class="breadcrumb-item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
        <a itemprop="item" href="{{ .Permalink }}">
          <span itemprop="name">{{ .Title }}</span>
        </a>
        <meta itemprop="position" content="{{ $position }}" />
      </li>
      {{ $position = add $position 1 }}
    {{ end }}
    <li class="breadcrumb-item active" aria-current="page" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <span itemprop="name">{{ .Title }}</span>
      <meta itemprop="position" content="{{ $position }}" />
    </li>
  </ol>
</nav>

يستخدم هذا النموذج وظيفة .Ancestors الخاصة بـ Hugo للتنقل تلقائيًا عبر هيكل الصفحة. تضمن طريقة Reverse عرض الكعكية بالترتيب الصحيح من الجذر إلى الصفحة الحالية. لاحظ كيف تم دمج خصائص Microdata (itemscope، itemtype، itemprop) مباشرة في HTML - هذه هي خيار بديل عن JSON-LD يفضل بعض المطورين في مواقع Hugo.

أضف هذا الجزء إلى نموذجك الأساسي (layouts/_default/baseof.html) حيث ترغب في ظهور الكعكية:

{{ partial "breadcrumbs.html" . }}

للمواقع التي تتطلب كعكية مرئية وJSON-LD (الموصى بها لضمان التوافق القصوى)، أنشئ جزءًا منفصلًا للنموذج JSON-LD في layouts/partials/breadcrumb-schema.html. إذا كنت تبني وظائف ديناميكية داخل موقعك على Hugo، فقد تكون مهتمًا أيضًا بتعلم كيفية إرسال النماذج في مواقع Hugo لتحسين تفاعل المستخدمين بما يتجاوز التنقل.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "الرئيسية",
      "item": "{{ .Site.BaseURL }}"
    }
    {{ $position := 2 }}
    {{ range .Ancestors.Reverse }},
    {
      "@type": "ListItem",
      "position": {{ $position }},
      "name": "{{ .Title }}",
      "item": "{{ .Permalink }}"
    }
    {{ $position = add $position 1 }}
    {{ end }},
    {
      "@type": "ListItem",
      "position": {{ $position }},
      "name": "{{ .Title }}",
      "item": "{{ .Permalink }}"
    }
  ]
}
</script>

أضف CSS مناسب لتنسيق الكعكية:

.breadcrumb {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  background-color: #f8f9fa;
  border-radius: 0.25rem;
}

.breadcrumb-item {
  display: flex;
  align-items: center;
}

.breadcrumb-item + .breadcrumb-item::before {
  content: "/";
  padding: 0 0.5rem;
  color: #6c757d;
}

.breadcrumb-item.active {
  color: #6c757d;
}

.breadcrumb-item a {
  text-decoration: none;
  color: #007bff;
}

.breadcrumb-item a:hover {
  text-decoration: underline;
}

@media (max-width: 768px) {
  .breadcrumb {
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
  }
  
  .breadcrumb-item + .breadcrumb-item::before {
    padding: 0 0.25rem;
  }
}

التحقق والاختبار

كيف يمكنني التحقق من علامات الكعكية الدلالية؟ التحقق الصحيح يضمن أن تنفيذك سيتم اكتشافه من قبل محركات البحث ويظهر بشكل صحيح في نتائج البحث. توفر Google أدوات محددة لهذا الغرض.

اختبار النتائج الغنية من Google (search.google.com/test/rich-results) هو أداة التحقق الرئيسية. ببساطة أدخل عنوان صفحتك أو لصق كود HTML الخاص بك، وستحلل الأداة علامات الكعكية الخاصة بك، وتحدد الأخطاء أو التحذيرات، وتعطي معاينة لكيفية ظهور الكعكية في نتائج البحث.

المشاكل الشائعة التي يجب مراقبتها تشمل غياب الخصائص المطلوبة (الترتيب، الاسم، أو العنصر)، أرقام الترتيب غير الصحيحة (يجب أن تكون أرقامًا تسلسلية تبدأ من 1)، استخدام العناوين النسبية بدلًا من المطلقة، وعدم توافق الكعكية المرئية مع العلامات الدلالية.

تُوفر تقارير تحسين Google Search Console مراقبة طويلة الأمد. بعد أن يتم تصفح موقعك، تحقق من تقرير “Breadcrumb” في تقارير التحسين لمعرفة أي الصفحات تحتوي على علامات الكعكية الصالحة، وأي الصفحات تحتوي على أخطاء، وتأثير ذلك على ظهورك في نتائج البحث.

يجب أن يكون الاختبار المنتظم جزءًا من مسيرتك. قم بتقييم الكعكية كلما قمت بتغيير هيكل موقعك، أو تحديث نماذجك، أو نشر تحديثات كبيرة، أو لاحظت اختفاء الكعكية من نتائج البحث.

الأنماط الشائعة للتنفيذ

تستفيد أنواع مختلفة من المواقع من أنماط مختلفة للكعكية. تستخدم المواقع الإلكترونية للتجارة الإلكترونية عادةً كعكية قائمة على الفئات: الرئيسية > الفئة > الفئة الفرعية > المنتج. هذا يوضح تصنيف المنتج بوضوح ويؤدي إلى استكشاف العناصر المرتبطة.

تستخدم المواقع الإلكترونية للمدونات والمضمون غالبًا كعكية قائمة على التاريخ أو الفئات: الرئيسية > المدونة > الفئة > عنوان المقال. هذا الهيكل التنظيمي يساعد القرّاء على فهم تصنيف المحتوى واكتشاف المقالات المرتبطة.

تستخدم المواقع الإلكترونية للمستندات متعددة المستويات كعكية هرمية قد تمتد أعمق: الرئيسية > المستندات > القسم > الفئة الفرعية > الموضوع > الصفحة الحالية. على الرغم من أن هذا يتجاوز التوصية المعتادة من 3 إلى 5 مستويات، يمكن للمواقع الإلكترونية للمستندات المبرر هذا العمق لأن المستخدمين يحتاجون إلى التنقل الدقيق في قواعد المعرفة المعقدة.

الاعتبارات المتقدمة

تتطلب الكعكية الديناميكية المُنشَّأة بواسطة JavaScript اهتمامًا خاصًا. تحسّنت محركات البحث من عرض JavaScript، ولكن يظل التنسيق الثابت أو التوليد من الخادم أكثر موثوقية لتحسين محركات البحث. إذا كنت بحاجة لاستخدام التوليد من الطرف السفلي، تأكد من أن نموذج JSON-LD لا يزال مُنشَّأ من الخادم أو أثناء وقت التجميع.

يمكن إنشاء مسارات كعكية متعددة على صفحة واحدة، لكن هذا غالبًا ما يُنصح ضده. إذا كان لديك استخدامات شرعية (مثل عرض التنقل بناءً على الفئات والتاريخ)، قم بتنفيذ عدة نماذج BreadcrumbList، لكن تأكد من أن هذا نادر جدًا ويمكن أن يربك المستخدمين.

تضيف الترجمة الدولية تعقيدًا. للمواقع متعددة اللغات، تأكد من أن تسميات الكعكية مُترجمة بشكل مناسب وأن العناوين تشير إلى الإصدار الصحيح من اللغة. يجب أن تعكس العلامات الدلالية هيكل التنقل للغة الحالية.

قياس الأثر

تتبع فعالية تنفيذ الكعكية من خلال عدة مؤشرات. راقب معدلات النقر في Google Search Console قبل وبعد التنفيذ - يمكن أن تزيد الكعكية المُنفذة بشكل صحيح من معدلات النقر بنسبة 20 إلى 30%. انتبه إلى معدلات الارتداد والوقت المستغرق على الموقع؛ تحسين التنقل عادةً يقلل من معدلات الارتداد ويزيّد من التفاعل.

تحقق من تقارير تحسين Google Search Console بانتظام للحصول على مشاكل متعلقة بالكعكية. راقب عدد الصفحات التي تظهر فيها الكعكية في نتائج البحث - اهدف إلى تغطية 100% للصفحات المؤهلة.

استخدم Google Analytics لتتبع استخدام الكعكية. قم بتنفيذ مراقبة الأحداث على النقرات على الكعكية لفهم كيف يتنقل المستخدمون عبر هيكل موقعك. هذه البيانات تساعد في تحسين هيكل المعلومات الخاص بك. للمقارنة الشاملة وبدائل مركزة على الخصوصية لـ Google Analytics، راجع مقارنتنا بين Matomo، Plausible، Google ونظامات تحليل الويب الأخرى للعثور على الحل الأفضل لمراقبة أداء موقعك.

إن تنفيذ التنقل بالكعكية مع العلامات الدلالية المناسبة يمثل تحسينًا كبيرًا بجهد منخفض لتحسين محركات البحث. من خلال اتباع الأنماط والممارسات المثلى التي وردت في هذا الدليل، يمكنك تحسين فهم محركات البحث وتجربة المستخدم، مما يؤدي إلى تحسين التصنيف وزيادة التفاعل مع محتواك. بينما تهيمن Google على سوق محركات البحث وتحدد الكثير من ممارسات تحسين محركات البحث، من المفيد النظر إلى أن هناك محركات بحث بديلة قد تُشير وتعرض بياناتك المُنظمة بشكل مختلف - تنويع استراتيجية تحسين محركات البحث يمكن أن يساعدك على الوصول إلى جمهور أوسع.

الروابط المفيدة

مقالات مفيدة أخرى