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

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

הסברים מלאים לגבי השימוש בתגיות אלו ניתנים באתר http://schema.org.

 

אסביר את השימוש דרך דוגמא. שימו לב למשל לתוצאת החיפוש הבאה:

 

 

אנו רואים שבנוסף לקישור, לתיאור הרגיל של מנועי החיפוש ול-  URL, גוגל מתחיל להוסיף נתונים נוספים על הדפים כגון:  Total Cook Time, תמונה של המתכון וציון מבקרים ממוצע.

 

כיצד גוגל ידע לזהות את זמן הבישול ואת התמונה המתאימה מתוך קוד הדף?

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

 

מתחילת יוני 2011 המצב עומד להשתנות. גוגל הציגו מבנה חדש שיעזור להם לזהות את החלקים השונים של המידע בתוך הקוד של הדפים בעזרת מה שהם מכנים "Micro Data". מדובר במאפיינים לתגי HTML אשר מסבירים למנועי החיפוש מה זה מה (זה:זמן בישול כולל, תמונה וכו') ההסבר המלא מופיע באתר http://schema.org , אך רק לשם ההמחשה, בואו וניקח קוד פשוט שמציג דף מוצר עם ביקורות ונוסיף לו את הסימנים למנועי החיפוש.

 

הקוד המקורי (מעברי השורה הושמטו):

<img src="dell-30in-lcd.jpg" />

 Dell UltraSharp 30" LCD Monitor

 87 out of 100 based on 24 user ratings

 $1250 to $1495 from 8 sellers

 Sellers:

 <a href="save-a-lot-monitors.com/dell-30.html">

  Save A Lot Monitors - $1250</a>

 <a href="jondoe-gadgets.com/dell-30.html">

  Jon Doe's Gadgets - $1350</a>

 ...

 

הקוד החדש, הכולל תגיות שעוזרות למנועי החיפוש להבין במה מדובר:

<div itemscope itemtype="http://schema.org/Product">

<img itemprop="image" src="dell-30in-Lcd.jpg"/>

<span itemprop="name">Dell UltraSharp 30" LCD Monitor</span>

<div itemprop="aggregateRating"  

itemscope itemtype="http://schema.org/AggregateRating">

  <span itemprop="ratingValue">87</span>

 out of <span itemprop="bestRating">100</span>

based on <span itemprop="ratingCount">24</span> user ratings

</div>

<div itemprop="offers" itemscope itemtype="http://schema.org/AggregateOffer"

<span itemprop="lowPrice">$1250</span>

 to <span itemprop="highPrice">$1495</span>

from <span itemprop="offerCount">8</span> sellers

Sellers:

 <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">

 <a itemprop="url" href="save-a-lot-monitors.com/dell-30.html">

 Save A Lot Monitors - $1250</a>

</div>

 <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">

<a itemprop="url" href="jondoe-gadgets.com/dell-30.html">

 Jon Doe's Gadgets - $1350</a>

 </div>

 ...

</div>

 

נבין את המאפיינים החדשים:

• ItemScope - התוכן שבתוך התג הנוכחי הוא תוכן שקשור למשהו מובנה שחוזר במקומות שונים באתר.
• Itemtype - סוג התוכן שהתג מכיל ( http://schema.org/docs/schemas.html).
• Itemprop - המידע עצמו (חייב להיות בתוך תג עםItemscope ו- itemtype ).

 

הסברים לדוגמא:

 

  <div itemscope itemtype="http://schema.org/Product">

שימו לב שיש תג DIV שמקיף את כל רשימת המוצרים. התג הזה קיבל מאפיין itemscope כדי להגיד שהוא קשור למשהו מובנה שחוזר במקומות שונים באתר. ה Itemtype הוגדר כ http://schema.org/product, זוהי הגדרה כללית למוצר מתוך http://schema.org :

  <img itemprop="image" src="dell-30in-lcd.jpg" />

כאן בפעם הראשונה אנו נתקלים בשימוש ב itemprop, שמגדיר את המידע עצמו. במקרה הזה, אנו מגדירים אותו כתמונה (כפי שמוגדר לנו באתר http://schema.org ) ע"י הוספת המאפיין "itemprop="image.

 

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

 

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

 

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