البيانات المنظَّمة للوحة العرض الدوّارة (ItemList)

إنّ لوحة العرض الدوّارة هي نتيجة منسّقة على شكل قائمة يمكن للمستخدمين التمرير سريعًا لعرض محتواها على الأجهزة الجوّالة. وهي تعرض بطاقات متعددة من الموقع الإلكتروني نفسه (تُعرف أيضًا باسم لوحة العرض الدوّارة للمضيف). ليكون محتوى موقعك الإلكتروني مؤهّلاً للظهور على شكل نتائج منسّقة ضمن لوحة عرض دوّارة للمضيف، أضِف بيانات ItemList المنظَّمة مع أحد أنواع المحتوى التالية المتوافقة:

في ما يلي الشكل الذي قد تظهر به لوحات العرض الدوّارة في "بحث Google" بعد إضافة ترميز ItemList مع نوع محتوى متوافق:

صورة توضيحية تبيّن شكل ظهور لوحة عرض دوّارة لمضيف دورات تدريبية ضمن "بحث Google"، وتعرض 3 دورات تدريبية مختلفة من الموقع الإلكتروني نفسه بتنسيق لوحة عرض دوّارة يمكن للمستخدمين استكشافها واختيار دورة تدريبية محدّدة منها صورة توضيحية تبيّن شكل ظهور لوحة عرض دوّارة لمضيف أفلام ضمن "بحث Google"، وتعرض 3 أفلام مختلفة من الموقع الإلكتروني نفسه بتنسيق لوحة عرض دوّارة يمكن للمستخدمين استكشافها واختيار فيلم محدّد منها

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

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

في ما يلي نظرة عامة حول كيفية إضافة بيانات منظَّمة إلى موقعك الإلكتروني. للحصول على دليل مفصّل حول كيفية إضافة بيانات منظَّمة إلى صفحة ويب، يمكنك الاطّلاع على الدرس التطبيقي حول الترميز الخاص بالبيانات المنظَّمة.

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

صفحة الملخّص وصفحات التفاصيل المتعدّدة

تحتوي صفحة الملخّص على وصف موجز لكل عنصر في القائمة، ويشير كل وصف إلى صفحة تفاصيل منفصلة تركّز بأكملها على عنصر واحد.

صفحة الملخّص

تحدّد صفحة الملخّص ItemList، حيث يتم تضمين ثلاث سمات فقط لكل عنصر ListItem: @type (مضبوط على "ListItem") وposition (الموضع في القائمة) وurl (عنوان URL لصفحة تتضمّن تفاصيل كاملة حول هذا العنصر).

في ما يلي مثال على الشكل الذي تظهر به صفحة الملخّص: 


<html>
  <head>
    <title>Best cookie recipes</title>
    <script type="application/ld+json">
    {
      "@context":"https://schema.org",
      "@type":"ItemList",
      "itemListElement":[
        {
          "@type":"ListItem",
          "position":1,
          "url":"https://example.com/peanut-butter-cookies.html"
        },
        {
          "@type":"ListItem",
          "position":2,
          "url":"https://example.com/triple-chocolate-chunk.html"
        },
        {
          "@type":"ListItem",
          "position":3,
          "url":"https://example.com/snickerdoodles.html"
        }
      ]
    }
    </script>
  </head>
  <body>
    <p>
      Here are the best cookie recipes of all time.
    </p>
    <h2>
      Peanut Butter Cookies
    </h2>
    <p>
      This <a href="https://example.com/peanut-butter-cookies.html">Peanut Butter Cookie recipe</a> is the tastiest one you'll find.
    </p>
    <h2>
      Triple Chocolate Chunk Cookies
    </h2>
    <p>
      This <a href="https://example.com/triple-chocolate-chunk.html">Triple Chocolate Chunk Cookies recipe</a> is the tastiest one you'll find.
    </p>
    <h2>
      Snickerdoodles
    </h2>
    <p>
      This <a href="https://example.com/snickerdoodles.html">Snickerdoodles recipe</a> is the tastiest one you'll find.
    </p>
  </body>
</html>

صفحة التفاصيل

تحدِّد صفحة التفاصيل نوع البيانات المنظَّمة المحدّد الذي تعرضه لوحة العرض الدوّارة. على سبيل المثال، إذا كان موضوع صفحة الملخّص هو أفضل وصفات الكعك، ستتضمّن كل صفحة تفاصيل البيانات المنظَّمة Recipe لوصفة معيّنة.

في ما يلي مثال على الشكل الذي تظهر به صفحة التفاصيل:

كعك بزبدة الفول السوداني 


<html>
  <head>
    <title>Peanut Butter Cookies</title>
    <script type="application/ld+json">
    {
      "@context": "https://schema.org/",
      "@type": "Recipe",
      "name": "Peanut Butter Cookies",
      "image": [
        "https://example.com/photos/1x1/photo.jpg",
        "https://example.com/photos/4x3/photo.jpg",
        "https://example.com/photos/16x9/photo.jpg"
      ],
      "author": {
        "@type": "Person",
        "name": "Wendy Darling"
      },
      "datePublished": "2018-03-10",
      "description": "This Peanut Butter Cookie recipe is everyone's favorite",
      "prepTime": "PT10M",
      "cookTime": "PT25M",
      "totalTime": "PT35M",
      "recipeCuisine": "French",
      "recipeCategory": "Cookies",
      "keywords": "peanut butter, cookies",
      "recipeYield": "24",
      "nutrition": {
        "@type": "NutritionInformation",
        "calories": "120 calories"
      },
      "aggregateRating": {
        "@type": "AggregateRating",
        "ratingValue": "5",
        "ratingCount": "18"
      },
      "recipeIngredient": [
        "2 cups of peanut butter",
        "1/3 cup of sugar"
      ],
      "recipeInstructions": [
        {
          "@type": "HowToStep",
          "text": "Mix together the peanut butter and sugar."
        },
        {
          "@type": "HowToStep",
          "text": "Roll cookie dough into small balls and place on a cookie sheet."
        },
        {
          "@type": "HowToStep",
          "text": "Bake for 25 minutes."
        }
      ],
      "video": {
        "@type": "VideoObject",
        "name": "How to Peanut Butter Cookies",
        "description": "This is how you make peanut butter cookies.",
        "thumbnailUrl": [
          "https://example.com/photos/1x1/photo.jpg",
          "https://example.com/photos/4x3/photo.jpg",
          "https://example.com/photos/16x9/photo.jpg"
         ],
        "contentUrl": "https://www.example.com/video123.mp4",
        "embedUrl": "https://www.example.com/videoplayer?video=123",
        "uploadDate": "2018-02-05T08:00:00+08:00",
        "duration": "PT1M33S",
        "interactionStatistic": {
          "@type": "InteractionCounter",
          "interactionType": { "@type": "WatchAction" },
          "userInteractionCount": 2347
        },
        "expires": "2019-02-05T08:00:00+08:00"
       }
    }
    </script>
  </head>
  <body>
    <p>
      Here's how to make peanut butter cookies.
    </p>
    <ol>
      <li>Mix together the peanut butter and sugar.</li>
      <li>Roll cookie dough into small balls and place on a cookie sheet.</li>
      <li>Bake for 25 minutes.</li>
    </ol>
  </body>
</html>

كعك مع ثلاثة أنواع من رقائق الشوكولاتة 


<html>
  <head>
    <title>Triple Chocolate Chunk Cookies</title>
    <script type="application/ld+json">
    {
      "@context": "https://schema.org/",
      "@type": "Recipe",
      "name": "Triple Chocolate Chunk Cookies",
      "image": [
        "https://example.com/photos/1x1/photo.jpg",
        "https://example.com/photos/4x3/photo.jpg",
        "https://example.com/photos/16x9/photo.jpg"
      ],
      "author": {
        "@type": "Person",
        "name": "Wendy Darling"
      },
      "datePublished": "2018-03-10",
      "description": "This Triple Chocolate Chunk Cookie recipe is everyone's favorite",
      "prepTime": "PT10M",
      "cookTime": "PT25M",
      "totalTime": "PT35M",
      "recipeCuisine": "French",
      "recipeCategory": "Cookies",
      "keywords": "chocolate, cookies",
      "recipeYield": "24",
      "nutrition": {
        "@type": "NutritionInformation",
        "calories": "120 calories"
      },
      "aggregateRating": {
        "@type": "AggregateRating",
        "ratingValue": "5",
        "ratingCount": "18"
      },
      "recipeIngredient": [
        "2 cups of melted chocolate",
        "1/3 cup of sugar"
      ],
      "recipeInstructions": [
        {
          "@type": "HowToStep",
          "text": "Mix together the chocolate and sugar."
        },
        {
          "@type": "HowToStep",
          "text": "Roll cookie dough into small balls and place on a cookie sheet."
        },
        {
          "@type": "HowToStep",
          "text": "Bake for 25 minutes."
        }
      ],
      "video": {
        "@type": "VideoObject",
        "name": "How to Triple Chocolate Chunk Cookies",
        "description": "This is how you make peanut butter cookies.",
        "thumbnailUrl": [
          "https://example.com/photos/1x1/photo.jpg",
          "https://example.com/photos/4x3/photo.jpg",
          "https://example.com/photos/16x9/photo.jpg"
         ],
        "contentUrl": "https://www.example.com/video123.mp4",
        "embedUrl": "https://www.example.com/videoplayer?video=123",
        "uploadDate": "2018-02-05T08:00:00+08:00",
        "duration": "PT1M33S",
        "interactionStatistic": {
          "@type": "InteractionCounter",
          "interactionType": { "@type": "WatchAction" },
          "userInteractionCount": 2347
        },
        "expires": "2019-02-05T08:00:00+08:00"
       }
    }
    </script>
  </head>
  <body>
    <p>
      Here's how to make Triple Chocolate Chunk Cookies.
    </p>
    <ol>
      <li>Mix together the chocolate and sugar.</li>
      <li>Roll cookie dough into small balls and place on a cookie sheet.</li>
      <li>Bake for 25 minutes.</li>
    </ol>
  </body>
</html>

كعك محلّى بالسكر


<html>
  <head>
    <title>Snickerdoodles</title>
    <script type="application/ld+json">
    {
      "@context": "https://schema.org/",
      "@type": "Recipe",
      "name": "Snickerdoodles",
      "image": [
        "https://example.com/photos/1x1/photo.jpg",
        "https://example.com/photos/4x3/photo.jpg",
        "https://example.com/photos/16x9/photo.jpg"
      ],
      "author": {
        "@type": "Person",
        "name": "Wendy Darling"
      },
      "datePublished": "2018-03-10",
      "description": "This Snickerdoodles recipe is everyone's favorite",
      "prepTime": "PT10M",
      "cookTime": "PT25M",
      "totalTime": "PT35M",
      "recipeCuisine": "French",
      "recipeCategory": "Cookies",
      "keywords": "cinnamon sugar, cookies",
      "recipeYield": "24",
      "nutrition": {
        "@type": "NutritionInformation",
        "calories": "120 calories"
      },
      "aggregateRating": {
        "@type": "AggregateRating",
        "ratingValue": "5",
        "ratingCount": "18"
      },
      "recipeIngredient": [
        "2 cups of cinnamon",
        "1/3 cup of sugar"
      ],
      "recipeInstructions": [
        {
          "@type": "HowToStep",
          "text": "Mix together the cinnamon and sugar."
        },
        {
          "@type": "HowToStep",
          "text": "Roll cookie dough into small balls and place on a cookie sheet."
        },
        {
          "@type": "HowToStep",
          "text": "Bake for 25 minutes."
        }
      ],
      "video": {
        "@type": "VideoObject",
        "name": "How to Snickerdoodles",
        "description": "This is how you make snickerdoodles.",
        "thumbnailUrl": [
          "https://example.com/photos/1x1/photo.jpg",
          "https://example.com/photos/4x3/photo.jpg",
          "https://example.com/photos/16x9/photo.jpg"
         ],
        "contentUrl": "https://www.example.com/video123.mp4",
        "embedUrl": "https://www.example.com/videoplayer?video=123",
        "uploadDate": "2018-02-05T08:00:00+08:00",
        "duration": "PT1M33S",
        "interactionStatistic": {
          "@type": "InteractionCounter",
          "interactionType": { "@type": "WatchAction" },
          "userInteractionCount": 2347
        },
        "expires": "2019-02-05T08:00:00+08:00"
       }
    }
    </script>
  </head>
  <body>
    <p>
      Here's how to make snickerdoodles.
    </p>
    <ol>
      <li>Mix together the cinnamon and sugar.</li>
      <li>Roll cookie dough into small balls and place on a cookie sheet.</li>
      <li>Bake for 25 minutes.</li>
    </ol>
  </body>
</html>

قائمة من صفحة واحدة متكاملة

تتضمّن قائمة الصفحة الواحدة المتكاملة كل معلومات لوحة العرض الدوّارة، بما في ذلك النص الكامل لكل عنصر. على سبيل المثال، قائمة بأهم الأفلام لعام 2020 مدرَجة جميعها ضمن صفحة واحدة. ولا تتضمّن هذه الصفحة روابط تؤدي إلى صفحات تفاصيل أخرى.

في ما يلي مثال على صفحة واحدة متكاملة: 


<html>
  <head>
    <title>The Best Movies from the Oscars - 2018</title>
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "ItemList",
      "itemListElement": [
        {
          "@type": "ListItem",
          "position": "1",
          "item": {
            "@type": "Movie",
            "url": "https://example.com/2019-best-picture-noms#a-star-is-born",
            "name": "A Star Is Born",
            "image": "https://example.com/photos/6x9/photo.jpg",
            "dateCreated": "2018-10-05",
            "director": {
                "@type": "Person",
                "name": "Bradley Cooper"
              },
            "review": {
              "@type": "Review",
              "reviewRating": {
                "@type": "Rating",
                "ratingValue": "5"
              },
              "author": {
                "@type": "Person",
                "name": "John D."
              },
              "reviewBody": "Heartbreaking, inpsiring, moving. Bradley Cooper is a triple threat."
              },
              "aggregateRating": {
                "@type": "AggregateRating",
                "ratingValue": "90",
                "bestRating": "100",
                "ratingCount": "19141"
              }
            }
          },
        {
          "@type": "ListItem",
          "position": "2",
          "item": {
            "@type": "Movie",
            "name": "Bohemian Rhapsody",
            "url": "https://example.com/2019-best-picture-noms#bohemian-rhapsody",
            "image": "https://example.com/photos/6x9/photo.jpg",
            "dateCreated": "2018-11-02",
            "director": {
                "@type": "Person",
                "name": "Bryan Singer"
              },
            "review": {
              "@type": "Review",
              "reviewRating": {
                "@type": "Rating",
                "ratingValue": "3"
              },
              "author": {
                "@type": "Person",
                "name": "Vin S."
              },
              "reviewBody": "Rami Malek's performance is overrated, at best."
              },
              "aggregateRating": {
                "@type": "AggregateRating",
                "ratingValue": "61",
                "bestRating": "100",
                "ratingCount": "21985"
              }
            }
          },
        {
          "@type": "ListItem",
          "position": "3",
          "item": {
            "@type": "Movie",
            "name": "Black Panther",
            "url": "https://example.com/2019-best-picture-noms#black-panther",
            "image": "https://example.com/photos/6x9/photo.jpg",
            "dateCreated": "2018-02-16",
            "director": {
                "@type": "Person",
                "name": "Ryan Coogler"
              },
            "review": {
              "@type": "Review",
              "reviewRating": {
                "@type": "Rating",
                "ratingValue": "2"
              },
              "author": {
                "@type": "Person",
                "name": "Trevor R."
              },
              "reviewBody": "I didn't like the lighting and CGI in this movie."
              },
              "aggregateRating": {
                "@type": "AggregateRating",
                "ratingValue": "96",
                "bestRating": "100",
                "ratingCount": "88211"
              }
            }
          }
      ]
    }
    </script>
  </head>
  <body>
  </body>
</html>

الإرشادات

بالإضافة إلى الإرشادات العامة للبيانات المنظَّمة، تنطبق الإرشادات التالية على البيانات المنظَّمة للوحة العرض الدوّارة:

  • يجب أن تكون جميع العناصر في القائمة من النوع نفسه. على سبيل المثال، إذا كان موضوع القائمة هو وصفات الطعام، يجب تضمين عناصر Recipe فقط. ويجب عدم خلط أنواع مختلفة.
  • تأكّد من أنّ بيانات لوحة العرض الدوّارة مكتملة وتتضمّن جميع العناصر المدرَجة في الصفحة.
  • يجب أن يكون النص المرئي للمستخدم مماثلاً للمعلومات المدرَجة في البيانات المنظَّمة على الصفحة.
  • سيتم عرض العناصر المدرَجة في تنسيق القائمة بالترتيب الذي تحدّده السمة position.

التحقّق من صحة البيانات المنظَّمة ونشرها

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

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

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

ItemList

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

يتوفّر تعريف ItemList الكامل على schema.org/ItemList.

في ما يلي السمات المتوافقة مع Google:

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

ListItem

تمثّل هذه السمة قائمة من العناصر. ويجب أن تكون جميع العناصر من النوع نفسه. ولمزيد من التفاصيل، يمكنك الاطّلاع على ListItem.

ListItem

تحتوي السمة ListItem على تفاصيل حول عنصر واحد في القائمة.

  • في صفحة الملخّص، يجب إدراج السمات type وposition وurl فقط في ListItem.
  • بالنسبة إلى قائمة الصفحة المتكاملة، يجب إدراج جميع خصائص schema.org الإضافية لنوع البيانات الذي تصفه الصفحة. أنواع البيانات المتوافقة هي:

يتوفّر تعريف ListItem الكامل على schema.org/ListItem.

صفحات الملخّص

تنطبق السمات التالية على صفحات الملخّص:

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

Integer

تمثّل هذه السمة موضع العنصر في لوحة العرض الدوّارة. ويكون هذا العدد مرتبًا حسب الرقم 1.
url

URL

وتمثّل هذه الخاصية عنوان URL الأساسي لصفحة تفاصيل العنصر. ويجب أن تكون جميع عناوين URL المدرَجة في القائمة فريدة ومعروضة على النطاق نفسه (نطاق الصفحة الحالية أو نطاقها الفرعي أو الأساسي نفسه).

الصفحات المتكاملة

تنطبق الخصائص التالية على الصفحات المتكاملة:

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

Thing

عنصر فردي في قائمة. عليك تعبئة هذا الكائن بالقيم التالية بالإضافة إلى جميع خصائص النوع المحدّد والموضّح من البيانات المنظَّمة:

  • item.name
  • item.url
  • أي سمات أخرى مطلوبة لهذا النوع من البيانات على النحو الموضّح في schema.org والقواعد الموضّحة في المستندات المخصّصة لنوع المحتوى الخاص بك: مثال: إذا كان المحتوى وصفة طعام، يمكنك توفير الخاصيتَين prepTime وimage.
item.name

Text

اسم السلسلة للعنصر. يتم عرض item.name كعنوان لعنصر فردي في لوحة العرض الدوّارة. ويتم تجاهل تنسيق HTML.
item.url

URL

تمثّل هذه الخاصية عنوان URL المؤهّل بشكل كامل وعلامة ارتساء الصفحة لهذا العنصر على الصفحة. يجب أن يكون عنوان URL هو عنوان الصفحة الحالية، ويجب تضمين علامة ارتساء HTML (علامة <a> أو القيمة name أو القيمة id) على صفحتك بالقرب من النص المرئي للمستخدم. مثال: https://example.org/recipes/pies#apple_pie.
position

Integer

تمثّل هذه السمة موضع العنصر في لوحة العرض الدوّارة. ويكون هذا العدد مرتبًا حسب الرقم 1.

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

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