إنشاء مواقع إلكترونية دلالية باستخدام مكونات الويب وJSON-LD

Ewa Gasperowicz
X

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

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

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

سيكون من الرائع تجنب التكرار وضمان اتساق البيانات، من خلال إعادة استخدام مقتطفات البيانات نفسها لتعبئة التطبيقات المصغّرة المختلفة وكذلك إعلام محركات البحث والمستهلكين الآخرين بمحتوى صفحتنا. يمكننا تحقيق ذلك باستخدام معيار schema.org وتنسيق JSON-LD للبيانات.

تعبئة المكوّنات بالبيانات المنظَّمة

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

من خلال الجمع بين مكوّنات الويب وJSON-LD، ننشئ بنية محدَّدة جيدًا لأحد التطبيقات:

  • ويمثل schema.org وJSON-LD طبقة البيانات، حيث يوفر schema.org مفردات البيانات ويشكل JSON-LD تنسيق البيانات ونقلها.
  • تمثل العناصر المخصصة طبقة العرض التقديمي، القابلة للتهيئة والفصل عن البيانات نفسها.

مثال

لنأخذ في الاعتبار المثال التالي: صفحة تتضمّن موقعَين جغرافيَين لـ Google Office: https://github.com/googlearchive/structured-data-web-components/tree/master/demo

وهو يحتوي على اثنين من التطبيقات المصغّرة: خريطة مع دبوس لكل مكتب وقائمة منسدلة مع قائمة بالمواقع الجغرافية. من المهم أن تقدم كلتا الأداتين البيانات نفسها للمستخدم وأن تكون الصفحة قابلة للقراءة لمحركات البحث.

صفحة العرض التوضيحي لمكوّنات الويب وصفحة JSON-LD

في هذا العرض التوضيحي، نستخدم كيانات LocalBusiness للتعبير عن معنى بياناتنا، وهي الموقع الجغرافي لبعض مكاتب Google.

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

واجهة مستخدم "أداة اختبار البيانات المنظَّمة"

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

ربط المكوّنات بمصدر بيانات منظَّمة

يتوفّر الرمز الخاص بالعرض التوضيحي ومكوّنات الويب المُستخدَمة لإنشائه على GitHub. لنلقِ نظرة على رمز المصدر الخاص بالصفحة combined-demo.html.

كخطوة أولى، قمنا بتضمين البيانات في الصفحة باستخدام نص JSON-LD البرمجي:

<script type="application/ld+json">
{...}
</script>

بهذه الطريقة، نحرص على سهولة وصول المستهلكين الآخرين الذين يتوافقون مع معيار schema.org وتنسيق JSON-LD، مثل محركات البحث.

كخطوة ثانية، نستخدم مكوّنَين من مكوّنات الويب لعرض البيانات:

  • address-dropdown-jsonld: ينشئ هذا العنصر قائمة منسدلة تتضمّن جميع المواقع الجغرافية التي يتم تمريرها في سمة "jsonld".
  • google-map-jsonld - يُنشئ هذا العنصر خريطة Google مع دبوس لكل موقع يتم تمريره في سمة "jsonld".

ولإجراء ذلك، نستوردها إلى صفحتنا باستخدام عمليات استيراد HTML.

<link rel="import" href="bower_components/google-map-jsonld/google-map-jsonld.html">
<link rel="import" href="bower_components/address-dropdown-jsonld/address-dropdown-jsonld.html">

بعد استيرادها، يمكننا استخدامها في صفحتنا:

<address-dropdown-jsonld jsonld=""></address-dropdown-jsonld>
<google-map-jsonld jsonld=""></google-map-jsonld>

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

document.addEventListener('polymer-ready', function() {
    var jsonld = JSON.parse(
        document.querySelector(
            'script[type="application/ld+json"]').innerText);
    document.querySelector('google-map-jsonld').jsonld = jsonld['@graph'];
    document.querySelector('address-dropdown-jsonld').jsonld = jsonld['@graph'];
    });

JSON-LD، الشريك الفعّال لـ JSON

كما لاحظت على الأرجح، يعمل هذا بشكل مشابه جدًا لاستخدام JSON العادي والقديم لتمرير البيانات. مع ذلك، يتميّز JSON-LD ببعض المزايا التي تنشأ بشكل مباشر من توافقه مع schema.org:

  • يتم تنظيم البيانات بطريقة واضحة باستخدام معيار schema.org. وهي ميزة غير بسيطة، لأنّها تضمن إمكانية توفير مدخلات مفيدة ومتسقة لأي مكوّن ويب تم تفعيل JSON-LD عليه.
  • ويمكن لمحرّكات البحث استهلاك البيانات بكفاءة، ما يحسّن فهرسة الصفحة وقد يؤدي إلى عرض مقتطفات منسّقة في نتائج البحث.
  • إذا كنت تكتب مكوّنات ويب بهذه الطريقة، لا داعي لتعلُّم أو ابتكار بنية (ووثائق) جديدة للبيانات التي تتوقّعها المكونات، لأنّ schema.org يُجري بالفعل كل المهام الصعبة وبناء نقاط توافق. كما أنه يجعل من السهل إنشاء نظام شامل كامل من المكونات المتوافقة.

باختصار، يتيح دمج JSON-LD وschema.org مع تقنية مكوّنات الويب إنشاء أجزاء من واجهة المستخدم قابلة لإعادة الاستخدام ومتوافقة مع المطوّرين ومحرّكات البحث.

إنشاء المكونات الخاصة بك

يمكنك تجربة الأمثلة على GitHub أو قراءة دليل البوليمر حول إنشاء مكونات قابلة لإعادة الاستخدام لبدء كتابة المكونات الخاصة بك. راجِع مستندات البيانات المنظَّمة على developers.google.com للحصول على أفكار حول الكيانات المختلفة التي يمكنك ترميزها باستخدام JSON-LD.

ننصحك بتوجيه عبارات الشكر إلى @polymer لعرض العناصر المخصّصة التي أنشأتها.