Είναι η ιστοσελίδα σας φιλική προς τη χρήση σε κινητό τηλέφωνο;
Οι περισσότεροι επισκέπτες βλέπουν την ιστοσελίδα σας σε κινητό τηλέφωνο. Το ίδιο κάνει και η Google: η Google χρησιμοποιεί την έκδοση για κινητά των σελίδων σας για να τις ευρετηριάσει και να τις κατατάξει. Ό,τι δεν εμφανίζεται στο κινητό δεν το βλέπει επομένως ούτε η Google. Σε αυτό το άρθρο θα διαβάσετε πώς μπορείτε να ελέγξετε μόνοι σας αν η ιστοσελίδα σας λειτουργεί σωστά σε μικρή οθόνη.
Ο κανόνας viewport
Ένα κινητό τηλέφωνο δεν γνωρίζει αυτόματα ότι η σελίδα σας έχει δημιουργηθεί για μικρή οθόνη. Χωρίς οδηγία, το πρόγραμμα περιήγησης υποθέτει ότι η οθόνη είναι πολύ πιο πλατιά και σμικρύνει ολόκληρη τη σελίδα. Τότε προκύπτει πολύ μικρό κείμενο στο οποίο πρέπει να κάνετε μεγέθυνση. Η λύση είναι μία γραμμή στο <head> κάθε σελίδας:
<meta name="viewport" content="width=device-width, initial-scale=1">
- Χωρίς σταθερό πλάτος όπως
width=1024: τότε το κινητό ξανακάνει πάλι ότι η οθόνη είναι πλατιά. - Μην εμποδίζετε τη μεγέθυνση: παραλείψτε τα
user-scalable=noκαιmaximum-scale=1. Οι άνθρωποι με μειωμένη όραση πρέπει να μπορούν να μεγεθύνουν το κείμενο.
Το AI Builder, τα θέματα WordPress και οι περισσότεροι άλλοι κατασκευαστές ιστοσελίδων τοποθετούν αυτή τη γραμμή αυτόματα σε κάθε σελίδα. Σε μια αυτοσχέδια ή παλιά ιστοσελίδα αξίζει να το ελέγξετε: ανοίξτε μια σελίδα, κάντε δεξί κλικ, επιλέξτε Προβολή κώδικα σελίδας (ή Ctrl+U) και αναζητήστε με Ctrl+F τον όρο viewport.
Δοκιμή από εσάς
- Ανοίξτε την ιστοσελίδα σας στο δικό σας κινητό τηλέφωνο και ελέγξτε τις σημαντικότερες σελίδες σας.
- Ή στον υπολογιστή: ανοίξτε την ιστοσελίδα σας στο Chrome ή στο Firefox, πατήστε F12 και κάντε κλικ στο εικονίδιο κινητού τηλεφώνου και tablet. Επιλέξτε μια συσκευή με στενή οθόνη.
- Προσέξτε κείμενο που πέφτει εκτός οθόνης, σελίδα που πρέπει να μετακινήσετε πλευρικά, κουμπιά που είναι πολύ μικρά ή επικαλύπτονται, καθώς και τμήματα που λείπουν στην έκδοση για κινητά.
- Στη συνέχεια, δοκιμάστε στο PageSpeed Insights στην καρτέλα Κινητό. Πώς να διαβάσετε αυτή την αναφορά περιγράφεται στο Ανάγνωση του PageSpeed Insights: Core Web Vitals σε απλή γλώσσα.
Η ξεχωριστή Δοκιμή φιλικότητας προς κινητά της Google και η αναφορά Χρηστικότητα σε κινητά στο Search Console δεν υπάρχουν πλέον από την 1η Δεκεμβρίου 2023. Αν τις συναντήσετε σε κάποιο παλιό άρθρο, χρησιμοποιήστε πλέον τα βήματα παραπάνω.
Ίδιο περιεχόμενο σε κινητό και desktop
Σε μια responsive ιστοσελίδα (μία διεύθυνση και μία σελίδα που προσαρμόζεται στο πλάτος της οθόνης) το περιεχόμενο είναι αυτόματα το ίδιο. Η Google συνιστά αυτόν τον τρόπο. Αν διαθέτετε ξεχωριστή ιστοσελίδα για κινητά, όπως m.example.com, ή ένα σύστημα που στέλνει διαφορετικές σελίδες στα κινητά τηλέφωνα, ελέγξτε τα εξής:
- το ίδιο κείμενο, ακόμα και αν στο κινητό βρίσκεται μέσα σε αναπτυσσόμενο μπλοκ·
- τον ίδιο τίτλο και την ίδια περιγραφή·
- τις ίδιες εικόνες με τα ίδια alt κείμενα·
- κανένα περιεχόμενο που φορτώνει μόνο όταν ο επισκέπτης σαρώνει, κάνει κλικ ή πληκτρολογεί: η Google δεν το κάνει αυτό.
Περισσότερη ανάγνωση
- Google: συνιστώμενες πρακτικές για mobile-first indexing (Αγγλικά)
- MDN: ο κανόνας viewport (Αγγλικά)