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

Ewa Gasperowicz

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

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

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

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

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

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

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

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

مثال

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

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

في هذا العرض التوضيحي، نستخدم كيانات 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 لاستعراض العناصر المخصّصة التي أنشأتها.