מאקרו-סמנטיקה, מיקרו-סמנטיקה ומה שביניהן

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

מאקרו-סמנטיקה

לא מזמן HTML5 נכנס לתודעה של כולנו, התקן החדש הביא עימו דרכים חדשות ומגוונות שיכולנו לנצל על מנת להקנות משמעות סמנטית לאלמנטים ולמידע שהזנו בדפי האינטרנט שלנו.
עד אז היינו עוטפים כמעט כל דבר ב- <div>, תרשו לי לשער שדיב הייתה התגית הנפוצה ביותר באינטרנט – מרבית התוכן בדף היה עטוף בדיבים, היו דיבים בכל מקום, ממש שפע של דיבים.

ב- HTML5 נחשפנו לתגיות שבאמצעותן יכולנו להקנות משמעות לתוכן, תגיות שהפכו את האלמנטים שלנו מסתם קונטיינרים לקונטיינרים עם משמעות, תגיות כגון:

<section>
<article>
<header>
<footer>
<aside>
<time>
<nav>
<address>

מאותו רגע חלה מהפכה – את תפריטי הניווט יכולנו לעטוף ב- <nav> ולא ב- <div>, עכשיו כולם יודעים שמדובר בתפריט כלשהו, זה לא סתם קונטיינר.
את הזמנים השונים יכולנו לעטוף ב- <time>, עכשיו כולם יודעים שמדובר בערך שמייצג זמן כלשהו, זה לא עוד סתם תוכן שזרוק שם.
רעיון דומה תקף לגבי כל שאר התגיות והתכונות שהתווספו או הוגדרו מחדש, כעת אנחנו יכולים לתאר את דפי האינטרנט שלנו בצורה הרבה יותר עשירה.

נגיד.. למה זה טוב?

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

היום המצב שונה, היום יש לנו דרכים הרבה יותר מגוונות למצוא מידע ולצרוך תוכן – החל במנועי חיפוש (כמו גוגל, בינג וכו') ועד לשירותים כאלו ואחרים המתיימרים ללקט עבורו את המידע שמעניין אותנו ביותר.
בקצרה אפשר להגיד שאם בעבר היחידים שהיו צופים באתר שלנו היו בני-אדם, היום אנחנו יכולים וצריכים להנגיש את האתר גם למכונות, לאובייקטים שאינם בעלי תודעה אנושית (עדיין?).

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

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

תרחיש לדוגמה

בואו נגיד שבאמצעות התגיות שניתנו לנו ברמת המאקרו-סמנטיקה יצרנו את המבנה הבא:
Basic Semantic Markup
* אין צורך להתפעל מהיכולות שלי בצייר – כל אחד יכול להגיע לתוצאה כזו לאחר כמה שנות ניסיון.

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

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

מיקרו-סמנטיקה

אז מה היא בעצם "מיקרו-סמנטיקה", מה אני בכלל רוצה, למה אני מבזבז לכם את הזמן וגורם לכם לקרוא מאות מילים לשווא.
הטבה נוספת שקיבלנו בחבילת הפינוקים של HTML5 נקראת microdata – מדובר בדרך המאפשרת לנו לתאר את התוכן לפרטי פרטים, לרדת לרמת המיקרו (ועל כן היא זכתה בכינוי "מיקרו-סמנטיקה") ולתאר את התוכן בצורה אפילו יותר מעמיקה ממה שמאפשרות לנו התגיות החדשות והדרכים הקיימות.
חשוב לציין שגם טרם הגעת HTML5 ו- microdata יכולנו לבצע את תהליך המיקרו-סמנטיקה המתואר כאן, אומנם לא באמצעות microdata אך באמצעות דרכים אחרות (ביניהן: Microformats).
לא אתייחס כאן לדרכים "הישנות" – לדעתי microdata עדיפה על כל שאר הדרכים בכל פרמטר ולכן אדבר אך ורק עליה מעכשיו והלאה.

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

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

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

קדימה לאוכל, אה – לעבודה

קודם כל בואו נכיר את הסכמה המייצגת מתכון – http://schema.org/Recipe.
מתכון הוא קודם כל Thing, לאחר מכן הוא CreativeWork ולבסוף הוא כמובן Recipe.
כל סכמה בהיררכיה מרחיבה את הסכמה ממנה היא יורשת ומוסיפה תכונות נוספות המייצגות ספציפית אותה. מאפיינים מסויימים בסכמה יכולים להצביע לסכמות נוספות – לדוג' יוצר המתכון הוא למעשה Person או Organization, כל ביקורת היא Review וכן הלאה. כך ניתן להגדיר קשרים בין פרטי המידע השונים וליצור מבנה שבו ברור לחלוטין מה כל דבר מייצג ולאן הוא שייך.

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

נתון הטקסט הבא:

Moms World Famous Banana Bread
By John Smith, May 8, 2009
<img src="bananabread.jpg" />

This classic banana bread recipe comes from my mom -- the walnuts add a nice
 texture and flavor to the banana bread.

Prep Time: 15 minutes
Cook time: 1 hour
Yield: 1 loaf

Nutrition facts:
240 calories, 9 grams fat

Ingredients:
- 3 or 4 ripe bananas, smashed
- 1 egg
- 3/4 cup of sugar
...

Instructions:
 Preheat the oven to 350 degrees. Mix in the ingredients in a bowl. Add the
 flour last. Pour the mixture into a loaf pan and bake for one hour.

140 comments:
From Janel, May 5 -- thank you, great recipe!
...

על מנת לייצג אותו כ- Recipe, נעשה כך:

<div itemscope itemtype="http://schema.org/Recipe">
  <span itemprop="name">Mom's World Famous Banana Bread</span>
  By <span itemprop="author">John Smith</span>,
  <meta itemprop="datePublished" content="2009-05-08">May 8, 2009
  <img itemprop="image" src="bananabread.jpg" />

  <span itemprop="description">This classic banana bread recipe comes
  from my mom -- the walnuts add a nice texture and flavor to the banana
  bread.</span>

  Prep Time: <meta itemprop="prepTime" content="PT15M">15 minutes
  Cook time: <meta itemprop="cookTime" content="PT1H">1 hour
  Yield: <span itemprop="recipeYield">1 loaf</span>

  <div itemprop="nutrition"
    itemscope itemtype="http://schema.org/NutritionInformation">
    Nutrition facts:
    <span itemprop="calories">240 calories</span>,
    <span itemprop="fatContent">9 grams fat</span>
  </div>

  Ingredients:
  - <span itemprop="ingredients">3 or 4 ripe bananas, smashed</span>
  - <span itemprop="ingredients">1 egg</span>
  - <span itemprop="ingredients">3/4 cup of sugar</span>
  ...

  Instructions:
  <span itemprop="recipeInstructions">
  Preheat the oven to 350 degrees. Mix in the ingredients in a bowl. Add
  the flour last. Pour the mixture into a loaf pan and bake for one hour.
  </span>

  140 comments:
  <meta itemprop="interactionCount" content="UserComments:140" />
  From Janel, May 5 -- thank you, great recipe!
  ...
</div>

הסבר קצרצר:

  1. על מנת לייצג פריט אנחנו יוצרים קונטיינר ונותנים לו itemscope.
  2. בנוסף ל- itemscope אנחנו מגדירים itemtype, כאשר ב- itemtype אנו מציינים את עמוד הסכמה הרלוונטי (לדוג': http://schema.org/Recipe).
  3. על מנת לייצג מאפיין של אותו פריט אנו משתמשים ב- itemprop ומציינים את שם המאפיין (לדוג': name).
  4. במידה והמאפיין מצביע לסכמה אחרת – מוסיפים itemscope ו- itemtype כמו בסעיפים 1 ו- 2 וחוזרים על התהליך.
  5. אם רוצים לייצג נתון מסויים אך לא רוצים שהוא יופיע לגולש – ניתן להשתמש בתגית meta אשר מקבלת itemprop כמו בסעיף 3 ואת הנתון עצמו שמים במאפיין content.

איבדתם אותי? תחזרו לדוגמה אחרי כל סעיף ותראו איך זה ממומש.

מנקודת המבט של מנוע החיפוש

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

אספתי עבורכם כמה דוגמאת לתוצאות המכילות דפים כאלו:
The Godfather
Baked Macaroni and Cheese
Lady Gaga

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

למידע נוסף בעניין מנוע החיפוש של גוגל והשימוש שלו במידע הזה ניתן לקרוא על Rich Snippets ולהשתמש בכלי שהם מספקים על מנת לנתח את העמודים.

לסיכום

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

6 תגובות בנושא “מאקרו-סמנטיקה, מיקרו-סמנטיקה ומה שביניהן”

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

    שכן מה שתמיד עולה לי לראש זה הקלות שבאימוץ ה markup עבור פעולות האביוז שיגיע בהמשך(ושמופיעים כבר כיום).
    האם לדעתך מנועי החיפוש ינטשויפחיתו את השפעת המארקאופ לאחר ניצול לרעה מצד המקדמים?

    1. היי מנשה.

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

      גוגל מתייחסים לכך בעמוד ההנחיות שלהם, זה נמצא בסעיף "הנחיות איכות": http://support.google.com/webmasters/bin/answer.py?hl=iw&answer=2722261

    1. הי אדיר.

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

      קצת על השירות שלי:

      השירות שלי הוא קניית כתובות מייל במערב אירופה (צרפת גרמניה הולנד וכו')

      כלומר אני מקדם German email address למשל.

      איך אוכל לדעת איזה הגדרה ספציפית מתאימה? נניח למלונות זה http://schema.org/Hotel

      תודה מראש 🙂

      1. אהלן דור.

        אתה יכול לעבור על רשימת הסכמות הדף הבא ולחפש כאלו שרלוונטיות עבורך: http://schema.org/docs/full.html

        מס' סכמות שעשויות להיות רלוונטיות עבורך הן Organization, Product, Offer, Review וכו', בהנחה וזה מתאים לתוכן שיש לך באתר כמובן.

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

        בהצלחה.

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *