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

مع تزايد رواج عناصر الويب والمكتبات المتوافقة، مثل 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 معالجته.

يمكنك الاطّلاع على مزيد من المعلومات حول الأداة والتحسينات التي أدخلتها في مشاركة المدونة على Webmaster Central.

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

يمكنك العثور على رمز الإصدار التجريبي ومكونات الويب المستخدَمة لإنشاءه على 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 لعرض العناصر المخصّصة التي أنشأتها.