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

Ewa Gasperowicz

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

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

في 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 أو قراءة دليل Polymer حول إنشاء مكوّنات قابلة لإعادة الاستخدام لبدء كتابة المكوّنات الخاصة بك. اطّلِع على مستندات البيانات المنظَّمة على developers.google.com للحصول على أفكار حول الكيانات المختلفة التي يمكنك وضع علامات عليها باستخدام JSON-LD.

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