SPA SEO 2020: τι από τις παλιές συμβουλές ισχύει ακόμη σήμερα
Η αναζήτηση spa seo 2020 παραπέμπει σε μια περίοδο όπου υπήρχε έντονη ανησυχία για το αν οι εφαρμογές μίας σελίδας μπορούσαν να ανιχνευθούν και να ευρετηριαστούν σωστά. Σήμερα το πλαίσιο είναι πιο καθαρό. Μια SPA (εφαρμογή μίας σελίδας, Single Page Application) μπορεί να εμφανίζεται στην Google, αλλά η τεχνική υλοποίηση πρέπει να δίνει σε κάθε ουσιαστική κατάσταση δική της διεύθυνση URL (Ενιαίος Εντοπιστής Πόρου, Uniform Resource Locator), σωστούς κωδικούς κατάστασης HTTP (Πρωτόκολλο Μεταφοράς Υπερκειμένου, Hypertext Transfer Protocol), ανιχνεύσιμους συνδέσμους και περιεχόμενο που είναι διαθέσιμο μετά την απόδοση.
Το βασικό που άλλαξε από το 2020
Δεν είναι σωστό να αντιμετωπίζουμε πλέον κάθε JavaScript εφαρμογή σαν να είναι αόρατη στη Google. Η Google Search Central εξηγεί ότι επεξεργάζεται εφαρμογές JavaScript σε φάσεις ανίχνευσης, απόδοσης και ευρετηρίασης και χρησιμοποιεί σύγχρονο Chromium για την απόδοση. Ταυτόχρονα προτείνει server-side rendering ή pre-rendering όταν αυτό βελτιώνει την ταχύτητα και τη συμβατότητα με ανιχνευτή ιστοτόπουs που δεν εκτελούν JavaScript. Άρα η απόφαση δεν είναι «JavaScript ή SEO (Βελτιστοποίηση για Μηχανές Αναζήτησης, Search Engine Optimization)», αλλά ποια αρχιτεκτονική παραδίδει σταθερά το σωστό περιεχόμενο.
Τι πρέπει να έχει κάθε ουσιαστική οθόνη
- Μοναδική και σταθερή διεύθυνση για περιεχόμενο που πρέπει να αναζητείται ξεχωριστά.
- Πραγματικούς συνδέσμους με στοιχείο
<a>και href που μπορεί να ακολουθήσει ο ανιχνευτή ιστοτόπου. - Σωστό title και μετα-περιγραφή που αντιστοιχούν στο περιεχόμενο της συγκεκριμένης διαδρομής.
- Κανονική κανονική διεύθυνση δήλωση χωρίς αντιφάσεις μεταξύ αρχικού και παραγόμενου κώδικα της σελίδας.
- Κατάλληλο κωδικό κατάστασης HTTP όταν μια σελίδα δεν υπάρχει, έχει μετακινηθεί ή απαιτεί εξουσιοδότηση.
Για το γενικό πλαίσιο μπορείτε να συνδέσετε το θέμα με τον οδηγό SPA SEO και με τη σχέση SPA και Google, ώστε ο αναγνώστης να ξεχωρίζει τη γενική βελτιστοποίηση από τα ειδικά προβλήματα απόδοσης JavaScript.
Γιατί τα τμήματα διεύθυνσης μετά το σύμβολο # παραμένουν κακή βάση για ξεχωριστό περιεχόμενο
Η Google έχει αποσύρει εδώ και χρόνια το παλιό ασύγχρονα αιτήματα JavaScript crawling scheme. Σε μια SPA δεν πρέπει να βασιζόμαστε σε fragments όπως #/product για να ορίσουμε σελίδες που θέλουμε να ευρετηριάζονται ξεχωριστά. Προτιμάται κανονική δρομολόγηση με History διεπαφή εφαρμογής και πραγματικές διευθύνσεις. Αυτό είναι ένα από τα σημεία όπου μια παλιά εφαρμογή του 2020 μπορεί να χρειάζεται ουσιαστικό εκσυγχρονισμό και όχι απλώς νέα meta tags.
Soft 404 και λάθος status: το κλασικό πρόβλημα εφαρμογών πελάτη
Αν μια διαδρομή δεν αντιστοιχεί σε πραγματικό αντικείμενο, αλλά η εφαρμογή επιστρέφει πάντα HTTP 200 και απλώς εμφανίζει μήνυμα «δεν βρέθηκε», δημιουργείται soft 404 συμπεριφορά. Η λύση είναι να δοθεί κατάλληλη απόκριση ή να γίνει ανακατεύθυνση σε πραγματική σελίδα 404. Αυτό απαιτεί συνεργασία ανάμεσα στη δρομολόγηση της εφαρμογής και στο στρώμα που ελέγχει την HTTP απόκριση.
Πίνακας επιλογής απόδοσης για σημερινό SPA
| Σενάριο | Προτιμώμενη κατεύθυνση | Γιατί |
|---|---|---|
| Δημόσιες σελίδες με οργανική ζήτηση | Server-side rendering ή στατική παραγωγή όπου είναι εφικτό | Το βασικό περιεχόμενο φτάνει νωρίς και είναι ανθεκτικό σε ανιχνευτή ιστοτόπουs |
| Ιδιωτικό dashboard μετά από σύνδεση | Client-side rendering | Η ευρετηρίαση δεν είναι στόχος |
| Υβριδικό ιστότοπος με δημόσιο και εφαρμογή | Υβριδική απόδοση ανά διαδρομή | Δεν χρειάζεται η ίδια τεχνική για όλες τις οθόνες |
| Παλιά SPA με fragments | Μετάβαση σε κανονικές διαδρομές | Κάθε ουσιαστικό περιεχόμενο αποκτά σταθερή διεύθυνση |
Τι σημαίνει server-side rendering χωρίς υπερβολές
Η απόδοση στον διακομιστή δεν είναι μαγική θεραπεία. Μπορεί να αυξήσει την πολυπλοκότητα ανάπτυξης, να προσθέσει ανάγκες cache και να δημιουργήσει προβλήματα αν το κώδικα σελίδας του διακομιστή δεν συμφωνεί με το αποτέλεσμα μετά την ενεργοποίηση της εφαρμογής. Το κριτήριο είναι αν το βασικό περιεχόμενο και οι σύνδεσμοι παραδίδονται αξιόπιστα, γρήγορα και με σωστή σημασιολογία. Σε ορισμένα έργα η στατική παραγωγή είναι απλούστερη· σε άλλα, μια σωστά υλοποιημένη SPA λειτουργεί χωρίς ειδική προ-απόδοση.
Έλεγχος με τα εργαλεία της Google
Δεν αρκεί να ανοίγουμε τη σελίδα στον δικό μας browser. Χρειάζεται να εξετάσουμε τι βλέπει η Google μετά την απόδοση, αν οι σύνδεσμοι είναι παρόντες στο rendered κώδικα σελίδας και αν τα meta στοιχεία έχουν τη σωστή τελική τιμή. Το URL Inspection και το Rich Results Test είναι χρήσιμα για τέτοιους ελέγχους. Η σελίδα Google SEO για SPA μπορεί να λειτουργήσει ως εσωτερικό σημείο συνέχειας για τον τεχνικό έλεγχο.
Κριτήρια υπηρεσιακής απόφασης: πότε αξίζει παρέμβαση
- Σημαντικές οργανικές σελίδες δεν έχουν μοναδική διεύθυνση ή δεν είναι προσβάσιμες χωρίς αλληλεπίδραση.
- Το αρχικό κώδικα σελίδας είναι σχεδόν κενό και η απόδοση αποτυγχάνει ή καθυστερεί για κρίσιμες διαδρομές.
- Υπάρχουν soft 404, αντιφατικά κανονικές διευθύνσεις ή μεταδεδομένα που παραμένουν ίδια σε όλες τις οθόνες.
- Οι εσωτερικοί σύνδεσμοι υλοποιούνται με χειριστές click αντί για crawlable href.
- Η ομάδα δεν μπορεί να ελέγξει αξιόπιστα τι παραδίδεται σε ανιχνευτή ιστοτόπου και χρήστη μετά από κάθε έκδοση.
Τι να κρατήσετε από το 2020 και τι να αφήσετε πίσω
Από τις παλιές συμβουλές κρατάμε την ανάγκη για μοναδικές διευθύνσεις, σωστά status codes, σαφή μεταδεδομένα, ανιχνεύσιμους συνδέσμους και έλεγχο του rendered αποτελέσματος. Αφήνουμε πίσω την ιδέα ότι κάθε JavaScript ιστότοπος χρειάζεται ειδικά κόλπα για να «ξεγελάσει» τη μηχανή αναζήτησης. Η σύγχρονη προσέγγιση είναι αρχιτεκτονική: παραδίδουμε καθαρά το περιεχόμενο, αποφεύγουμε τεχνικές ασάφειες και επιλέγουμε τρόπο απόδοσης με βάση την αξία κάθε διαδρομής.
Πρακτική σειρά αναβάθμισης
- Καταγραφή όλων των δημόσιων διαδρομών που πρέπει να μπορούν να αναζητηθούν.
- Έλεγχος status, κανονική διεύθυνση, title, μετα-περιγραφή και crawlable links ανά διαδρομή.
- Έλεγχος rendered κώδικα σελίδας με εργαλεία που προσεγγίζουν την οπτική της Google.
- Διόρθωση routing και σφαλμάτων πριν αποφασιστεί αλλαγή ολόκληρου πλαίσιο.
- Επιλογή server-side, static ή client-side απόδοσης ανά πραγματική ανάγκη και επανέλεγχος μετά την υλοποίηση.
Το κρίσιμο ερώτημα: τι υπάρχει σε κάθε ξεχωριστή διαδρομή
Μια εφαρμογή μπορεί να φαίνεται άψογη στον φυλλομετρητή ενός χρήστη και παρ’ όλα αυτά να έχει αδύναμη δομή για αναζήτηση. Κάθε σημαντικό προϊόν, υπηρεσία ή κατηγορία χρειάζεται σταθερή διεύθυνση URL, χρήσιμο κύριο περιεχόμενο και συνδέσμους που μπορούν να ακολουθηθούν. Αν όλες οι καταστάσεις εμφανίζονται πίσω από μία διεύθυνση ή μόνο μετά από αλληλεπίδραση, δυσκολεύεται τόσο η αναζήτηση όσο και η δυνατότητα του χρήστη να μοιραστεί ή να επιστρέψει σε συγκεκριμένη κατάσταση.
Απόδοση στον διακομιστή, προαπόδοση ή απόδοση στον φυλλομετρητή
Δεν υπάρχει μία αρχιτεκτονική που είναι υποχρεωτικά σωστή για κάθε εφαρμογή. Η απόδοση στον διακομιστή ή η προαπόδοση μπορεί να δώσει έτοιμο περιεχόμενο νωρίτερα και να μειώσει την εξάρτηση από εκτέλεση JavaScript για το αρχικό νόημα. Η απόδοση στον φυλλομετρητή μπορεί επίσης να λειτουργεί, αρκεί το αποτέλεσμα να είναι σταθερό, προσβάσιμο και σωστά συνδεδεμένο. Η επιλογή γίνεται με βάση πολυπλοκότητα, ταχύτητα, δυνατότητα συντήρησης και το αν οι κρίσιμες σελίδες παραδίδουν συνεπώς το ίδιο ουσιαστικό περιεχόμενο.
Παράδειγμα ελέγχου σε κατάλογο προϊόντων
Σε μια εφαρμογή καταλόγου, ανοίγουμε απευθείας τη διεύθυνση ενός προϊόντος χωρίς προηγούμενη πλοήγηση, ελέγχουμε αν επιστρέφει σωστό περιεχόμενο και αν οι σύνδεσμοι κατηγορίας οδηγούν με κανονικό στοιχείο <a> στις επόμενες σελίδες. Ελέγχουμε επίσης τι συμβαίνει σε προϊόν που δεν υπάρχει: η κατάσταση πρέπει να είναι σαφής και να μην εμφανίζεται τεχνητά ως επιτυχής σελίδα. Τέλος, συγκρίνουμε το κύριο περιεχόμενο πριν και μετά την εκτέλεση JavaScript ώστε να εντοπίσουμε πληροφορίες που εμφανίζονται μόνο καθυστερημένα ή αποτυγχάνουν.
Τι κρατάμε από τις οδηγίες του 2020
Η βασική αρχή παραμένει χρήσιμη: η αναζήτηση πρέπει να μπορεί να ανακαλύψει, να αποδώσει και να κατανοήσει κάθε σημαντική σελίδα. Αυτό που έχει αλλάξει είναι ότι δεν χρειάζεται να αντιμετωπίζουμε τη JavaScript ως αυτόματο εμπόδιο. Η σημερινή αξιολόγηση είναι πιο συγκεκριμένη: μοναδικές διαδρομές, σωστές αποκρίσεις, ανιχνεύσιμοι σύνδεσμοι, συνεπές περιεχόμενο, κατάλληλα κανονικές διευθύνσεις και τεχνική απόδοση που μπορεί να ελεγχθεί.