Οι μηχανές αναζήτησης μπορούν πλέον να εκτελούν JavaScript και να ευρετηριάζουν το αποδοθέν περιεχόμενο. Πολλά sites όμως έχουν ακόμα προβλήματα JavaScript που βλάπτουν το SEO. Το περιεχόμενο που εξαρτάται από τη JavaScript για να φορτώσει μπορεί να μην ευρετηριαστεί. Οι εικόνες με lazy loading μπορεί να μην ανακαλυφθούν. Η απόδοση από την πλευρά του πελάτη μπορεί να είναι πολύ αργή. Οι μηχανές αναζήτησης μπορεί να μην περιμένουν να φορτώσουν τα πάντα. Η σωστή βελτιστοποίηση JavaScript εξασφαλίζει ότι οι μηχανές αναζήτησης βλέπουν όλο το περιεχόμενό σου, το καταλαβαίνουν και μπορούν να το σαρώσουν αποτελεσματικά.
Πώς χειρίζονται οι μηχανές αναζήτησης τη JavaScript
Η Google σαρώνει σελίδες όπως θα το έκανε ένας browser. Εκτελεί JavaScript, αποδίδει περιεχόμενο και ευρετηριάζει αυτό που βλέπει. Αυτό είναι καλά νέα. Οι σύνθετες εφαρμογές JavaScript μπορούν να ευρετηριαστούν.
Η Google επεξεργάζεται τις σελίδες σε δύο κύματα. Στο πρώτο κύμα, σαρώνει το HTML για να δει τη βασική δομή της σελίδας. Στο δεύτερο κύμα, αποδίδει τη JavaScript για να δει το δυναμικό περιεχόμενο. Αυτή η διαδικασία δύο κυμάτων παίρνει χρόνο και πόρους.
Για σελίδες με σύνθετη JavaScript ή βαριά απόδοση, η Google μπορεί να μην περιμένει να φορτώσουν τα πάντα. Μπορεί να ευρετηριάσει μόνο ό,τι είναι ορατό μετά από απόδοση λίγων δευτερολέπτων. Το περιεχόμενο που φορτώνει αργά ή με lazy loading μπορεί να μην ευρετηριαστεί.
Συνηθισμένα προβλήματα JavaScript SEO
Η απόδοση από την πλευρά του πελάτη καθυστερεί την ορατότητα του περιεχομένου. Μια κενή σελίδα HTML φορτώνει JavaScript που αποδίδει περιεχόμενο. Η Google βλέπει αρχικά την κενή σελίδα. Αν η απόδοση παίρνει πολύ χρόνο, η Google μπορεί να ευρετηριάσει την κενή έκδοση.
Οι εικόνες και το περιεχόμενο με lazy loading φορτώνουν μόνο όταν οι χρήστες κάνουν scroll. Η Google δεν κάνει πάντα scroll. Το περιεχόμενο με lazy loading κάτω από την πρώτη οθόνη μπορεί να μην ανακαλυφθεί ή να μην ευρετηριαστεί.
Τα σφάλματα JavaScript χαλούν την απόδοση. Αν η JavaScript έχει σφάλματα, η σελίδα μπορεί να μην αποδοθεί σωστά. Οι μηχανές αναζήτησης βλέπουν χαλασμένο, ελλιπές περιεχόμενο.
Τα δυναμικά παραγόμενα URL με παραμέτρους (page?id=123&sessionid=abc) δημιουργούν διπλό περιεχόμενο. Κάθε μοναδική παράμετρος δημιουργεί νέο URL. Οι μηχανές αναζήτησης μπορεί να δουν χιλιάδες διπλότυπα για το ίδιο περιεχόμενο.
Τα meta tags που παράγονται από JavaScript μπορεί να μην τα βλέπουν όλοι οι crawlers. Τα tags Open Graph, οι κάρτες Twitter και άλλα meta tags που προστίθενται μέσω JavaScript μπορεί να μην διαβάζονται σωστά από τους crawlers των social media.
Απόδοση από την πλευρά του διακομιστή έναντι της πλευράς του πελάτη
Η απόδοση από την πλευρά του διακομιστή παράγει HTML στον διακομιστή και το στέλνει στον browser. Το HTML περιέχει ήδη όλο το περιεχόμενο. Οι browsers το εμφανίζουν αμέσως. Οι μηχανές αναζήτησης βλέπουν όλο το περιεχόμενο αμέσως.
Η απόδοση από την πλευρά του πελάτη στέλνει ελάχιστο HTML και JavaScript που χτίζει τη σελίδα στον browser. Το περιεχόμενο παράγεται στον browser αφού εκτελεστεί η JavaScript. Αυτό παίρνει περισσότερο χρόνο και οι μηχανές αναζήτησης μπορεί να μην βλέπουν τα πάντα.
Για το SEO, η απόδοση από την πλευρά του διακομιστή ή η στατική παραγωγή είναι καλύτερη. Το HTML στέλνεται στον browser (και στις μηχανές αναζήτησης) πλήρες. Το περιεχόμενο είναι ορατό αμέσως.
Δοκιμή της απόδοσης JavaScript
Χρησιμοποίησε το εργαλείο URL Inspection του Google Search Console. Εισήγαγε μια σελίδα με πολλή JavaScript. Η Google δείχνει τι βρήκε μετά την απόδοση. Μπορείς να συγκρίνεις τη σελίδα όπως σαρώθηκε (αυτό που βλέπει η Google) με αυτό που βλέπεις στον browser σου.
Χρησιμοποίησε το Lighthouse στα Chrome DevTools. Δοκιμάζει πόσο σαρώσιμη είναι η σελίδα σου και επισημαίνει ζητήματα που σχετίζονται με τη JavaScript.
Δες τον πηγαίο κώδικα της σελίδας στον browser σου για να δεις το ακατέργαστο HTML. Μετά έλεγξε το στοιχείο για να δεις το αποδοθέν DOM. Σύγκρινέ τα. Αν είναι πολύ διαφορετικά, έχεις απόδοση από την πλευρά του πελάτη που μπορεί να μπερδεύει τις μηχανές αναζήτησης.
Χρησιμοποίησε proxy αποσφαλμάτωσης JavaScript όπως το BrowserStack. Προσομοίωσε τι σαρώνει η Google και τι αποδίδεται.
Βέλτιστες πρακτικές για JavaScript SEO
Χρησιμοποίησε απόδοση από την πλευρά του διακομιστή (SSR) ή στατική παραγωγή site (SSG) για κρίσιμο περιεχόμενο. Αυτό εξασφαλίζει ότι το περιεχόμενο βρίσκεται στο HTML που στέλνεται στις μηχανές αναζήτησης.
Προφόρτωσε ή φόρτωσε αμέσως το σημαντικό περιεχόμενο. Μη βασίζεσαι στο lazy loading για περιεχόμενο πάνω από την πρώτη οθόνη. Φόρτωσε αμέσως τις κρίσιμες εικόνες και το κείμενο.
Απόφυγε τα δυναμικά παραγόμενα URL με περιττές παραμέτρους. Χρησιμοποίησε καθαρά, απλά URL. Αν πρέπει να χρησιμοποιήσεις παραμέτρους, χρησιμοποίησε canonical tags για να συγκεντρώσεις τα διπλότυπα.
Βεβαιώσου ότι τα meta tags βρίσκονται στο HTML ή αποδίδονται γρήγορα από τη JavaScript. Οι crawlers των social media και οι μηχανές αναζήτησης πρέπει να βλέπουν τα meta tags αμέσως, όχι μετά από βαριά απόδοση.
Δοκίμασε με το Google Search Console. Έλεγξε τι βλέπει η Google μετά την απόδοση. Διόρθωσε οποιεσδήποτε αποκλίσεις ανάμεσα σε αυτό που βλέπεις εσύ και σε αυτό που βλέπει η Google.
Ελαχιστοποίησε το μέγεθος του bundle JavaScript. Τα μεγάλα αρχεία JavaScript παίρνουν περισσότερο χρόνο για λήψη και εκτέλεση. Τα μικρότερα bundles αποδίδονται πιο γρήγορα και οι μηχανές αναζήτησης σαρώνουν πιο γρήγορα.
Frameworks και SEO
Τα React, Vue, Angular και άλλα σύγχρονα frameworks χρησιμοποιούν απόδοση από την πλευρά του πελάτη εξ ορισμού. Αυτό δημιουργεί προκλήσεις SEO επειδή το περιεχόμενο πρέπει να αποδοθεί πριν μπορέσουν να το δουν οι μηχανές αναζήτησης.
Τα Next.js και Nuxt.js είναι meta-frameworks που προσθέτουν απόδοση από την πλευρά του διακομιστή ή στατική παραγωγή στα React και Vue. Λύνουν πολλά προβλήματα απόδοσης από την πλευρά του πελάτη.
Αν χρησιμοποιείς framework από την πλευρά του πελάτη χωρίς απόδοση από την πλευρά του διακομιστή, πρέπει να είσαι ιδιαίτερα προσεκτικός με το JavaScript SEO. Δοκίμασε διεξοδικά με το Google Search Console.
Συχνές ερωτήσεις
Μπορεί η Google να ευρετηριάσει περιεχόμενο με πολλή JavaScript;
Ναι, η Google μπορεί να εκτελέσει JavaScript και να ευρετηριάσει αποδοθέν περιεχόμενο. Παίρνει όμως χρόνο και πόρους. Πολύ βαριά JavaScript μπορεί να μην ευρετηριαστεί πλήρως αν η απόδοση παίρνει πολύ χρόνο. Κράτα τη JavaScript αποδοτική και δοκίμασε με το Google Search Console για να βεβαιωθείς ότι το περιεχόμενό σου ευρετηριάζεται. Με τον δημιουργό ιστοσελίδων της WEMASY φτιάχνεις τις δικές σου σελίδες στην ιστοσελίδα σου.
Να χρησιμοποιώ απόδοση από την πλευρά του διακομιστή ή του πελάτη;
Η απόδοση από την πλευρά του διακομιστή είναι καλύτερη για το SEO. Το περιεχόμενο βρίσκεται στο HTML που στέλνεται στις μηχανές αναζήτησης. Οι μηχανές αναζήτησης το βλέπουν αμέσως χωρίς να περιμένουν τη JavaScript. Η απόδοση από την πλευρά του πελάτη δημιουργεί καθυστερήσεις και ρίσκο να μην ευρετηριαστεί το περιεχόμενο. Χρησιμοποίησε απόδοση από την πλευρά του διακομιστή ή στατική παραγωγή για περιεχόμενο που πρέπει να κατατάσσεται στην αναζήτηση.
Χρειάζεται να σερβίρω διαφορετικό HTML στις μηχανές αναζήτησης;
Όχι. Η Google προτιμά να σερβίρεις το ίδιο HTML σε όλους. Μη φτιάχνεις ειδικές εκδόσεις για το Googlebot. Χρησιμοποίησε σωστή απόδοση από την πλευρά του διακομιστή ή ανίχνευση απόδοσης. Η Google θα σαρώσει την κανονική έκδοση χρήστη και πρέπει να βλέπει όλο το περιεχόμενο.
Πώς διορθώνω τις εικόνες με lazy loading για το SEO;
Προφόρτωσε τις κρίσιμες εικόνες πάνω από την πρώτη οθόνη. Χρησιμοποίησε native lazy loading (loading="lazy") με σωστά εναλλακτικά για παλαιότερους browsers. Χρησιμοποίησε το Intersection Observer API για να φορτώνεις εικόνες καθώς οι χρήστες κάνουν scroll. Δοκίμασε με το Google Search Console για να βεβαιωθείς ότι η Google βλέπει τις εικόνες σου.
Επιβραδύνει η JavaScript το site μου;
Ναι, η εκτέλεση JavaScript παίρνει χρόνο. Τα μεγάλα bundles JavaScript και η βαριά επεξεργασία επιβραδύνουν τη φόρτωση της σελίδας. Αυτό βλάπτει την εμπειρία χρήστη και τα Core Web Vitals. Ελαχιστοποίησε το μέγεθος του bundle JavaScript, χώρισε τον κώδικα και αναβάλλε τη JavaScript που δεν είναι κρίσιμη. Φόρτωσε μόνο ό,τι χρειάζεται.
Να χρησιμοποιώ JavaScript για να παράγω meta tags;
Απόφυγέ το αν είναι δυνατό. Τα meta tags πρέπει να βρίσκονται στον πηγαίο κώδικα HTML. Οι crawlers των social media και κάποιες μηχανές αναζήτησης μπορεί να μην εκτελούν JavaScript. Αν πρέπει να παράγεις meta tags με JavaScript, χρησιμοποίησε απόδοση από την πλευρά του διακομιστή ή προ-απόδοση ώστε να βρίσκονται στο HTML.