SEO לפרונטאנד - המדריך הבסיסי שכל מפתח צריך

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

מה זה בעצם SEO

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

HTML סמנטי - הבסיס שהכל בנוי עליו

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

<header>
  <nav>...</nav>
</header>
<main>
  <article>
    <h1>כותרת ראשית</h1>
    <p>תוכן...</p>
  </article>
</main>
<footer>...</footer>

תגיות כמו header, main, nav, article ו-footer נותנות למנוע החיפוש מפה ברורה של האתר. זה נשמע בסיסי, אבל תתפלאו כמה אתרים בעולם האמיתי מתעלמים מזה לגמרי ומשלמים על זה בדירוג.

מבנה כותרות - h1 עד h6

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

תגי alt לתמונות - לא רק לנגישות

כל תמונה צריכה alt שמתאר מה יש בה:

<img src="laptop.jpg" alt="מחשב נייד פתוח עם קוד על המסך" />

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

תגיות meta - הכרטיס ביקור שלכם בתוצאות חיפוש

בתוך ה-head של כל דף כדאי שיהיה:

<title>כותרת ברורה וייחודית לדף</title>
<meta name="description" content="תיאור קצר וקולע של מה שבדף הזה" />

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

מהירות טעינה - הגורם הטכני הכי חשוב

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

למה מפתחי פרונטאנד חייבים להכיר את זה

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

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

לסיכום

SEO טכני הוא לא קסם ולא תחום נפרד ממה שאתם עושים כמפתחי פרונטאנד - הוא חלק מהעבודה עצמה. HTML סמנטי, כותרות מסודרות, תגי alt, תגיות meta ומהירות טעינה הם דברים שאתם שולטים בהם ישירות, וכל אחד מהם משפיע על האם בכלל מישהו ימצא את האתר שבניתם.

יש לכם שאלות על SEO בפרויקט ספציפי? תביאו אותן לדיסקורד.

הצטרפו לקהילה בדיסקורד