منصّة عرض بعناصر متغيّرة

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

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

أمثلة على منصّة العرض بعناصر متغيّرة لمُضيف وصفة طعام ولمُضيف دورة  تدريبية ولمُضيف فيلم في

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

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

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

  1. حدِّد الصفحة التي ستتضمّن البيانات المنظَّمة لمنصّة العرض بعناصر متغيّرة. وثمة خياران:
    • صفحة الملخّص وصفحات التفاصيل المتعددة: تحتوي صفحة الملخّص على وصف موجز لكل عنصر في القائمة، ويشير كل وصف إلى صفحة تفاصيل منفصلة تركز بأكملها على عنصر واحد. على سبيل المثال، صفحة ملخّص تتضمّن أفضل وصفات تحضير الكعك، ويتضمّن كل وصف رابطًا يؤدي إلى الوصفة الكاملة لكل نوع من أنواع الكعك.
    • قائمة من صفحة واحدة متكاملة: تتضمّن هذه الصفحة الواحدة كل معلومات القائمة، بما في ذلك النص الكامل لكل عنصر. على سبيل المثال، قائمة بأهم الأفلام لعام 2020 مدرَجة جميعها ضمن صفحة واحدة.
  2. أضِف الخصائص المطلوبة. للحصول على معلومات حول مكان وضع البيانات المنظَّمة في الصفحة، يمكنك مشاهدة بيانات JSON-LD المنظَّمة: موضع الإدراج في الصفحة.
  3. أضِف الخصائص المطلوبة والمقترَحة لنوع المحتوى المحدّد الذي تعرضه منصّة العرض بعناصر متغيّرة:
  4. اتّبِع الإرشادات.

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

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

صفحة الملخّص

تحدّد صفحة الملخّص خاصية 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":"http://example.com/peanut-butter-cookies.html"
        },
        {
          "@type":"ListItem",
          "position":2,
          "url":"http://example.com/triple-chocolate-chunk.html"
        },
        {
          "@type":"ListItem",
          "position":3,
          "url":"http://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": "http://www.example.com/video123.mp4",
        "embedUrl": "http://www.example.com/videoplayer?video=123",
        "uploadDate": "2018-02-05T08:00:00+08:00",
        "duration": "PT1M33S",
        "interactionStatistic": {
          "@type": "InteractionCounter",
          "interactionType": { "@type": "http://schema.org/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": "http://www.example.com/video123.mp4",
        "embedUrl": "http://www.example.com/videoplayer?video=123",
        "uploadDate": "2018-02-05T08:00:00+08:00",
        "duration": "PT1M33S",
        "interactionStatistic": {
          "@type": "InteractionCounter",
          "interactionType": { "@type": "http://schema.org/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": "http://www.example.com/video123.mp4",
        "embedUrl": "http://www.example.com/videoplayer?video=123",
        "uploadDate": "2018-02-05T08:00:00+08:00",
        "duration": "PT1M33S",
        "interactionStatistic": {
          "@type": "InteractionCounter",
          "interactionType": { "@type": "http://schema.org/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. يمكنك برمجة هذا الإجراء باستخدام واجهة برمجة التطبيقات لملف Sitemap في Search Console.

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

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

ItemList

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

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

الخصائص المطلوبة
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.

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

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