Πώς βλέπει η Google μια εφαρμογή Vue.js

Η Google περιγράφει τρία βασικά στάδια για σελίδες που βασίζονται σε JavaScript: ανίχνευση, απόδοση και ευρετηρίαση. Αυτό σημαίνει ότι το γεγονός πως ο Googlebot μπορεί να εκτελέσει JavaScript δεν ακυρώνει την ανάγκη για σωστή αρχική απόκριση, προσβάσιμους πόρους και τελικό HTML που περιέχει το ουσιαστικό κείμενο και τους συνδέσμους. Σε εφαρμογές τύπου περίβλημα εφαρμογής, όπου η πρώτη απόκριση έχει ελάχιστο περιεχόμενο, η απόδοση γίνεται ακόμη πιο κρίσιμη.

Η ασφαλής αρχή είναι να μην βασίζουμε την οργανική ορατότητα σε μια αλληλουχία που δουλεύει μόνο όταν όλα τα αιτήματα εφαρμογής, τα API (Διεπαφή Προγραμματισμού Εφαρμογών, Application Programming Interface) και τα αρχεία JavaScript ολοκληρωθούν χωρίς πρόβλημα. Όσο πιο σημαντική είναι μια σελίδα για αναζήτηση, τόσο μεγαλύτερη αξία έχει να παραδίδει το κρίσιμο περιεχόμενο με τρόπο ανθεκτικό.

Επιλογή τρόπου απόδοσης

Για δημόσιες σελίδες που θέλουμε να ανακαλύπτονται σταθερά, η απόδοση στον διακομιστή (στην πλευρά του διακομιστή απόδοση) ή η στατική παραγωγή μπορούν να μειώσουν την εξάρτηση από εκτέλεση JavaScript στον ανιχνευτής. Η ίδια η Google αναφέρει ότι στην πλευρά του διακομιστή ή προαπόδοση παραμένει καλή ιδέα, ενώ το παλιό δυναμική απόδοση αντιμετωπίζεται ως προσωρινή λύση και όχι ως προτεινόμενη μόνιμη αρχιτεκτονική.

Η επιλογή δεν γίνεται ιδεολογικά. Μια εφαρμογή λογαριασμού που βρίσκεται πίσω από σύνδεση έχει διαφορετικό στόχο από ένα δημόσιο κατάλογο προϊόντων ή ένα σύνολο σελίδες προορισμού. Η υπηρεσία πρέπει να χαρτογραφήσει ποια διαδρομές χρειάζονται οργανική ανακάλυψη και να επιλέξει μοντέλο απόδοσης ανά ρόλο, όχι να αλλάξει όλο το έργο χωρίς λόγο.

Μεταδεδομένα, canonical και κωδικοί απόκρισης

Κάθε indexable διαδρομή χρειάζεται μοναδικό τίτλο, συνεπή περιγραφή και σωστό canonical. Αν τα μεταδεδομένα αλλάζουν μέσω JavaScript, πρέπει να επιβεβαιώνεται ότι εμφανίζονται στο τελικό HTML και ότι το canonical δεν αλλάζει σε διαφορετική διεύθυνση από αυτή που δηλώνει η αρχική σελίδα. Εξίσου σημαντικό είναι το υποσύστημα διακομιστή να επιστρέφει πραγματικούς κωδικούς σφάλματος για ανύπαρκτες διαδρομές, αντί μια κενή σελίδα με 200 που μπορεί να μοιάζει με ψευδές 404.

Οι σύνδεσμοι πλοήγησης χρειάζεται να είναι πραγματικά στοιχεία anchor με href, ώστε να μπορούν να ανακαλυφθούν αξιόπιστα. δρομολογητής interactions χωρίς κανονικό href δημιουργούν περιττή αβεβαιότητα, ιδιαίτερα όταν η ίδια σελίδα δεν υπάρχει σε sitemap ή σε άλλο ανιχνεύσιμο μονοπάτι.

Πίνακας κριτηρίων για υπηρεσία Vue.js SEO

Σε ποιον ταιριάζει μια τέτοια υπηρεσία

Είναι ιδιαίτερα χρήσιμη όταν το Vue.js ιστότοπος έχει δημόσιο περιεχόμενο που πρέπει να αποδίδει οργανικά: καταλόγους, προϊόντα, υπηρεσίες, άρθρα, κατηγορίες, προφίλ ή προγραμματικά παραγόμενες σελίδες. Αν το έργο είναι σχεδόν αποκλειστικά ιδιωτικό πίνακας διαχείρισης, η προτεραιότητα μπορεί να είναι διαφορετική. Το κρίσιμο είναι να μη φορτώσουμε τεχνικό κόστος εκεί όπου δεν υπάρχει ανάγκη αναζήτησης.

Το επιδιωκόμενο αποτέλεσμα είναι να περιοριστούν τα διαδρομές που εξαρτώνται από εύθραυστη εκτέλεση, να γίνουν οι σελίδες καθαρές ως προς δυνατότητα ευρετηρίασης και κανονικοποίηση canonical και να υπάρχει διαδικασία που εντοπίζει παλινδρόμηση μετά από νέα έκδοση. Αυτό είναι πιο ουσιαστικό από μια γενική υπόσχεση «θα κάνουμε το Vue SEO friendly».

Έλεγχος πριν και μετά την υλοποίηση

1. Καταγραφή όλων των δημόσιων διαδρομή πρότυπα και αντιστοίχισή τους σε πραγματική πρόθεση αναζήτησης.
2. Έλεγχος της αρχικής HTTP (Πρωτόκολλο Μεταφοράς Υπερκειμένου, Hypertext Transfer Protocol) απόκρισης και του τελικού τελικό HTML.
3. Δοκιμή τίτλου, canonical, οδηγίες robots, δομημένα δεδομένα και βασικού κειμένου ανά πρότυπο.
4. Έλεγχος αν οι σύνδεσμοι υπάρχουν ως πραγματικά href και αν οι orphan σελίδες εμφανίζονται σε sitemap ή σχετική πλοήγηση.
5. Δοκιμή ανύπαρκτων διαδρομές, αλυσίδες ανακατευθύνσεων και διακομιστής σφάλματα ώστε να μην καταλήγουν σε ψευδές 200.
6. Επαναληπτικός έλεγχος με εργαλεία της Search Console μετά την παραγωγική αλλαγή.

Το βασικό κριτήριο επιτυχίας

Μια καλή υλοποίηση κάνει τη σημαντική πληροφορία εύκολη να ανακτηθεί τόσο από άνθρωπο όσο και από ανιχνευτής. Δεν χρειάζεται να αφαιρέσει τα δυναμικά πλεονεκτήματα του Vue.js. Χρειάζεται να ορίσει σαφή όρια: ποιο περιεχόμενο πρέπει να είναι άμεσα διαθέσιμο, τι μπορεί να φορτωθεί αργότερα και ποια τεχνικά σήματα δεν επιτρέπεται να αλλάζουν τυχαία ανάλογα με την κατάσταση του πλευρά χρήστη.

Αν η υπηρεσία μπορεί να δείξει πριν/μετά τελικό HTML, σωστούς κωδικούς απόκρισης και σταθερή ανακάλυψη των σημαντικών URLs, τότε υπάρχει τεχνικά ελέγξιμο αποτέλεσμα. Αν μένει μόνο σε μετα-ετικέτες και γενικές συμβουλές, το βασικό πρόβλημα του Vue.js SEO παραμένει άλυτο.

Σχετική συνέχεια

Συνεχίστε με τις βασικές αρχές Google SEO. Δείτε και τις απαιτήσεις περιεχομένου για ορατότητα στη Google.

Λάθη που δεν φαίνονται όταν κοιτάμε μόνο το πρόγραμμα περιήγησης

Ένας προγραμματιστής μπορεί να ανοίξει μια διαδρομή, να δει σωστό κείμενο και να θεωρήσει ότι το πρόβλημα τελείωσε. Η επαλήθευση όμως πρέπει να εξετάζει και την απόκριση πριν εκτελεστεί η JavaScript, καθώς και το τελικό HTML (Γλώσσα Σήμανσης Υπερκειμένου, HyperText Markup Language) μετά την απόδοση. Εκεί αποκαλύπτονται διαφορές όπως τίτλος που αλλάζει αργά, canonical που δείχνει αλλού, περιεχόμενο που εμφανίζεται μόνο μετά από αλληλεπίδραση ή σύνδεσμοι που λειτουργούν οπτικά χωρίς να είναι κανονικά href. Επίσης, ένα σφάλμα δεδομένων μπορεί να αφήσει κενό το κύριο περιεχόμενο ενώ το περίβλημα της εφαρμογής εξακολουθεί να επιστρέφει επιτυχία.

Χρειάζεται ακόμη έλεγχος σε διαφορετικές καταστάσεις: άμεση επίσκεψη σε βαθιά διαδρομή, ανανέωση σελίδας, πρόσβαση χωρίς προηγούμενη πλοήγηση, σελίδα που δεν υπάρχει, προσωρινή αποτυχία δεδομένων και αλλαγή παραμέτρων. Αν η εφαρμογή βασίζεται σε διεπαφή εφαρμογής (Application Programming Interface) για κρίσιμο κείμενο, η αποτυχία της δεν πρέπει να μετατρέπεται σιωπηρά σε κανονική σελίδα χωρίς περιεχόμενο.

Τι πρέπει να παραδίδει μια τεχνική υπηρεσία Vue.js SEO

Ένα σοβαρό παραδοτέο δεν είναι μια γενική λίστα συμβουλών. Πρέπει να περιλαμβάνει χαρτογράφηση των δημοσίων προτύπων, δείγματα αρχικής και τελικής απόδοσης, πίνακα κωδικών απόκρισης, έλεγχο τίτλου και canonical ανά τύπο σελίδας, έλεγχο των συνδέσμων και σαφή κανόνα για το πότε χρησιμοποιείται απόδοση στον διακομιστή ή στατική παραγωγή. Χρήσιμο είναι επίσης να οριστούν αυτοματοποιημένοι έλεγχοι που τρέχουν μετά από νέα έκδοση και εντοπίζουν αν χάθηκε τίτλος, κύριο κείμενο, canonical ή κρίσιμος σύνδεσμος.

Η επιτυχία μετριέται σε δύο επίπεδα. Στο τεχνικό επίπεδο, οι σημαντικές διαδρομές πρέπει να επιστρέφουν συνεπείς αποκρίσεις και να εμφανίζουν το βασικό περιεχόμενο στο τελικό έγγραφο. Στο επίπεδο αναζήτησης, παρακολουθούμε ανακάλυψη, ευρετηρίαση, εμφανίσεις και κλικ ανά πρότυπο. Αν μια αλλαγή βελτιώνει το ένα αλλά δημιουργεί πρόβλημα στο άλλο, η αρχιτεκτονική χρειάζεται νέα αξιολόγηση. Έτσι το vuejs seo google μετατρέπεται από αόριστη απαίτηση σε σύνολο ελέγξιμων τεχνικών κριτηρίων.