יצירת אתרים סמנטיים באמצעות רכיבי אינטרנט ו-JSON-LD

עם העלייה בפופולריות של רכיבי אינטרנט ושל ספריות תומכות כמו Polymer, רכיבים מותאמים אישית הופכים להיות דרך אטרקטיבית לבניית תכונות עבור ממשק המשתמש. מעטפת ברירת המחדל של רכיבים מותאמים אישית הופכת אותם למועילים במיוחד ליצירת ווידג'טים עצמאיים.

חלק מהווידג'טים עומדים בפני עצמם, אבל רבים מהם מסתמכים על נתונים חיצוניים כדי להציג את התוכן למשתמש - למשל, התחזית הנוכחית לווידג'ט של מזג האוויר או כתובת של חברה לווידג'ט של מפה.

ב-Polymer, רכיבים מותאמים אישית הם מוצהרים, כך שברגע שהם מייבאים אותם לפרויקט, קל מאוד לכלול אותם ולהגדיר אותם ב-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

התרשים מכיל שני ווידג'טים: מפה עם סיכה לכל משרד ותפריט נפתח עם רשימת המיקומים. חשוב ששני הווידג'טים יציגו למשתמש אותם נתונים ושהדף יהיה קריא למנועי חיפוש.

בהדגמה הזו אנחנו משתמשים בישויות 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 עם הרכיבים. אנחנו עושים זאת באמצעות קריאה חוזרת (callback) מוכנה לפולימרים (זהו אירוע שמופעל כשהרכיבים מוכנים לשימוש). מאחר שניתן להגדיר את הרכיבים באמצעות מאפיינים, מספיק להקצות את נתוני ה-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 כדי להציג את האלמנטים המותאמים אישית שיצרתם!