Οι περισσότεροι σύγχρονοι ιστότοποι περιέχουν JavaScript, καθιστώντας τους δυναμικούς και διαδραστικούς. Αν και τα bot μηχανών αναζήτησης είναι αρκετά έξυπνα, ενδέχεται να μην αποδίδουν μεγάλο μέρος του περιεχομένου JavaScript, επηρεάζοντας την κατάταξη της σελίδας.
Το περιεχόμενο JavaScript εξαρτάται σε μεγάλο βαθμό από το πώς ο ιστότοπός σας αποδίδει τον κώδικα.
Για παράδειγμα, στην απόδοση από την πλευρά του διακομιστή, ο διακομιστής περιέχει τα περιεχόμενα του ιστότοπου. Κατόπιν αιτήματος, το πρόγραμμα περιήγησης λαμβάνει το πλήρως αποδοθέν HTML.
Ωστόσο, στην απόδοση από την πλευρά του πελάτη, η JavaScript αποδίδεται από το πρόγραμμα περιήγησης χρησιμοποιώντας DOM.
Η τρίτη επιλογή για απόδοση είναι η δυναμική απόδοση, όπου το περιεχόμενο που αποδίδεται από την πλευρά του πελάτη πηγαίνει στο πρόγραμμα περιήγησης, ενώ το περιεχόμενο που αποδίδεται από την πλευρά του διακομιστή πηγαίνει στις μηχανές αναζήτησης.
Οι τεχνικές απόδοσης επηρεάζουν τον τρόπο απόδοσης του JS και ως εκ τούτου την κατάταξη των σελίδων.
Για να διασφαλίσετε ότι αποδίδεται όλος ο κώδικας JS του ιστότοπού σας, θα πρέπει να ακολουθήσετε τις σωστές πρακτικές SEO JavaScript. Αλλά πρώτα, ας καταλάβουμε τι είναι το JavaScript SEO.
Πίνακας περιεχομένων
Τι είναι το JavaScript SEO;
Το JavaScript SEO διευκολύνει τις μηχανές αναζήτησης να ανιχνεύουν και να ευρετηριάζουν τον κώδικα JavaScript (δυναμικό περιεχόμενο) ενός ιστότοπου (ή μιας ιστοσελίδας). Η Google ή οποιαδήποτε άλλη μηχανή αναζήτησης επεξεργάζεται το JavaScript σε τρία στάδια, δηλαδή ανίχνευση, απόδοση και ευρετηρίαση. Για να τα κάνει όλα αυτά η Google, το περιεχόμενο JavaScript θα πρέπει να είναι φιλικό προς το SEO, δηλαδή να είναι ορατό και διαθέσιμο.
Πώς η Google επεξεργάζεται περιεχόμενο JavaScript σε μια σελίδα
Ακολουθούν τα βήματα που ακολουθεί το Googlebot για την επεξεργασία JavaScript:
- Ανακτά μια διεύθυνση URL από την ουρά ανίχνευσης μέσω του αιτήματος HTTP
- Ελέγχει το αρχείο robots.txt για διευθύνσεις URL που ο ιστότοπος δεν επιτρέπει την ανίχνευση
- Παρακάμπτει τις “απαγορευμένες” διευθύνσεις URL, αναλύει την απάντηση για άλλες διευθύνσεις URL και τις προσθέτει στην ουρά ανίχνευσης
- Βάζει στην ουρά τις σελίδες για απόδοση, εκτός από αυτές που έχουν επισημανθεί ως μη ευρετηριασμένες
- Το Chromium αποδίδει τη σελίδα, εκτελεί το JavaScript και ευρετηριάζει τη σελίδα
- Αναλύει ξανά το αποδοθέν HTML για συνδέσμους
- Βάζει σε ουρά τις διευθύνσεις URL για ανίχνευση
Πότε η Google δεν ευρετηριάζει το περιεχόμενο JavaScript;
Η Google μπορεί να δημιουργήσει ευρετήριο JavaScript όταν εφαρμοστεί σωστά. Για παράδειγμα, εάν ορισμένα από τα αρχεία JS και CSS σας είναι κρυφά, η Google ενδέχεται να μην μπορεί να ανιχνεύσει σωστά τον ιστότοπο. Ομοίως, εάν έχετε συνδέσμους στο μη επεξεργασμένο HTML που δεν υπάρχουν στο αποδοθέν HTML, η Google ενδέχεται να παραλείψει την ανίχνευση ή την ευρετηρίαση αυτών των συνδέσμων.
Επίσης, εάν η JavaScript δεν είναι απευθείας ενσωματωμένη στο HTML, η Google πρέπει να πραγματοποιήσει λήψη του αρχείου για εκτέλεση. Επιπλέον, οι μηχανές αναζήτησης μπορεί να έχουν μια προσωρινά αποθηκευμένη έκδοση μιας ιστοσελίδας (για καλύτερη απόδοση) και η JavaScript στη σελίδα μπορεί να μην είναι συγχρονισμένη με αυτήν.
Δεδομένου ότι κάθε κομμάτι κώδικα JavaScript πρέπει να διαβάζεται, η υπερβολική χρήση JavaScript μπορεί να επιβραδύνει την ταχύτητα της σελίδας ή να προκαλέσει σφάλματα χρονικού ορίου.
Γιατί είναι σημαντικό το JavaScript SEO;
Το JavaScript SEO είναι σημαντικό επειδή επηρεάζει πολλά στοιχεία στη σελίδα και παράγοντες κατάταξης που η Google (ή οι μηχανές αναζήτησης) σαρώνει για SEO:
Στοιχείο στη σελίδα
Πιθανό πρόβλημα SEO
Πιθανή λύση SEO
Αποδοθέν περιεχόμενο
Οι μηχανές αναζήτησης (όπως η Google) δεν μπορούν να αποδώσουν τη σελίδα σας εάν οι πόροι της είναι αποκλεισμένοι στο αρχείο robots.txt του ιστότοπού σας. Επίσης, η Google δεν μπορεί να ευρετηριάσει ή να αποδώσει αρχεία JS και CSS, τα οποία είναι αποκλεισμένα ή κρυφά.
Μειώστε τη JavaScript στο βασικό περιεχόμενο της σελίδας ακολουθήστε εναλλακτικές προσεγγίσεις για απόδοση από την πλευρά του πελάτη, όπως απόδοση από την πλευρά του διακομιστή, δυναμική απόδοση, υβριδική απόδοση (συνδυασμός από την πλευρά του πελάτη και από την πλευρά του διακομιστή)
Συνδέσεις
Εάν ορισμένοι σύνδεσμοι είναι εσωτερικοί ή η JavaScript δημιουργεί τους συνδέσμους σε μια διεύθυνση URL όταν ο χρήστης κάνει κλικ σε αυτήν, η Google δεν μπορεί να ανακαλύψει τέτοιους συνδέσμους.
Χρησιμοποιήστε συνδέσμους αγκύρωσης με το χαρακτηριστικό href, περιγραφικά κείμενα αγκύρωσης για τους συνδέσμους. Οι ψευδοσύνδεσμοι όπως οι ετικέτες
Μεταδεδομένα
Εκτός εάν ο ιστότοπος χρησιμοποιεί πακέτα Node.js όπως το vue-meta, οι μηχανές αναζήτησης μπορεί να ανιχνεύουν το ίδιο ή, χειρότερα, να μην υπάρχουν μεταδεδομένα για κάθε προβολή ή σελίδα.
Χρησιμοποιήστε πακέτα Node.js όπως react-helmet, vue-meta, react-meta-tags
Τεμπελιασμένες εικόνες
Το πρόγραμμα ανίχνευσης μηχανών αναζήτησης δεν επιλέγει περιεχόμενο που έχει επισημανθεί για τεμπέλης φόρτωση. Η μηχανή αναζήτησης δεν μπορεί να πραγματοποιήσει κύλιση για περιεχόμενο και, ως εκ τούτου, κάποιο περιεχόμενο ενδέχεται να μην αποδοθεί ποτέ.
Χρησιμοποιήστε το IntersectionObserver API, το οποίο κατανοεί την ορατότητα και τη θέση των στοιχείων DOM μόλις είναι διαθέσιμα. Μπορείτε επίσης να χρησιμοποιήσετε την εγγενή λειτουργία lazy-loading του προγράμματος περιήγησης (Chrome).
Χρόνοι φόρτωσης σελίδας
Μια σελίδα με πολύ περιεχόμενο JavaScript μπορεί να καθυστερήσει στη φόρτωση, γεγονός που μπορεί να επηρεάσει την κατάταξή της στην αναζήτησή της.
Προσθέστε ενσωματωμένο κρίσιμο κώδικα JS και αναβάλετε τον μη κρίσιμο κώδικα JS μέχρι να αποδοθεί το κύριο περιεχόμενο, μειώνοντας τον συνολικό κώδικα JS.
Βέλτιστες πρακτικές για JavaScript SEO
Ακολουθώντας ορισμένες από τις βέλτιστες πρακτικές, μπορούμε να κάνουμε τις μηχανές αναζήτησης να ανιχνεύουν και να αποδίδουν καλύτερα τις σελίδες:
Προσθέστε συνδέσμους και εικόνες σύμφωνα με τα καθορισμένα πρότυπα ιστού
Προσθέστε όλους τους συνδέσμους χρησιμοποιώντας το ahreftag αντί για onclick, #pageurl ή window.location.href=’/page-url. Η Google μπορεί εύκολα να ανιχνεύσει τους συνδέσμους και να τους ακολουθήσει.
<a href=”http://grtechpc.org.com”>Welcome to Geek world</a>
Με τον ίδιο τρόπο, προσθέστε εικόνες χρησιμοποιώντας την ετικέτα img src και όχι την ετικέτα img data-src:
<img src=”myimg.png” />
Προτιμήστε την απόδοση από την πλευρά του διακομιστή
Βεβαιωθείτε ότι το περιεχόμενο του ιστότοπού σας είναι διαθέσιμο στον διακομιστή εκτός από το πρόγραμμα περιήγησης χρήστη.
Βεβαιωθείτε ότι το αποδοθέν HTML σας έχει όλο το σημαντικό περιεχόμενο που θέλετε να εμφανίζεται
Το αποδοθέν HTML θα πρέπει να έχει τον σωστό τίτλο, μετα-ρομπότ, μετα-περιγραφές, εικόνες, δομημένα δεδομένα και κανονικές ετικέτες.
Κάνοντας τον ιστότοπό σας JavaScript φιλικό προς το SEO
Για να δοκιμάσετε την εφαρμογή JavaScript SEO στην ιστοσελίδα σας, μπορείτε να ακολουθήσετε τα παρακάτω βήματα:
- Μάθετε πόσο JavaScript χρησιμοποιεί ο ιστότοπός σας: Για αυτό, μπορείτε απλά να απενεργοποιήσετε το JavaScript στο πρόγραμμα περιήγησής σας. Εάν δεν βλέπετε πολύ περιεχόμενο, σημαίνει ότι ο ιστότοπός σας βασίζεται σε μεγάλο βαθμό σε JavaScript.
- Ελέγξτε εάν το Googlebot λαμβάνει όλο το σημαντικό περιεχόμενο και τις ετικέτες: Μπορείτε να χρησιμοποιήσετε το Εργαλείο δοκιμής Google φιλικό προς κινητά ή το εργαλείο δοκιμής εμπλουτισμένων αποτελεσμάτων για να ελέγξετε πώς το Googlebot χρησιμοποιεί τον ακατέργαστο HTML για την απόδοση περιεχομένου.
- Μπορείτε επίσης να χρησιμοποιήσετε επεκτάσεις chrome όπως Προβολή πηγής απόδοσης για να κατανοήσετε πώς η JavaScript αλλάζει τη σελίδα και συγκρίνει την πηγή HTML και την απόδοση.
- Μπορείτε να ελέγξετε για τις σημαντικές ετικέτες (τίτλος, μετα-περιγραφή κ.λπ.) στο αποδοθέν HTML χρησιμοποιώντας το SEO Pro επέκταση Chrome.
συμπέρασμα
Σε αυτό το άρθρο, μάθαμε πώς η JavaScript μπορεί να κάνει τον χειρισμό SEO λίγο περίπλοκη και τις προσεγγίσεις για την επίλυση των πιθανών προβλημάτων που προκαλούνται από την προσθήκη πολλών JavaScript στον κώδικά σας.
Είδαμε επίσης ορισμένες βέλτιστες πρακτικές και εργαλεία για να κάνουμε τον ιστότοπό σας JavaScript φιλικό προς το SEO. Άλλα εξαιρετικά εργαλεία που βοηθούν την Google να αναγνωρίσει και να ανιχνεύσει το δυναμικό περιεχόμενό σας είναι η Προαπόδοση, AngularJSκαι Huckabuy.
Μπορείτε επίσης να ελέγξετε μερικούς από τους καλύτερους τρόπους μείωσης του χρόνου φόρτωσης ιστότοπου.
Σας άρεσε να διαβάζετε το άρθρο; Τι θα λέγατε να μοιράζεστε με τον κόσμο;