עמוד הבית » טכנולוגיה » אילו תגיות HTML5 חדשות ישפיעו על עולם ה- SEO בעתיד הקרוב?
David Martyn Hunt, December 2, 2011, via Flickr

אילו תגיות HTML5 חדשות ישפיעו על עולם ה- SEO בעתיד הקרוב?

האדמה טרם פצתה פיה, וגוגל עדיין לא הזדעזעה משום שינוי שחל ב- HTML5, אולם ככל שעובר הזמן מנהלי אתרים ואנשי SEO מתחילים להפנים את השינויים שחלים בקוד. ככל שהזמן עובר, גם גוגל מתחילה ליישר קו ובעתיד ייתכנו גם שינויים ב- Organic SEO policy. בימים אלו אני בדיוק עובד על מצגת אותה אציג בכנס נקסט קייס, קורא המון חומרים לטובת ההרצאה, ופתאום מתחיל להבין שהשינויים בקוד ה- HTML5 כיום דומים לשינויים שהתרחשו לפני שנים רבות במעבר לשפת תכנות מונחית עצמים (Object Oriented Programming).

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

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

<!DOCTYPE html>

אילו תגיות HTML5 ישפיעו על עולם ה- SEO?

1. <article> – גוגל כיום מאפשרת ואפילו תומכת התוכן מקונן (nested), כלומר הזנה של כמה מאמרים בתוך עמוד אחד או אפילו כמה מאמרים בתוך מאמר אחד. כל מאמר המוגדר כ- <article> יכול להכיל כמה H1-ים. כלומר, ניתן היום ב- HTML5 להזין כמה H1-ים בתוך עמוד אחד.

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

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

3. <header>, <footer> – בשונה מהקוד הישן של HTML4, היום ניתן להוסיף <header> ו – <footer> גם בסוף כל <section>. משמעות הדבר היא שניתן להשתמש בכמה האדרים ובכמה פוטרים בעמוד אחד. זה שינוי מרעיש, שכן עד כה היינו רגילים לתפוס עמוד ככזה שמכיר רק האדר ופוטר אחד בלבד. התגיות החדשות של הפוטר וההאדר הן ברכה לעולם ה- SEO, בשל העובדה שהן מאפשרות הרבה יותר גמישות בכל עמוד ועמוד.

4. <nav> – תגית זו מכילה את כל קישורי הניווט באתר. באמצעותה אנחנו מסגנלים לגוגל שקישורים שנמצאים בתוכה הם קישורי/כפתורי הניווט של האתר. ההמלצה היא להשתמש בתגית זו במיוחד כאשר באזור מסויים מופיעה כמות נכבדת של קישורי ניווט; כמו-כן תגית זו תשמש כאשר נרצה לקשר מקבץ של קישורים לעמודים אחרים. אגב, לבלוגים המכילים עמודים רבים, כפתורי ה- next וה- prev יוכנסו לתוך תגית זו.

5. <mark> – זו תגית חדשה שנוספה ל- HTM5, והיא עושה משהו דיידומה למירקור בצבע צהוב שיש בוורד. מבחינת SEO, יש לה חשיבות בשל העובדה שהדגשה זו מסמנת לגוגל שיש כאן מילות מפתח חשובות.

6. <hgroup> – משמש להכלה של כמה תגיות H1-6. הדוגמה הכי טובה היא מאמר שמכיל כותרת ומיד אחרי כותרת משנה:

1

7. <aside> – בתגית זו ימצא תוכן שקשור לתפריט צדדי או לאלמנטים שלרוב ימצאו בצידי התוכן המרכזי: כמו למשל, "למלוי סקר לחצו כאן!", "הידעת?", "רוצים לשמוע עוד על השירות החדש שלנו?", וכן אלמנטים צדדיים נוספים.

8. <video> – תגית זו מאותתת לגוגל שמדובר בתוכן וידאו שניתן יהיה לקרוא בכל הדפדפנים. היום אם למשל תתמיעו קוד של TED באתר, הם לא מספקים את התגית הזו לצערי, אלא תגית IFRAME. תגית הווידאו החדשה, מציינת עבור גוגל שמדובר בתוכן שהוא cross-browser compatible.

תגית זו מצטרפת לשורה של תגיות נוספות ב- HTML5, ובינהן: <audion> ו-  <dialogue>, שמסייעות לגוגל להתמודד יותר טוב עם קבצי קול וחלוניות שיחה.

9. פילוח עמודים – פילוח עמודים משמע שכיום ב- HTML5 העמוד מחולק לכמה אזורים שונים, כאשר כל אזור מתנהג כמו עמוד נפרד (main content, menus, headers, footers, links sections, etc.)

SEO בעידן ה- HTML5 החדש

דוגמאות מהעולם האמיתי

אחת הדוגמאות לאתר מקסים שעושה שימוש בתגיות ה- HTML5 החדשות הוא אתר Time Magazine:

2

מה שמרתק באתר הוא שכאשר נכנסים לאחת הכתבות וממשיכים לגלול למטה, ה- URL משתנה יחד עם תנועת הגלילה. כלומר, אמנם הגולש נכנס לכתבה אחת, אך תוך כדי הגלילה הוא פשוט המשיך לכתבה הבאה, ובה בעת ה- URL השתנה והגולש מצאה את עצמה כביכול מדפדף בין 4 כתבות שונות תוך שהוא מקטין את ה- Bouncerate פלאים. מבחינת גוגל כל כתבה מאורגנת באזור משלה על-ידי <section> נפרד עם תגית <footer> המאזכרת כתבות קשורות. סדר וארגון הן התכונות החזקות ללא ספק בקוד ה- HTML5 של האתר.

3

דוגמא נוספת, ניתן למצוא באתר של SONY המפורסמת. שימו לב כיצד עיצוב Parallax, של ייצור שכבות גרפיקה הנעות תוך כדי גלילה, מבטא שימוש נכון בתגיות <article> המפרידות בין אנימציה אחת לאחרת ובין טקסטים שונים:

4

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

photo

איך לארגן את החדר ב- 30 שניות? (או עקרון המודולריות)

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

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

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

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

עקרון הרפלקסיביות מתחיל דווקא אי-שם בשנת 2008 – בה הוצגה הטיוטה הראשונה של שפת ה- HTML בגרסתה החמישית; ולמעשה, החל מ- 2012 הוחלט כי השפה הזה פועלת ב- "Living Standard" – כלומר זו תמשיך ותהיה שפה חיה שכל הזמן יתווספו אליה אלמנטים חדשים.

ההמשך של עקרון הרפלקסיביות הוא, למעשה, ההגמשה של תגיות – H1, footer, header וכדומה – שעד כה היינו נוטים לתפוס אותן כבעלות משמעות אחת. למשל, עד לא מזמן היינו רגילים שלכל מאמר אמורה להיות תגית האדר, פוטר ו- H1 בלעדית. ההגמשה של תגיות אלו מאפשרת כיום ב- HTML5 להשתמש בתוך תגית <section> כמה וכמה פעמים בתוך מאמר אחד בתגיות <H1>.

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

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

האם גם אתם התחלתם להשתמש בתגיות אלו? האם שמעתם על תגיות מעניינות חדשות ששווה להטמיע? כתבו לנו למטה בתגובות.

About עופר לנגר

שמי עופר לנגר. בוגר תואר שני באוניברסיטת תל-אביב בפקולטה לתקשורת ומומחה בתחום של קידום אתרים אורגני (SEO).

Check Also

קורס גוגל אנליטיקס

מקדמים את האתר שלכם בגוגל? הירשמו לקורס אנליטיקס!

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

כתיבת תגובה

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