SEO εναντίον React: Τα προγράμματα ανίχνευσης ιστού είναι εξυπνότερα από ό, τι νομίζετε

Πολλοί άνθρωποι εξακολουθούν να ανησυχούν ότι αν δημιουργήσετε ιστότοπους χρησιμοποιώντας εργαλεία όπως το React, το Angular ή το Ember, θα βλάψει την κατάταξη της μηχανής αναζήτησης.

Η σκέψη πηγαίνει κάπως έτσι: τα προγράμματα ανίχνευσης ιστού που χρησιμοποιούν οι μηχανές αναζήτησης δεν θα μπορούν να ανιχνεύσουν σωστά μια σελίδα, εκτός εάν αποδίδεται πλήρως στο πρόγραμμα περιήγησης του χρήστη. Αντ 'αυτού, θα βλέπουν μόνο τον κώδικα HTML που παραδίδεται από το backend.

Εάν αυτός ο κώδικας HTML δεν περιέχει τίποτα περισσότερο από μερικές μετα-ετικέτες και ετικέτες σεναρίων, η μηχανή αναζήτησης θα υποθέσει ότι η σελίδα σας είναι βασικά κενή και θα σας κατατάξει άσχημα.

Συνήθως βλέπω ότι οι σύμβουλοι Search Engine Optimization (SEO) προτείνουν να δώσετε τη σελίδα σας στο backend, έτσι ώστε τα προγράμματα ανίχνευσης ιστού να βλέπουν έναν πολύ ωραίο κώδικα HTML που μπορούν στη συνέχεια να ευρετηριάσουν.

Για μένα, αυτή η συμβουλή φαίνεται παράλογη και μη ρεαλιστική. Είναι το 2016. Οι χρήστες αναμένουν ότι οι σελίδες θα είναι δυναμικές και θα τους προσφέρουν μια γρήγορη εμπειρία χρήστη. Δεν θέλουν να περιμένουν να φορτώνεται μια νέα σελίδα HTML κάθε φορά που κάνουν κλικ σε κάτι.

Επομένως, εξακολουθεί να ισχύει η δήλωση «απόδοση από πλευράς πελάτη που βλάπτει την κατάταξη της σελίδας σας»

Κάνοντας την έρευνα

Πρώτον, μια αποποίηση ευθυνών: Σε καμία περίπτωση δεν είμαι ειδικός SEO. Αλλά διάβασα λίγο το θέμα, και εδώ βρήκα.

Ακολουθεί μια ανακοίνωση από την Google στο ιστολόγιό τους για webmaster από τον Οκτώβριο του 2015:

Σήμερα, εφόσον δεν εμποδίζετε το Googlebot να ανιχνεύει τα αρχεία JavaScript ή CSS, γενικά είμαστε σε θέση να αποδίδουμε και να κατανοούμε τις ιστοσελίδες σας, όπως τα σύγχρονα προγράμματα περιήγησης. Για να αντικατοπτρίσουμε αυτήν τη βελτίωση, ενημερώσαμε πρόσφατα τις τεχνικές οδηγίες για Webmaster για να προτείνουμε να μην επιτρέπεται στο Googlebot να ανιχνεύει τα αρχεία CSS ή JS του ιστότοπού σας.

Ακολουθεί ένα άρθρο του Search Engine Land από τον Μάιο του 2015:

Πραγματοποιήσαμε μια σειρά δοκιμών που επιβεβαίωσαν ότι η Google είναι σε θέση να εκτελέσει και να ευρετηριάσει το JavaScript με πολλές εφαρμογές. Επιβεβαιώσαμε επίσης ότι η Google είναι σε θέση να αποδώσει ολόκληρη τη σελίδα και να διαβάσει το DOM, με αυτόν τον τρόπο ευρετηρίαση περιεχομένου που δημιουργείται δυναμικά. Τα σήματα SEO στο DOM (τίτλοι σελίδων, μετα-περιγραφές, κανονικές ετικέτες, ετικέτες μετα-ρομπότ κ.λπ.) γίνονται σεβαστά. Το περιεχόμενο που εισάγεται δυναμικά στο DOM είναι επίσης ανιχνεύσιμο και ευρετήριο. Επιπλέον, σε ορισμένες περιπτώσεις, τα σήματα DOM ενδέχεται να έχουν προτεραιότητα έναντι αντιφατικών δηλώσεων στον πηγαίο κώδικα HTML. Αυτό θα χρειαστεί περισσότερη δουλειά, αλλά συνέβη για πολλές από τις δοκιμές μας.

Αυτές οι δύο πηγές υποδηλώνουν ότι είναι, ασφαλώς, ασφαλές να χρησιμοποιείτε διάταξη που αποδίδεται από τον πελάτη.

Η δοκιμή Preactjs.com

Πρόσφατα έγραψα ένα θρήνο για τους συμβούλους SEO για το αγαπημένο μου React. Για να είμαι ακριβής, είμαι στη διαδικασία μετεγκατάστασης στο Preact, μια ελαφριά εναλλακτική λύση στο Facebook's React. Έλαβα αυτήν την απάντηση από τον Jason Miller, έναν από τους προγραμματιστές που εργάζονται στο Preact:

Εκτός από το άρθρο του blog από το Search Engine Land που ανέφερα παραπάνω, ο Jason έγραψε ένα σύνδεσμο προς μια αναζήτηση Google για την αρχική σελίδα του Preact, η οποία μοιάζει με αυτό:

Αυτή η σελίδα αποδίδεται εξ ολοκλήρου από τον πελάτη, χρησιμοποιώντας το Preact, καθώς μια ματιά στον πηγαίο κώδικα της αποδεικνύει:

Preact: Fast 3kb React alternative with the same ES6 API. Components & Virtual DOM.
(function(url){window['_boostrap_'+url]=fetch(url);})('/content'+location.pathname.replace(/^\/(repl)?\/?$/, '/index')+'.md');
(function(i,s,o,g,r,a,m))(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-6031694-20', 'auto');ga('send', 'pageview');

Εάν το Googlebot δεν μπόρεσε να διαβάσει τον κώδικα HTML που δίνεται από το Preact, δεν θα εμφανίζει περισσότερα από τα περιεχόμενα των μετα-ετικετών.

Ωστόσο, εδώ είναι τα αποτελέσματα της Google κατά την αναζήτηση ιστότοπου: preactjs.com :

Ένα άλλο άρθρο του Andrew Farmer από τον Μάρτιο του 2016 προειδοποιεί για έλλειψη υποστήριξης JavaScript από μηχανές αναζήτησης εκτός από το Google:

Στην έρευνά μου δεν μπορούσα να βρω στοιχεία που να δείχνουν ότι το Yahoo, το Bing ή το Baidu υποστηρίζουν JavaScript στα προγράμματα ανίχνευσης. Εάν το SEO σε αυτές τις μηχανές αναζήτησης είναι σημαντικό για εσάς, θα πρέπει να χρησιμοποιήσετε απόδοση από την πλευρά του διακομιστή, την οποία θα συζητήσω σε μελλοντικό άρθρο.

Έτσι αποφάσισα να δοκιμάσω το τεστ του Jason με άλλες μηχανές αναζήτησης:

✅ Μπινγκ

Η προειδοποίηση του Αντριου σχετικά με τον Μπινγκ φαίνεται ασήμαντη. Ακολουθούν τα αποτελέσματα του Bing κατά την αναζήτηση ιστότοπου: preactjs.com :

✅ Yahoo

Και τα αποτελέσματα του Yahoo κατά την αναζήτηση ιστότοπου: preactjs.com :

✅ Duck Duck Go

Και τα αποτελέσματα του Duck Duck Go κατά την αναζήτηση ιστότοπου: preactjs.com :

⚠️ Baidu

Chinese search engine Baidu does have problems with preactjs.com. Here are its results when searching for site:preactjs.com:

So it would seem that unless ranking high in what is essentially a China-only search engine is a priority for you, there’s nothing wrong with rendering your web pages on the client-side using JavaScript, as long as you follow some basic rules (quoted from Andrew Farmer’s blog post):

  • Render your components before doing anything asynchronous.
  • Test each of your pages with Fetch as Google to ensure that the Googlebot is finding your content

Thanks for reading!

Update 25th October 2016

Andrew Ingram ran the same tests that I ran an came to a different conclusion.

Quote from Andrew:

Δείτε πόσες σελίδες έχουν ευρετηριάσει διάφορες μηχανές αναζήτησης χρησιμοποιώντας το ερώτημα "site: preactjs.com" Google: 17 Bing: 6 Yahoo: 6 Baidu: 1 Ένα από τα αποτελέσματα της Google είναι μια σελίδα σφάλματος, αλλά πιθανώς δεν μπορεί να απο-ευρετηριαστεί αυτόματα επειδή δεν υπάρχει ακόμη τρόπος δήλωσης ισοδύναμου 404 στα SPA. Έχω επίσης διαβάσει (δεν θυμάμαι πού) ότι η Google έχει καθυστέρηση λίγων ημερών όσον αφορά την ευρετηρίαση SPA σε σύγκριση με το διακομιστή- εφαρμογές που αποδίδονται. Αυτό μπορεί να μην είναι πρόβλημα για εσάς, αλλά αξίζει να το μάθετε.

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

→ Ακολουθήστε τη συζήτηση στο Hacker News

Ευχαριστίες

Χάρη στους Adam Audette (Search Engine Land) και Andrew Farmer για τα εξαιρετικά άρθρα τους στο blog από τα οποία ανέφερα, τον Jason Miller για τη συμβολή και την έμπνευσή του, τους συναδέλφους μου από το eBay Classifieds Group για την υποστήριξή τους και τον Quincy Larson του Free Code Camp για τη δημοσίευση άρθρο!