בשבוע שעבר התחלתי לכתוב ביחד עם עומר לוינסון התותח (מנהל איתי פעילות SEO בדיגיטאץ' בעיקר של אתרים בחו"ל, סדרת מדריכים/מאמרים שמיועדים למקדמי אתרים בעלי ידע או לבעלי עסקים שהחליטו לקדם את האתר שלהם בעצמם.
חפירה קטנה לפני שמתחילים
בשנים האחרונות אנחנו עדים למגמה ברורה בעולם השיווק הדיגיטלי בו עולמות שונים כמו פיתוח, עיצוב, וקידום חופפים זה בנקודות השקה רבות ולכן הידע הבא הוא קריטי לכל מקדם אתרים.
היום בחרתי להתחיל דווקא בהתמצאות הקוד ושפות התכנות כבסיס להבנה מהו בכלל קוד? דומיין? אתר? איך הידע הטכני עוזר לנו להיות מקדמי אתרים טובים יותר?
הערה חשובה – הרגישו בנוח לדלג על נושאים שאתם בקיאים בהם וקחו מה שרלוונטי להשלמת הידע שלכם 🙂
[toc]
מכתובת דומיין לתצוגה בדפדפן – הצגת האתר
רובינו לא נוטים לחשוב על הפעולות כשאנחנו מקלידים כתובת דומיין חדשה בדפדפן אם זה באופן ידני או ע"י חיפוש בגוגל והקלקה על תוצאות החיפוש איך זה בכלל עובד?
ברמה העקרונית, יש ארבעה שלבים מרכזיים שחשוב שתכירו. כמובן שכל שלב כזה מכיל כמה תתי שלבים נוספים , ואם תרצו להעמיק בנושא אני ממליץ לקרוא חומר מקצועי נוסף שיעשיר את הידע שלכם.
שלב הראשון – הפניית הדומיין לכתובת IP ( שיוך לשרת האחסון)
דפדפנים לא באמת מבינים "כתובות" , כתובות אלו נוצרו ע"מ להפוך את עולם האינטרנט לנגיש וזכיר הרבה יותר עבור בני האדם (הרבה יותר קל לזכור את כתובת האתר "seolinks" מאשר את כתובת ה-IP ׁ 21.07.193.20 לדוגמה). כדי לגשר על הפער הזה בין כתובות הIP לבין כתובות הדומיינים, אנחנו מבצעים הפנייה במערכת הניהול של רשם הדומיינים שלנו לשרתים. ניתן לבצע את ההפניה הזאת בכמה דרכים, הפופולרית והפשוטה ביותר היא להשתמש בכתובות הDNS שהאחסון שלכם מספק לכם, לדוגמה NS1.Host.com (אשר יומר בצורה אוטומטית לכתובת IPׂ) לחלופין, תוכלו לבצע הפנייה ישירה לכתובת הIP.
כך זה נראה בפועל כאשר מחפשים את הפניית הDNS של הדומיין:
בפועל, השרת מופנה לכתובת IP ייעודית כפי שתראו בהמשך.
השלב הראשון- דפדפן>> דומיין >> כתובת IP
לאחר שהגדרתם את הגדרות הDNS הרלוונטיות, כל פעם שתקלידו את כתובת הדומיין הזו, הדפדפן יגיש בקשה לכתובת הIP של שרת האחסון שלכם וידרוש את הקוד הרלוונטי.
כך זה נראה בפועל כאשר בודקים את הIP של השרת:
השלב השני – השרת משיב בחזרה
לאחר קבלת הבקשה, השרת שולח בחזרה את שורת הקוד (תיקיות קבצים) חזרה.
השלב השלישי – הדפדפן מרכיב את העמוד ( מפענח את הקוד)
בשלב זה עבודת הדפדפן נכנסת לתמונה, כעת הוא למעשה מרכיב מכל שורות הקוד ותיקיות הקבצים שקיבל את התצוגה כפי שאנחנו הגולשים רואים אותה. לפעמים, הדפדפן יגיש בקשות נוספת לקבלת השלמות קוד עבור הפרטים החסרים לו עד אשר יקבל את כל תיקיות הקבצים הדרושות (גורם אשר מאיט את זמן טעינת האתר הסופי)
השלב הרביעי- תצוגה סופית
לאחר הפינג פונג הזה בין כל הצדדים (דפדפן, שרת אחסון, רשם דומיינים) מתקבלת תצוגת האתר הסופית בצד של הגולש.
כפי שבטח שמתם לב, אלמנט "הבקשות" והבקשות החוזרות (Requests) הוא גורם משמעותי אשר משפיע על זמן טעינת האתר הסופית ובעל השפעות משמעותיות על תהליך קידום האתר. ככל שתצליחו לצמצמם את כמות הבקשות ואת כל התהליך , תשפרו את מהירות האתר.
איך אתרי אינטרנט בנויים ועובדים?
אז אחרי המידע המקדים על תהליך התצוגה של אתרי אינטרנט, הגיע הזמן להבין את הקוד המרכיב את אותם אתרים- "הבשר" שלהם.
ברמה הבסיסית, ישנן 3 רמות קוד שונות בכל אתר.
- HTML – המבנה של תוכן האתר ( כותרות, תוכן, תמונות וכו')
- CSS- עיצוב המבנה החזותי ע"י פונטים שונים, צבעים , פריסת העמוד ועוד
- JavaScript– כל האלמנטים הדינמיים בתצוגת האתר.
מקור מצוין ללמוד לעומק על איך אתרי אינטרנט עובדים הוא המאמר המצוין מבית MOZ, שממנו לקחתי את הגרפיקה הבאה ושלל מידע חיוני המסביר באופן מפורט את הנושא.
הארכיטקט- HTML👷
מה הוא HTML?
קוד הHTML הוא למעשה הליבה של כל עמודי האינטרנט בעולם ושפת הקוד הכי חשובה בעבור מקדמי האתרים. למעשה, באמצעות שפת הHTML אנחנו יכולים להחליט מה תפקידה וחשיבותה של כל פיסת תוכן בעמוד ברמת פירוט של בלוק ( Header/ Body) וברמת פירוט של משפט (תגיות ייעודיות).
ברמת הבלוקים, ישנם שני סוגי בלוקים בשפת הHTML הרלוונטים עבורנו, הראשון הוא בלוג ההידר (Header) שמכיל את כותרת העמוד (Page Title) והשני הוא בלוק הגוף (Body) אשר מכיל את תוכן העמוד לרבות כותרות ופסקאות.
זכרו רק התוכן אשר נמצא בבלוק הגוף (body) הוא התוכן שאנחנו רואים למעשה באתר בדפדפן ואת תגית הטייטל אנחנו רואים בתצוגת החיפוש במנועי החיפוש.
איך להשתמש בקוד HTML בפועל?
כיום, ישנן הרבה מערכות CMS (מערכות ניהול תוכן, כמו וורדפרס לדוגמה) שמנגישות את עולם הHTML עבורנו והרבה פעמים נוכל לכתוב את הקוד באמצעות כמה הקלקות עכבר, כמו למשל הקצאה של כותרות והוספת קישורים:
בכל זאת, חשוב לדעת ולהכיר כיצד יש לסדר את התוכן בשפת הHTML בצורה ידנית.
ברמה הבסיסית, כדי לייצר תגית HTML יש להתחיל ולסיים באותה תגית, כלומר אם אנחנו רוצים ליצור כותרת H1 נעשה זאת באופן הבא:
<h1>כותרת לדוגמה</h1>
תגית הטייטל (Header)
ישנן כמה תגיות בולטות שחשוב להכיר בהקשר של קידום אתרים, הראשונה היא כמו שאמרנו היא תגית הטייטל אשר מופיעה בבלוק ה"head" והיא למעשה מה שמופיע בתוצאות החיפוש כתיאור העמוד אך לא בעמוד עצמו , לדוגמה:
<!DOCTYPE html>
<head>
<html>
<title> Seolinks קידום ממומן בגוגל – פרסום בגוגל בעזרת מומחה לקידום אתרים </title>
<head>
הקוד הזה הוא למעשה מה שעומד מאחוריי התצוגה הבאה:
וכך הוא נראה בשורת הקוד בפועל:
שימו לב שבאתרי וורדפרס כל תגיות הטייטל יופיעו מתחת ל"wordpress head"
לאחר מכן, נכנס לעובי הקורה ולתוכן עצמו. בתוכן נוכל לבנות היררכית SEO בריאה באמצעות חלוקה לכותרות, תתי כותרות והתוכן עצמו (הכל בתוך תגית ה"<body>")
תתי כותרות (H1-H6ׁׂ)
כותרות עוזרות לנו לחלק את התוכן בצורה קלה וברורה להבנה ( גם לבוטים של מנועי החיפוש וגם לגולשים עצמם).
ישנן 6 דרגות שונות של כותרות בשפת הHTML, וכולן מקבלות את אותו התג ( עם מספר שונה כמובן:))
<h1>כותרת בדרגת חשיבות ראשונה</h1>
<h2>כותרת בדרגת חשיבות שנייה</h2>
<h3>כותרת בדרגת חשיבות שלישית</h3>
<h4>כותרת בדרגת חשיבות רביעית</h4>
<h5>כותרת בדרגת חשיבות חמישית</h5>
<h6>כותרת בדרגת חשיבות שישית</h6>
כך זה נראה בפועל בשורת הקוד:
הערה חשובה: ברוב המאמרים אין צורך להגיע לכותרות ברמה החמישית והשישית, במקרים שכן, מדובר במאמרים סופר ארוכים.
טיפ למקצוענים: במאמרים ארוכים בהם אתם נדרשים לחלוקה משמעותית של התוכן, מומלץ להוסיף תוכן עניינים בחלק העליון של העמוד כדי לאפשר חוויה טובה יותר עבור הגולשים, תוכלו לעשות זאת בצורה ידנית כמו במדריך לפרסום בגוגל שהכנו:
או באמצעות תוסף ייעודי כמו במדריך להגדלת הCTR שכתבנו:
פסקאות (Pׁׁׂ)
ליבת התוכן מורכבת מפסקאות. בHTML אנחנו מסמנים את אותן פסקאות באמצעות תגית ה<p> באופן הבא:
<p>כאן אתם רושמים את כל תוכן הפסקה.</p>
דוגמה בפועל:
תג קישורים <a>
תגיות קישורים הם האלמנט החשוב ביותר עבור ציבור מקדמי האתרים בגלל המשקל הרב של אלמנט הקישורים באלגוריתם של גוגל. כאשר אתם משלבים קישור בתוכן שלכם, ישנן שתי אפשרויות:
קישורי Nofollow– כאשר אנחנו משתמשים בתגית Nofollow, אנחנו בעצם דורשים ממנועי החיפוש לא להעביר את הכוח "juice" לאתר אליו אנחנו מקשרים.
קישורי DoFollow– "קישור רגיל" -בסוג קישור זה אנחנו משתמשים כאשר אנחנו רוצים להעניק קישור ובנוסף מעבירים את הכוח של הקישור לאתר אליו אנחנו מקשרים.
<a href="https://www.seolinks">כך אנחנו יוצרים קישור מסוג פולוו</a>
במידה ואנחנו רוצים להוסיף תגית NoFollow, נוסיף פשוט את התגית "rel="nofollow בסוף.
ובפועל הקישור ייראה כך:
<a href=”seolinks.co.il " rel="nofollow">זה קישור מסוג נו פולוו</a>
ולעומת זאת, קישור פולוו יראה פשוט כך:
<a href="https://support.google.com/google-ads/answer/2472738?hl=iw">ההנחיות הרשמיות (זה קישור פולוו)</a>
תמונות ותגית אלט
תוכן עשיר הוא תוכן אשר משלב תמונות וקבצי אינפוגרפיקה רלוונטיים ומעשירים. גם התמונות מקבלות תגית מיוחדת בעולם הHTML ומסומנות בתגית <img> ולאחר מכן מצוין שם התמונה , תגית הalt שנרחיב עלייה ובנוסף הרוחב והאורך שאנחנו רוצים להציג אותה = תגית style.
למעשה, זה ייראה כך בקוד עצמו:
<img src="img_seolinksbanner.jpg" alt="באנר של עמוד הבית" style="width:120px;height:150px"
כמה מילים חשובות במיוחד על תגית הalt– תגית הalt היא סופר חשובה באופטימיזציה ובהנגשה של אתרים למנועי החיפוש, באמצעות תגיות הalt אנחנו בעצם מתארים לבוטים של מנועי החיפוש מה היא התמונה ( בוטים אינם "רואים" תמונות ומשתמשים בתגית זו כדי להבין את תוכן התמונה). ללא תגית זו, מנועי החיפוש אינם מבינים מה הוא למעשה תוכן התמונה ותהליך הקידום נפגע.
כך תמונה תראה בפועל בשורת הקוד, שימו לב לתגית img בתחילה ולאחר מכן לתגית הalt המתארת את התמונה עבור הבוטים:
תצוגת HTML בפועל
כדי להבין בצורה טובה יותר כיצד הקוד נראה בפועל, ניתן להכנס לכל אתר ולבדוק את המקור שלו ו"לשחק" קצת עם הקוד:
בדוגמה מטה תוכלו לראות כיצד קוד עשיר בתגיות נראה בפועל כאשר מדובר בתוכן באתר עצמו (מתוך אחד המאמרים שלנו)
תגיות נוספות בHTML
ישנן עוד מספר תגיות HTML רב שאת כולן תוכלו למצוא באתר הנהדר w3schools וככל שתלמדו יותר על כולם כך תגדילו את מאגר הידע והיכולות שלכם בעולם הSEO, אך התגיות החשובות ביותר הן אלו שציינו למעלה (תמונה, כותרות,קישורים, פסקאות).
המעצב- CSS🎨🎨
אם הHTML הוא הארכיטקט או הבנאי שבונה את יסודות הבית, הCSS הוא המעצב שקובע כיצד התוכן ייראה. ראשי התיבות של CSS הן "cascading style sheets" ובתרגום חופשי (מאוד חופשי:)) מדובר בעיצוב מדורג של גליונות/ מידע.
בראשית ימיו של האינטרנט עמודי אינטרנט רבים ברחבי הרשת עמדו על בסיס הHTML שהוא כאמור יותר "מתאר תוכן" מאשר מעצב תוכן, כפי שMOZ תיארו אותו. לכן, כניסתו של הCSS הייתה ללא ספק מהפכה מוחלטת בתחום ושינתה את פני האינטרנט לעד.
באמצעות הCSS אנחנו יכולים ליצור עמודים מרהיבים ולשפר את חווית הגולשים שלנו באופן משמעותי.הCSS מאפשר לנו לעצב בצורה בלתי מוגבלת עם הנראות של העמודים, לסגנן אותם כאוות נפשנו וליצור תוכן בעל אופי וזהות.
קידום אתרים וCSS – מה חשוב לדעת
ישנם מספר אלמנטים חשובים בנקודות ההשקה בין עולם הCSS לבין עולם הSEO, וכמו כל דבר בחיים, יש מספר יתרונות ומספר חסרונות בשימוש בCSS במאמצי קידום האתר.
יתרונות
- חווית משתמש- מאז עדכון הRankBrain, חווית הגולשים היא אחד הגורמים החשובים ביותר באלגוריתם המניע את מנוע החיפוש של גוגל ולכן שימוש מושכל בCSS לטובת עיצוב אתרים ברמה גבוהה, אשר מספקים חווית משתמש מיטבית לגולש לצד תוכן איכותי , יזכו אתכם ככל הנראה במגוון הנתונים אשר הראנקבריין בוחן לרבות אחוז נטישה, זמן שהייה וכו'.
- סדר וארגון- תוכלו ליצור אתרים הרבה יותר מאורגנים ומסודרים ע"י שימוש באלמנטים של CSS באמצעות הדגשה, הבלטות, קווים נטויים ושלל אפשרויות גרפיות שונות.
- מהירות – העובדה שהקוד העיצובי של האתר נמצא בתיקיות ייעודיות ולא כחלק מקובץ הHTML (תיקיות CSS), מאפשרת זמני טעינה מהירים יותר.
חסרונות
- בנייה שגוייה- בעולם האינטרנט, קוד "נקי" שווה בדרך כלל לתוצאות מהירות יותר. אל תשתמשו בCSS בצורה מוגזמת או שלא לצורך. השתמשו בו בחוכמה והמנעו משורות קוד לא הכרחיות, כך תצליחו להשיג חוויה טובה לצד ביצועים נהדרים. שימוש מופרז שנעשה בצורה לא מבוקרת ולא יעילה יכול להאט את האתר שלכם ולהעמיס על הגולשים.
אם אתם משתמשים בפייג' בילדרים, נסו לבדוק בצורה ידנית את קוד הCSS שהם יוצרים. הרבה פעמים, הקוד המתקבל יכול להיות מסורבל הרבה יותר ורצוי לשקול פיתוח מותאם אישית של האתר שלכם שיכול לשפר את הביצועים שלכם בצורה משמעותית ע"י כתיבת קוד ידני.
דוגמאות לשימוש בפועל באלמנטים של CSS באתר
עיצוב הפונט בכותרות:
עיצוב הטקסט:
דוגמאות נוספות תוכלו למצוא בhttps://www.w3schools.com/w3css/w3css_text.asp או פשוט כנסו לקוד המקור של אתרים וראו בעצמכם.
אזהרה חשובה – בלק האט🎩🎩
בעבר, מקדמי כובע שחור "Black Hat", היו משתמשים בCSS כדי להסוות קישורים ע"י שימוש בצבעים שקופים או ע"י משחק מסוים בגוונים. לא רק שסביר להניח שלא תצליחו באמת להתקדם ע"י שימוש לא נכון בCSS שנועד להטעות את מנועי החיפוש, אלא סביר מאוד להניח שתפגעו ותקבלו ענישה ידנית חמורה. אל תעשו את זה.
עצת אופטימיזציה מיוחדת למקדמי אתרים בהקשר של CSS
מהירות היא גורם מפתח בשקלול האלגוריתם של גוגל. קבצו את קבצי הCSS שלכם כדי ליצור אתרים מהירים במיוחד. תוכלו לעשות זאת ע"י תוכנות צד שלישי , פלאגינים או פשוט לבצע זאת ידנית עפ"י הנחיות גוגל.
הדינמו- JavaScript🔀
אז אחרי שיש לנו את כל המבנה שסיפק הארכיטקט (HTMLׂ ׂ) ואת הסגנון שסיפק המעצב (CSS), הגיע הזמן להפוך את האתר לדינמי, מניע לפעולה וממיר באמצעות אלמנטים דינמיים שאנחנו משיגים באמצעות הג'אווה סקריפט (JS), שפת תכנות שנותנת לנו את האפשרות לבנות אתרים אינטראקטיביים אשר עוזרים לנו להפוך אתרים ל"חיים".
אם אתם קוראים את הטקסט הזה ומנסים לחשוב על הפעמים שיצא לכם להיתקל בJS, נסו להיזכר מתי פעם אחרונה ראיתם מודעת CTA בסגנון פופ-אפ, טופס באתר כמו תיבות אימייל וכו'- אלו בדיוק הדוגמאות הטובות ביותר לשימוש בג'אווה באתר.
איך גוגל סורק אתרי JAVA?
עם השימוש ההולך וגובר באלמנטים של JS התעוררה שאלת האינדוקס והסריקה של גוגל כאשר המנוע נתקל באלמנטים כאלו. לכן, מרין ספליט מגוגל יצא בסדרת סרטונים שמסבירים כיצד גוגל סורק ומאנדקס אלמנטים של ג'אווה ואתם מוזמנים לצפות בו. אם אין לכם זמן לכך, אספר לכם שהמסר המרכזי הוא שהמנוע יודע לסרוק ולאנדקס אלמנטים של JS בצורה יעילה, אך בהשוואה לשפות קוד אחרות נדרשים יותר משאבים מהמנוע וכך לעיתים הזמן בין סריקה לסריקה של אלמנטים אלו גבוה יותר.
השפעות השימוש בJS על עולם קידום האתרים
כפי שכבר הבנתם, הג'אווה הביאה לחיינו המון אלמנטים דינמיים ואפשרויות שלא היו לפני בעולם עיצוב האתרים, ולכן גם האפשרות שלנו להעניק חווית משתמש מתקדמת לגולשים עלתה מדרגה.
לכן, עבור ציבור מקדמי האתרים השימוש בג'אווה יכול להיות יתרון אך בשימוש מוגזם ולא בריא, מדובר באלמנט מעיק שיכול לפגוע בחווית המשתמש ובמהירות האתר.
נסו להימנע ככל האפשר משימוש בפופאפים לא הכרחיים ו"בהעמסה" של אלמנטים באתר שלכם. חשבו על הגולשים שלכם בכל רגע נתון ונסו להכנס לראש שלהם. לעיתים, אני נתקל באתרים אשר מעמיסים בפופאפים ואלמנטים קופצים שפוגעים קשות בחווית המשתמש והנגזרת של כך מתבטאת באחוז נטישה גבוה, זמן שהייה נמוך יותר ופגיעה בSEO.
איך קוד JS נראה בפועל?
למעשה, קוד הJS מוטמע בתוך הבלוקים של הHTML מבחינה ויזואלית.
דוגמה לקוד JS של אלמנט מסוג "טופס":
איך הבוטים של גוגל "רואים" את האתר שלכם?
אז אחרי שהבנו קצת יותר לעומק את שלוש שכבות הקוד המרכזיות העומדות מאחורי רוב האתרים בעולם, הגיע הזמן להכנס לעיניים של הבוטים של גוגל ולהבין כיצד הם קוראים ורואים את האתר שלנו (ובסופו של דבר שולחים מידע לאלגוריתם המרכזי שמשקלל את כל המרכיבים לתמונה אחת גדולה הקובעת את המיקום שלנו).
תצוגה וחווית משתמש- גם אם יש לכם תצוגה יפיפה וגם אם יש לכם תצוגה נוראית באתר, הבוטים לא באמת יודעים להעריך את איכות התצוגה בדרך ישירה. מה שכן קורה בפועל הוא שמנוע החיפוש אוסף נתונים רוחביים שעוזרים לו להבין את איכות חווית המשתמש באתר כמו אחוז נטישה, זמן שהייה וכו'. תחת הסעיף של חווית משתמש נכנסת קטגוריית ענק שהיא כמובן המהירות. הנחת היסוד היא שאתרים אטיים פוגעים בחווית המשתמש ולכן זה פרמטר חשוב מאוד שיש לשים לב אליו באמצעות אופטימיזציית קוד.
היררכיה– כאן כבר הHTML נכנס לתמונה, ומאפשר לנו לסדר את התוכן בצורה הגיונית גם לבני אדם וגם לבוטים כמובן.
תמונות- קריאה של תגית הalt המוצמדת לתמונה.
תוכן- מבחינת טכנית, כל התוכן שבאתר נקרא על בסיס התגית המוצמדת אליו. אם מסתכלים על כך בזווית טיפה יותר מתקדמת, נכנסים בתחום התוכן כמה חידושים שמאפשרים לבוטים להבין יותר טוב את סביבת התוכן ואת המיקוד שלו באמצעות סביבה סמנטית, קבוצות מילים וכו'.
ישנם כמה כלי סימולציה שמאפשרים לכם להבין כיצד האתר נסרק ע"י הבוטים של גוגל וכיצד הם בעצם "רואים את הקוד באתר שלכם". דוגמה מצוינת הוא הכלי "Search Engine Spider Simulator".
סיכום ומבט לעתיד
כיום, עולמות רבים בתחום השיווק באינטרנט מוצאים את עצמם חופפים זה לזה, וכיום הקשר בין מהירות, חווית משתמש ותוכן איכותי חזק מאי פעם ורלוונטי לכל, החל מקידום אתרים, המרות, קמפיינים ממונים וכל רובד שיווקי אחר בעולם בו אנו חיים. כדי להתמקצע בעולם הSEO, חשוב לדעת להכיר גם מושגים מתחומים אחרים ולהבין לעומק איך תהליכים עובדים, איך אתר נבנה ואיך הבוטים סורקים את קוד האתר.
במאמר זה עסקנו ברמה המאוד בסיסית של קוד האתר אשר רלוונטית לאנשי SEO ומהווה ידע בסיסי בלבד עבורם. רצוי להרחיב את הידע בצורה עצמאית או מאורגנת. ככל שתבינו יותר, תוכלו לנסות להכנס לנעליו של האלגוריתם של גוגל ותדעו כיצד לדייק את העבודה שלכם, לשלב אלמנטים מתקדמים ולהשיג תוצאות טובות יותר בעבור הלקוחות שלכם.
בנימה עתידית, אני בטוח שעולם הפיתוח ימשיך להפתיע אותנו ולחדש ואנו נצטרך להתאים את עצמנו בעבור ההישגים והמטרות שלנו בתחום קידום האתרים.
ידע הוא כוח 💪💪