Κάθε φορά που ένας ολοκαίνουργιος ιστότοπος καταφέρνει να φτάσει γύρω στις 165.000 επισκέψεις μέσα στον πρώτο του μήνα, η συζήτηση γυρίζει γρήγορα στο περιεχόμενο και στις αναφορές. Σπάνια όμως κάποιος ρωτά μια πιο θεμελιώδη ερώτηση: ποια εκδοχή του ιστότοπου είδε πραγματικά η Google όταν αποφάσισε να τον κατατάξει; Η απάντηση είναι ξεκάθαρη και καθοριστική. Είδε την κινητή εκδοχή. Σε αυτή τη μελέτη μένουμε αποκλειστικά στο πώς η ετοιμότητα για mobile-first indexing και ο σχεδιασμός με γνώμονα την προσαρμοστικότητα έγιναν ο αόρατος μοχλός πίσω από αυτή την εκρηκτική άνοδο. Δεν θα μιλήσουμε για χρόνους φόρτωσης ή για μετρήσεις εμπειρίας, αλλά για κάτι πιο βασικό: για το αν ο ιστότοπος ήταν καν αναγνώσιμος, πλήρης και λειτουργικός από τα μάτια ενός crawler που σκέφτεται σαν κινητό τηλέφωνο.
Τι σημαίνει στην πράξη το mobile-first indexing
Πολλοί ακούν τον όρο και νομίζουν ότι πρόκειται απλώς για το αν ένα site φαίνεται καλά στο τηλέφωνο. Η πραγματικότητα είναι πολύ πιο ριζοσπαστική. Η μηχανή αναζήτησης δεν χρησιμοποιεί πλέον την έκδοση για υπολογιστές ως πηγή αλήθειας. Στέλνει έναν crawler που προσποιείται ότι είναι κινητή συσκευή, διαβάζει αυτό που θα έβλεπε ένας χρήστης σε μικρή οθόνη, και πάνω σε εκείνη ακριβώς την εκδοχή χτίζει το ευρετήριό της. Αν κάτι λείπει από την κινητή εκδοχή, για τη μηχανή αναζήτησης απλώς δεν υπάρχει.
Αυτή η αλλαγή οπτικής έχει τεράστιες συνέπειες για ένα νέο domain. Όταν δεν έχεις ιστορικό και δεν έχεις συσσωρευμένη εμπιστοσύνη, δεν έχεις και κανένα περιθώριο να χάσεις πόντους από αμέλεια. Το συγκεκριμένο project ξεκίνησε από την παραδοχή ότι η μοναδική εκδοχή που έχει σημασία είναι η κινητή, και ότι η εκδοχή για μεγάλες οθόνες είναι απλώς μια διευρυμένη παραλλαγή της, όχι το αντίστροφο. Αυτή η αντιστροφή της λογικής, που ακούγεται απλή, καθόρισε κάθε επόμενη απόφαση.
Πλήρης ισοτιμία περιεχομένου ανάμεσα στις εκδοχές
Ο πιο συνηθισμένος και πιο θανατηφόρος τρόπος να καταστρέψει κανείς την ετοιμότητά του για το ευρετήριο κινητών είναι να σερβίρει λιγότερο περιεχόμενο στις μικρές οθόνες. Είναι μια παγίδα στην οποία πέφτουν αμέτρητα sites: για να φανεί η σελίδα πιο καθαρή στο τηλέφωνο, κρύβουν παραγράφους ή αφαιρούν στήλες με χρήσιμο υλικό. Το αποτέλεσμα είναι ότι η μηχανή αναζήτησης βλέπει ένα φτωχότερο, κουτσουρεμένο κείμενο και κατατάσσει αναλόγως.
Στο project αυτό η αρχή ήταν ανυποχώρητη: ό,τι υπάρχει στη μεγάλη οθόνη υπάρχει αυτούσιο και στη μικρή. Κάθε παράγραφος, κάθε επικεφαλίδα, κάθε εσωτερικός σύνδεσμος, κάθε στοιχείο δομημένων δεδομένων ήταν πανομοιότυπο και στις δύο εκδοχές. Η διαφορά ανάμεσά τους ήταν αποκλειστικά θέμα διάταξης, ποτέ θέμα ουσίας. Έτσι ο crawler που διάβαζε την κινητή εκδοχή έπαιρνε το πλήρες πακέτο σημασιολογικής πληροφορίας, χωρίς να χάνεται ούτε μια λέξη που θα μπορούσε να συνεισφέρει σε μια κατάταξη.
Τα κρυμμένα στοιχεία ως παγίδα
Ιδιαίτερη προσοχή δόθηκε στις ενότητες που, για λόγους χώρου, ξεκινούν διπλωμένες. Όταν ένα κομμάτι κειμένου είναι αρχικά κρυμμένο αλλά παραμένει μέσα στον κώδικα της σελίδας και ανοίγει με ένα άγγιγμα, η μηχανή αναζήτησης το διαβάζει κανονικά και του δίνει πλήρη αξία. Όπου χρειαζόταν συμπύκνωση για χάρη της ανάγνωσης στο κινητό, το περιεχόμενο διπλωνόταν αλλά ποτέ δεν αφαιρούνταν από τον κώδικα.
Ένα responsive μοντέλο αντί για ξεχωριστές διευθύνσεις
Υπάρχουν ιστορικά τρεις τρόποι να σερβίρει κανείς ένα site σε κινητά: μια ξεχωριστή κινητή διεύθυνση, δυναμικό σερβίρισμα διαφορετικού κώδικα στην ίδια διεύθυνση, ή μια ενιαία προσαρμοστική σχεδίαση που αλλάζει διάταξη ανάλογα με την οθόνη. Η επιλογή εδώ ήταν συνειδητά η τρίτη. Μία και μοναδική διεύθυνση για κάθε σελίδα, ένας ενιαίος κώδικας, που απλώς αναδιατάσσεται ανάλογα με το πλάτος της οθόνης.
Η απόφαση αυτή εξάλειψε μια ολόκληρη κατηγορία προβλημάτων που ταλαιπωρούν τα νέα sites. Δεν υπήρχαν διπλές διευθύνσεις που μπερδεύουν τη μηχανή αναζήτησης για το ποια είναι η κανονική. Δεν υπήρχε κίνδυνος να αποκλίνει η κινητή εκδοχή από εκείνη του υπολογιστή με τον καιρό, καθώς ήταν στην κυριολεξία η ίδια σελίδα. Δεν χρειάστηκε διπλή συντήρηση, διπλός έλεγχος ή διπλά δομημένα δεδομένα. Για ένα project που πρόσθετε δεκάδες άρθρα τον μήνα, αυτή η απλότητα ήταν πολύτιμη, γιατί κάθε νέα σελίδα γεννιόταν αυτομάτως έτοιμη για κινητά χωρίς καμία επιπλέον ενέργεια.
Η σωστή δήλωση viewport ως αφετηρία
Όσο τεχνική κι αν ακούγεται, η δήλωση που λέει στο πρόγραμμα περιήγησης πώς να κλιμακώσει τη σελίδα στο πλάτος της συσκευής είναι το θεμέλιο κάθε προσαρμοστικού σχεδιασμού. Χωρίς αυτήν, ένα κινητό προσπαθεί να συμπιέσει μια σελίδα φτιαγμένη για μεγάλη οθόνη μέσα σε μερικά εκατοστά, με αποτέλεσμα ο χρήστης να βλέπει μικροσκοπικά γράμματα και να αναγκάζεται σε ζουμ.
Στο project αυτό η δήλωση ήταν σωστή σε κάθε σελίδα από την πρώτη στιγμή, ορίζοντας ότι το πλάτος της σελίδας ακολουθεί το πλάτος της συσκευής και ότι η αρχική κλίμακα είναι η φυσική. Παράλληλα, αποφεύχθηκε η παγίδα του να κλειδωθεί η δυνατότητα μεγέθυνσης, μια πρακτική που πλήττει την προσβασιμότητα και στέλνει αρνητικά σήματα. Ο χρήστης μπορούσε πάντα να μεγεθύνει αν το ήθελε, χωρίς όμως να είναι υποχρεωμένος.
Σχεδιασμός με προτεραιότητα στην αφή
Η συντριπτική πλειονότητα των επισκεπτών έφτανε στον ιστότοπο από κινητές συσκευές, ανοίγοντας έναν σύνδεσμο που είδαν κάπου και τον πάτησαν αμέσως με το δάχτυλο. Αυτό σήμαινε ότι ο σχεδιασμός έπρεπε να σκέφτεται σε όρους αφής, όχι σε όρους δείκτη ποντικιού. Η διαφορά είναι ουσιαστική: ένας δείκτης είναι ακριβής σαν βελόνα, ενώ ένα δάχτυλο είναι χοντρικό και ανακριβές.
Όλα τα στοιχεία με τα οποία μπορούσε να αλληλεπιδράσει ο χρήστης σχεδιάστηκαν αρκετά μεγάλα ώστε να πατιούνται άνετα, και με επαρκή απόσταση μεταξύ τους ώστε να μην υπάρχει κίνδυνος να πατήσει κανείς λάθος. Οι σύνδεσμοι μέσα στο κείμενο είχαν αρκετό αέρα γύρω τους. Τα κουμπιά πλοήγησης ήταν πλατιά και ξεκάθαρα. Κανένα κρίσιμο στοιχείο δεν τοποθετήθηκε σε σημεία της οθόνης που είναι δύσκολο να φτάσει ο αντίχειρας. Η υπόθεση εργασίας ήταν πάντα ότι ο επισκέπτης κρατά το τηλέφωνο με το ένα χέρι και περιηγείται με τον αντίχειρα, ενώ περπατά ή περιμένει.
Η ανάγνωση χωρίς κόπο
Πέρα από την αφή, η ίδια η ανάγνωση στη μικρή οθόνη απαιτεί ξεχωριστή μέριμνα. Το μέγεθος των γραμμάτων ορίστηκε αρκετά μεγάλο ώστε να διαβάζεται άνετα χωρίς ζουμ, με γενναιόδωρο διάστιχο ώστε οι γραμμές να μην κολλούν μεταξύ τους. Το πλάτος του κειμένου περιορίστηκε ώστε κάθε γραμμή να έχει λογικό μήκος και το μάτι να μην χάνεται. Αυτές οι επιλογές δεν ήταν αισθητικές ιδιοτροπίες, αλλά πρακτικές αποφάσεις που κρατούσαν τον αναγνώστη στη σελίδα αντί να τον κουράζουν και να τον διώχνουν.
Δομή που αναδιπλώνεται με νόημα
Η ουσία του προσαρμοστικού σχεδιασμού δεν είναι απλώς να συρρικνώνονται τα πάντα όταν στενεύει η οθόνη, αλλά να αναδιατάσσονται με λογική. Ένα στήσιμο τριών στηλών που στη μεγάλη οθόνη φαίνεται κομψό, στο κινητό πρέπει να γίνει μία στήλη όπου τα στοιχεία μπαίνουν στη σωστή σειρά προτεραιότητας. Αν αυτή η αναδίπλωση γίνει άτσαλα, το σημαντικότερο περιεχόμενο μπορεί να καταλήξει στο τέλος, μετά από δευτερεύοντα στοιχεία που ο χρήστης πρέπει να προσπεράσει με ατελείωτο κύλισμα.
Στο project αυτό κάθε σελίδα σχεδιάστηκε ώστε, όταν περνά στη μονή στήλη του κινητού, να εμφανίζει πρώτα τον τίτλο, ύστερα το κύριο κείμενο και μόνο στο τέλος τα συμπληρωματικά στοιχεία. Έτσι ο επισκέπτης που έφτανε από μια εξωτερική παραπομπή έβλεπε αμέσως αυτό για το οποίο ήρθε, χωρίς να χρειάζεται να κυλήσει μέσα από μενού, πλαϊνά πλαίσια ή προτεινόμενα. Η σειρά ανάγνωσης ήταν φυσική και προβλέψιμη, κάτι που τόσο ο άνθρωπος όσο και η μηχανή αναζήτησης εκτιμούν.
Πίνακες, λίστες και στοιχεία που σπάνε σε μικρή οθόνη
Ορισμένα στοιχεία είναι από τη φύση τους εχθρικά προς τη μικρή οθόνη. Ένας πλατύς πίνακας με πολλές στήλες, για παράδειγμα, ή μια μεγάλη οριζόντια λίστα, μπορεί να σπρώξει τη σελίδα να ξεχειλίσει στο πλάι, αναγκάζοντας τον χρήστη σε άβολη οριζόντια κύλιση. Αυτό είναι ένα από τα πιο συχνά σημεία αποτυχίας στην ανταπόκριση ενός site, και η μηχανή αναζήτησης το θεωρεί σαφές ελάττωμα χρηστικότητας.
Η αντιμετώπιση ήταν προσεκτική. Όπου υπήρχε πίνακας, σχεδιάστηκε ώστε στη μικρή οθόνη είτε να κυλά ελεγχόμενα μέσα στο δικό του πλαίσιο χωρίς να σπρώχνει ολόκληρη τη σελίδα, είτε να αναδιατάσσεται σε μορφή που διαβάζεται κάθετα. Το ζητούμενο ήταν να μην υπάρχει ποτέ οριζόντιο ξεχείλισμα, ποτέ ένα στοιχείο που να βγαίνει εκτός των ορίων της οθόνης.
Πώς η ετοιμότητα για κινητά επιτάχυνε την αποδοχή του domain
Ένα φρέσκο domain περνά από μια περίοδο όπου η μηχανή αναζήτησης το αξιολογεί με δυσπιστία πριν του εμπιστευτεί καλές θέσεις. Σε αυτή τη λεπτή φάση, κάθε σήμα ποιότητας έχει αυξημένη βαρύτητα. Η πλήρης ετοιμότητα για το ευρετήριο κινητών ήταν ακριβώς ένα τέτοιο σήμα, και μάλιστα από τα πιο ισχυρά, γιατί αφορούσε τη βασική προϋπόθεση να μπορεί η σελίδα να διαβαστεί σωστά.
Όταν ο crawler κατέβαινε σε μια νέα σελίδα και έβρισκε ένα κείμενο πλήρες, σωστά δομημένο, χωρίς προβλήματα χρηστικότητας στην κινητή εκδοχή, δεν συναντούσε κανένα εμπόδιο για να την κατανοήσει και να την κατατάξει. Δεν υπήρχε μπερδεμένο viewport να τον μπλοκάρει, δεν υπήρχε κρυμμένο περιεχόμενο να του ξεφύγει, δεν υπήρχε ξεχείλισμα να σηκώσει σημαία προβλήματος. Αυτή η καθαρότητα στην ανάγνωση επέτρεψε στις σελίδες να μπουν στο ευρετήριο γρήγορα και χωρίς τριβές, συμβάλλοντας στο οργανικό κομμάτι των επισκέψεων από τον πρώτο κιόλας μήνα.
Δοκιμή σε πραγματικές συσκευές, όχι μόνο σε προσομοίωση
Είναι εύκολο να πιστέψει κανείς ότι ένα site είναι έτοιμο για κινητά επειδή φαίνεται σωστό όταν σμικρύνει το παράθυρο του υπολογιστή. Αυτή όμως η προσομοίωση κρύβει πολλά. Δεν αποκαλύπτει πώς συμπεριφέρεται η αφή ή πόσο εύκολα πατιούνται τα στοιχεία με ένα πραγματικό δάχτυλο.
Γι’ αυτό κάθε σημαντικό πρότυπο σελίδας δοκιμαζόταν σε πραγματικές συσκευές, με διαφορετικά μεγέθη οθόνης, πριν θεωρηθεί έτοιμο. Ελεγχόταν αν τα κουμπιά πατιούνται άνετα, αν το κείμενο διαβάζεται χωρίς ζουμ, αν κανένα στοιχείο δεν ξεχειλίζει, αν η σειρά ανάγνωσης βγάζει νόημα. Αυτή η πρακτική απέτρεψε πλήθος μικρών σφαλμάτων που μια απλή προσομοίωση θα είχε αφήσει να περάσουν, και που αθροιστικά θα είχαν υποβαθμίσει την εμπειρία για τη μερίδα του λέοντος των επισκεπτών.
Συνέπεια σε κάθε νέα προσθήκη
Το μεγαλύτερο ρίσκο σε ένα site που μεγαλώνει ραγδαία είναι η σταδιακή διάβρωση των προτύπων. Ένα νέο άρθρο με έναν ασυνήθιστο πίνακα, μια ενότητα με διαφορετική δομή, ένα στοιχείο που προστέθηκε βιαστικά, μπορεί να σπάσει την προσαρμοστικότητα που με κόπο χτίστηκε. Στο project αυτό η ετοιμότητα για κινητά αντιμετωπίστηκε ως μόνιμη προδιαγραφή, όχι ως αρχική ρύθμιση που γίνεται μία φορά.
Κάθε νέο πρότυπο που εισαγόταν περνούσε από τον ίδιο έλεγχο πληρότητας περιεχομένου, σωστής αναδίπλωσης και απουσίας ξεχειλίσματος. Με αυτόν τον τρόπο, παρά τον ταχύ ρυθμό προσθήκης δεκάδων άρθρων, ο ιστότοπος διατήρησε ομοιόμορφη ποιότητα στην κινητή του εκδοχή, ώστε η μηχανή αναζήτησης να συναντά πάντα την ίδια καθαρή, πλήρη εμπειρία.
Τα πρακτικά συμπεράσματα για το δικό σας project
Αν στήνετε σήμερα έναν νέο ιστότοπο, η εμπειρία αυτή συμπυκνώνεται σε λίγες αρχές που αξίζει να κρατήσετε:
- Σχεδιάστε με τη λογική ότι η μηχανή αναζήτησης βλέπει την κινητή εκδοχή σας ως τη μόνη πραγματική, και αντιμετωπίστε τη μεγάλη οθόνη ως απλή επέκταση.
- Φροντίστε να υπάρχει απόλυτη ισοτιμία περιεχομένου ανάμεσα στις εκδοχές, χωρίς να αφαιρείτε ποτέ κείμενο, συνδέσμους ή δομημένα δεδομένα από το κινητό.
- Προτιμήστε μία ενιαία προσαρμοστική σχεδίαση με μία διεύθυνση ανά σελίδα, ώστε κάθε σήμα αξίας να συγκεντρώνεται σε ένα σημείο.
- Βάλτε σωστή δήλωση viewport σε κάθε σελίδα και μην εμποδίζετε ποτέ τον χρήστη να μεγεθύνει.
- Σχεδιάστε για το δάχτυλο: μεγάλα στοιχεία αφής, άνετες αποστάσεις, ευανάγνωστο κείμενο χωρίς ζουμ.
- Διασφαλίστε ότι πίνακες και λίστες δεν προκαλούν οριζόντιο ξεχείλισμα στη μικρή οθόνη.
- Δοκιμάζετε σε πραγματικές συσκευές και επιβάλλετε τα ίδια πρότυπα σε κάθε νέα προσθήκη.
Το βαθύτερο μάθημα είναι ότι η ετοιμότητα για κινητά δεν είναι ένα κουτάκι που τσεκάρεις και προχωράς. Είναι η ίδια η γλώσσα με την οποία η μηχανή αναζήτησης διαβάζει τον ιστότοπό σου. Αν αυτή η γλώσσα είναι καθαρή, πλήρης και χωρίς εμπόδια, κάθε άλλη προσπάθεια που κάνεις στο περιεχόμενο και στις αναφορές αποκτά την ευκαιρία να μετρήσει. Αν είναι ελλιπής ή σπασμένη, ένα μεγάλο μέρος της δουλειάς σου μένει αόρατο, όσο καλό κι αν είναι.
Συμπέρασμα
Η εκτόξευση ενός νέου domain που έφτασε γύρω στις 165.000 επισκέψεις μέσα στον πρώτο του μήνα δεν θα ήταν δυνατή αν η μηχανή αναζήτησης συναντούσε μια μισή, σπασμένη ή φτωχότερη κινητή εκδοχή. Η ετοιμότητα για mobile-first indexing και ο προσεκτικός προσαρμοστικός σχεδιασμός ήταν το σιωπηλό υπόβαθρο που επέτρεψε στις σελίδες να διαβαστούν πλήρως, να μπουν γρήγορα στο ευρετήριο και να κρατήσουν τη μεγάλη μάζα των επισκεπτών που έρχονταν από το τηλέφωνο. Η πλήρης ισοτιμία περιεχομένου, η ενιαία διεύθυνση ανά σελίδα, η σωστή δήλωση κλιμάκωσης, ο σχεδιασμός για την αφή και η απουσία ξεχειλίσματος συνεργάστηκαν ώστε κάθε επισκέπτης και κάθε crawler να συναντά μια σελίδα που ήταν αληθινά φτιαγμένη για τη μικρή οθόνη. Για όποιον στήνει σήμερα έναν ιστότοπο, το μήνυμα είναι σαφές: μην αντιμετωπίζετε την κινητή εκδοχή ως μια μειωμένη παραλλαγή της κανονικής. Είναι η κανονική. Όλα τα υπόλοιπα είναι η επέκταση.
Για περισσότερες πληροφορίες σχετικά με σύγχρονες SEO στρατηγικές, επισκεφθείτε τη Divramis SEO Agency.
Διαβάστε επίσης από Guide-varna
Δείτε περισσότερα άρθρα από το Guide-varna:
You may also like
-
1 Μήνας SEO Δωρεάν! Με την αγορά τρίμηνου πακέτου SEO!
-
Pelion Travel Guide: Stone Villages, Beaches and the Mountain of the Centaurs
-
JavaScript SEO: Making Sure Google Renders Your Content
-
The Speed Layer Nobody Sees: How Server Response, Caching and CDNs Quietly Decide Your Rankings
-
Vergina and Pella: Walking the Heartland of Ancient Macedonia