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

Ewa Gasperowicz
X

עם העלייה בפופולריות של רכיבי אינטרנט וספריות תמיכה כמו 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

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

דף הדגמה של Web Components ו-JSON-LD

בדוגמה הזו אנחנו משתמשים בישויות 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 כדי להראות לנו רכיבים מותאמים אישית שיצרתם.