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

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

בכל מקרה, לפני שנצלול למידע שאפשר להפיק משימוש בפונקצית ה-view source, חשוב שתדעו איך בכלל משתמשים בה:
משתמשי PC (ווינדוס) יכולים ללחוץ קליק ימני + view page source או בקיצור Ctrl + U בעוד משתמשי mac יעשו זאת ע״י לחיצה על option + cmd + U.

אז מה אפשר ללמוד מהצצה בקוד האתר?

1. מונחי מפתח

הצצה בכותרת הדף (title tag), התיאור שלו (meta description), תגיות הכותרת (headings – h1, h2 וכולי) ותגית האלט (alt tag) – כל אלו יגלו לנו בקלות את מונחי המפתח שהדף מכוון אליהם (target keywords).<br />באותו אופן, אם אתם בתהליך של לקדם אתר, הרי שהשדות הללו צריכים להיות מנוצלים לניסוח מנצח המשלב את מילות המפתח שאתם חפצים ביקרן.

תג טייטל (title tag)

בין תגיות הטייטל בקוד נמצאת כותרת הדף אשר אמורה להוות סיכום תמציתי של תוכנו. בהקשר של קידום אתרים מדובר באחד מגורמי המפתח המשפיעים על דירוגו של דף אתר במנועי החיפוש ועל כן על הכותרת לכלול את מונחי המפתח העיקריים שהדף עוסק בהם ושאליהם הוא מכוון.
בנוסף, לכותרת הדף יכולת השפעה אדירה על הנעת הגולש לפעולה, כלומר על ה-CTR, או של הדף בתוצאות החיפוש. 
אורך מומלץ: 50-60 תווים.

תג תיאור (description)

תג התיאור, המטא דסקריפשן, כשמו כן הוא, בא לתאר טיפה׳לה יותר בהרחבה את שתג הטייטל מסכם, הווה אומר – תוכן הדף. תג התיאור נחשב לשטח פרסומי מהמעלה הראשונה, התורם משמעותית הן לקידום של הדף והן ליחס ההמרה שלו בתוצאות של מנועי החיפוש. גם כאן נמצא את מילות המפתח של המתחרה שלנו / נשלב את אלו שלנו, לרוב במספר גרסאות, תוך שימוש במלים נרדפות, long tails וכדומה, ונכוון את הקורא לפעולה.
אורך מומלץ: 155-160 תווים.

כותרות (headings)

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

תגית אלט (image Alt Tag)

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

2. דף המטרה

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

3. נתונים מובנים וסכמה

חיפוש המילה schema בקוד הדף תלמד אותנו על נתונים מובנים (structured data) שמטרתם להקל על רובוטי הסריקה של המנועים בהבנת סוגי התכנים קיימים בדף ובהתאם להציגם בתוצאות החיפוש.
בתוצאות החיפוש נראה זאת דרך מה שנקרא גרף ידע (knowledge graph), תקצירים מעשירים (שזה התרגום המאולתר שלי ל-rich snippets או כרטיסיות מעשירות (rich cards).

גרף ידע בתוצאות החיפוש - חברת קוקה קולה

בין הנתונים המובנים השונים, אני לרוב מחפשת אחר הנתונים הבאים (אך זה לגמרי תלוי נישה ו/או שוק):
Product – כל שירות או מוצר הכולל בין היתר את שם הארגון או המותג (brand), דירוג מצטבר (AggregateRating), קהל היעד (Audience) וכן מידע נוסף אודות המוצר (AdditionalProperty).
Webpage – כל דף אינטרנטי ומגוון התכונות המיוחסות לו, למשל BreadcrumbList – סט קישורים המסייע למשתמש לנווט באתר ולהבין את ההיררכיה שלו.
ImageObject – מצביע על התמונה העיקרית בדף.
SpeakableSpecification – טקסט שמתאים במיוחד להמרה לדיבור (text-to-speech)
HowTo – הנחיות להשגת תוצאה מסוימת במספר צעדים
FAQPage – דף המציג שאלות נפוצות ותשובות.

4. שפות

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

hreflang קוד דוגמא

5. מערכת ניהול תוכן וכלים חיצוניים

בדיקת הקוד מאפשרת להבין אם האתר הוא hard coded או מבוסס על מערכת לניהול תוכן כגון וורדפרס, wix או webflow.
לשם כך פשוט מחפשים את שם המערכת לניהול תוכן בקוד הדף.
במקרה וזיהיתם שמדובר באתר wordpress תוכלו לזהות את הטמפלט ע״י שימוש באתר WhatWPThemeIsThat וכן לאתר את הפלאגינים השונים ע״י חיפוש המילה plugins בקוד.
מידע זה יכול לסייע בבחירת theme ופלאגינים שיכולים לתרום משמעותית לקידום האתר כמו גם למהירות הטעינה שלו ולביצועיו באופן כללי.
לדוגמה, אם תיכנסו לאתר של Neil Patel, תגלו שהבלוג שלו מבוסס וורדפרס (אין טמפלט ספציפי כי הוא יצר קוסוטומיזציה של המערכת, משמע התאים אותה לצרכיו) ושהוא משתמש בפלאגינים: structured content develop, contact form 7 ו-wp rocket להאצת מהירות אתר. בדיקת מהירות האתר שלו ב-PageSpeed Insights מראה שהוא יודע מה הוא עושה ועל כן שווה לחקור את ה-WP rocket.

ציון מהירות אתר - Neil Patel

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

בין הדברים הנוספים שניתן למצוא בקוד האתר הוא שימוש בגוגל אנאליטיקס או גוגל תג מנג׳ר (פשוט חפשו את המילה Googletagmanager או analytics בקוד) וכן כלים שיווקיים שונים כמו sumo או zoom analytics.
כמובן שככל שיש לכם היכרות נרחבת יותר עם כלים שונים ומגוונים כך יהיה לכם קל לאתר אותם.
עם זאת, תמיד ניתן לסרוק את קוד האתר ולבדוק מה נמצא תחתיו או להשתמש באתר שאני אישית ממש אוהבת, BuiltWith, שמפרט את כל מה שהאתר משתמש בו, לרבות מערכות סטטיסטיות, פיקסלים של אתרים חברתיים ומערכות פרסום, שפות, רשתות אספקת תוכן (CDN), אחסון ועוד.

חושבים שפספסתי משהו חשוב או רוצים להוסיף משהו משלכם? צרו אתי קשר 🙂