Η κατασκευή ενός online store είναι πρακτικά το αντίστοιχο με τη δημιουργία μιας βιτρίνας καταστήματος σε έναν πολυσύχναστο εμπορικό δρόμο. Θα πρέπει να αποπνέει φιλοξενία και να είναι ποιοτικά κατασκευασμένo, ώστε να προσελκύει το κοινό με την πρώτη ματιά. Θα πρέπει λοιπόν να δώσετε βάση στην προσεκτική οργάνωση της αρχικής σας σελίδας, στη βελτιστοποίηση των σελίδων προϊόντων και της συνοχής του branding σε στυλ και έκφραση. Αυτό ισχύει και για τα οπτικά στοιχεία του site σας και εδώ είναι που μπαίνει στο παιχνίδι το image alt text.
Είναι ένα σημείο που λόγω της τοποθέτησής του είναι εύκολο να το παραβλέψετε όμως, είχε μεγάλη σημασία τόσο για την εμπειρία χρήστη όσο και για το SEO και την κατάταξη στις μηχανές αναζήτησης. Είναι ουσιαστικά ένα στοιχείο του "backstage" που ότι όλοι γνωρίζουν τι βλέπουν, ανεξάρτητα από τον τρόπο πλοήγησης στο eshop σας.
Τι είναι το image alt text;
Για αρχή ας εξετάσουμε ποιο ακριβώς είναι αυτό το στοιχείο. Το image alt text ή εναλλακτικό κείμενο είναι η σύντομη γραπτή περιγραφή μιας εικόνας σε μια ιστοσελίδα. Το στοιχείο αυτό παίζει καθοριστικό ρόλο στην προώθηση της προσβασιμότητας ενός site, καθιστώντας το περιεχόμενο πιο προσιτό για άτομα που δεν μπορούν να δουν το περιεχόμενο της εικόνας και βελτιώνοντας το συνολικό SEO του online store σας.
Το χαρακτηριστικό alt παρέχει ένα ισοδύναμο κειμένου για εικόνες, είτε μέσω μιας σύντομης φράσης είτε μέσω μιας μακροσκελούς περιγραφής. Ένα κενό κείμενο alt και οι κακογραμμένες περιγραφές εμποδίζουν την προσβασιμότητα και σας εμποδίζουν να εκμεταλλευτείτε αποτελεσματικά το SEO. Σε έρευνα που διεξήχθη το 2024 διαπιστώθηκε ότι το ένα τρίτο των εικόνων στις αρχικές σελίδες έχουν ελλιπές, αμφισβητήσιμο ή επαναλαμβανόμενο κείμενο alt. Αφού λοιπόν στήσετε το eshop σας, αφιερώστε λίγο χρόνο για τις περιεγραφές alt ώστε να υποστηρίξετε με ουσιαστικό τρόπο το πώς βιώνουν οι χρήστες βιώνουν το content σας.

Ποια είναι η διαφορά μεταξύ alt text και περιγραφή εικόνας;
H περιγραφή ή λεζάντα εικόνας, εάν και όταν χρησιμοποιείται, εμφανίζεται πάντα ορατά στην ιστοσελίδα σε κάποιο σημείο πλησίον της εικόνας. Μια περιγραφή εικόνας θα πρέπει να παρέχει πρόσθετες πληροφορίες ή πλαίσιο πέρα από αυτό που θα μπορούσε να αντιληφθεί κάποιος που κοιτάζει την εικόνα ή συχνά παραθέτει την πηγή από την οποία έχει παρθεί. Από την άλλη, το image alt text είναι κρυφό και εμφανίζεται μόνο εάν η εικόνα δεν φορτώνεται. Όσοι χρησιμοποιούν πρόγραμμα ανάγνωσης οθόνης θα ακούσουν το κείμενο αλλά δεν θα το διαβάσουν, οπότε το κείμενο θα πρέπει να περιγράφει με σαφήνεια και συντομία την εικόνα για κάποιον που δεν μπορεί να τη δει.
Γιατί είναι σημαντικό το κείμενο alt;
Προσβασιμότητα
Πλέον η προσβασιμότητα δεν είναι μόνο ένα κομμάτι ηθικό είναι ουσιαστικά ένα μέσο για να μπορέσετε να προσεγγίσετε περισσότερους πελάτες. Τα άτομα με προβλήματα όρασης μπορεί να χρησιμοποιούν υποστηρικτική τεχνολογία, όπως προγράμματα ανάγνωσης οθόνης. Αυτά τα εργαλεία διαβάζουν δυνατά την περιγραφή του κειμένου alt μιας εικόνας. Με ένα κενό image alt text, οι χρήστες προγραμμάτων ανάγνωσης οθόνης θα χάσουν το σημαντικό πλαίσιο των εικόνων στις σελίδες σας, ιδίως όταν πρόκειται για αγοραστική πρόθεση όπου οι περιγραφές ουσιαστικά θα τους κατατοπίσουν για το τι πρόκειται να αγοράσουν.
Επιπλέον, ένα προσβάσιμο site σημαίνει ότι περισσότεροι δυνητικοί πελάτες μπορούν να ασχοληθούν με την επιχείρησή σας. Μάλιστα, ο Παγκόσμιος Οργανισμός Υγείας εκτιμά ότι 3,5 δισ. άνθρωποι θα χρειαστούν κάποιο είδος υποστηρικτικής τεχνολογίας μέχρι το 2050 λόγω γήρανσης και άλλων παραγόντων, πέραν των χρηστών με προβλήματα όρασης. Συνεπώς λύσεις όπως οι αναγνώστες οθόνης θα γίνουν όλο και πιο συνηθισμένες.
Εμπειρία χρήστη (UX)
Η σύνδεση χαμηλού bandwidth, οι αργές ταχύτητες internet ή μια κακή σύνδεση μπορεί να περιορίσει τη δυνατότητα ενός χρήστη να προβάλει ιστοσελίδες. Όταν ένας χρήστης έχει αργή σύνδεση στο διαδίκτυο ή διακοπτόμενο πρόβλημα συνδεσιμότητας, οι εικόνες αποτυγχάνουν να φορτώσουν, αλλά τα περισσότερα προγράμματα περιήγησης μπορούν ακόμα να φορτώσουν γραπτό περιεχόμενο. Όταν μια εικόνα αποτυγχάνει, ο χρήστης θα δει μόνο ένα εικονίδιο σπασμένου συνδέσμου, εάν δεν έχετε προσθέσει περιγραφικό image alt text.
Για να παρέχετε καλύτερη εμπειρία στον χρήστη -ειδικά αν η εικόνα περιλαμβάνεται για να παρέχει ουσιαστικό πλαίσιο- συμπεριλάβετε το χαρακτηριστικό alt text, ώστε οι χρήστες να μην χάνουν πληροφορίες σε περίπτωση κακής σύνδεσης.
Βελτιστοποίηση μηχανών αναζήτησης (SEO)
Στο eCommerce, το κείμενο alt βελτιώνει την κατάταξη στην αναζήτηση για να αυξήσει την επισκεψιμότητα σας. Bοηθά τις μηχανές αναζήτησης να κατανοήσουν τις εικόνες στις ιστοσελίδες σας. Το image SEO βοηθά τις μηχανές αναζήτησης στην κατηγοριοποίηση και την κατάταξη των εικόνων σε όλο το διαδίκτυο. Όταν δίνετε στις μηχανές αναζήτησης κειμενικές λεπτομέρειες μέσω των χαρακτηριστικών alt text, η εικόνα θα έχει βελτιωμένη κατάταξη αναζήτησης και θα είναι πιο πιθανό να εμφανιστεί στα αποτελέσματα αναζήτησης.
Όσο πιο συγκεκριμένοι είστε, τόσο πιο πιθανό είναι η εικόνα σας να εμφανιστεί στην κορυφή της σελίδας αποτελεσμάτων της μηχανής αναζήτησης (SERP). Το image alt text αποτελεί βασικό παράγοντα μιας επιτυχημένης στρατηγικής SEO για τις σελίδες προϊόντων του eshop σας.

Πώς να προσθέσετε alt text στις εικόνες σας;
Τα περισσότερα CMS διαθέτουν ένα απλό πεδίο εναλλακτικού κειμένου για την προσθήκη του περιεχομένου σας. Μπορείτε λοιπόν να το συμπληρώσετε ή να το επεξεργαστείτε από το ορισμένο πλαίσιο, ανάλογα την πλατφόρμα που χρησιμοποιείτε. Εάν χρησιμοποιείτε ακατέργαστο HTML για να κωδικοποιήσετε τις ιστοσελίδες σας, χρησιμοποιήστε το χαρακτηριστικό alt στην ετικέτα <img>. Για παράδειγμα:
<img src=“image.jpg” alt=“Το εναλλακτικό σας κείμενο εδώ”>
Πώς θα προσθέσετε alt text στις εικόνες προϊόντων στο Shopify
1. Στο Shopify admin, μεταβείτε στην κατηγορία Products.

2. Κάντε κλικ στο όνομα του προϊόντος που θέλετε να επεξεργαστείτε.
3. Στη σελίδα λεπτομερειών προϊόντος, κάντε κλικ σε ένα στοιχείο πολυμέσων προϊόντος για να δείτε τη σελίδα προεπισκόπησης.

4. Κάντε κλικ στο πεδίο image alt text.

5. Συμπληρώστε το και κατόπιν κάντε κλικ στο Save.

6. Κάντε κλικ στο κουμπί πίσω για έξοδο από τη σελίδα προεπισκόπησης.
Εάν η διαδικασία σας δυσκολεύει ή έχετε μεγάλο όγκο προϊόντων, επικοινωνήστε με τους Eshop Experts για να σας βοηθήσουν.
Πώς θα γράψετε ένα αποτελεσματικό image alt text
Είτε περιγράφετε απλές είτε σύνθετες εικόνες, το χρήσιμο κείμενο alt θα πρέπει να βελτιώνει την εμπειρία του χρήστη. Για να γράψετε αποτελεσματικό κείμενο alt, υπάρχουν μερικές βέλτιστες πρακτικές που πρέπει να ακολουθήσετε:
Να είστε συγκεκριμένοι αλλά περιεκτικοί
Περιγράψτε επαρκώς το περιεχόμενο της εικόνας για να σχηματίσετε την εικόνα για τον χρήστη. Αν είναι κατάλληλο για το πλαίσιο, περιγράψτε τι μεταφέρει η εικόνα και όχι μόνο τις φυσικές λεπτομέρειες. Στις περιγραφές προϊόντων φροντίστε να επικεντρωθείτε σε χαρακτηριστικά και πληροφορίες που αναφέρονται στην ποιότητα και το brand του προϊόντος. Το μέγιστο μήκος για το alt text στο Shopify είναι 512 χαρακτήρες, αλλά 125 ή λιγότεροι είναι ιδανικοί.

Μην περιλαμβάνετε το «εικόνα με» στην αρχή του image alt text, επειδή οι τεχνολογίες ανάγνωσης οθόνης το προσθέτουν αυτόματα και θα οδηγήσει σε ένα ενοχλητικό αποτέλεσμα για τους χρήστες καθώς θα ακούνε «Εικόνα με εικόνα με [περιγραφή]».
Αποφύγετε το διπλότυπο κείμενο
Εάν μια εικόνα μεταφέρει το ίδιο μήνυμα που υπάρχει ήδη στο περιβάλλον κείμενο, αποφύγετε τη χρήση του ίδιου λεξιλογίου. Για παράδειγμα, εάν ένα infographic που δημιουργήθηκε αποκλειστικά για οπτική επικοινωνία περιλαμβάνει διπλότυπο κείμενο από το σώμα της ιστοσελίδας, δεν υπάρχει λόγος να επαναλάβετε αυτές τις πληροφορίες. Απλώς περιγράψτε τι πραγματεύεται το infographic χωρίς να επαναλαμβάνετε όλες τις ίδιες πληροφορίες.
Χρησιμοποιήστε λέξεις-κλειδιά
Φυσικά σε ένα βελτιστοποιημένο image alt text θα πρέπει να περιλαμβάνονται σχετικές λέξεις-κλειδιά με φυσικό τρόπο. Αναλύστε λοιπόν την πρόθεση αναζήτησης των χρηστών: αν π.χ. αναζητούν για παπούτσια εντοπίστε τους συγκεριμένους όρους όπως "γυναικεία σανδάλια με τακούνι". Αποφύγετε όμως το keyword stuffing μιας και αυτή η τακτική μπορεί εν τέλει να σας ζημιώσει. Οι αλγόριθμοι μπορούν εύκολα να ανιχνεύσουν όταν έχετε απλώς ένα συνονθύλευμα λέξεων-κλειδιών στον ιστότοπό σας χωρίς καμία συνοχή ή λογική.

Παραλείψτε το κείμενο alt στις εικόνες background
Οι καθαρά διακοσμητικές εικόνες ή εικόνες background, μιας και πρόκειται για απλά γραφικά σχέδια, δεν πρέπει να περιλαμβάνουν image alt text. Εάν η περιγραφή μιας διακοσμητικής εικόνας δεν προσδίδει πολύτιμες πληροφορίες στον χρήστη, το κείμενο alt δεν είναι απαραίτητο. Για παράδειγμα, φανταστείτε ότι κάποιος ακούει την εντυπωσιακή ιστορία επιτυχίας του πελάτη σας μέσω του προγράμματος ανάγνωσης οθόνης και διακόπτεται από την «Εικόνα ενός πράσινου στροβιλιζόμενου γραφικού σχεδίου». Σίγουρα η εμπειρία του δεν θα είναι και η πιο συνεκτική.
Για διακοσμητικές εικόνες, ένα κενό χαρακτηριστικό alt (alt=«») σηματοδοτεί στους αναγνώστες οθόνης να παραλείψουν την εικόνα.
Τώρα λοιπόν που είδαμε όλα τα χρήσιμα σημεία γύρω από το image alt text εξετάστε και εσείς αν το eshop σας είναι βελτιστοποιημένο και παρέχει μια προσβάσιμη εμπειρία χρήστη σε όλους τους επισκέπτες.