מדריך טכני לבעלי אתרי React: rendering, meta tags, URLs, sitemap, structured data וקישורים פנימיים.
אתר React רגיל (Client-Side Rendering) שולח לדפדפן קובץ JavaScript ריק כמעט, ומבנה הדף נוצר בצד הלקוח לאחר הטעינה. בעוד שגוגל מסוגלת לעבד JavaScript, הדבר נעשה באיחור ובאמינות משתנה - מה שעלול לפגוע בכיסוי האינדוקס ובדירוגים.
הפתרון הוא לוודא שכל URL ציבורי מספק תוכן HTML מוכן: כותרת, תיאור, H1, פסקאות ומבנה ברור - עוד לפני שהדפדפן מריץ JavaScript. ניתן להשיג זאת דרך SSR (Server-Side Rendering), SSG (Static Site Generation) או prerendering סטטי.
ב-Catapp אנחנו משתמשים בגישת prerendering לאתרים רבים: כל נתיב ציבורי מקבל קובץ HTML מוכן עם התוכן המלא. כך מנועי החיפוש מקבלים HTML נקי, המשתמשים נהנים מטעינה מהירה, ואין צורך בתשתית שרת מורכבת.
כל עמוד באתר React צריך title ו-description ייחודיים - לא אותם מטא לכל האתר. שימוש בספריות כמו react-helmet או ניהול meta tags ישיר דרך ה-document צריך להבטיח שהערכים מוגדרים נכון עבור כל נתיב, כולל בזמן prerendering.
כותרת H1 ברורה בכל עמוד, היררכיית H2/H3 הגיונית, ו-canonical tag שמונע תוכן כפול - אלה בסיסי SEO שנכונים לכל טכנולוגיה אך קלים להחמיץ באתר React אם לא מתכננים אותם מראש.
כתובות URL קבועות וניתנות לסריקה הן קריטיות. אתר שמשתמש ב-hash routing (כמו /#/about) במקום ב-path routing (כמו /about) לא ניתן לאינדוקס תקין על ידי מנועי חיפוש. יש להגדיר routing נכון מהיום הראשון ולוודא שכל URL ציבורי מחזיר HTML תקין.
sitemap.xml עוזר לגוגל לגלות את כל הכתובות באתר, אך הוא לא מחליף קישורים פנימיים. כל עמוד שירות צריך להיות מקושר מהניווט הראשי, ממאמרים רלוונטיים ומדפי קשורים. קישורים פנימיים הם אחד הגורמים החשובים ביותר לחלוקת סמכות בין עמודים.
Structured Data (נתונים מובנים) בפורמט JSON-LD מאפשר לגוגל להציג תוצאות עשירות: ביקורות, שאלות נפוצות, לחמנייה (breadcrumbs) ועוד. הטמעת Schema.org בדפי שירות, מאמרים ועמוד הבית יכולה לשפר את שיעור הקליקים בצורה משמעותית.
ב-Catapp כל אתר React שאנחנו בונים כולל sitemap אוטומטי, structured data מותאם לסוג האתר, canonical tags, ומעקב ב-Google Search Console מיום ההשקה. אלה לא תוספות - אלה חלק ממה שמשמעות בניית אתר מקצועי.
לפני ההשקה: בדקו שכל URL ציבורי מחזיר HTML מלא ב-view-source, שה-title וה-description נכונים לכל עמוד, שהאתר עובר את בדיקת המובייל של גוגל, שה-sitemap נגיש ומדויק, ושאין שגיאות קונסול שמשפיעות על הרינדור.
אחרי ההשקה: חברו ל-Google Search Console, הגישו את ה-sitemap, בקשו אינדוקס לעמודים המרכזיים ועקבו אחר דוח כיסוי. בדקו שגיאות 404, בעיות ב-Core Web Vitals ואינדוקס מיועד לעמודים שלא אמורים להיות ב-noindex.
SEO הוא תהליך מתמשך, לא פרויקט חד-פעמי. עמוד שמקבל חשיפה אך לא קליקים צריך שיפור בכותרת ובתיאור. עמוד עם קליקים אך ללא המרות צריך שיפור בתוכן. Search Console הוא הכלי שמאפשר לקבל החלטות מבוססות נתונים - השתמשו בו.
אוריאל סבג
Full Stack Developer & בונה אתרים | Catapp
מפתח אתרים עם ניסיון של 5+ שנים בבניית אתרים לעסקים בישראל. מתמחה ב-React, SEO טכני ונגישות.