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

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

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

לא מזמן 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 כדי להצליח להבין ולקשר בין כל פיסות המידע הנמצאות בעמודים השונים.
כבר לא נשאר לי מה להגיד, אז.. סוף.

החלפת/ מכירת קישורים ו- SEO

גוגל מבהירים שוב שסחר והחלפת קישורים למטרות SEO אינו חוקי מבחינת התקנון שלהם.

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

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

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

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

SEO – הגדרת גבולות

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

מהו מנוע חיפוש ומה מטרתו?

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

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

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

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

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

על מה אתה מדבר?

אתן דוגמה למקרה שבו מקדם האתר לקח החלטה שגויה לדעתי:
אתר העלאת תמונות, ברור לכולנו שאתר העלאת תמונות צריך להיות בעל ממשק מובן, נגיש ושמיש.
המקדם של אתר "העלאת תמונות מנחם ובניו" החליט שכדי לתרום לקידום האתר הוא מעוניין להוסיף מס' מאמרים עם מילות מפתח רלוונטיות, הרי כולנו יודעים שתוכן הוא המלך. אותו מקדם הכניס 2 מאמרים באורך של כ- 350 מילים כל אחד, הראשון בראש האתר מעל טופס העלאת התמונות והשני בחלק התחתון מתחת לטופס העלאת התמונות.

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

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

לסיכום

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

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