יצירת אתרים סמנטיים באמצעות רכיבי אינטרנט ו-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 Office: https://github.com/googlearchive/structured-data-web-components/tree/master/demo

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

בדוגמה הזו אנחנו משתמשים בישויות LocalBusiness כדי להביע את המשמעות של הנתונים שלנו, שהיא המיקום הגיאוגרפי של חלק מהמשרדים של Google.

הדרך הטובה ביותר לבדוק איך Google קוראת את הדף הזה ומוסיפה אותו לאינדקס היא באמצעות הכלי החדש והמשופר לבדיקת נתונים מובְנים. שולחים את כתובת ה-URL של הדמו בקטע Fetch URL (אחזור כתובת URL) ולוחצים על Fetch and validate (אחזור ואימות). בקטע שמימין יוצגו נתונים מנותחים שאוחזרו מהדף, יחד עם שגיאות שעשויות להתרחש. זוהי דרך נוחה מאוד לבדוק אם תגי העיצוב של ה-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 ואת הרכיבים. אנחנו עושים זאת באמצעות קריאה חוזרת מוכנה ל-Polymer (אירוע שמופעל כשהרכיבים מוכנים לשימוש). מכיוון שאפשר להגדיר את הרכיבים באמצעות מאפיינים, מספיק להקצות את נתוני ה-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 כדי להראות לנו רכיבים מותאמים אישית שיצרתם.