Πρώτα το κινητό και το viewport

Ενότητα 4: Ταχύτητα, κινητά και https · Χρόνος ανάγνωσης: 10 λεπτά

Στόχος μαθήματος: Μετά από αυτό το μάθημα μπορείτε να εξηγήσετε τι σημαίνει mobile-first indexing, να αναγνωρίζετε και να γράφετε μια σωστή ρύθμιση viewport και να αποφεύγετε τις παγίδες που κάνουν την κινητή σελίδα σας να δείχνει λιγότερα ή να λειτουργεί χειρότερα από τη σελίδα για υπολογιστή.

Βασικές έννοιες: mobile-first indexing, crawler για smartphone, responsive σχεδίαση, dynamic serving, ξεχωριστό site για κινητά, <meta name="viewport">, width=device-width, initial-scale, αποκλεισμός μεγέθυνσης, ίδιο περιεχόμενο, ενοχλητικά αναδυόμενα παράθυρα (interstitials), στόχοι αφής

Η Google κοιτάζει με ένα τηλέφωνο

Για πολύ καιρό η Google έβλεπε έναν ιστότοπο όπως τον βλέπει ένας υπολογιστής. Αυτό ανήκει στο παρελθόν. Για την καταχώριση στο ευρετήριο και την κατάταξη, η Google χρησιμοποιεί την έκδοση για κινητά των σελίδων σας και την ανακτά με τον crawler του Googlebot για smartphone. Αυτό ονομάζεται mobile-first indexing. Τον Οκτώβριο του 2023 η Google έγραψε ότι η μετάβαση ολοκληρώθηκε: για σχεδόν όλα τα sites πρόκειται πλέον απλώς για «καταχώριση στο ευρετήριο». Από τον Ιούλιο του 2024 η Google ανιχνεύει με τον crawler για κινητά και τα τελευταία sites που επισκεπτόταν ακόμη με τον crawler για υπολογιστές· ό,τι δεν είναι καθόλου προσβάσιμο από τηλέφωνο δεν μπορεί πλέον να καταχωριστεί στο ευρετήριο.

Τι σημαίνει αυτό στην πράξη; Ό,τι δεν υπάρχει στην κινητή σελίδα σας, για την Google δεν υπάρχει. Αν στο τηλέφωνο παραλείψετε ένα κομμάτι κειμένου, έναν πίνακα, το ωράριό σας ή τα δομημένα δεδομένα σας «επειδή η οθόνη είναι μικρή», τότε ούτε η Google βλέπει αυτό το κομμάτι.

Τρεις τρόποι κατασκευής για κινητά

Σχεδόν όλα τα σύγχρονα εργαλεία κατασκευής ιστοτόπων και τα θέματα του WordPress είναι responsive. Ένα site από τον AI Builder είναι επίσης responsive: μία σελίδα που προσαρμόζεται. Αν έχετε ένα παλιό site με ξεχωριστή έκδοση m., η μετάβαση σε responsive είναι συχνά η μεγαλύτερη βελτίωση που μπορείτε να κάνετε.

Το viewport: η γραμμή που κάνει τα πάντα να λειτουργούν

Ένας browser σε τηλέφωνο δεν γνωρίζει από μόνος του ότι η σελίδα σας έχει φτιαχτεί για μικρή οθόνη. Χωρίς οδηγία, συμπεριφέρεται σαν η οθόνη να είναι πολύ πιο φαρδιά, για παράδειγμα 980 pixels (το παράδειγμα που δίνει η τεκμηρίωση του MDN), και σμικρύνει ολόκληρη τη σελίδα ώστε να χωρέσει στην οθόνη. Αποτέλεσμα: μικροσκοπικό κείμενο στο οποίο πρέπει να κάνετε μεγέθυνση. Ούτε μια responsive σχεδίαση λειτουργεί τότε, γιατί το CSS «νομίζει» ότι η οθόνη είναι φαρδιά.

Η λύση είναι μία γραμμή στο <head> κάθε σελίδας:

<meta name="viewport" content="width=device-width, initial-scale=1">

• Το width=device-width λέει: κάντε τη σελίδα τόσο φαρδιά όσο η οθόνη της συσκευής. Τότε το CSS σας μπορεί να δουλέψει με πλάτη οθόνης.
• Το initial-scale=1 λέει: ξεκινήστε χωρίς μεγέθυνση ή σμίκρυνση.

Αυτή είναι ακριβώς η γραμμή που συνιστά το Lighthouse (ο έλεγχος στο Chrome και στο PageSpeed Insights). Το Lighthouse απορρίπτει μια σελίδα αν η γραμμή viewport λείπει ή δεν έχει width=.

Τι καλύτερα να μην κάνετε

Ορισμένα sites προσθέτουν περισσότερα:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Έτσι ο επισκέπτης δεν μπορεί πλέον να κάνει μεγέθυνση. Φαίνεται τακτοποιημένο («η διάταξη μένει ανέπαφη»), αλλά για κάποιον με χαμηλή όραση είναι εμπόδιο. Η οδηγία προσβασιμότητας WCAG 2.2 ζητά στο κριτήριο επιτυχίας 1.4.4 (Αλλαγή μεγέθους κειμένου, επίπεδο AA) να μπορεί το κείμενο να μεγεθυνθεί έως 200 τοις εκατό χωρίς να χαθεί περιεχόμενο ή λειτουργίες. Ο επίσημος κανόνας ελέγχου του W3C, «Meta viewport allows for zoom», απορρίπτει ένα viewport με user-scalable=no ή με maximum-scale μικρότερο από 2. Παραλείψτε λοιπόν αυτά τα στοιχεία. (Το Safari στο iPhone τα αγνοεί πλέον από προεπιλογή, αλλά άλλοι browsers όχι.)

Λάθος είναι επίσης ένα σταθερό πλάτος, όπως width=1024. Τότε το τηλέφωνο συμπεριφέρεται πάλι σαν η οθόνη να έχει πλάτος 1.024 pixels και η responsive σχεδίασή σας είναι άχρηστη.

Ίδιο περιεχόμενο σε κινητό και υπολογιστή

Στην τεκμηρίωση για το mobile-first indexing η Google αναφέρει μερικά πράγματα που πρέπει να είναι ίδια και στις δύο εκδόσεις. Σε ένα responsive site αυτό ισχύει αυτόματα· με dynamic serving και με ξεχωριστό site για κινητά πρέπει να το ελέγξετε:

• Το ίδιο το περιεχόμενο. Στο κινητό το κείμενο μπορεί να βρίσκεται σε πτυσσόμενο μπλοκ ή σε καρτέλα, αλλά πρέπει να υπάρχει μέσα στη σελίδα.
• Ο τίτλος και η μετα-περιγραφή (μάθημα 3.1) πρέπει να είναι ισοδύναμα.
• Τα δομημένα δεδομένα (ενότητα 5) πρέπει να υπάρχουν και στις δύο εκδόσεις.
• Εικόνες με τα ίδια κείμενα alt και σε καλή ποιότητα.
• Κανένα περιεχόμενο που φορτώνει μόνο μετά από ενέργεια. Η Google το λέει ρητά: μη φορτώνετε το κύριο περιεχόμενο μόνο όταν ο επισκέπτης σύρει, κάνει κλικ ή πληκτρολογήσει· ο Googlebot δεν το κάνει αυτό.
• Το robots.txt δεν πρέπει να αποκλείει τις κινητές σελίδες ούτε το CSS, το JavaScript και τις εικόνες τους. Χωρίς CSS η Google δεν μπορεί να δει πώς φαίνεται η σελίδα.

Ευχάριστο σε μικρή οθόνη

Μερικά σημεία που αναφέρει η Google ως ερωτήματα για μια καλή εμπειρία σελίδας και που μπορείτε να ελέγξετε στο δικό σας τηλέφωνο:

• Ευανάγνωστο κείμενο χωρίς μεγέθυνση.
• Στόχοι αφής (κουμπιά, σύνδεσμοι σε μενού) αρκετά μεγάλοι και όχι πολύ κοντά ο ένας στον άλλον, ώστε να μην πατάτε κατά λάθος το λάθος σημείο.
• Κανένα ενοχλητικό αναδυόμενο παράθυρο. Η Google γράφει ότι στοιχεία που καλύπτουν το περιεχόμενο (ένα παράθυρο εγγραφής σε newsletter πάνω σε όλη τη σελίδα μόλις μπείτε) εκνευρίζουν τους επισκέπτες, βλάπτουν την εμπιστοσύνη και δυσκολεύουν τις μηχανές αναζήτησης να κατανοήσουν το περιεχόμενό σας. Προτιμήστε μια μικρή μπάρα. Τα παράθυρα που απαιτούνται από τον νόμο, όπως ένας έλεγχος ηλικίας, εξαιρούνται από αυτή την οδηγία.
• Καμία οριζόντια κύλιση: μια πολύ φαρδιά εικόνα ή ένας πίνακας σπρώχνει όλη τη σελίδα στο πλάι. Δώστε στους πίνακες δική τους γραμμή κύλισης.

Η Google κατάργησε στα τέλη του 2023 το ξεχωριστό εργαλείο «Mobile-Friendly Test» και την αναφορά Mobile Usability στο Search Console. Σήμερα ελέγχετε με το δικό σας τηλέφωνο, με την προβολή για κινητά στα εργαλεία προγραμματιστή του browser σας και με το Lighthouse ή το PageSpeed Insights (μάθημα 4.3).

Στην πράξη: ελέγξτε μόνοι σας

Ανοίξτε το site σας στο Chrome ή στον Firefox στον υπολογιστή, πατήστε F12 και κάντε κλικ στο εικονίδιο με το τηλέφωνο και το tablet (γραμμή εργαλείων συσκευής). Επιλέξτε μια στενή συσκευή και περιηγηθείτε στις σημαντικότερες σελίδες σας. Προσέξτε κείμενο που βγαίνει εκτός οθόνης, κουμπιά που επικαλύπτονται και κομμάτια που λείπουν στο κινητό. Έπειτα δείτε στον πηγαίο κώδικα (Ctrl+U) αν υπάρχει η γραμμή viewport.

Ο AI Builder προσθέτει μόνος του τη γραμμή viewport width=device-width, initial-scale=1 σε κάθε σελίδα. Το ίδιο κάνουν τα θέματα του WordPress, όπως και τα περισσότερα άλλα εργαλεία κατασκευής ιστοτόπων. Σε ένα site που φτιάξατε μόνοι σας ή σε ένα παλιό site αξίζει να το ελέγξετε: είναι μία γραμμή, αλλά χωρίς αυτήν τίποτα από τη σχεδίασή σας για κινητά δεν λειτουργεί.

Σύνοψη

• Η Google καταχωρίζει στο ευρετήριο και κατατάσσει την έκδοση για κινητά των σελίδων σας· ό,τι λείπει εκεί, η Google δεν το βλέπει.
• Η responsive σχεδίαση είναι ο συνιστώμενος τρόπος: μία διεύθυνση, ένα HTML.
• Κάθε σελίδα χρειάζεται <meta name="viewport" content="width=device-width, initial-scale=1">.
• Μην αποκλείετε τη μεγέθυνση: όχι user-scalable=no και όχι maximum-scale κάτω από 2 (WCAG 1.4.4).
• Κρατήστε το περιεχόμενο, τον τίτλο, τη μετα-περιγραφή και τα δομημένα δεδομένα ίδια σε κινητό και υπολογιστή και αποφύγετε αναδυόμενα παράθυρα που καλύπτουν τη σελίδα.

Κουίζ

Άσκηση

Άσκηση A4.2: Έχει η σελίδα σας σωστό viewport; Συμπληρώστε τη διεύθυνση μιας σελίδας (για παράδειγμα την αρχική σας σελίδα). Το πρόγραμμα διαβάζει το HTML και ελέγχει αν υπάρχει ακριβώς ένα <meta name="viewport"> στο <head> με width=device-width και αν η μεγέθυνση δεν αποκλείεται (user-scalable=no ή maximum-scale κάτω από 2). Έπειτα δείτε μόνοι σας την ίδια σελίδα στην προβολή για κινητά του browser σας. Δεν έχετε δικό σας site; Χρησιμοποιήστε το www.wikipedia.org.

Περαιτέρω ανάγνωση

• Google Search Central, Mobile-first indexing best practices: https://developers.google.com/search/docs/crawling-indexing/mobile/mobile-sites-mobile-first-indexing
• Google Search Central Blog, Mobile-first indexing has landed (2023): https://developers.google.com/search/blog/2023/10/mobile-first-is-here
• Google Search Central, Avoid intrusive interstitials and dialogs: https://developers.google.com/search/docs/appearance/avoid-intrusive-interstitials
• W3C, κανόνας ACT Meta viewport allows for zoom: https://www.w3.org/WAI/standards-guidelines/act/rules/b4f0c3/
• MDN, Η μετα-ετικέτα viewport: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/meta/name/viewport
• W3C, Understanding SC 1.4.4 Resize Text: https://www.w3.org/WAI/WCAG22/Understanding/resize-text.html