גוגל, בינג ויאהו עם פרויקט schema.org!

האם קצו כל הקיצים? 3 הגדולים מאחדים כוחות בפרויקט חדש שנועד ליצור סטנדרטים חדשים אשר יעזרו למנועי חיפוש להתמודד ביתר יעילות עם הרגלי הגלישה המודרניים והשינויים ברשת האינטרנט. במבט ראשון היזמה הזאת אשר מתגלמת באתר www.schema.org נראית מורכבת ומעיקה על מנהלי ובוני אתרים ותוכן והאמת… גם במבט שני!

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

מתוך ההצהרה של גוגל על schema.org (מקור):

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

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

דוגמא לתקציר של תוצאת חיפוש עם קוד מובנה אשר מאפשר להחזיר הצבעות של גולשים:

קהילת מנהלי האתרים ברחבי העולם מתחילה לאמץ בצורה נרחבת את שיטת הקידוד החדשה ואנו יכולים להציג היום תוצאות חיפוש בצפיפות גדולה פי 10 מאשר הצגנו לפני שנתיים.

אנו מבינים כי זה לוקח זמן ומאמץ להוסיף קידוד חדש לדפים באתר שלך וזה קשה במיוחד אם מנועי חיפוש שונים מבקשים צורת קידוד שונה. בשל כך איחדנו כוחות עם יאהו ובינג כדי לספק לכם קוד אחיד המוסכם על 3 מנועי החיפוש המובילים בעולם אותו ניתן ללמוד באתר schema.org

במה מדובר? מפשטים את הדברים!

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

מהו מידע מובנה (structured data) ?

מידע מובנה או נתונים מובנים בהקשר הזה הוא בניית המידע אותו אנו בוחרים להציג בדף במבנה אשר מוסכם על מנועי החיפוש. דוגמאות למידע מובנה אשר מופיע כבר היום במנועי חיפוש הוא התקצירים העשירים שגוגל מציג בתוצאות החיפוש. דוגמה לתוצאות חיפוש עשירות (Rich Snippets) בהם גוגל משתמש כבר היום תוכלו למצוא ב: Introducing Rich Snippets . למיטב ידיעתי תוצאות חיפוש עשירות עדיין לא מוצגות בישראל… כהרגלנו אנו עדיין עשור אחרי מנוע החיפוש בארצות הברית אבל דוגמה למבנה של תוצאות חיפוש עשירות תוכלו לראות כאשר מחפשים אחר מתכונים בגוגל.קום לדוגמה alfredo pasta recipe

רגע אנחנו מדברים על Microdata?

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

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

פרויקט schema.org

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

קוד הHTML המקורי:

	<h1>רובוטריקים 3: אפלת הירח<h1>
	הפרק השלישי בסדרת הרובוטריקים המגוללת את עלילותיהם סם וויטוויקי, הרובוטריקים נגד מגטרון. הפעם מרוץ חלל מסוכן בין רוסיה לארה"ב מתחיל מלחמה בין מגטרון לאופטימוס פריים. במאי: מייקל ביי
	נכתב על ידי: ארהן קרוגר
	שחקנים: Shia LaBeouf, Rosie Huntington-Whiteley, Tyrese Gibson

הקוד החדש אשר מותאם לאתר schema.org:

<div itemscope itemtype="http://schema.org/Movie">
	<h1 itemprop="name">רובוטריקים 3: אפלת הירח<h1>
	<span itemprop="description">הפרק השלישי בסדרת הרובוטריקים המגוללת את עלילותיהם סם וויטוויקי, הרובוטריקים נגד מגטרון. הפעם מרוץ חלל מסוכן בין רוסיה לארה"ב מתחיל מלחמה בין מגטרון לאופטימוס פריים.</span><div itemprop="director" itemscope itemtype="http://schema.org/People">
	<span itemprop="name">במאי: מייקל ביי</span>
	</div>
	נכתב על ידי: <div itemprop="author" itemscope itemtype="http://schema.org/People"><span itemprop="name">ארהן קרוגר</span></div>
	שחקנים: <div itemprop="actors" itemscope itemtype="http://schema.org/People"><span itemprop="name">Shia LaBeouf</span></div>, <div itemprop="actors" itemscope itemtype="http://schema.org/People"><span itemprop="name">Rosie Huntington-Whiteley</span></div>,<div itemprop="actors" itemscope itemtype="http://schema.org/People"><span itemprop="name"> Tyrese Gibson</span></div>
</div>

מטורף לא? קוד ארוך מאוד שעוטף כל חלק מידע בDiv עם הגדרה של סוג המידע… על פניו נראה כאילו אין סיכוי שמנהלי אתרים ברחבי העולם יתאימו את האתרים שלהם להגדרות אלו… אבל כאן נכנס לתמונה ממשק הניהול שלכם

האתר שלנו "שגיב SEO" מבוסס וורדפרס ולכן אני יכול להתאים את הקוד בדף אחד בהתאם לקטגוריה כלומר עם התניה של הקטגוריה בה אנו נמצאים וכך לשכפל את הקוד במעט מאמץ ולהחיל אותו על דפים רבים באתר. אם אתם רוצים לבדוק את דף באתר שלכם בכלי אשר מחזיר הדמיה של "Rich Snippets" בקרו בכלי: Rich Snippets Testing Tool

מפרקים את הקוד לחלקים מובנים יותר

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

itemtype="http://schema.org/Movie": בשורה זאת אנו מצהירים על סוג הפריט הספציפי… במקרה זה מדובר במידע על סרט כלשהו ולכן כתבנו itemtype (סוג מידע) ולאחר מכן http://schema.org/movie כלומר מדובר בסרט. סוג הפריטים נכתבים בצורה של כתובת URL.

itemprop: איזה מידע נוסף אנו יכולים לתת למנועי חיפוש בנוגע לסרט עליו כתבנו? לסרטים יש מידע נלווה רב כמו השחקנים שבו, הבמאי, הקטגוריה של הסרט כלומר אם הוא סרט מדע בדיוני, אימה וכו'… רשימה מלאה של סוגי המאפיינים של דף העוסק בסרט מסוים ניתן למצוא בדף: http://schema.org/movie

ומה אם אין לי אתר סרטים.. באיזה קוד אני צריך להשתמש?

אתר schema.org מכיל רשימה של תגים בהתאם לסוג הדף הספציפי באתר שלכם וסוג התוכן בדך שלכם. רשימה מלאה של ההגדרות על פי סוג התוכן תמצאו בדף: The Type Hierarchy. זה בהחלט קצת מורכב במיוחד נוכח העובדה שאין כרגע המון דוגמאות ברשת האינטרנט לקוד פעיל ודוגמאות עובדה שאני בטוח שתשתנה עם הזמן.

הסוג הרחב ביותר של הגדרה נקרא "אובייקט" (thing)… לכל אובייקט 4 הגדרות רחבות והן: שם האובייקט, תיאור האובייקט, כתובת URL ותמונה. ניתן לכלול מאפיינים מדויקים יותר כמו מיקום (Place) ותת מאפיין של מיקום אשר נקרא עסק מקומי (localbusiness)… כדאי לחשוב על מאפיינים אלו במבנה של היררכיה כדי להבין אותם בצורה טובה יותר.

בסעיף 2b בדף מתחילים לעבוד עם schema.org (קישור: Getting started with schema.org) מוצהר כי מומלץ לסמן חלקים רבים ככל האפשר אך כי יש לסמן רק חלקים בדף הנראים לגולש הרגיל (כלומר לא זה שמחובר כמנהל אתר).

אבל איך מגדירים כותרת, תגיות, מאמרים?? אני צריך דוגמאות!!

1. הגדרה של מאמר באתר מאמרים

	<div itemscope itemtype="http://schema.org/Article">
	התוכן של המאמר עצמו כולל כותרות תמונות, תגיות וכו'
	</div>

הסבר קצר: הגדרה זאת אומרת למנועי החיפוש שהתוכן אשר נמצא בין התג הפותח של הDIV לתג הסוגר של DIV הוא מאמר. הפריט מאמר הוא תת פריט של האובייקט creative work. בכדי להבין את זה כדאי לחשוב על הגדרות אלו כמו תיוק במדף הנכון בחנות הספרים שלכם (מטפורה לאתר שלכם). בקרו בדף The Type Hierarchy בו מפורט העץ / ההיררכיה של פריטים על פי שיטת הקידוד החדשה.

2. הגדרה של פוסט בבלוג שלכם

	<div itemscope itemtype="http://schema.org/BlogPosting">
	התוכן של המאמר עצמו כולל כותרות תמונות, תגיות וכו'
	</div>

הסבר קצר: הגדרה זאת אומרת למנועי החיפוש שמדובר בשם של משהו כלומר כותרת… ובין אם מדובר בכותרת של מאמר או של מוצר מבין הדף.. הכותרת הזאת כמובן יושבת בתוך DIV אשר מצהיר באיזה סוג של דף / תוכן מדובר.

3. הגדרה של כותרת ראשית או פנימית בדף שלכם

	<h1><span itemprop="name">אני שם המאמר לדוגמה</span></h1>

הסבר קצר: הגדרה זאת אומרת למנועי החיפוש שמדובר בשם של משהו כלומר כותרת… ובין אם מדובר בכותרת של מאמר או של מוצר מבין הדף.. הכותרת הזאת כמובן יושבת בתוך DIV אשר מצהיר באיזה סוג של דף / תוכן מדובר.

4. הגדרה של תמונה

	<img itemprop="image" src="somepic.jpg" alt="some description">

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

מידע רלוונטי על פרוייקט schema.org:

לסיכום

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