Γνωρίζατε ότι ενώ το blog Ahrefs τροφοδοτείται από WordPress, μεγάλο μέρος του υπόλοιπου ιστότοπου τροφοδοτείται από JavaScript όπως το React;
Οι περισσότεροι ιστότοποι χρησιμοποιούν κάποιο είδος JavaScript για να προσθέσουν διαδραστικότητα και να βελτιώσουν την εμπειρία των χρηστών. Μερικοί το χρησιμοποιούν για μενού, αντλώντας προϊόντα ή τιμές, αρπάζοντας περιεχόμενο από πολλές πηγές ή, σε ορισμένες περιπτώσεις, για οτιδήποτε στον ιστότοπο. Η πραγματικότητα του τρέχοντος ιστού είναι ότι η JavaScript είναι πανταχού παρούσα.
Όπως είπε ο John Mueller της Google :
Δεν λέω ότι οι SEO πρέπει να βγουν και να μάθουν πώς να προγραμματίζουν τη JavaScript. Είναι ακριβώς το αντίθετο. Τα SEO πρέπει κυρίως να γνωρίζουν πώς χειρίζεται η Google τη JavaScript και πώς να αντιμετωπίζει προβλήματα. Σε πολύ λίγες περιπτώσεις θα επιτρέπεται ακόμη και σε SEO να αγγίζει τον κώδικα. Ο στόχος μου με αυτήν την ανάρτηση είναι να σας βοηθήσω να μάθετε:
Το JavaScript SEO είναι ένα μέρος του Τεχνικού SEO (Search Engine Optimization) που επιδιώκει να κάνει τους ιστότοπους με μεγάλη JavaScript εύκολη ανίχνευση και ευρετηρίαση, καθώς και φιλικές προς την αναζήτηση. Ο στόχος είναι να βρεθούν αυτοί οι ιστότοποι και να κατατάσσονται υψηλότερα στις μηχανές αναζήτησης .
Είναι κακό JavaScript για SEO ; είναι κακό JavaScript; Καθόλου. Είναι απλώς διαφορετικό από ό, τι έχουν συνηθίσει πολλά SEO και υπάρχει μια καμπύλη μάθησης. Οι άνθρωποι τείνουν να το χρησιμοποιούν υπερβολικά για πράγματα όπου υπάρχει πιθανώς μια καλύτερη λύση, αλλά πρέπει να εργάζεστε με αυτό που έχετε κατά καιρούς. Απλώς ξέρετε ότι το Javascript δεν είναι τέλειο και δεν είναι πάντα το σωστό εργαλείο για τη δουλειά. Δεν μπορεί να αναλυθεί σταδιακά, σε αντίθεση με το HTML και το CSS και μπορεί να είναι βαρύ κατά τη φόρτωση και την απόδοση της σελίδας. Σε πολλές περιπτώσεις, ενδέχεται να ανταλλάσσετε απόδοση για λειτουργικότητα.
Στις πρώτες μέρες των μηχανών αναζήτησης, μια ληφθείσα απόκριση HTML ήταν αρκετή για να δείτε το περιεχόμενο των περισσότερων σελίδων. Χάρη στην άνοδο του JavaScript, οι μηχανές αναζήτησης πρέπει τώρα να αποδίδουν πολλές σελίδες όπως το πρόγραμμα περιήγησης, ώστε να μπορούν να δουν περιεχόμενο με τον οποίο το βλέπει ένας χρήστης.
Το σύστημα που χειρίζεται τη διαδικασία απόδοσης στο Google ονομάζεται Web Rendering Service ( WRS ). Η Google παρείχε ένα απλοϊκό διάγραμμα για να καλύψει τον τρόπο λειτουργίας αυτής της διαδικασίας.
Ας πούμε ότι ξεκινάμε τη διαδικασία στη διεύθυνση URL .
1. Ανιχνευτής
Ο ανιχνευτής στέλνει αιτήματα GET στον διακομιστή. Ο διακομιστής αποκρίνεται με κεφαλίδες και το περιεχόμενο του αρχείου, το οποίο στη συνέχεια αποθηκεύεται.
Το αίτημα είναι πιθανό να προέλθει από έναν πράκτορα χρήστη για κινητά, καθώς η Google είναι κυρίως σε ευρετηρίαση για κινητά . Μπορείτε να ελέγξετε για να δείτε πώς ανιχνεύει η Google τον ιστότοπό σας με το Εργαλείο επιθεώρησης διευθύνσεων URL στο Search Console . Όταν εκτελείτε αυτό για μια διεύθυνση URL , ελέγξτε τις πληροφορίες κάλυψης για το "Ανίχνευση ως" και θα σας πει εάν εξακολουθείτε να χρησιμοποιείτε ευρετηρίαση σε επιτραπέζιο υπολογιστή ή ευρετηρίαση για κινητά.
Τα αιτήματα προέρχονται κυρίως από το Mountain View, CA , USA , αλλά κάνουν επίσης ανίχνευση για τοπικές προσαρμοσμένες σελίδες εκτός των Ηνωμένων Πολιτειών. Το αναφέρω αυτό επειδή ορισμένοι ιστότοποι αποκλείουν ή μεταχειρίζονται επισκέπτες από μια συγκεκριμένη χώρα ή χρησιμοποιούν μια συγκεκριμένη IP με διαφορετικούς τρόπους, κάτι που θα μπορούσε να προκαλέσει το Googlebot να μην φαίνεται το περιεχόμενό σας.
Ορισμένοι ιστότοποι ενδέχεται επίσης να χρησιμοποιούν ανίχνευση παράγοντα χρήστη για την εμφάνιση περιεχομένου σε ένα συγκεκριμένο πρόγραμμα ανίχνευσης. Ειδικά με τους ιστότοπους JavaScript, η Google μπορεί να βλέπει κάτι διαφορετικό από έναν χρήστη. Αυτός είναι ο λόγος για τον οποίο τα εργαλεία της Google, όπως το Εργαλείο επιθεώρησης URL στο Google Search Console, η δοκιμή φιλική προς κινητά και η δοκιμή εμπλουτισμένων αποτελεσμάτων είναι σημαντικά για την αντιμετώπιση προβλημάτων SEO JavaScript . Σας δείχνουν τι βλέπει η Google και είναι χρήσιμα για να ελέγξετε εάν η Google ενδέχεται να έχει αποκλειστεί και αν μπορεί να δει το περιεχόμενο στη σελίδα. Θα καλύψω πώς να το δοκιμάσω αυτό στην ενότητα σχετικά με το Renderer, επειδή υπάρχουν κάποιες βασικές διαφορές μεταξύ του αιτήματος GET που έχετε κατεβάσει , της σελίδας που δίνεται και ακόμη και των εργαλείων δοκιμής.
Είναι επίσης σημαντικό να σημειωθεί ότι ενώ η Google δηλώνει το αποτέλεσμα της διαδικασίας ανίχνευσης ως " HTML " στην παραπάνω εικόνα, στην πραγματικότητα, ανιχνεύουν και αποθηκεύουν όλους τους πόρους που απαιτούνται για τη δημιουργία της σελίδας. Σελίδες HTML , αρχεία Javascript, CSS , αιτήματα XHR , τελικά σημεία API και άλλα.
2. Επεξεργασία
Υπάρχουν πολλά συστήματα που απαθανατίζονται από τον όρο «Επεξεργασία» στην εικόνα. Θα καλύψω μερικά από αυτά που σχετίζονται με τη JavaScript.
Πόροι και σύνδεσμοι
Η Google δεν πλοηγείται από σελίδα σε σελίδα όπως θα έκανε ο χρήστης. Μέρος της Επεξεργασίας είναι να ελέγξετε τη σελίδα για συνδέσμους προς άλλες σελίδες και αρχεία που απαιτούνται για τη δημιουργία της σελίδας. Αυτοί οι σύνδεσμοι αφαιρούνται και προστίθενται στην ουρά ανίχνευσης, κάτι που χρησιμοποιεί η Google για να δώσει προτεραιότητα και να προγραμματίσει την ανίχνευση.
Η Google θα αντλήσει συνδέσμους πόρων ( CSS , JS κ.λπ.) που απαιτούνται για τη δημιουργία μιας σελίδας από πράγματα όπως <link> ετικέτες. Ωστόσο, οι σύνδεσμοι προς άλλες σελίδες πρέπει να είναι σε συγκεκριμένη μορφή ώστε η Google να τις αντιμετωπίζει ως συνδέσμους. Οι εσωτερικοί και εξωτερικοί σύνδεσμοι πρέπει να είναι μια <a> ετικέτα με ένα href χαρακτηριστικό. Υπάρχουν πολλοί τρόποι με τους οποίους μπορείτε να το κάνετε αυτό για χρήστες με JavaScript που δεν είναι φιλικές προς την αναζήτηση.
Καλός:
Το <a href=assign/page[> απλό είναι καλό </a> <a href=assign/pageassign onclick=assigngoTo('page')assign> ακόμα εντάξει </a>
Κακό:
<a onclick=assigngoTo('page')"> όχι, όχι href </a> <a href=assignjavascript:goTo('page')"> όχι, λείπει σύνδεσμος </a> <a href=assignjavascript:void(0)assign> όχι, λείπει σύνδεσμος </a> <span onclick = "goTo ('page')"> όχι το σωστό στοιχείο HTML </span> <option value = "page"> όχι, λάθος στοιχείο HTML </option> <a href=assign#assign> χωρίς σύνδεσμο </a> Κουμπί, ng-click, υπάρχουν πολλοί περισσότεροι τρόποι που αυτό μπορεί να γίνει εσφαλμένα.
Αξίζει επίσης να σημειωθεί ότι οι εσωτερικοί σύνδεσμοι που προστίθενται με το JavaScript δεν θα ληφθούν παρά μόνο μετά την απόδοση. Αυτό πρέπει να είναι σχετικά γρήγορο και να μην προκαλεί ανησυχία στις περισσότερες περιπτώσεις.
Προσωρινή αποθήκευση
Κάθε αρχείο που κατεβάζει η Google, συμπεριλαμβανομένων σελίδων HTML , αρχείων JavaScript, αρχείων CSS κ.λπ., θα αποθηκευτεί επιθετικά. Η Google θα αγνοήσει τους χρόνους προσωρινής αποθήκευσης και θα πάρει ένα νέο αντίγραφο όταν το θέλει. Θα μιλήσω λίγο περισσότερο για αυτό και γιατί είναι σημαντικό στην ενότητα Renderer.
Διπλή εξάλειψη
Το διπλό περιεχόμενο μπορεί να εξαλειφθεί ή να υποτιμηθεί από το ληφθέν HTML πριν αποσταλεί στην απόδοση. Με μοντέλα κελύφους εφαρμογών, πολύ λίγο περιεχόμενο και κώδικας ενδέχεται να εμφανίζονται στην απόκριση HTML . Στην πραγματικότητα, κάθε σελίδα στον ιστότοπο μπορεί να εμφανίζει τον ίδιο κώδικα και αυτός μπορεί να είναι ο ίδιος κωδικός που εμφανίζεται σε πολλούς ιστότοπους. Αυτό μπορεί μερικές φορές να κάνει τις σελίδες να αντιμετωπίζονται ως διπλότυπα και να μην μεταβαίνουν αμέσως στην απόδοση. Ακόμα χειρότερα, η λάθος σελίδα ή ακόμη και ο λανθασμένος ιστότοπος μπορεί να εμφανίζονται στα αποτελέσματα αναζήτησης. Αυτό θα επιλυθεί με την πάροδο του χρόνου, αλλά μπορεί να είναι προβληματικό, ειδικά με νεότερους ιστότοπους.
Πιο περιοριστικές οδηγίες
Η Google θα επιλέξει τις πιο περιοριστικές δηλώσεις μεταξύ HTML και της έκδοσης μιας σελίδας. Εάν το JavaScript αλλάξει μια δήλωση και έρχεται σε αντίθεση με τη δήλωση από HTML , η Google θα υπακούει απλώς σε ό, τι είναι το πιο περιοριστικό. Το Noindex θα παρακάμψει το ευρετήριο και το noindex σε HTML θα παραλείψει την απόδοση εντελώς.
3. Δώστε την ουρά
Κάθε σελίδα πηγαίνει στο πρόγραμμα απόδοσης τώρα. Μια από τις μεγαλύτερες ανησυχίες από πολλά SEO με JavaScript και ευρετηρίαση δύο σταδίων ( HTML στη συνέχεια αποδίδεται σελίδα) είναι ότι οι σελίδες ενδέχεται να μην αποδίδονται για ημέρες ή ακόμα και εβδομάδες. Όταν το Google εξέτασε αυτό, διαπίστωσαν ότι οι σελίδες μεταφέρθηκαν στο renderer σε διάμεσο χρόνο 5 δευτερολέπτων και το 90ο εκατοστημόριο ήταν λεπτά. Επομένως, ο χρόνος μεταξύ της λήψης του HTML και της απόδοσης των σελίδων δεν πρέπει να αποτελεί ανησυχία στις περισσότερες περιπτώσεις.
4. Δώστε
Το renderer είναι το σημείο όπου η Google δίνει μια σελίδα για να δει τι βλέπει ένας χρήστης. Εδώ θα επεξεργαστούν τη JavaScript και τυχόν αλλαγές που πραγματοποιούνται από τη JavaScript στο μοντέλο αντικειμένου εγγράφου ( DOM ) .
Για το σκοπό αυτό, η Google χρησιμοποιεί ένα πρόγραμμα περιήγησης Chrome χωρίς κεφάλι που είναι πλέον «αειθαλή», πράγμα που σημαίνει ότι πρέπει να χρησιμοποιεί την πιο πρόσφατη έκδοση του Chrome και να υποστηρίζει τις πιο πρόσφατες λειτουργίες. Μέχρι πρόσφατα, η Google είχε απόδοση με το Chrome 41, οπότε δεν υποστηρίζονταν πολλές λειτουργίες.
Η Google έχει περισσότερες πληροφορίες σχετικά με την υπηρεσία διαδικτυακής απόδοσης ( WRS ) , η οποία περιλαμβάνει πράγματα όπως άρνηση αδειών, ανιθαγενές, ισοπεδωτικό φως DOM και σκιά DOM και πολλά άλλα που αξίζει να διαβάσετε.
Η απόδοση σε κλίμακα Ιστού μπορεί να είναι το 8ο θαύμα του κόσμου. Είναι μια σοβαρή επιχείρηση και παίρνει ένα τεράστιο ποσό πόρων. Λόγω της κλίμακας, η Google λαμβάνει πολλές συντομεύσεις με τη διαδικασία απόδοσης για να επιταχύνει τα πράγματα. Στην Ahrefs, είμαστε το μόνο σημαντικό εργαλείο SEO που αποδίδει ιστοσελίδες σε κλίμακα και καταφέρνουμε να αποδίδουμε ~ 150 εκατομμύρια σελίδες την ημέρα για να κάνουμε το ευρετήριο συνδέσμων μας πιο ολοκληρωμένο. Μας επιτρέπει να ελέγξουμε για ανακατευθύνσεις JavaScript και μπορούμε επίσης να δείξουμε συνδέσμους που βρήκαμε ότι έχουν εισαχθεί με JavaScript που εμφανίζονται με μια ετικέτα JS στις αναφορές συνδέσμων:
Αποθηκευμένοι πόροι
Η Google βασίζεται σε μεγάλο βαθμό στους πόρους προσωρινής αποθήκευσης. Οι σελίδες αποθηκεύονται στην κρυφή μνήμη. τα αρχεία είναι προσωρινά αποθηκευμένα. Τα αιτήματα API αποθηκεύονται προσωρινά. Βασικά, όλα αποθηκεύονται προσωρινά στην αποθήκευση πριν από την αποστολή στο renderer. Δεν βγαίνουν και κατεβάζουν κάθε πόρο για κάθε φόρτωση σελίδας, αλλά αντ 'αυτού χρησιμοποιούν πόρους προσωρινής αποθήκευσης για να επιταχύνουν αυτήν τη διαδικασία.
Αυτό μπορεί να οδηγήσει σε ορισμένες αδύνατες καταστάσεις όπου προηγούμενες εκδόσεις αρχείων χρησιμοποιούνται στη διαδικασία απόδοσης και η ευρετηριασμένη έκδοση μιας σελίδας μπορεί να περιέχει τμήματα παλαιότερων αρχείων. Μπορείτε να χρησιμοποιήσετε εκδόσεις αρχείων ή δακτυλικό αποτύπωμα περιεχομένου για να δημιουργήσετε νέα ονόματα αρχείων όταν γίνονται σημαντικές αλλαγές, ώστε η Google να κατεβάσει την ενημερωμένη έκδοση του πόρου για απόδοση.
Χωρίς σταθερό χρονικό όριο
Ένας κοινός μύθος SEO είναι ότι ο renderer περιμένει μόνο πέντε δευτερόλεπτα για να φορτώσει τη σελίδα σας. Αν και είναι πάντα καλή ιδέα να κάνετε τον ιστότοπό σας πιο γρήγορο , αυτός ο μύθος δεν έχει νόημα με τον τρόπο με τον οποίο η Google αποθηκεύει προσωρινά τα αρχεία που αναφέρονται παραπάνω. Φορτώνουν βασικά μια σελίδα με όλα τα αποθηκευμένα ήδη. Ο μύθος προέρχεται από τα εργαλεία δοκιμών όπως το Εργαλείο επιθεώρησης URL όπου οι πόροι ανακτώνται ζωντανά και πρέπει να ορίσουν ένα λογικό όριο.
Δεν υπάρχει σταθερό χρονικό όριο για το πρόγραμμα απόδοσης. Αυτό που πιθανώς κάνουν είναι κάτι παρόμοιο με αυτό που κάνει το κοινό Rendertron . Πιθανότατα περιμένουν κάτι σαν το networkidle0 όπου δεν συμβαίνει πλέον δραστηριότητα δικτύου και ορίζουν επίσης το μέγιστο χρονικό διάστημα σε περίπτωση που κάτι κολλήσει ή κάποιος προσπαθεί να εξορύξει bitcoin στις σελίδες του.
Τι βλέπει το Googlebot
Το Googlebot δεν αναλαμβάνει δράση σε ιστοσελίδες. Δεν πρόκειται να κάνουν κλικ ή να κάνουν κύλιση, αλλά αυτό δεν σημαίνει ότι δεν έχουν λύσεις. Για περιεχόμενο, εφόσον φορτώνεται στο DOM χωρίς την απαραίτητη ενέργεια, θα το βλέπουν. Θα το καλύψω περισσότερο στην ενότητα αντιμετώπισης προβλημάτων, αλλά βασικά, εάν το περιεχόμενο βρίσκεται στο DOM αλλά είναι απλώς κρυφό, θα φαίνεται. Εάν δεν φορτωθεί στο DOM μόνο μετά από ένα κλικ, τότε το περιεχόμενο δεν θα βρεθεί.
Η Google δεν χρειάζεται να κάνει κύλιση για να δει το περιεχόμενό σας, είτε επειδή έχει μια έξυπνη λύση για να δει το περιεχόμενο. Για κινητά, φορτώνουν τη σελίδα με μέγεθος οθόνης 411x731 pixel και αλλάζουν το μέγεθος σε 12.140 pixel . Ουσιαστικά, γίνεται ένα πολύ μεγάλο τηλέφωνο με μέγεθος οθόνης 411x12140 pixel. Για επιτραπέζιους υπολογιστές, κάνουν το ίδιο και πηγαίνουν από 1024x768 pixels σε 1024x9307 pixels.
Μια άλλη ενδιαφέρουσα συντόμευση είναι ότι η Google δεν χρωματίζει τα pixel κατά τη διαδικασία απόδοσης. Χρειάζεται χρόνος και πρόσθετοι πόροι για να ολοκληρωθεί η φόρτωση μιας σελίδας και δεν χρειάζεται πραγματικά να δουν την τελική κατάσταση με τα pixel βαμμένα. Απλώς πρέπει να γνωρίζουν τη δομή και τη διάταξη και το καταλαβαίνουν χωρίς να χρειάζεται να βάψουν τα pixel. Όπως το λέει ο Martin Splitt από την Google:
Στην αναζήτηση Google δεν ενδιαφερόμαστε πραγματικά για τα pixel επειδή δεν θέλουμε πραγματικά να το δείξουμε σε κάποιον. Θέλουμε να επεξεργαστούμε τις πληροφορίες και τις σημασιολογικές πληροφορίες, έτσι χρειαζόμαστε κάτι στην ενδιάμεση κατάσταση. Δεν χρειάζεται να βάψουμε τα pixel.
Ένα οπτικό μπορεί να σας βοηθήσει να εξηγήσετε τι είναι λίγο καλύτερο. Στο Chrome Dev Tools, εάν εκτελέσετε μια δοκιμή στην καρτέλα Απόδοση, λαμβάνετε ένα γράφημα φόρτωσης. Το συμπαγές πράσινο μέρος εδώ αντιπροσωπεύει το στάδιο ζωγραφικής και για το Googlebot που δεν συμβαίνει ποτέ, ώστε να εξοικονομούν πόρους.
Γκρι = λήψεις
Μπλε = Κίτρινο HTML = JavaScript Μωβ = Διάταξη Πράσινο = Ζωγραφική
5. Ανίχνευση ουράς
Η Google διαθέτει έναν πόρο που μιλά λίγο για τον προϋπολογισμό ανίχνευσης , αλλά πρέπει να γνωρίζετε ότι κάθε ιστότοπος έχει τον δικό του προϋπολογισμό ανίχνευσης και ότι κάθε αίτημα πρέπει να έχει προτεραιότητα. Η Google πρέπει επίσης να εξισορροπήσει την ανίχνευση του ιστότοπού σας έναντι κάθε άλλου ιστότοπου στο διαδίκτυο. Οι νεότεροι ιστότοποι γενικά ή ιστότοποι με πολλές δυναμικές σελίδες πιθανότατα θα ανιχνευθούν πιο αργά. Ορισμένες σελίδες θα ενημερώνονται λιγότερο συχνά από άλλες και ορισμένοι πόροι ενδέχεται επίσης να ζητούνται λιγότερο συχνά.
Ένα «gotcha» με ιστότοπους JavaScript είναι ότι μπορούν να ενημερώσουν μόνο τμήματα του DOM . Η περιήγηση σε άλλη σελίδα ως χρήστης ενδέχεται να μην ενημερώσει ορισμένες πτυχές όπως ετικέτες τίτλου ή κανονικές ετικέτες στο DOM , αλλά αυτό μπορεί να μην αποτελεί πρόβλημα για τις μηχανές αναζήτησης. Θυμηθείτε, το Google φορτώνει κάθε σελίδα χωρίς κατάσταση, οπότε δεν αποθηκεύουν προηγούμενες πληροφορίες και δεν περιηγούνται μεταξύ των σελίδων. Έχω δει τα SEO να σβήνουν πιστεύοντας ότι υπάρχει πρόβλημα λόγω αυτού που βλέπουν μετά την πλοήγηση από τη μία σελίδα στην άλλη, όπως μια κανονική ετικέτα που δεν ενημερώνεται, αλλά η Google μπορεί να μην δει ποτέ αυτήν την κατάσταση. Οι προγραμματιστές μπορούν να το διορθώσουν ενημερώνοντας την κατάσταση χρησιμοποιώντας αυτό που ονομάζεται Ιστορικό API, αλλά και πάλι δεν μπορεί να είναι πρόβλημα. Ανανεώστε τη σελίδα και δείτε τι βλέπετε ή καλύτερα εκτελέστε την μέσω ενός από τα εργαλεία δοκιμών της Google για να δείτε τι βλέπουν. Περισσότερα για αυτά σε ένα δευτερόλεπτο.
Προβολή-πηγή έναντι επιθεώρησης
Όταν κάνετε δεξί κλικ σε ένα παράθυρο του προγράμματος περιήγησης, θα δείτε μερικές επιλογές για προβολή του πηγαίου κώδικα της σελίδας και για έλεγχο της σελίδας. Το View-source θα σας δείξει το ίδιο με ένα αίτημα GET . Αυτό είναι το ακατέργαστο HTML της σελίδας. Το Inspect σας δείχνει το επεξεργασμένο DOM μετά την πραγματοποίηση αλλαγών και είναι πιο κοντά στο περιεχόμενο που βλέπει το Googlebot. Είναι βασικά η ενημερωμένη και τελευταία έκδοση της σελίδας. Θα πρέπει να χρησιμοποιείτε το inspect over view-source όταν εργάζεστε με JavaScript.
Google Cache
Η προσωρινή μνήμη της Google δεν είναι αξιόπιστος τρόπος για να ελέγξετε τι βλέπει το Googlebot. Είναι συνήθως το αρχικό HTML , αν και μερικές φορές είναι το HTML που αποδίδεται ή μια παλαιότερη έκδοση. Το σύστημα δημιουργήθηκε για να δει το περιεχόμενο όταν ένας ιστότοπος είναι εκτός λειτουργίας. Δεν είναι ιδιαίτερα χρήσιμο ως εργαλείο εντοπισμού σφαλμάτων.
Εργαλεία δοκιμών Google
Τα εργαλεία δοκιμών της Google όπως το URL Inspector στο Google Search Console, το Mobile Friendly Tester, το Rich Results Tester είναι χρήσιμα για τον εντοπισμό σφαλμάτων. Ακόμα, ακόμη και αυτά τα εργαλεία είναι ελαφρώς διαφορετικά από αυτά που θα δει η Google. Έχω ήδη μιλήσει για το χρονικό όριο πέντε δευτερολέπτων σε αυτά τα εργαλεία που δεν έχει ο renderer, αλλά αυτά τα εργαλεία διαφέρουν επίσης στο ότι τραβούν πόρους σε πραγματικό χρόνο και δεν χρησιμοποιούν τις προσωρινές εκδόσεις όπως θα έκανε ο renderer. Τα στιγμιότυπα οθόνης σε αυτά τα εργαλεία εμφανίζουν επίσης σελίδες με βαμμένα εικονοστοιχεία, τις οποίες η Google δεν βλέπει στο πρόγραμμα απόδοσης.
Ωστόσο, τα εργαλεία είναι χρήσιμα για να δούμε αν το περιεχόμενο φορτώνεται με DOM. Ο HTML που εμφανίζεται σε αυτά τα εργαλεία είναι το DOM . Μπορείτε να αναζητήσετε ένα απόσπασμα κειμένου για να δείτε αν έχει φορτωθεί από προεπιλογή.
Τα εργαλεία θα σας δείξουν επίσης πόρους που ενδέχεται να αποκλείονται και μηνύματα σφάλματος στην κονσόλα που είναι χρήσιμα για τον εντοπισμό σφαλμάτων.
Αναζήτηση κειμένου στο Google
Ένας άλλος γρήγορος έλεγχος που μπορείτε να κάνετε είναι απλά να αναζητήσετε ένα απόσπασμα του περιεχομένου σας στο Google. Αναζητήστε "κάποια φράση από το περιεχόμενό σας" και δείτε εάν επιστρέφεται η σελίδα. Εάν είναι, τότε το περιεχόμενό σας πιθανότατα προβλήθηκε. Λάβετε υπόψη ότι το περιεχόμενο που κρύβεται από προεπιλογή ενδέχεται να μην εμφανίζεται στο απόσπασμά σας στα SERP .
Αχρεφς
Μαζί με τις σελίδες απόδοσης ευρετηρίου συνδέσμων, μπορείτε να ενεργοποιήσετε τη JavaScript στο πρόγραμμα ανίχνευσης ιστότοπου για να ξεκλειδώσετε περισσότερα δεδομένα στους ελέγχους σας.
Η Γραμμή Εργαλείων Ahrefs υποστηρίζει επίσης JavaScript και σας επιτρέπει να συγκρίνετε HTML με εκδόσεις ετικετών που αποδίδονται.
Υπάρχουν πολλές επιλογές όσον αφορά την απόδοση JavaScript. Το Google έχει ένα σταθερό γράφημα που απλώς θα δείξω. Οποιοδήποτε είδος SSR , στατική απόδοση, ρύθμιση προαπόδοσης θα είναι μια χαρά για τις μηχανές αναζήτησης. Το βασικό που προκαλεί προβλήματα είναι η πλήρης απόδοση από την πλευρά του πελάτη, όπου όλη η απόδοση συμβαίνει στο πρόγραμμα περιήγησης.
Ενώ το Google πιθανότατα θα ήταν εντάξει ακόμη και με την απόδοση από πλευράς πελάτη, είναι καλύτερο να επιλέξετε μια διαφορετική επιλογή απόδοσης για να υποστηρίξετε άλλες μηχανές αναζήτησης . Το Bing έχει επίσης υποστήριξη για απόδοση JavaScript , αλλά η κλίμακα είναι άγνωστη. Οι Yandex και Baidu έχουν περιορισμένη υποστήριξη από αυτό που έχω δει, και πολλές άλλες μηχανές αναζήτησης έχουν ελάχιστη ή καθόλου υποστήριξη για JavaScript.
Υπάρχει επίσης η επιλογή Dynamic Rendering , η οποία αποδίδεται σε συγκεκριμένους χρήστες. Αυτό είναι βασικά μια λύση, αλλά μπορεί να είναι χρήσιμο για απόδοση για συγκεκριμένα bots, όπως μηχανές αναζήτησης ή ακόμα και bots κοινωνικών μέσων. Τα bots στα μέσα κοινωνικής δικτύωσης δεν εκτελούν JavaScript, οπότε πράγματα όπως οι ετικέτες OG δεν θα εμφανίζονται εκτός εάν αποδώσετε το περιεχόμενο προτού το σερβιρίσετε.
Εάν χρησιμοποιείτε το παλιό πρόγραμμα ανίχνευσης AJAX , λάβετε υπόψη ότι αυτό έχει καταργηθεί και ενδέχεται να μην υποστηρίζεται πλέον.
Πολλές από τις διαδικασίες είναι παρόμοιες με τα πράγματα που τα SEO έχουν ήδη συνηθίσει να βλέπουν, αλλά μπορεί να υπάρχουν μικρές διαφορές.
SEO στη σελίδα
Εξακολουθούν να ισχύουν όλοι οι κανονικοί κανόνες SEO στη σελίδα για περιεχόμενο, ετικέτες τίτλου , μετα-περιγραφές , χαρακτηριστικά alt , ετικέτες μετα-ρομπότ κ.λπ. Δείτε On-Page SEO : Ένας οδηγός με δυνατότητα δράσης .
Μερικά ζητήματα που βλέπω επανειλημμένα όταν εργάζομαι με ιστότοπους JavaScript είναι ότι οι τίτλοι και οι περιγραφές μπορούν να επαναχρησιμοποιηθούν και ότι τα χαρακτηριστικά alt στις εικόνες σπάνια έχουν οριστεί.
Να επιτρέπεται η ανίχνευση
Μην αποκλείετε την πρόσβαση σε πόρους. Το Google πρέπει να έχει πρόσβαση και να κατεβάζει πόρους, ώστε να μπορεί να αποδίδει σωστά τις σελίδες. Στο robots.txt , ο ευκολότερος τρόπος για να επιτρέψετε την ανίχνευση των απαραίτητων πόρων είναι να προσθέσετε:
Χρήστης-πράκτορας: Googlebot Να επιτρέπεται: .js Να επιτρέπεται: .css
Διευθύνσεις URL
Αλλαγή διευθύνσεων URL κατά την ενημέρωση περιεχομένου. Ανέφερα ήδη το API ιστορικού , αλλά πρέπει να γνωρίζετε ότι με τα πλαίσια JavaScript, θα έχουν έναν δρομολογητή που σας επιτρέπει να χαρτογραφήσετε για να καθαρίσετε διευθύνσεις URL . Δεν θέλετε να χρησιμοποιήσετε κατακερματισμούς (#) για δρομολόγηση. Αυτό είναι ιδιαίτερα πρόβλημα για το Vue και μερικές από τις προηγούμενες εκδόσεις του Angular. Έτσι, για ένα URL όπως το abc.com/#something, οτιδήποτε μετά το # συνήθως αγνοείται από έναν διακομιστή. Για να το διορθώσετε για το Vue, μπορείτε να συνεργαστείτε με τον προγραμματιστή σας για να αλλάξετε τα εξής:
Δρομολογητής Vue: Χρησιμοποιήστε τη λειτουργία «Ιστορικό» αντί για την παραδοσιακή λειτουργία «Hash». const router = νέο VueRouter ({ λειτουργία: «ιστορικό», δρομολογητής: [] // η σειρά συνδέσμων δρομολογητών )}
Διπλότυπο περιεχόμενο
Με το JavaScript, ενδέχεται να υπάρχουν πολλές διευθύνσεις URL για το ίδιο περιεχόμενο, κάτι που οδηγεί σε διπλότυπα ζητήματα περιεχομένου. Αυτό μπορεί να οφείλεται σε χρήση κεφαλαίων, αναγνωριστικών, παραμέτρων με αναγνωριστικά κ.λπ. Έτσι, όλα αυτά μπορεί να υπάρχουν:
domain.com/Abcdomain.com/abcdomain.com/123domain.com/?id=123
Η λύση είναι απλή. Επιλέξτε μια έκδοση που θέλετε ευρετηριασμένη και ορίστε κανονικές ετικέτες .
Επιλογές τύπου «plugin» SEO
Για τα πλαίσια JavaScript, αυτά αναφέρονται συνήθως ως ενότητες. Θα βρείτε εκδόσεις για πολλά από τα δημοφιλή πλαίσια όπως το React, το Vue και το Angular, αναζητώντας το όνομα πλαισίου + module όπως το "React Helmet". Οι μετα-ετικέτες, το κράνος και το Head είναι όλες δημοφιλείς ενότητες με παρόμοια λειτουργικότητα που σας επιτρέπουν να ορίσετε πολλές από τις δημοφιλείς ετικέτες που απαιτούνται για το SEO .
Σελίδες σφάλματος
Επειδή τα πλαίσια JavaScript δεν είναι διακομιστή, δεν μπορούν πραγματικά να ρίξουν ένα σφάλμα διακομιστή όπως το 404. Έχετε μερικές διαφορετικές επιλογές για σελίδες σφαλμάτων:
- Χρησιμοποιήστε μια ανακατεύθυνση JavaScript σε μια σελίδα που ανταποκρίνεται με κωδικό κατάστασης 404
- Προσθέστε μια ετικέτα noindex στη σελίδα που αποτυγχάνει μαζί με κάποιο είδος μηνύματος σφάλματος όπως "Η σελίδα 404 δεν βρέθηκε". Αυτό θα αντιμετωπιστεί ως μαλακό 404, καθώς ο πραγματικός κωδικός κατάστασης που επιστρέφεται θα είναι 200 εντάξει.
Χάρτης ιστοτόπου
Τα πλαίσια JavaScript έχουν συνήθως δρομολογητές που χαρτογραφούν για να καθαρίσουν διευθύνσεις URL. Αυτοί οι δρομολογητές έχουν συνήθως μια πρόσθετη ενότητα που μπορεί επίσης να δημιουργήσει χάρτες ιστότοπου. Μπορείτε να τα βρείτε αναζητώντας τον χάρτη ιστοτόπου του συστήματος + δρομολογητή, όπως "Χάρτης ιστότοπου Vue router". Πολλές από τις λύσεις απόδοσης ενδέχεται επίσης να έχουν επιλογές χάρτη ιστότοπου. Και πάλι, απλώς βρείτε το σύστημα που χρησιμοποιείτε και το Google το χάρτη + συστήματος, όπως το "Gatsby sitemap" και είστε βέβαιοι ότι θα βρείτε μια λύση που υπάρχει ήδη.
Ανακατευθύνσεις
Τα SEO χρησιμοποιούνται για ανακατευθύνσεις 301/302 , οι οποίες είναι διακομιστές. Αλλά το Javascript συνήθως εκτελείται από την πλευρά του πελάτη. Αυτό είναι εντάξει δεδομένου ότι η Google επεξεργάζεται τη σελίδα ως εξής στην ανακατεύθυνση. Οι ανακατευθύνσεις εξακολουθούν να περνούν όλα τα σήματα όπως το PageRank . Συνήθως μπορείτε να βρείτε αυτές τις ανακατευθύνσεις στον κώδικα αναζητώντας το "window.location.href".
Διεθνοποίηση
Υπάρχουν συνήθως μερικές επιλογές λειτουργικών μονάδων για διαφορετικά πλαίσια που υποστηρίζουν ορισμένες δυνατότητες που απαιτούνται για διεθνοποίηση όπως το hreflang . Συνήθως έχουν μεταφερθεί στα διάφορα συστήματα και περιλαμβάνουν i18n, intl ή πολλές φορές τις ίδιες ενότητες που χρησιμοποιούνται για ετικέτες κεφαλίδας, όπως το κράνος, μπορούν να χρησιμοποιηθούν για την προσθήκη απαιτούμενων ετικετών.
Τεμπέλη φόρτωση
Υπάρχουν συνήθως ενότητες για το χειρισμό τεμπέληδες φόρτωση . Εάν δεν το έχετε παρατηρήσει ακόμα, υπάρχουν λειτουργικές μονάδες για να χειριστείτε σχεδόν όλα όσα πρέπει να κάνετε όταν εργάζεστε με πλαίσια JavaScript. Το Lazy και το Suspense είναι οι πιο δημοφιλείς ενότητες για τεμπέλης φόρτωση. Θα θέλατε να φορτώνετε τεμπέλης εικόνες, αλλά προσέξτε να μην φορτώνετε περιεχόμενο με τεμπέληδες. Αυτό μπορεί να γίνει με JavaScript, αλλά μπορεί να σημαίνει ότι δεν λαμβάνεται σωστά από τις μηχανές αναζήτησης.
Τελικές σκέψεις
Το JavaScript είναι ένα εργαλείο που πρέπει να χρησιμοποιείται με σύνεση και όχι κάτι που φοβούνται οι SEO. Ας ελπίσουμε ότι αυτό το άρθρο σάς βοήθησε να καταλάβετε πώς να συνεργαστείτε καλύτερα, αλλά μην φοβάστε να επικοινωνήσετε με τους προγραμματιστές σας και να συνεργαστείτε μαζί τους και να τους κάνετε ερωτήσεις. Πρόκειται να είναι οι καλύτεροι σύμμαχοί σας στη βελτίωση του ιστότοπού σας JavaScript για τις μηχανές αναζήτησης.
0 Σχόλια