וובמאסטר - תיכנות ובניית אתרים

Schema.org

dzrihen/‏ 26 מרץ, 2016
F+
F-

Schema.org הוא פרויקט / אתר שמאגד בתוכו את שלל הדרכים לייצג מידע מובנה ברשת האינטרנט. מידע מובנה הוא למעשה מידע רגיל שרשום בדף אינטרנט כלשהו, אבל הזחלנים של מנועי החיפוש לא יכול לזהות את התבנית שלו, ועל כך נוצר הצורך לסדר אותו בפורמט מסוים.

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

מדובר בפרויקט בקוד פתוח שממומן על ידי ארבע ענקיות החיפוש: יאהו, גוגל, מיקרוסופט ויאנדקס, אבל מנוהל על ידי הקהילה באמצעות אתר Github. הקהילה היא זו אשר מחליטה על "אוצר המילים" של Schema.org שמרכיבה את הסימונים השונים (ועל כך בהמשך...).

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

דוגמאות לתגיות Schema מהיום יום

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

דוגמא נוספת היא תוצאות של מתכונים. אם נחפש בגוגל "מתכון לעוגת שוקולד" נקבל את התוצאות הבאות:

clip_image002[5]

לכל מתכון יש כמה מרכיבים: תמונה, דירוג וכן מספר הצבעות.

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

איך מטמיעים את המידע המובנה בתוך אתר האינטרנט שלנו?

יש שתי דרכים עיקריות להטמיע מידע מובנה בתוך אתר האינטרנט שלנו. הראשונה היא להוסיף את התגים ישירות בתוך הקוד של האתר והשנייה היא לעשות זאת דרך עורך המידע המובנה של Google Search Console.

האופציה של ה – Search Console אשר נקראת גם Data Highlighter היא אופציה שבה בוחרים מראש איזה מידע להדגיש ולאחר מכן מדגישים פריטי מידע שונים בעמוד ובוחרים מהי המשמעות שלהם. היתרון בשיטה הזו הוא כפול מכיוון שהיא גם פשוטה יותר וגם יכולה להתאים לכל העמודים שיש להם מבנה זהה באתר (ואלו בלאו הכי העמודים שיש בהם בדרך כלל מידע מובנה).

בסוף התהליך מתקבל קוד אותו יש להטמיע בעמוד המתאים.

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

<div itemscope itemtype ="http://schema.org/Movie">
   <h1 itemprop="name">Avatar</h1>
   <div itemprop="director" itemscope itemtype="http://schema.org/Person">
     Director: <span itemprop="name">James Cameron</span> (born <span itemprop="birthDate">August 16, 1954</span>)
   </div>
   <span itemprop="genre">Science fiction</span>
   <a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">Trailer</a>
</div>

כמו שאפשר לראות, הוספנו לקוד ה – HTML את המאפיינים הבאים :

Itemscope Itemtype שמצהיר על סרט.

Itemprop שמצהיר על מאפיינים שונים של הסרט כמו למשל שם הסרט, במאי, תאריך הלידה של הבמאי ועוד. מעבר לכך, כמו שאפשר לראות, אפשר להצהיר על פריטי מידע בתוך פריטי מידע אחרים (במקרה הזה Person).

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

<div itemscope itemtype="http://schema.org/Book">
   <span itemprop="name">The Catcher in the Rye</span>—   by <span itemprop="author">J.D. Salinger</span>
   Here is the book's <a itemprop="url" href="http://en.wikipedia.org/wiki/The_Catcher_in_the_Rye">Wikipedia page</a>.
</div>

עוד דבר שחשוב לדעת הוא שאם המידע הוא בתוך סרטון פלאש או תמונה, צריך לסמן גם את התוכן שלו. לדוגמה, אם יש לנו תמונה של חמישה כוכבים (או חמש תמונות של כוכב אחד לצורך העניין), עלינו לסמן את התג עם המאפיין Content בצורה הבאה... חשוב לשים לב שבמקרה הזה התג הוא עצמאי ולא צריך להקיף את תגי הפלאש או תגי התמונה.

<meta itemprop="ratingValue" content="4" />

את הרשימה המלאה של המאפיינים השונים ניתן לראות בעמוד הבא: http://schema.org/docs/full.html


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

dzrihen

מקדם אתרים וכותב בלוג מקצועי בנושא
תגיות: קידום אתרים‏  /  SEO‏  /  שיווק באינטרנט‏  

תגובות בפייסבוק

תגובות למאמר



תגיות פופולאריות

X
הצטרף לעמוד שלנו בפייסבוק להישאר מעודכן!
וובמאסטר © כל הזכויות שמורות