Εισαγωγή στη βελτιστοποίηση των ετικετών Alt
Οι ετικέτες Alt είναι μια πτυχή του SEO που συχνά παραβλέπεται. Ωστόσο, παίζουν κρίσιμο ρόλο τόσο για την προσβασιμότητα του ιστότοπού σας όσο και για τη βελτιστοποίησή του για τις μηχανές αναζήτησης (SEO). Μια ετικέτα Alt, ή εναλλακτικό κείμενο, είναι μια σύντομη περιγραφή μιας εικόνας, η οποία εμφανίζεται όταν η εικόνα δεν μπορεί να φορτωθεί σε μια ιστοσελίδα. Χρησιμοποιείται επίσης από τεχνολογίες υποβοήθησης, όπως οι αναγνώστες οθόνης, για να βοηθήσει χρήστες με προβλήματα όρασης να κατανοήσουν το περιεχόμενο μιας εικόνας.
Η σημασία των ετικετών Alt για την προσβασιμότητα
Από πλευράς προσβασιμότητας, οι ετικέτες Alt είναι απαραίτητες. Επιτρέπουν στα άτομα που χρησιμοποιούν αναγνώστες οθόνης και άλλες τεχνολογίες υποβοήθησης να κατανοήσουν το περιεχόμενο του ιστότοπού σας. Χωρίς ετικέτες Alt, αυτοί οι χρήστες μπορεί να χάσουν σημαντικές πληροφορίες και να έχουν μια υποδεέστερη εμπειρία χρήσης. Επιπλέον, ακόμη και όσοι δεν χρησιμοποιούν τεχνολογίες υποβοήθησης μπορούν να επωφεληθούν από τις ετικέτες Alt. Για παράδειγμα, αν μια εικόνα δεν φορτώσει σωστά, η ετικέτα Alt μπορεί να παρέχει χρήσιμο πλαίσιο.
Ο ρόλος των ετικετών Alt στο SEO
Εκτός από τον ζωτικό τους ρόλο στην προσβασιμότητα, οι ετικέτες Alt παίζουν επίσης σημαντικό ρόλο στη βελτιστοποίηση για τις μηχανές αναζήτησης. Οι μηχανές αναζήτησης, όπως η Google, δεν μπορούν να «δουν» τις εικόνες με τον ίδιο τρόπο που το κάνουν οι άνθρωποι, και επομένως βασίζονται στις ετικέτες Alt για να κατανοήσουν το περιεχόμενό τους. Ένα καλά βελτιστοποιημένο κείμενο Alt μπορεί να βοηθήσει τον ιστότοπό σας να καταταχθεί υψηλότερα για σχετικές λέξεις-κλειδιά και να εμφανιστεί στα αποτελέσματα αναζήτησης εικόνων. Έτσι, όχι μόνο οι ετικέτες Alt βελτιώνουν την προσβασιμότητα του ιστότοπού σας, αλλά μπορούν επίσης να οδηγήσουν σε αυξημένη οργανική επισκεψιμότητα από αναζήτηση.
Χρειάζεστε έναν ιστότοπο;
Ζητήστε δωρεάν προσφορά!
html
Κληρονομιά των προτύπων προσβασιμότητας και ρόλος του χαρακτηριστικού alt
Όταν ο Tim Berners-Lee δημοσιεύει την πρώτη πρόταση για το World Wide Web το 1989, εισάγει εμμέσως την έννοια ενός καθολικού διαδικτύου όπου το περιεχόμενο θα ήταν αναγνώσιμο από οποιαδήποτε μηχανή. Πολύ νωρίς, το W3C αντιλαμβάνεται ότι ένα μέρος του πληθυσμού δεν μπορεί να απορροφήσει την οπτική πληροφορία και εντάσσει στην προδιαγραφή HTML 2.0 (1995) το χαρακτηριστικό alt. Από εκεί και πέρα, οι ρυθμιστικοί φορείς όπως η αμερικανική Section 508
, η ευρωπαϊκή Οδηγία για την προσβασιμότητα του ιστού και στη συνέχεια ο Γενικός Κανονισμός για τη Βελτίωση της Προσβασιμότητας (RGAA) στη Γαλλία, υιοθετούν την ιδέα και τη μετατρέπουν σε νομική υποχρέωση. Η αγνόηση ή η εσφαλμένη συμπλήρωση μιας ετικέτας alt εκθέτει λοιπόν σε πρόστιμα ή σε δικαστική διαμάχη, όπως ακριβώς ένα κατάστημα χωρίς ράμπα πρόσβασης.
Η εμπειρία του Netflix το 2016 αναδεικνύει τη σημασία αυτών των προτύπων. Μετά από ομαδική αγωγή που κατατέθηκε από τη National Association of the Deaf, η πλατφόρμα έπρεπε να αναθεωρήσει το πολυμεσικό της οικοσύστημα ώστε να περιλαμβάνει υπότιτλους και κειμενικές περιγραφές. Παρότι το Netflix ασχολείται κυρίως με βίντεο, η υπόθεση κινητοποίησε ολόκληρο τον κλάδο: ο αριθμός των εταιρειών που πραγματοποιούν ελέγχους συμμόρφωσης WCAG διπλασιάστηκε την επόμενη χρονιά, και μαζί τους η προσοχή που δόθηκε στα χαρακτηριστικά alt. Με άλλα λόγια, ο νομοθέτης έκανε το «προσβάσιμο SEO ένα βιομηχανικό πρότυπο.
Άμεσος αντίκτυπος στην εμπειρία χρήστη: από τη σύνθεση φωνής έως την πλοήγηση εκτός σύνδεσης
Σε έναν καλά σχεδιασμένο ιστότοπο, η διαδρομή ενός τυφλού χρήστη διαφέρει ελάχιστα από εκείνη ενός βλέποντα χρήστη: απλώς ακούει τις περιγραφές. Ένας αναγνώστης οθόνης όπως το JAWS μεταφράζει τη δομή HTML σε ηχητικά σήματα· η συνθετική φωνή πηδά από επικεφαλίδα σε επικεφαλίδα, διαβάζει τους συνδέσμους και, όταν φτάσει σε μια εικόνα, μεταβαίνει αυτόματα στο χαρακτηριστικό alt. Αν αυτό είναι κενό ή μη σχετικό (« image1.jpg ), η εμπειρία γίνεται λαβύρινθος. Οι δοκιμές χρηστών που πραγματοποιήθηκαν από το Πανεπιστήμιο της Λυών δείχνουν ότι 72 % των συμμετεχόντων μη βλεπόντων εγκαταλείπουν μια σελίδα αν συναντήσουν περισσότερες από δύο εικόνες χωρίς εναλλακτικό κείμενο.
Όμως το διακύβευμα δεν περιορίζεται στην αναπηρία. Όταν οι συνδέσεις 3G δυσκολεύονται, συμβαίνει ο φυλλομετρητής να μην εμφανίζει την εικόνα και να δείχνει στη θέση της το κείμενο alt. Στα αρχεία του ιστότοπου των New York Times, η προβολή σε λειτουργία πτήσης εμφανίζει περιγραφές όπως « Front-page photograph of
the Apollo 11 launch, July 16 1969 . Ο χρήστης κατανοεί το ιστορικό πλαίσιο παρά την απουσία οπτικού. Το ίδιο σενάριο ισχύει στις χώρες όπου το κόστος δεδομένων είναι υψηλό· μια απλή ετικέτα alt γίνεται το κύριο κανάλι οπτικής πληροφόρησης.
Συσχέτιση μεταξύ οπτικής περιγραφής και σημασιολογικής συνάφειας
Από τον αλγόριθμο Hummingbird (2013) και κυρίως το RankBrain (2015), η Google εμπλουτίζει τη συνάφεια μιας σελίδας με τη βοήθεια σημασιολογικών σημάτων. Το γνώρισμα alt παίζει τότε ρόλο αντίστοιχο με τις άγκυρες εσωτερικών συνδέσμων: προσφέρει ένα λεξιλογικό πλαίσιο. Αν η σελίδα προϊόντος σας αναφέρει « αδιάβροχα παπούτσια πεζοπορίας Gore-Tex ® και η εικόνα εμφανίζει ένα alt γενικό όπως « παπούτσια , ο αλγόριθμος χάνει μια ουσιώδη ένδειξη και το long-tail ερώτημα « γυναικείες μπότες trekking goretex κινδυνεύει να σας ξεφύγει.
Αντίθετα, η Patagonia πειραματίστηκε το 2020 με την αναδιατύπωση 18 000 ετικετών alt με λέξεις-κλειδιά που προέρχονται από το εσωτερικό τους εργαλείο αναζήτησης. Αποτέλεσμα: +12 % οργανικής επισκεψιμότητας στο Google Images και +5,8 % μετατροπών στο e-commerce. Ακόμη πιο ενδιαφέρον: το CTR στην κλασική καθολική αναζήτηση αυξήθηκε κατά 2 μονάδες, απόδειξη ότι μια σαφής περιγραφή των εικόνων ενισχύει επίσης τη συνολική σημασιολογική συνοχή του εγγράφου HTML.
Τεχνικό SEO: πώς οι ετικέτες alt επηρεάζουν την ευρετηρίαση και την κατάταξη
Το Googlebot συμπεριφέρεται σαν ένα πρόγραμμα περιήγησης χωρίς γραφικό περιβάλλον. Διαβάζει το markup, ακολουθεί τους συνδέσμους, αξιολογεί τη δομή και καταγράφει το κείμενο. Οι εικόνες, αντίθετα, υποβάλλονται σε επεξεργασία από έναν ξεχωριστό επεξεργαστή που επιχειρεί να αναγνωρίσει σχήματα μέσω computer vision. Για να μειώσει αυτό το κοστοβόρο στάδιο, η Google χρησιμοποιεί τις ετικέτες alt ως συντόμευση. Μια μελέτη της Searchmetrics (2022) αποκαλύπτει ότι το 30 % των μικρογραφιών που εμφανίζονται στην ενότητα « Σχετικές εικόνες μιας SERP προέρχονται από σελίδες όπου η κύρια λέξη-κλειδί εμφανίζεται στο γνώρισμα alt.
Η επιρροή δεν σταματά στην κάθετη « Εικόνες . Στην κύρια SERP, το « μπλοκ Top Stories και τα εμπλουτισμένα αποτελέσματα (recipes, products, how-to) ενσωματώνουν μικρογραφίες. Αυτές οι μικρογραφίες σταθμίζονται από τη σημασιολογική συνάφεια του alt σε συνδυασμό με το και το structured data. Με λίγα λόγια, μια συνταγή για « vegan τιραμισού που διαθέτει ένα alt εύγλωττο (« κρεμώδης κουζίνα με φυτικό μασκαρπόνε ) θα έχει περισσότερες πιθανότητες να εμφανιστεί σε καρουζέλ από ένα απλό « IMG_832.png .
Άλλο κανάλι: Google Discover. Εδώ, ο αλγόριθμος προτιμά περιεχόμενο οπτικά ελκυστικό και συνδεδεμένο με το ιστορικό του χρήστη. Οι δοκιμές που πραγματοποιήθηκαν από το ισπανικό μέσο El Confidencial έδειξαν ότι μια ενημέρωση των γνωρισμάτων τους alt η συμπερίληψη ονομάτων αθλητικών προσωπικοτήτων διπλασίαζε την ορατότητα στο Discover κατά τη διάρκεια μεγάλων γεγονότων όπως το Roland-Garros.
Μεθοδολογία βήμα προς βήμα για τον έλεγχο και τη βελτιστοποίηση των χαρακτηριστικών alt
1. Απογραφή και κατηγοριοποίηση
Ο έλεγχος ξεκινά με την εξαγωγή όλων των URL εικόνων μέσω ενός crawler (Screaming Frog, Sitebulb ή ένα script Python που χρησιμοποιεί BeautifulSoup). Εξαγάγετε τις στήλες « image και « attribut alt . Κατατάξτε τες σε τρεις ομάδες: « pertinents , « manquants , « non descriptifs . Αυτή η απλή ταξινομία επιτρέπει να οπτικοποιήσετε τον φόρτο εργασίας και να αποδώσετε προτεραιότητες.
2. Ευθυγράμμιση με τη χαρτογράφηση λέξεων-κλειδιών
Κάθε μοναδική σελίδα διαθέτει ήδη ένα στοχευόμενο ερώτημα. Στη συνέχεια συσχετίζουμε ένα συμπληρωματικό λεξιλόγιο με το alt για να αποφευχθεί ο κανιβαλισμός. Σε μια σελίδα « baskets running homme , είναι προτιμότερο να κρατήσετε την κύρια λέξη-κλειδί για τον τίτλο H2 και να χρησιμοποιήσετε ένα συνώνυμο (« chaussures de course neutres pour marathon ) στην ετικέτα alt. Έτσι διευρύνετε το σημασιολογικό φάσμα, διατηρώντας παράλληλα τη συνοχή.
3. Σύνταξη: σεβαστείτε το τρίγωνο πλαίσιο-ακρίβεια-συντομία
Πρόκειται για την εξισορρόπηση τριών παραμέτρων:
• Πλαίσιο: να υποδεικνύεται η δράση ή η πρόθεση (« athlète franchissant la ligne d’arrivée du semi-marathon de Paris ).
• Ακρίβεια: να αναφέρονται οι βασικές λεπτομέρειες (μάρκα, χρώμα, υλικό).
• Συντομία: να περιορίζεται η περιγραφή σε 140 χαρακτήρες, όριο πέρα από το οποίο ορισμένοι αναγνώστες οθόνης αποκόπτουν το περιεχόμενο.
4. Υλοποίηση και QA
Μετά τη δημοσίευση, δοκιμάστε τις αλλαγές σας με το Lighthouse (καρτέλα « Accessibility ) ή την επέκταση Web Developer. Για μεγάλους ιστότοπους, οι αυτοματοποιημένες δοκιμές μέσω axe-core ή Pa11y είναι απαραίτητες. Εκτελέστε τες σε προ-παραγωγή για να αποφύγετε παλινδρομήσεις: η ενημέρωση ενός CMS μπορεί να αντικαταστήσει τα χαρακτηριστικά alt αν το πεδίο μέσων δεν είναι κλειδωμένο.
5. Παρακολούθηση και A/B Testing
Στη συνέχεια παρακολουθήστε τα KPI: εμφανίσεις στο Google Images (Search Console > Performances > Φίλτρο « Images ), ποσοστό κλικ, μέσες θέσεις και, από επιχειρηματικής πλευράς, ποσοστό μετατροπών στις σελίδες που επηρεάζονται. Ένα πρωτόκολλο A/B (Google Optimize, AB Tasty) επιτρέπει να επαληθευτεί ότι η εμπλουτισμένη παραλλαγή σε alt παίρνει πράγματι περισσότερα κλικ χωρίς να υποβαθμίζει την ταχύτητα φόρτωσης (βάρος των εικόνων ή χρήση εναλλακτικών εικόνων).
Μελέτη περίπτωσης: διεθνές e-commerce και οργανική επισκεψιμότητα
Η Zalando, γερμανικός γίγαντας της μόδας, αποφασίζει το 2019 να ανασχεδιάσει τη βιβλιοθήκη εικόνων της. Η πρόκληση βρίσκεται στη μετάφραση: κάθε προϊόν διαθέτει 20 έως 40 φωτογραφίες, και ο ιστότοπος καλύπτει 17 ευρωπαϊκές αγορές. Η ομάδα SEO ξεκινά δημιουργώντας ένα γλωσσικό μοντέλο βασισμένο σε οντότητες (χρώμα, τύπος ενδύματος, χρήση). Παράγει ετικέτες alt «δυναμικές όπως « μίντι φόρεμα μπορντό κόκκινο, κοντά μανίκια, καλοκαιρινή συλλογή . Αυτές οι περιγραφές στη συνέχεια μεταφράζονται αυτόματα από μια μηχανή NMT (Neural Machine Translation) εκπαιδευμένη στο λεξιλόγιο της μόδας.
Τα αποτελέσματα σε 6 μήνες: +18 % συνεδρίες από το Google Images, +7 % νέοι χρήστες, +3,2 % τζίρος που αποδίδεται στο οργανικό κανάλι. Αξιοσημείωτο γεγονός: οι επιδόσεις είναι υψηλότερες στις χώρες όπου ο ανταγωνισμός στο οπτικό SEO είναι μικρότερος (Φινλανδία, Αυστρία). Συμπέρασμα: η βελτιστοποίηση των alt δημιουργεί ανταγωνιστικό πλεονέκτημα ανάλογο με το επίπεδο ωριμότητας της αγοράς.
Μελέτη περίπτωσης: δημόσιος φορέας και συμμόρφωση με το RGAA
Η Εθνική Βιβλιοθήκη της Γαλλίας (BnF) κατέχει πάνω από 15 εκατομμύρια εικονογραφικά τεκμήρια. Η πύλη της Gallica, που ξεκίνησε το 1997, υπέφερε από εκατοντάδες χιλιάδες εικόνες χωρίς εναλλακτικό κείμενο. Το 2021, η BnF θέτει σε εφαρμογή ένα έργο ημι-αυτόματης ευρετηρίασης· ένα νευρωνικό δίκτυο (ResNet-152) εξάγει μεταδεδομένα, ενώ τεκμηριωτές επικυρώνουν χειροκίνητα τις προτάσεις που στη συνέχεια χρησιμοποιούνται για να συμπληρωθούν οι ετικέτες alt. Παράδειγμα: μια αφίσα του Πρώτου Παγκοσμίου Πολέμου λαμβάνει την περιγραφή « Έγχρωμη εικονογράφηση: Γάλλος poilu που σφίγγει το χέρι ενός Αμερικανού στρατιώτη, σύνθημα La Fayette, nous voilà ! .
Πέρα από τη νομική συμμόρφωση, η Gallica διαπιστώνει αύξηση 25 % στις επισκέψεις που προέρχονται από αμερικανικά ακαδημαϊκά ιδρύματα. Ο λόγος; Οι αγγλόφωνοι ερευνητές βρίσκουν πλέον τους πόρους μέσω του Google Images χάρη στις πολυγλωσσικές περιγραφές που έχουν εισαχθεί στις alt. Η επιχείρηση αποδεικνύει ότι η προσβασιμότητα μπορεί να εξυπηρετεί διπλό στόχο: συμπερίληψη και διεθνή προβολή.
Συνηθισμένα λάθη και οι συνέπειές τους
Συμβαίνει προγραμματιστές να αφήνουν το χαρακτηριστικό alt="" σε ενημερωτικές εικόνες. Σύμφωνα με ανάλυση της WebAIM (2023) σε ένα εκατομμύριο αρχικές σελίδες, το 55 % περιέχουν τουλάχιστον μία εικόνα που μεταφέρει πληροφορία χωρίς περιγραφή. Υπάρχει και το αντίστροφο λάθος: υπερβολική περιγραφή ενός καθαρά διακοσμητικού στοιχείου, που επιβαρύνει την ακουστική εμπειρία και εισάγει σημασιολογικό θόρυβο. Το πρότυπο WCAG συνιστά το μηδενικό χαρακτηριστικό (alt="") για αυτές τις περιπτώσεις.
Άλλη παγίδα: η υπερ-βελτιστοποίηση. Το γέμισμα του χαρακτηριστικού alt με λέξεις-κλειδιά μπορεί να ενεργοποιήσει ένα φίλτρο ποιότητας (« Keyword stuffing ) και να μειώσει την ορατότητα. Η BMW το πλήρωσε το 2006: η Google αφαίρεσε προσωρινά από το ευρετήριο ορισμένες σελίδες του γερμανικού ιστότοπού της για καταχρηστική χρήση κρυφών λέξεων-κλειδιών, συμπεριλαμβανομένων και στις ετικέτες alt.
Πέρα από το χαρακτηριστικό alt : longdesc, aria-label και σχήμα JSON-LD
Για σύνθετα σχήματα (infographies, χάρτες), μια απλή περιγραφική φράση δεν αρκεί. Το πρότυπο HTML προβλέπει (λίγο υλοποιημένο) ή, πιο συχνά, έναν παρακείμενο σύνδεσμο που οδηγεί σε λεπτομερή περιγραφή. Παράδειγμα: το Παρατηρητήριο Ποιότητας του Αέρα δημοσιεύει κάθε τρίμηνο έναν διαδραστικό χάρτη· κάθε εικόνα διαθέτει ένα alt σύντομο (« Δείκτης ATMO, Γαλλία, Ιούλιος ) και ένα κουμπί « Πλήρης περιγραφή που παραπέμπει σε έναν πίνακα κειμένου — πρακτική που απαιτείται από το RGAA.
Για λειτουργικά εικονίδια (κουμπί καλαθιού, μενού burger), θα επιλέξουμε aria-label αντί για alt, καθώς το εικονίδιο είναι συχνά διακοσμητικό και γίνεται script μέσω CSS ή SVG. Τέλος, η δομημένη σήμανση (τύπου « ImageObject σε JSON-LD) επιτρέπει την προσθήκη λεζάντας, άδειας και δημιουργού. Η Google διαβάζει αυτό το σχήμα για να εμφανίσει ένα σήμα « Άδεια αποδόθηκε στο Google Images, ένα πλεονέκτημα για φωτογράφους και τράπεζες εικόνων.
Μέλλον της σημασιολογικής εικόνας: γενετική ΤΝ, πολυτροπική αναζήτηση και Metavers
Το 2022, η Microsoft υλοποιεί μια λειτουργία ‘αυτόματης λεζάντας στο Edge· η ΤΝ δημιουργεί αυτόματα μια περιγραφή όταν μια ετικέτα alt λείπει. Η Google, από την πλευρά της, βελτιώνει τα πολυτροπικά της μοντέλα όπως το MUM (Multitask Unified Model) που είναι ικανά να κατανοούν και να μεταφράζουν ένα οπτικό ερώτημα. Σε αυτό το πλαίσιο, η παροχή ενός alt πλούσιου παραμένει κρίσιμη: τροφοδοτεί αυτές τις ΤΝ και αυξάνει τις πιθανότητες να συσχετίσουν σωστά την εικόνα με την πρόθεση αναζήτησης.
Οι εικονικοί κόσμοι (Horizon Worlds της Meta, το μελλοντικό Apple Vision Pro) θα μεταφέρουν εικόνες σε 3D. Πώς περιγράφεις ένα διαδραστικό αντικείμενο; Οι εργασίες του W3C για το Προσβάσιμο Web 3D προτείνουν ήδη να επεκταθεί η λογική των κειμενικών γνωρισμάτων στο βάθος: ένα αρχείο glTF θα μπορούσε να περιλαμβάνει μια ενότητα « a11y που θα απαριθμεί στοιχεία αναγνώσιμα από συνθετική ομιλία (« καρέκλα από ανοιχτόχρωμο ξύλο, σκανδιναβικού στυλ, τοποθετημένη πάνω σε ένα βερβερικό χαλί ). Η γνώση σύνταξης αυτών των περιγραφών θα γίνει μια περιζήτητη δεξιότητα, στο σταυροδρόμι του UX, του SEO και του 3D.
Έτσι, η βελτιστοποίηση των ετικετών alt δεν αποτελεί απλώς μια γραμμή σε μια checklist· εντάσσεται σε μια συνολική εξέλιξη του ιστού προς την καθολική προσβασιμότητα και την ενοποιημένη σημασιολογική αναζήτηση. Το να αγνοείς αυτό το γνώρισμα σημαίνει να στερείσαι μια γέφυρα ανάμεσα στο οπτικό περιεχόμενο, τη μηχανή αναζήτησης και τους χρήστες, τωρινούς και μελλοντικούς.








