האם קצו כל הקיצים? 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 מנהלים, ואני חושב שזה תקדים גם גוגל, גם יאהו וגם בינג ולכן כדאי לקחת את נושא זה ברצינות הראויה ולהתרגל לבנות מעתה והלאה אתרים בהם מוטמעת שיטת הסימון החדשה ככל האפשר. אני בטוח שעם הזמן גם מערות ניהול תוכן כמו וורדפרס וג'ומלה יגיעו עם שיטת הסימון החדשה בצורה מובנית לפחות עבור חלק מהתכנים.
מארק 24 בינואר 2014
נראה הזוי במיוחד, אבל נקרא ונלמד את הדרך החדשה.
אחלה מאמר וכל הכבוד !
אופיר 24 בינואר 2014
תודה רבה מארק.
בועז דגני 24 בינואר 2014
אחד הפוסטים אם לא אההה….
אהבתי …שווה קריאה שניה
שגיב SEO 24 בינואר 2014
תודה על ה-פרגון בועז 😉
פולקובסקי 24 בינואר 2014
רק אלקסה נשארה מחוץ לתמונה
שגיב SEO 24 בינואר 2014
נראה לי שמדובר רק על מנועי חיפוש וכל ה"קטנים" יתיישרו לכיוון של הגדולים 🙂
imguru 24 בינואר 2014
ממבט הראשון (וגם השלישי) נראה די מסובך וגם אין לשכוח כי גודל של כל דף שנבנה לפי חוקים "ישנים", יוכפל ואף יותר מזה, דבר שישפיע בצורה כזו או אחרת על זמני טעינת דף האינטרנט, אך אם הגדולים החליטו ליישר קו (ואני מקווה שבצורה סופית) ככל הנראה לא נשאר, אלא ללמוד את הנושא לעומק וגם ליהנות (הפעם) מהזמן, שלוקח לשינוי כלשהו להגיע לארץ הקודש
שגיב SEO 24 בינואר 2014
לגמרי, זה הקונפליקט גם שלי.
המשקל של העמוד הוא בהחלט פקטור…
אלי 24 בינואר 2014
בהחלט מטורף… אני מקווה שגודל יתעשתו על עצמם ולא באמת יקוו שאנחנו נעמיס על הדפים של האתרים שלנו כל כך הרבה קוד מיותר רק כדי לעשות להם את החיים קלים יותר
שימי 24 בינואר 2014
קשה לי להאמין שזה יתפוס.. אחרי הכול גוגל קצת הולכים
נגד הנסיון שלהם ללחוץ עלינו לעשות דפים מהירים יותר..
דפי אינטרנט עם כל כך הרבה קוד ישקלו המון.. לא פרקטי
שגיב SEO 24 בינואר 2014
צודק לגמרי שימי…
אולי הם חושבים שתגי HTML לא שוקלים הרבה
לעומת היכולת שלהם לקרוא את הדף בצורה ברורה יותר.
קרן 24 בינואר 2014
תודה גם על המאמר הזה
שגיב SEO 24 בינואר 2014
בכיף קרן, אם את מבקרת קבועה
שווה להירשם לרשימת התפוצה שלנו.
שירלי 24 בינואר 2014
גוגל משוגעים אם הם חושבים שאנחנו נכניס את כול הקוד הזה לאתר שלנו.
אורי 24 בינואר 2014
מה אתכם שגיב?? אני מסתכל על הקוד ורואה שעשיתם קצת מארקאפ.. אתה חושבים שזה חשוב??
שגיב SEO 24 בינואר 2014
אני עוד לא יודע אם זה חשוב או יתפוס אבל אנחנו בהחלט מנסים.
למען האמת זה יותר מתאים לאתר שהוא קטלוג מוצרים כמו אתר סרטים
או אתר של ספריה, מאמרים, מוצרים שונים וכו' אבל הכי טוב ללמוד טוב
כדי עבודה 🙂 .. סחטיין על החפירה (הסתכלת על הקוד ברקע – יפה יפה)..
חשוב לזכור שזה ישפיע בסופו של דבר על התצוגה של התוצאה בתוצאות
החיפוש ויגרום לתוצאה מובלטת יותר. חשוב לא?
אודי 24 בינואר 2014
שלום שגיב והצוות (:
נו כעבור שנה וחצי מכתיבת הפוסט איך אתם מסכמים את הפרוייקט של הschema.org ?
אני אשמח לעוד מידע בנושא ואם אתם מכירים איזה תוסף לוורדפרס שמקל על עריכת הקוד (:
תודה רבה על כל המידע שאתם מספקים
אתם אנשים טובים (:
שיהיה לנו שבוע טוב וחמים
אודי
שגיב SEO 24 בינואר 2014
מנשמע אודי? תודה על הפרגון 🙂
לדעתי שילוב של קוד schema (מיקרודאטה) באתר שלך הוא חשוב מאוד. גוגל כבר מציג (באיחור אופנתי בישראל) כמה אלמנטים אשר מתבססים על הקוד של schema.org כמו לדוגמה דירוגים, תגובות, פירורי לחם, תמונת כותב, hCard וכו'… למעשה אפשר לבדוק בכלי למנהלי אתרים איזה פיסות קוד במבנה של schema.org גוגל קורא בצורה תקינה מהאתר שלך.
לצערי אין תוסף שעושה את זה אוטומטית כיוון שכל תבנית בנויה בצורה אחרת. אבל… אני כן חושב לאחרונה לבנות מאגר של אלמנטים עבור דברים נפוצים כמו תגובות, פירורי לחם, דירוגים וכו' אשר יכלול הסברים קצת יותר מפורטים. רציתי לבנות כלי שנוכל לשים בו קוד והוא יהפוך את הקוד לקוד מותאם לschema.org אבל הבנתי שכל תבנית שונה וזה עלול לפגום בפעילות התקינה שלה.
לסיכום… אם אתה יכול לשלב אלמנטים של schema.org בתבנית שלך הייתי משקיע את הזמן ועושה את זה.
שגיב SEO 24 בינואר 2014
דרך אגב אם יש אלמנט מסוים שאתה רוצה להמיר למבנה מתאים אתה יכול לשאול איך לעשות את זה בפורום שלנו תחת הקטגוריה בניית אתרים או וורדפרס אם מדובר על אתר וורדפרס… תצטרך להראות קצת מעורבות בפורום לפני שתוכל לפרסם שאלה / שרשור חדש אבל זה קל להגיע ל10 נקודות ואז לשאול שאלות.