Όσοι ασχολείστε με την ιστοσελίδα της επιχείρησής σας ή διατηρείτε το δικό σας blog, σίγουρα θα έχετε συναντήσει αρκετές φορές το alt-text ή αλλιώς εναλλακτικό κείμενο όταν ανεβάζετε εικόνες στο site σας. Όμως, τι είναι το Alt-Text σε εικόνες και πώς σχετίζεται με την Προσβασιμότητα και το SEO ιστοσελίδας;

Τι είναι το Alt-Text;

Το εναλλακτικό κείμενο (alt-text) περιγράφει μια εικόνα σε μια ιστοσελίδα. Το alt-text βοηθά άτομα με προβλήματα όρασης να κατανοήσουν τι δείχνει μια εικόνα. Εξυπηρετεί επίσης τα bots των μηχανών αναζήτησης να κατανοήσουν το περιεχόμενο αυτής της εικόνας και εμφανίζεται σε μια σελίδα όταν η εικόνα δεν φορτώνεται σωστά από την αρχή.

Είναι ακριβώς το αντίθετο από μια λεζάντα εικόνας, η οποία εμφανίζεται πάντα κάτω από την εικόνα σε μία ιστοσελίδα.

Το alt-text τοποθετείται μέσω του χαρακτηριστικού alt στον κώδικα HTML μιας εικόνας:

<img src=”image-file.jpg” alt=”Το εναλλακτικό κείμενο εδώ”>

Μπορεί να το συναντήσετε επίσης ως “alt attribute” ή “alt tag”.

Τα περισσότερα συστήματα διαχείρισης περιεχομένου (CMS) διαθέτουν ένα ειδικό πεδίο για το alt-text μιας εικόνας. Άρα, δεν χρειάζεται να επεξεργαστείτε τον κώδικα HTML ώστε να προσθέσετε ένα alt-text για την εικόνα σας.

Δείτε ένα σχετικό παράδειγμα με εισαγωγή εικόνας και alt-text στο WordPress:

Alt-text στα social media

Μπορείτε να χρησιμοποιήσετε alt-text ακόμα και στις εικόνες σας στα social media, όπως στο X, Instagram, Facebook, Tumblr κ.ά.

Προσθήκη εναλλακτικού κειμένου σε εικόνα στο X:

Προσθήκη εναλλακτικού κειμένου σε εικόνα στο Instagram:

Κλικάρουμε επάνω δεξιά (στις 3 τελίτσες) στην ανάρτηση στο Instagram και επιλέγουμε “Επεξεργασία“. Στη συνέχεια κλικάρουμε στο “Επεξεργασία εναλλακτικού κειμένου“:

Προσθήκη εναλλακτικού κειμένου σε εικόνα στο Facebook:

Γιατί είναι τόσο σημαντικό το alt-text;

Το alt-text είναι σημαντικό, επειδή κάνει τις εικόνες σας πιο προσβάσιμες σε άτομα με αναπηρίες αλλά και στις μηχανές αναζήτησης αναβαθμίζοντας έτσι το SEO ιστοσελίδας. Το alt-text μιας εικόνας εμφανίζεται, ακόμα και όταν αυτή δεν μπορεί να φορτώσει και να εμφανιστεί στην οθόνη του επισκέπτη.

Αν δεν παρέχετε το κατάλληλο εναλλακτικό κείμενο, τα άτομα που χρησιμοποιούν προγράμματα ανάγνωσης οθόνης, δεν μπορούν να αποσπάσουν πληροφορίες από τις εικόνες σας. Αυτό αποκλείει άδικα τους χρήστες του διαδικτύου με προβλήματα όρασης. Επίσης, μπορεί να βλάψει το brand σας, την επισκεψιμότητα της ιστοσελίδας σας και το ποσοστό μετατροπών. Άρα έχει άμεση σχέση με το SEO ιστοσελίδας.

Η προσβασιμότητα ιστοσελίδας είναι βασική προϋπόθεση για το SEO ιστοσελίδας.

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

Το alt-text είναι ιδιαίτερα χρήσιμο για το SEO εικόνων.

Μπορεί να οδηγήσει σε πολύτιμη επισκεψιμότητα στην ιστοσελίδα σας.

Θα έχετε δει στα αποτελεσμάτων των μηχανών αναζήτησης (SERP) για μια λέξη-κλειδί που πληκτρολογείτε ή μια φράση-κλειδί, που κατακλύζονται από αποτελέσματα-εικόνες. Αυτές οι εικόνες, συνδέονται με τις ιστοσελίδες των ιδιοκτητών τους.

Πολλές από αυτές τις εικόνες, χρησιμοποιούν ως alt-text τη λέξη-κλειδί με την οποία πραγματοποιήσατε την αναζήτησή σας ή κάτι παρόμοιο όπως τον πληθυντικό της λέξης.

Επειδή το alt-text σε εικόνες είναι σημαντικό για το On-Page SEO ιστοσελίδας, μερικές φορές αναφέρεται ως “SEO alt-text”.

Πώς να γράφετε alt-text σε εικόνες (Βέλτιστες πρακτικές)

Μάθετε πώς να γράφετε σωστά alt-text σε εικόνες, που να βελτιώνουν την προσβασιμότητα ιστοσελίδας αλλά και το SEO.

Παρακάτω, θα αναλύσουμε 3 πρακτικές βελτιστοποίησης για το alt-text που θα σας βοηθήσουν να γράφετε το τέλειο εναλλακτικό κείμενο για τις εικόνες σας:

1. Προσθέστε alt-text στα σωστά είδη εικόνων

Μην γράφετε εναλλακτικό κείμενο για τις διακοσμητικές εικόνες που χρησιμοποιείτε στην ιστοσελίδας σας. Αυτές οι alt-text περιγραφές προκαλούν σύγχυση τους χρήστες με προβλήματα όρασης, αντί να τους παρέχουν χρήσιμο περιεχόμενο.

Αφήστε κενό (null) το alt-text σε περίπτωση μιας απλής, διακοσμητικής εικόνας:

Αυτό λέει στους αναγνώστες οθόνης να αγνοήσουν την εικόνα.

Ενώ αν παραλείψετε εντελώς την ιδιότητα alt όπως στο επόμενο παράδειγμα, οι υποστηρικτικές τεχνολογίες ενδέχεται να διαβάσουν το όνομα του αρχείου εικόνας. Αυτό θα δημιουργήσει στον αναγνώστη σας μια πολύ κακή εμπειρία χρήστη – UX.

Να γράφετε πάντα alt-text για όλες τις άλλες εικόνες σας, που παρέχουν κάτι στον αναγνώστη και αν την δουν ή την διαβάσουν θα αποκομίσουν επιπλέον γνώση για το θέμα που τους ενδιαφέρει.

Για παράδειγμα:

• Εικόνες χρήσιμου κειμένου (π.χ. screenshots από αναρτήσεις σε social media).
• Εικονίδια που δηλώνουν λειτουργικότητα (π.χ. εικονίδιο καλάθι αγορών).
• Φωτογραφίες που παρέχουν συμπληρωματικές πληροφορίες (π.χ. σύγκριση μεγέθους με smartphone).
• Γραφήματα που απεικονίζουν δεδομένα που δεν μπορούν να αναφερθούν με άλλον τρόπο.
• Γραφικά που αναπαριστούν συγκεκριμένες διαδικασίες (π.χ. πώς να συναρμολογήσετε ένα μικροέπιπλο).

2. Να είστε περιγραφικοί αλλά συνοπτικοί

Το alt-text θα πρέπει να είναι η πιο συνοπτική και συνάμα ισχυρή περιγραφή του σκοπού της εικόνας που χρησιμοποιείτε.

Το τι είναι σημαντικό σε μια εικόνα, εξαρτάται από τα συμφραζόμενα. Λάβετε λοιπόν υπόψη σας το ύφος του περιεχομένου και το κοινό σας όταν προσπαθείτε να συντάξετε εναλλακτικό κείμενο σε μία εικόνα.

Για παράδειγμα, μία φωτογραφία με κάποιον να γυμνάζεται και να προσθέσετε ως alt-text “άνδρας κάνει γυμναστική“. Όμως μια λεπτομερής περιγραφή αναφερόμενη σε συγκεκριμένη διαδικασία π.χ. “άνδρας γυμνάζεται με βάρη“, είναι απαραίτητη για την φωτογραφία σας.

3. Συμπεριλάβετε μια λέξη-κλειδί

Η προσθήκη σχετικών λέξεων-κλειδιών σε alt-text, μπορεί να βοηθήσει τις εικόνες σας να καταταχθούν στα αποτελέσματα εικόνων σε στοχευμένες αναζητήσεις της Google.

Για παράδειγμα, αυτό το εναλλακτικό κείμενο ενημερώνει την Google ότι το ινφογράφημά μας για την προσβασιμότητα ιστοσελίδας, περιέχει μια χρήσιμη απεικόνιση των 5 απλών βημάτων για την προσβασιμότητα ιστοσελίδας:

Αυτό σημαίνει ότι θα ήταν ένα σχετικό αποτέλεσμα εικόνας στην Google, για ερωτήματα που σχετίζονται με την προσβασιμότητα ιστοσελίδας.

Δοκιμάστε την έρευνα λέξεων -κλειδιών με το Magic Tool Key από Semrush.

Εισαγάγετε μια λέξη-κλειδί που σχετίζεται με την εικόνα σας και κάντε κλικ στο κουμπί “Αναζήτηση“.

Το εργαλείο εμφανίζει λέξεις -κλειδιά που περιέχουν τη λέξη-κλειδί έναρξης (ή μια παραλλαγή) και θα δημιουργήσουν αποτελέσματα στις εικόνες. Οι παρακάτω λέξεις και φράσεις, είναι top υποψήφιοι για το SEO alt-text που θα χρησιμοποιήσετε στην εικόνα σας.

Παραδείγματα με Alt-Text σε εικόνες

Παράδειγμα 1: NASA

Το website της NASA παρουσιάζει στην αρχική του σελίδα μία φωτογραφία με ένα σπάνιο κοσμικό γεγονός: δύο συμπλέγματα γαλαξιών έχουν συγκρουστεί και τώρα είναι έτοιμα να γυρίσουν πίσω για άλλο ένα χτύπημα ο ένας στον άλλο.

alt=”Observations from Chandra and other telescopes have captured a powerful cosmic event: two galaxy clusters have collided and are now poised to head back for another swipe at each other. Galaxy clusters are some of the largest structures in the Universe held together by gravity. In these images, X-rays from Chandra and ESA’s XMM-Newton have been combined with LOFAR data and an optical image from Pan-STARRs of the stars and galaxies in the field of view.”

Η NASA παρέχει εξαιρετικά περιγραφικό alt-text για να εξασφαλίσει ότι οι χρήστες με οπτικές δυσλειτουργίες, μπορούν να καταλάβουν τι υπάρχει στη φωτογραφία.

Παράδειγμα 2: The Gurdian

Εδώ, η The Guardian χρησιμοποιεί την ιδιότητα εικόνας ALT και λεζάντες εικόνας, για να δώσει στους αναγνώστες και τις μηχανές αναζήτησης τις πληροφορίες που χρειάζονται:

Συμπερασματικά:

Μην ξεχνάτε ποτέ να συμπεριλαμβάνετε ένα alt-text σε εικόνες στην ιστοσελίδα σας. Για να έχει νόημα ένα εναλλακτικό κείμενο, θα πρέπει να τοποθετείται ΜΟΝΟ σε επεξηγηματικές εικόνες, που έχουν να προσφέρουν κάτι σε όποιον δεν έχει τη δυνατότητα να τις δει, αλλά μπορεί να τις “ακούσει”.

Επιπλέον, ένα σημαντικό στοιχείο σχετικά με την ιδιότητα ALT, είναι να την αφήνετε κενή “null” όταν οι φωτογραφίες σας υπάρχουν για διακοσμητικό λόγο αναρτημένες στην ιστοσελίδα σας. ΠΑΝΤΑ να συμπεριλαμβάνετε μία ιδιότητα ALT για τις εικόνες σας, ακόμα και αν είναι κενή. Διαφορετικά, οι αναγνώστες οθόνης, διαβάζουν συνήθως το όνομα του αρχείου εικόνας, π.χ. IMG-3284756 ή κάτι άλλο πολύ δυσνόητο, που υποβαθμίζει την προσβασιμότητα ιστοσελίδας και το UX.

Αυτό, εξυπηρετεί όχι μόνο τους επισκέπτες σας με προβλήματα όρασης αλλά και τις μηχανές αναζήτησης στο να κατανοήσουν το νόημα των εικόνων σας. Οι εικόνες σας κατατάσσονται σε μια καλύτερη- υψηλότερη θέση σε αναζητήσεις μέσω εικόνας στην Google, αναβαθμίζοντας με αυτόν τον τρόπο το SEO ιστοσελίδας σας.