البيانات المنظَّمة لشريط التنقّل (BreadcrumbList)

شريط التنقل في نتائج البحث

يشير مسار شريط التنقّل على الصفحة إلى موضع الصفحة في التسلسل الهرمي للموقع الإلكتروني، ويمكن أن يساعد المستخدمين في فهم الموقع الإلكتروني واستكشافه بطريقة فعّالة. ويستطيع المستخدم التنقّل من مستوى إلى آخر حتى يصل إلى قمّة التسلسل الهرمي، وذلك من خلال البدء من الموضع الأخير في مسار شريط التنقّل.

توفّر الميزة

تتوفر هذه الميزة على أجهزة الكمبيوتر في جميع المناطق وبكل اللغات التي يتوفر بها محرك بحث Google.

كيفية إضافة البيانات المنظَّمة

البيانات المنظَّمة هي تنسيق موحّد لتقديم معلومات عن صفحة محدّدة وتصنيف محتواها. إذا كنت لا تزال مبتدئًا في مجال البيانات المنظَّمة، يمكنك الاطّلاع على المزيد من المعلومات حول آلية عمل البيانات المنظَّمة.

إليك نظرة عامة حول كيفية إنشاء بيانات منظَّمة واختبارها وإصدارها.

  1. أضِف السمات المطلوبة. استنادًا إلى التنسيق الذي تستخدمه، يمكنك معرفة مكان إدراج البيانات المنظَّمة في الصفحة.
  2. اتّبِع الإرشادات.
  3. تحقَّق من صحة الرمز باستخدام اختبار النتائج الغنية بصريًا، وأصلِح أي أخطاء ملحّة. ننصحك أيضًا بحلّ أي مشاكل غير ملحّة قد ترصدها الأداة لأنّ ذلك قد يساعدك على تحسين جودة بياناتك المنظَّمة (ولكن هذا الإجراء ليس ضروريًا لتكون بياناتك مؤهّلة للظهور ضمن النتائج الغنية بصريًا).
  4. انشر بعض الصفحات التي تتضمّن بياناتك المنظَّمة واستخدِم أداة فحص عنوان URL لاختبار الطريقة التي يرى بها محرّك بحث Google الصفحة. تأكَّد من إمكانية وصول محرّك بحث Google إلى صفحتك ومن عدم حظرها باستخدام ملف robots.txt أو علامة noindex أو متطلبات تسجيل الدخول. إذا بدت الصفحة جيدة، يمكنك أن تطلب من محرّك بحث Google إعادة الزحف إلى عناوين URL الخاصة بك.
  5. لإعلام محرّك بحث Google بأي تغييرات لاحقة، ننصحك بإرسال خريطة الموقع. يمكنك برمجة هذا الإجراء باستخدام Search Console Sitemap API.

أمثلة

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

مسار شريط تنقّل واحد

إذا كان مسار شريط تنقّل واحد فقط يؤدي إلى الصفحة، يمكن للصفحة تحديد مسار شريط التنقّل التالي:

الكتب الخيال العلمي الكتب الحائزة على جوائز

JSON-LD

في ما يلي مثال لترميز JSON-LD لإتاحة شريط التنقّل هذا:


<html>
  <head>
    <title>Award Winners</title>
    <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": "Science Fiction",
        "item": "https://example.com/books/sciencefiction"
      },{
        "@type": "ListItem",
        "position": 3,
        "name": "Award Winners"
      }]
    }
    </script>
  </head>
  <body>
  </body>
</html>

RDFa

في ما يلي مثال لترميز RDFa لإتاحة شريط التنقّل هذا:


<html>
  <head>
    <title>Award Winners</title>
  </head>
  <body>
    <ol vocab="https://schema.org/" typeof="BreadcrumbList">
      <li property="itemListElement" typeof="ListItem">
        <a property="item" typeof="WebPage"
            href="https://example.com/books">
          <span property="name">Books</span></a>
        <meta property="position" content="1">
      </li>
      ›
      <li property="itemListElement" typeof="ListItem">
        <a property="item" typeof="WebPage"
            href="https://example.com/books/sciencefiction">
          <span property="name">Science Fiction</span></a>
        <meta property="position" content="2">
      </li>
      ›
      <li property="itemListElement" typeof="ListItem">
        <span property="name">Award Winners</span>
        <meta property="position" content="3">
      </li>
    </ol>
  </body>
</html>

البيانات الجزئية

في ما يلي مثال لترميز بيانات جزئية لإتاحة شريط التنقُّل هذا:


<html>
  <head>
    <title>Award Winners</title>
  </head>
  <body>
    <ol itemscope itemtype="https://schema.org/BreadcrumbList">
      <li itemprop="itemListElement" itemscope
          itemtype="https://schema.org/ListItem">
        <a itemprop="item" href="https://example.com/books">
            <span itemprop="name">Books</span></a>
        <meta itemprop="position" content="1" />
      </li>
      ›
      <li itemprop="itemListElement" itemscope
          itemtype="https://schema.org/ListItem">
        <a itemscope itemtype="https://schema.org/WebPage"
           itemprop="item" itemid="https://example.com/books/sciencefiction"
           href="https://example.com/books/sciencefiction">
          <span itemprop="name">Science Fiction</span></a>
        <meta itemprop="position" content="2" />
      </li>
      ›
      <li itemprop="itemListElement" itemscope
          itemtype="https://schema.org/ListItem">
        <span itemprop="name">Award winners</span>
        <meta itemprop="position" content="3" />
      </li>
    </ol>
  </body>
</html>

HTML

في ما يلي مثال على كتلة شريط تنقّل HTML في الصفحة كجزء من التصميم البصري لها.

<html>
  <head>
    <title>Award Winners</title>
  </head>
  <body>
    <ol>
      <li>
        <a href="https://www.example.com/books">Books</a>
      </li>
      <li>
        <a href="https://www.example.com/sciencefiction">Science Fiction</a>
      </li>
      <li>
        Award Winners
      </li>
    </ol>
  </body>
</html>

مسار شريط تنقّل متعدد

في حال توفّرت طرق متعددة للانتقال إلى صفحة على موقعك الإلكتروني، يمكنك تحديد مسارات شريط تنقّل متعددة لصفحة واحدة. إليك مسار شريط تنقّل يؤدي إلى صفحة للكتب الحائزة على جوائز:

الكتب الخيال العلمي الكتب الحائزة على جوائز

إليك مسار شريط تنقّل آخر يؤدي إلى الصفحة نفسها:

أعمال أدبية الكتب الحائزة على جوائز

JSON-LD

في ما يلي مثال على ترميز JSON-LD يتوافق مع العديد من مسارات شريط التنقّل:


<html>
  <head>
    <title>Award Winners</title>
    <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": "Science Fiction",
        "item": "https://example.com/books/sciencefiction"
      },{
        "@type": "ListItem",
        "position": 3,
        "name": "Award Winners"
      }]
    },
    {
      "@context": "https://schema.org",
      "@type": "BreadcrumbList",
      "itemListElement": [{
        "@type": "ListItem",
        "position": 1,
        "name": "Literature",
        "item": "https://example.com/literature"
      },{
        "@type": "ListItem",
        "position": 2,
        "name": "Award Winners"
      }]
    }]
    </script>
  </head>
  <body>
  </body>
</html>

RDFa

في ما يلي مثال على ترميز RDFa يتوافق مع العديد من مسارات شريط التنقّل:


<html>
  <head>
    <title>Award Winners</title>
  </head>
  <body>
    <ol vocab="https://schema.org/" typeof="BreadcrumbList">
      <li property="itemListElement" typeof="ListItem">
        <a property="item" typeof="WebPage"
            href="https://example.com/books">
          <span property="name">Books</span></a>
        <meta property="position" content="1">
      </li>
      ›
      <li property="itemListElement" typeof="ListItem">
        <a property="item" typeof="WebPage"
            href="https://example.com/books/sciencefiction">
          <span property="name">Science Fiction</span></a>
        <meta property="position" content="2">
      </li>
      ›
      <li property="itemListElement" typeof="ListItem">
        <a property="item" typeof="WebPage"
            href="https://example.com/books/sciencefiction/awardwinners">
          <span property="name">Award Winners</span></a>
        <meta property="position" content="3">
      </li>
    </ol>
    <ol vocab="https://schema.org/" typeof="BreadcrumbList">
      <li property="itemListElement" typeof="ListItem">
        <a property="item" typeof="WebPage"
            href="https://example.com/literature">
          <span property="name">Literature</span></a>
        <meta property="position" content="1">
      </li>
      ›
      <li property="itemListElement" typeof="ListItem">
        <span property="name">Award Winners</span>
        <meta property="position" content="2">
      </li>
    </ol>
  </body>
</html>

البيانات الجزئية

في ما يلي مثال على ترميز بيانات جزئية يتوافق مع العديد من مسارات شريط التنقّل:


<html>
  <head>
    <title>Award Winners</title>
  </head>
  <body>
    <ol itemscope itemtype="https://schema.org/BreadcrumbList">
      <li itemprop="itemListElement" itemscope
          itemtype="https://schema.org/ListItem">
        <a itemprop="item" href="https://example.com/books">
            <span itemprop="name">Books</span></a>
        <meta itemprop="position" content="1" />
      </li>
      ›
      <li itemprop="itemListElement" itemscope
          itemtype="https://schema.org/ListItem">
        <a itemscope itemtype="https://schema.org/WebPage"
           itemprop="item" itemid="https://example.com/books/sciencefiction"
           href="https://example.com/books/sciencefiction">
          <span itemprop="name">Science Fiction</span></a>
        <meta itemprop="position" content="2" />
      </li>
      ›
      <li itemprop="itemListElement" itemscope
          itemtype="https://schema.org/ListItem">
        <a itemprop="item" href="https://example.com/books/sciencefiction/awardwinners">
          <span itemprop="name">Award Winners</span></a>
        <meta itemprop="position" content="3" />
      </li>
    </ol>
    <ol itemscope itemtype="https://schema.org/BreadcrumbList">
      <li itemprop="itemListElement" itemscope
          itemtype="https://schema.org/ListItem">
        <a itemprop="item" href="https://example.com/literature">
          <span itemprop="name">Literature</span></a>
        <meta itemprop="position" content="1" />
      </li>
      ›
      <li itemprop="itemListElement" itemscope
          itemtype="https://schema.org/ListItem">
        <span itemprop="name">Award Winners</span>
        <meta itemprop="position" content="2" />
      </li>
    </ol>
  </body>
</html>

HTML

في ما يلي مثال على كتلة شريط تنقّل HTML في الصفحة كجزء من التصميم البصري لها.

<html>
  <head>
    <title>Award Winners</title>
  </head>
  <body>
    <ol>
      <li>
        <a href="https://www.example.com/books">Books</a>
      </li>
      <li>
        <a href="https://www.example.com/books/sciencefiction">Science Fiction</a>
      </li>
      <li>
        Award Winners
      </li>
    </ol>
    <ol>
      <li>
        <a href="https://www.example.com/literature">Literature</a>
      </li>
      <li>
        Award Winners
      </li>
    </ol>
  </body>
</html>

الإرشادات

يجب أن تتّبع هذه الإرشادات حتى يتأهل موقعك الإلكتروني للظهور مع أشرطة تنقُّل في &quot;بحث Google&quot;.

ننصح بتوفير أشرطة تنقّل تمثّل مسار مستخدم عادي إلى صفحة، بدلاً من النسخ المطابق لبنية عنوان URL. ليس من الضروري تضمين شريط التنقل ListItem لمسار المستوى الأعلى (النطاق الخاص بموقعك الإلكتروني أو اسم المضيف)، ولا للصفحة نفسها.

تعريفات أنواع البيانات المنظّمة

لتحديد أشرطة التنقّل، حدِّد BreadcrumbList مع عنصرَي ListItems على الأقل. يجب تضمين السمات المطلوبة لكي يكون المحتوى مؤهّلاً للظهور مع أشرطة التنقّل.

تمثّل السمة BreadcrumbList الحاوية الشاملة لجميع العناصر في القائمة. يتوفر التعريف الكامل للقائمة BreadcrumbList على schema.org/BreadcrumbList. في ما يلي السمات المتوافقة مع Google:

السمات المطلوبة
itemListElement

ListItem

هي مجموعة من أشرطة التنقّل المدرَجة بترتيب معيّن. حدِّد كل شريط تنقُّل يتضمّن ListItem. على سبيل المثال:

{
"@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"
  }]
}

ListItem

تحتوي السمة ListItem على تفاصيل حول عنصر واحد في القائمة. يتوفر التعريف الكامل لعنصر ListItem على schema.org/ListItem. في ما يلي السمات المتوافقة مع Google:

السمات المطلوبة
item

URL أو نوع فرعي من Thing

هذه السمة هي عنوان URL لصفحة الويب التي تمثل شريط التنقُّل. هناك طريقتان لتحديد item:

  • URL: حدِّد عنوان URL للصفحة. على سبيل المثال:
    "item": "https://example.com/books"
  • Thing: استخدم معرّفًا لتحديد عنوان URL استنادًا إلى تنسيق الترميز الذي تستخدمه:
    • JSON-LD: استخدِم @id لتحديد عنوان URL.
    • بيانات جزئية: يمكنك استخدام href أو itemid لتحديد عنوان URL.
    • ‫RDFa: يمكنك استخدام about أو href أو resource لتحديد عنوان URL.

إذا كان شريط التنقُّل هو العنصر الأخير في مسار شريط التنقُّل، ليس ضروريًا توفير item. إذا لم يتم تضمين item في العنصر الأخير، سيستخدم محرك بحث Google عنوان URL للصفحة التي تتضمن العنصر.

name

Text

تمثّل هذه السمة عنوان شريط التنقُّل المعروض للمستخدم. إذا كنت تستخدم Thing مع name بدلاً من URL لتحديد item، ليس ضروريًا توفير name في هذه الحالة.

position

Integer

تمثّل هذه السمة موضع شريط التنقّل ضمن مسار شريط التنقّل. ويدل الموضع 1 على بداية المسار.

使用 Search Console 监控富媒体搜索结果

Search Console 是一款工具,可帮助您监控网页在 Google 搜索结果中的显示效果。即使没有注册 Search Console,您的网页也可能会显示在 Google 搜索结果中,但注册 Search Console 能够帮助您了解 Google 如何查看您的网站并做出相应的改进。建议您在以下情况下查看 Search Console:

  1. 首次部署结构化数据后
  2. 发布新模板或更新代码后
  3. 定期分析流量时

首次部署结构化数据后

等 Google 将网页编入索引后,请在相关的富媒体搜索结果状态报告中查看是否存在问题。 理想情况下,有效项目数量会增加,而无效项目数量不会增加。如果您发现结构化数据存在问题,请执行以下操作:

  1. 修正无效项目
  2. 检查实际网址,核实问题是否仍然存在。
  3. 使用状态报告请求验证

发布新模板或更新代码后

如果对网站进行重大更改,请监控结构化数据无效项目的增幅。
  • 如果您发现无效项目增多了,可能是因为您推出的某个新模板无法正常工作,或者您的网站以一种新的错误方式与现有模板交互。
  • 如果您发现有效项目减少了(但无效项目的增加情况并不对应),可能是因为您的网页中未再嵌入结构化数据。请通过网址检查工具了解导致此问题的原因。

定期分析流量时

请使用效果报告分析您的 Google 搜索流量。数据将显示您的网页在 Google 搜索结果中显示为富媒体搜索结果的频率、用户点击该网页的频率以及网页在搜索结果中的平均排名。您还可以使用 Search Console API 自动提取这些结果。

تحديد المشاكل وحلّها

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