את החשיבות של הקידום בגוגל אנחנו כבר מכירים. כמו שמגדלור מנחה אוניות דרך בתור אוקיינוס של טיפות מים, הקידום האורגני מאיר את הדרך לאתר הכל-כך ספציפי של העסק שלך ומאפשר לו להתגלות בתוך הים העצום של התוכן שזמין ברשת. אבל איך מנווטים בתוך האוקיינוס האטלנטי של אתרי Angular כאשר מרבית מקדמי האתרים רגילים לפלטפורמות ניהול אתרים פשוטות כמו וורדפרס או ויקס?
ריגו מרקטינג מגיעים לחלץ אתכם מטביעה אל המצולות, עם חגורות הצלה והמדריך האולטימטיבי שיעזור לפתור את המורכבות של קידום SEO לאתר שלכם.
קצר ולעניין
- נבין איך עובד SEO לאתרי אנגולר בשונה מאתרים אחרים
- נסביר על הקומפוננטות וההגדרות הקריטיות שיאפשרו תשתית SEO נכונה: SSR, שליטה מלאה בתגיות meta data וניהול structured data לאינדוקס נכון יותר של העמודים באתר
- נעשה best practice מהיר לשיפור ביצועי מהירות אתר, הטמעת קישוריות ומבנה קישורים נכון ונציג עוד התממשקויות עם כלים של google כמו אנליטיקס ו search console שהכרחיים לקידום אתרי Angular
איך עובד SEO באתרי אנגולר?
בתחום הפיתוח פיתוח לווב, Angular התגלה כשפת פיתוח JavaScript פופולרית בזכות יכולתה ליצור יישומים דינמיים עם עמוד אחד (כלומר, לייצר עמודים יפים עם אפקטים, מסננים וויזואליות שאין לה תחרות). יחד עם זאת, המבנה הדינמי של אתרי אנגולר מציב אתגרים לא קטנים עבור מנועי חיפוש, ההשפעה על יכולתם לסרוק ולאינדקס אתרים. הנה דוגמה לפרויקט גדול ומרתק שלנו, שימו לב למסננים המורכבים שיש בעמוד. כדאי לציין שיש בקטגוריה זו מעל 700 מוצרים ושהעמוד הזה מוביל בביטויים מובילים עם אלפי נפחי חיפוש חודשיים בארה”ב. כל אחת מהקטגוריות מקשרת אל קטגוריות זנב ארוך אחרות כך שבפועל האתר מצליח לקבל דירוגים ותנועה על עשרות אלפי ביטויים שונים שאמורים לטרגט עמודים שונים ועושים זאת בהצלחה.
תפקידה של שפת javascript
דמיינו את JavaScript כמנצח תזמורת ששולט ומתאם בין האלמנטים השונים באתר אנגולר. זה מאפשר בין השאר תקשורת API, אחזור נתונים ויצירת חוויות אינטראקטיביות שמגדילה את ה User engagement.
עם זאת, הסימפוניה הדינמית הזו יכולה להפוך לעקב אכילס של אתר, מכיוון שהיעדר קבצי HTML סטטיים לגוגל לסריקה משפיעה באופן משמעותי על כמות העמודים שנסרקים לתוצאות החיפוש וכמות התוכן שנסרק אליו. זה קורה בגלל ששפת javascript היא שפת צד לקוח ולא צד שרת כמו HTML. המשמעות היא שתהליך המרת התוכן (“רינדור”) גוזלת לגוגל זמן ומשאבים והרבה פעמים הוא פשוט מוותר.
דמיינו שאתם אדם שעבר דירה וקונה שולחן. אתם יכולים לקבל את השולחן בשתי צורות:
- לקבל את השולחן מורכב לחלוטין ונוח לשימוש מהרגע הראשון – כמו שנוח לגוגל לקרוא תוכן בשפות צד שרת, כמו HTML
- לקבל את השולחן ארוז ומפורק עם ספר הוראות ולצפות מכם להרכיב אותו – כמו שגוגל נדרש לבצע כשהוא קורא שפת javascript
אם הייתם גוגל – איזה שולחן הייתם מעדיפים? 🙂
איך נזהה שכבר יש בעיה?
- כמות העמודים המאונדקסים שונה באופן משמעותי מכמות העמודים שאנחנו רוצים שיוצגו בפועל
- גרסת הקאש מחזירה קוד 404 (לא בהכרח מעיד שזו הבעיה אבל במקרים רבים כן) או שגרסת הקאש לא כוללת מרכיבים משמעותיים מתוכן העמוד
- בבדיקת inspect לכתובת url מסויים לא נראה את תוכן העמוד בבדיקת view crawled paged > screenshot
- יוצגו הרבה שגיאות מהסוגים הבאים ב search console:
- שגיאות soft 404 – התוכן מוצג לגולש אבל גוגל חושב שמדובר בעמוד שגיאה, ככל הנראה כי הוא לא מצליח לקרוא את התוכן בעמוד ומסיק שמדובר בשגיאה/כפילות.
- שגיאות crawled\discovered – currenntly nor indexed – כלומר, גוגל נתקל או סרק את העמוד אך בחר שלא להציג אותו (בדיוק מהסיבות שציינו למעלה).
שלב אחרי שלב: כך תהפכו את אתר האנגולר שלכם לידידותי ל SEO
מעבר ל Server Side Rendering) SSR) באמצעות Angular universal
בפיתוח SSR, נדרשת הבנה מעמיקה ומורכבת של הטכנולוגיה. כאן נכנסת לתמונה הספריה המוכרת בשם Angular Universal, המשמשת כפתרון מובנה ורשמי של אנגולר וכוללת את התשתית של הפיתוח לאתרים מהסוג הזה. לא נשקר או נשלה שזה פיתוח פשוט – אבל עם רצון, ויכולת וליווי יד ביד, זה ממש אפשרי 🙂
Prerender
במקרים בהם האתרים עושים שימוש בגרסאות אנגולר ישנות ואין את ספריית Angular Universal מובנית, קיימים פתרונות צד שלישי המסייעים. לדוגמה, ניתן להשתמש באתר כמו prerender.io המספק פתרון בצד ג’ שיוצר גרסאות מטמון (cache) שנשלחות למנועי החיפוש כל עשרה ימים. כשמנוע החיפוש מבקש את התוכן, האתר מציג לו גרסה מרונדרת של האתר, וכך הוא מצליח לסרוק את התוכן באופן יעיל. זה לא זול, אבל בגרסאות ישנות של אנגולר שין תאימות לספרייה angular universal, זה יכול להיות פתרון חלופי.
שליטה ב meta data ועוד מרכיבים שכדאי להכיר
ה meta data הוא כמו הטריילר של הסרט, הוא ממש עוזר להבין לקראת מה אנחנו הולכים ומה הנושא המרכזי שעליו אנחנו מדברים. ה”טריילר” הזה עוזר גם לגוגל להבין שכדאי לו לזחול את העמוד ולתת לו ציון טוב במנועי החיפוש. כדאי להשתמש במערכות ניהול תוכן המספקות שליטה מלאה על מרכיבי ה-SEO של האתר. דברים כמו תגי כותרת ותיאור מותאמים, קישוריות מותאמת למכשירים ניידים, והיררכיה נכונה של התכנים באתר יכולים לשפר את הביצועים במנועי החיפוש ולשדרג את מעמד האתר בתוצאות החיפוש האורגניות.
- תבניות טייטל ודסקריפשן לפי סוג תוכן: המערכת מאפשרת להתאים תבניות טייטל ודסקריפשן לפי סוג התוכן באתר. באמצעות זיהוי התוכן והגדרות ה-SEO המתאימות, ניתן ליצור תיאום מותאם אישית שיתאים לצרכי המנועים החיפוש.
- אופציה לשינוי טייטל ודסקריפשן, קנוניקל, הסרה מאינדוקס והסרה מה sitemap: המערכת מספקת אפשרויות לשינוי טייטל ודסקריפשן של דפים באופן פרטני, כולל הגדרת תגית קנוניקל לניתוב תוכן כפול, והסרת דפים מהאינדקס וה-sitemap. כך המערכת מאפשרת שליטה מלאה וגמישה על מבנה התוכן והצגתו במנועי החיפוש.
- שליטה בהיררכיית פירורי הלחם של כל סוג תוכן: באמצעות המערכת, ניתן להגדיר ולנהל בצורה מדויקת את היררכיה של פירורי הלחם (breadcrumbs) עבור כל סוג תוכן באתר. הכותרות המדויקות והיררכיות הניווט המסודרות משפרות את חוויית המשתמש וסידור האתר, ומסייעות למנועי החיפוש בניווט וקידום התוכן.
- שליטה בהיררכיית כותרות של תכנים בעמוד: לא עוד תגיות H3 ריקות או עמודים עם תגית H1 כפולה. חשיבותן של הכותרות בעמוד ברורה ולא רק משיקולי SEO. חשוב שמערכת ניהול התוכן או מפתחי האתר ידעו לתת לנושא הזה פתרון 🙂
- מערכת הפניות נוחה: המערכת מאפשרת ניהול קל ונוח של הפניות באתר. באמצעות כלים ואפשרויות ניהול מובנות, ניתן לייצר, לנהל ולנתח הפניות 301 ו 302. באופן זה גם ייחסך תקציב זחילה משמעותי וגם יימנעו מצבים של הגעה לקישורי 404.
- בניית קישורים פנימיים: וודא שהקישורים באתר מופנים לדפים פנימיים באופן תקני וניתנים לקריאה על ידי גוגל, קישור מה sitemap.xml לא מספיק כדי להסביר לגוגל שמדובר בעמוד חשוב.
שימוש ב structure data
הטמעה של נתונים מובנים הוא כמו יצירת שלד לבניין: הוא מבצע ארגון ותיוג של תוכן האתר ומאפשר למנועי החיפוש להבין את הקשר המידע ולספק תוצאות מדויקות למחפשים. סימון נתונים מובנה הוא כלי מדהים לשיפור נראות האתר במנועי החיפוש כאשר הנתונים המובנים האלו מזוהים על ידי גוגל באופן תקין.
איך מטמיעים? לכל סכימה יש דוקומנטציה מקיפה בגוגל.
איך בודקים? הכלי הרשמי של גוגל או ב search console
ה Best practice לו חיכיתם
ברגע שהתשתית לקידום SEO באתר שלכם כבר מוטמעת ועובדת (על פי ההמלצות שנתנו למעלה), מגיע השלב ליישום האסטרטגיות הטכניות ואסטרטגיות התוכן שקבעתם:
אופטימיזציה למהירות אתר
מעבר לחווית הגלישה שצריכה להיות לגולש, גם מנועי החיפוש מייחסים חשיבות גדולה למהירות טעינת דפי האינטרנט. אופטימיזציה לזמני טעינה היא שלב ראשון וחשוב שיש ליישם, וזה באמת לא כזה מסובך.
עוקבים אחרי ההערות שעולות ב page speed insight עבור כל אחד מסוגי התוכן באתר, ומטמיעים את השינויים הנדרשים.
כתבנו מאמר שלם על שיפור מהירות אתר, שווה לכם לקרוא אותו >
מבנה קישורים וקישוריות נכונה בין עמודים
בשלב הבא יש לנו ניתוב תקין ומבנה URL. מבנה URL נקי ומאורגן יכולה לשפר את יכולת הסריקה והאינדקס של אתרי זווית. זכרו כי עמודים שצריכים להתאנדקס לא יכולים להיות עמודים יתומים מפני שאחרת גוגל לא יצליח לזחול אליהם (ולא, קישור ממפת האתר לא מספיק). ודאו שיש אל כל אחד מהעמודים האלו קישור שמעביר אליו את הכוח בצורה נכונה.
קישור מעמוד הבית או מהתפריט (קישור חזק ביותר) > קישור לעמוד חשוב ובעל נפחי חיפוש רבים > קישור לעמוד פחות חשוב שעדיין נרצה שגוגל יכיר.
אופטימיזציה לתמונות
המרה לפורמט עדכני, הגדרת height & widgh, תגיות אלט לתמונות, הגדרת טעינה עצלה והגדרות לכיווץ תמונות הם רק חלק מהשלבים בתהליך האופטימיזציה שיעזור לכם להשיט את הספינה מהר יותר בתור אוקיינוס המתחרים שלכם. ושוב – לא להתבייש להיעזר ב page speed insight כדי להבין מה בדיוק צריך לשפר.
קישורים חיצוניים:
לא נשכח את הכלי החשוב הזה שצריך להשתמש בו בצורה נבונה וחכמה. תמהיל נכון של אנקורים מדוייקים ואנקורים עקיפים, וריבוי קישורי ברנד מאתרי סמכות – יסייעו לנו מאוד בתהליך הקידום.
קראו בהרחבה על בניית קישורים חיצוניים >
הכלים שיעזרו לכם לנהל את תהליך הקידום
עם הרכיבים החיוניים ושיטות העבודה הנכונות, ההפלגה הופכת חלקה יותר. אבל בלי אנשי צוות – הספינה לא יכולה להפליג 🙂 הכירו את אנשי הצוות בספינה שלכם, שיסייעו לכם לנווט את כל התהליך:
Google analytics ו Search console
כלים אלה יהכרחיים למעקב וניתוח של ביצועי ה- SEO שלך, והם מספקים תובנות חשובות לגבי התנהגות המשתמשים. על ידי שימוש בכלים אלה תוכלו לזהות בעיות ולהבין מה צריך לשפר
Angular Universal ו- Scully, prerende.io
כלים מרכזיים שמסייעים במעבר ל SSR, ויצירת התשתית הנכונה ל SEO.
Ngx-seo ו NgOptimizedImage
ספריות אלה מאפשרות לנהל מטא meta data, כותרות ואופטימיזציה של תמונות, שיפור “האסתטיקה” והפונקציונליות של האתר בעיניי גוגל.
ממה כדאי להימנע?
- נתונים לא עקביים בין HTML ל- DOM: תכנים מוסתרים או חוסר התאמה בין ה DOM לתוכן המרונדר הוא big no no באתרי אנגולר כי זה פשוט עוד גורם שמבלבל את גוגל בהבנת מהות התוכן בעמוד
- משאבים חוסמים או מעכבים: אין סיבה לטעון כלכך הרבה סקריפטים שאין בהם שימוש בעמוד, או לטעון אותם לפני שהגולש צריך לקיים איתם אינטרקציה. בנוסף, כדאי לעשות שימוש בכלים כמו Gzip ומיניפיקציה של קוד JavaScript ו-CSS.
- גלילה אין סופית: השיטה הזו שכלכך אהובה על ידי בעלי אתרים בטענה שמדובר על חוויית משתמש טובה יותר (לא מתווכחים על כך) יכולה להיות מסוכנת אם היא לא מיושמת בצורה חכמה. המשמעות של טעינה אינסופית היא שכל מה שנמצא מתחת לאזור הגלילה לא נמצא ב dom. גם אם יש שימוש ב Pagination אבל הוא לא מוטמע בצורה תקינה, זה לא פותר את הבעיה שיש כמות עמודים גדולה שלא מקבלים קישור ושהזחלן לא מכיר אותם.
לסיכום
יש כאן אתגר לא פשוט אבל הרבה מאוד אור בקצה המנהרה. אתרי אנגולר הם הזדמנות עצומה להתמודד מול המתחרים על עשרות, מאות וגם מאות אלפי ביטויים אם התהליך נעשה בצורה נכונה ומבוקרת – ואנחנו יותר מנשמח להיות שם לצידכם כדי לוודא שכך קורה. ריגו מקדמת עשרות אתרי אנגולר מרובי שפות ועם מאות אלפי עמודים, תאמינו לנו, זה אפשרי 🙂
