Alt text: Οδηγός για SEO και προσβασιμότητα

Επισκόπηση

Το alt text (το attribute alt στα <img> στοιχεία) είναι μια σύντομη κειμενική περιγραφή μιας εικόνας, κυρίως για προσβασιμότητα και ως εναλλακτική όταν μια εικόνα δεν φορτώνει. Οι αναγνώστες οθόνης ανακοινώνουν το alt text σε χρήστες που είναι τυφλοί ή έχουν μειωμένη όραση, και μηχανές αναζήτησης χρησιμοποιούν το alt text ως ένα από αρκετά κειμενικά σήματα για το θέμα μιας εικόνας. Το alt text βοηθά την ευρετηρίαση παρέχοντας αναγνώσιμο κείμενο για εικόνες, αλλά είναι μόνο ένα σήμα ανάμεσα σε πολλά που επηρεάζουν τις κατατάξεις και την ορατότητα.

Γράψτε alt text για να περιγράψετε τις πληροφορίες που μεταφέρει η εικόνα στο κοινό στο οποίο απευθύνεται. Για καθαρά διακοσμητικές εικόνες χρησιμοποιήστε κενό alt attribute (<img src="..." alt="">) ώστε οι αναγνώστες οθόνης να τις παραλείπουν. Για σύνθετα γραφικά — διαγράμματα, infographics, διαγράμματα— παρέχετε συνοπτική περιγραφή κοντά στην εικόνα ή χρησιμοποιήστε τεχνικές ARIA/HTML για να δώσετε εκτενέστερη περιγραφή.

Βήμα-βήμα

1) Προσδιορίστε τον ρόλο της εικόνας: καθορίστε αν η εικόνα είναι πληροφοριακή, λειτουργική (π.χ. ένα κουμπί) ή διακοσμητική. Οι πληροφοριακές και λειτουργικές εικόνες χρειάζονται περιγραφικό alt text· οι διακοσμητικές πρέπει να χρησιμοποιούν κενό alt attribute.

2) Περιγράψτε συνοπτικά το ουσιώδες περιεχόμενο: γράψτε ό,τι χρειάζεται να γνωρίζει ένας χρήστης από την εικόνα. Κρατήστε το alt text σύντομο—στόχος να μεταφέρει την κύρια ιδέα σε μια πρόταση ή φράση. Παράδειγμα ενός τυπικού ενημερωτικού alt: <img src="/photos/harbor.jpg" alt="Κόκκινη ψαρόβαρκα ελλιμενισμένη σε βραχώδες λιμάνι στο ξημέρωμα">.

3) Αποφύγετε το keyword stuffing και τις πλεονάζουσες διατυπώσεις. Μην προθέτετε φράσεις όπως "εικόνα του" ή "φωτογραφία του"—οι αναγνώστες οθόνης ήδη αναφέρουν ότι πρόκειται για εικόνα. Κάντε το κείμενο χρήσιμο σε έναν ανθρώπινο αναγνώστη αντί για έναν ανιχνευτή.

4) Διαχειριστείτε τις λειτουργικές εικόνες και τα controls: αν μια εικόνα είναι σύνδεσμος ή κουμπί, περιγράψτε τη δράση που εκτελεί. Παράδειγμα: <img src="/icons/download.svg" alt="Λήψη δελτίου προϊόντος">. Αν το control έχει εμφανές κείμενο, το alt θα πρέπει να ταιριάζει με τη λειτουργία ή να είναι κενό αν το κείμενο ήδη μεταφέρει τη δράση.

5) Δώστε εκτενέστερες περιγραφές για σύνθετες εικόνες: χρησιμοποιήστε μια κοντινή λεζάντα, μια συνδεδεμένη αναλυτική περιγραφή, aria-describedby ή ορατό HTML κείμενο για να επεκτείνετε ένα γράφημα ή infographic. Για λεπτομέρειες ισοδύναμες με εκτυπωμένη αναπαράσταση (πίνακες δεδομένων, ετικέτες αξόνων), συμπεριλάβετε τα βασικά στοιχεία στο κείμενο της σελίδας.

6) Χρησιμοποιήστε συνεπείς επιμελητικές οδηγίες: δημιουργήστε σύντομες οδηγίες στυλ για τους συνεισφέροντες (στόχοι μήκους, πότε να συντομεύετε, κανόνες γλώσσας) και εφαρμόστε τις σε πρότυπα ή πεδία CMS ώστε το alt text να καταγράφεται αξιόπιστα σε κλίμακα.

Παραδείγματα HTML

Περιγραφική εικόνα: <img src="https://example.com/park.jpg" alt="Παιδί που πετάει έναν κόκκινο χαρταετό σε ένα αστικό πάρκο">. Διακοσμητική εικόνα: <img src="/decorative-divider.png" alt="">. Λειτουργική εικόνα που χρησιμοποιείται ως σύνδεσμος: <a href="/download"><img src="/icons/pdf.svg" alt="Λήψη έκθεσης σε PDF"></a>.

Επαλήθευση alt text: τεχνικός έλεγχος

**Presence of alt attributes** — πού να ελέγξετε: view-source, Chrome DevTools Elements ή curl (τραβήξτε το πλήρες HTML με curl χωρίς -I) — θεωρείται σωστό όταν κάθε ουσιαστικό <img> έχει attribute alt και οι διακοσμητικές εικόνες χρησιμοποιούν alt="".

**Rendered DOM for JS-inserted images** — πού να ελέγξετε: Chrome DevTools Elements (επιθεώρηση του τελικού DOM) — σωστό όταν οι εικόνες που είναι ορατές στους χρήστες περιλαμβάνουν κατάλληλο alt text και στο rendered DOM.

**Accessibility audit** — πού να ελέγξετε: Lighthouse στο Chrome DevTools ή ένα αυτοματοποιημένο εργαλείο προσβασιμότητας — σωστό όταν ο έλεγχος δεν αναφέρει ελλείπον alt text για ενημερωτικές εικόνες και επισημαίνει μόνο τις σκόπιμα διακοσμητικές εικόνες.

**Human-readability check** — πού να ελέγξετε: δειγματικός έλεγχος από συντάκτη περιεχομένου ή χρήση screen reader (NVDA, VoiceOver) — σωστό όταν το alt text μεταφέρει τις ίδιες χρήσιμες πληροφορίες με το οπτικό περιεχόμενο για χρήστες βοηθητικών τεχνολογιών.

**Indexability of page** — πού να ελέγξετε: για τις δικές σας σελίδες χρησιμοποιήστε Google Search Console URL Inspection· για σελίδες τρίτων χρησιμοποιήστε τον τελεστή site: ως ένδειξη — σωστό όταν η σελίδα είναι ανιχνεύσιμη (όχι αποκλεισμένη από robots.txt ή noindex) και το URL Inspection δείχνει ότι η σελίδα είναι γνωστή στην Google. Σημείωση: το site: είναι μόνο ένδειξη· το URL Inspection είναι αυθεντικό για σελίδες που κατέχετε.

Πρακτικές συμβουλές εργαλείων

Χρησιμοποιήστε curl για να κατεβάσετε το HTML της σελίδας με συγκεκριμένο user agent: curl -A "Mozilla/5.0 (Windows NT 10.0; Win64; x64)" https://example.com/page > page.html. Μην χρησιμοποιήσετε -I αν χρειάζεστε το σώμα. Ανοίξτε το αποθηκευμένο αρχείο σε έναν text editor ή τρέξτε έναν DOM parser για να βρείτε τις ετικέτες <img> και τα alt attributes τους.

Τρέξτε το Lighthouse (Chrome DevTools → Lighthouse) για να φέρετε στην επιφάνεια κοινά ζητήματα προσβασιμότητας, και δοκιμάστε με έναν screen reader (NVDA σε Windows, VoiceOver σε macOS) για να επιβεβαιώσετε την εμπειρία χρήστη.

Εάν χρησιμοποιείτε structured data που αναφέρει εικόνες (π.χ. Product ή Recipe schema), επικυρώστε το markup με το Rich Results Test ή Schema Markup Validator για να διασφαλίσετε ότι οι εικόνες που αναφέρονται σε JSON-LD υπάρχουν και είναι προσβάσιμες.

Συνήθη προβλήματα

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

Keyword stuffing: επανάληψη στοχευμένων λέξεων-κλειδιών ή ονομάτων εμπορικών σημάτων στα alt attributes με αφύσικο τρόπο. Αυτό προσφέρει κακή εμπειρία και μπορεί να αγνοηθεί από τις μηχανές αναζήτησης.

Χρήση ονομάτων αρχείων ή γενικών φράσεων (π.χ. "image1.jpg", "picture") ως alt text, που δεν είναι χρήσιμες για τεχνολογίες βοηθείας ή για ευρετηρίαση.

Εμπιστοσύνη στο title attribute αντί για alt για κρίσιμες πληροφορίες· πολλοί αναγνώστες οθόνης δεν παρουσιάζουν το title με συνέπεια.

Το να πιστεύετε ότι το alt text από μόνο του ελέγχει την κατάταξη των εικόνων. Το alt text βοηθά τις μηχανές αναζήτησης να κατανοήσουν τις εικόνες, αλλά η ευρετηρίαση και η ορατότητα εξαρτώνται από το πλαίσιο της σελίδας, το structured data, την ανιχνευσιμότητα (crawlability) και άλλα σήματα.

Εάν οι εικόνες εισάγονται client-side με JavaScript, οι συντάκτες μερικές φορές ξεχνούν να συμπεριλάβουν alt attributes στο rendered DOM· επιθεωρείτε πάντα το τελικό DOM, όχι μόνο το server HTML.

Διαβάστε τον Τεχνικό Οδηγό SEO

Συχνές ερωτήσεις

Q: Πόσο μακρύ πρέπει να είναι το alt text; A: Επιδιώξτε σύντομες περιγραφές που επικοινωνούν τον σκοπό της εικόνας. Μια σύντομη πρόταση ή φράση συνήθως αρκεί· για σύνθετα γραφικά δώστε εκτενέστερη προσβάσιμη περιγραφή αλλού στη σελίδα.

Q: Επηρεάζει το alt text την κατάταξη SEO; A: Το alt text παρέχει ένα κειμενικό σήμα που μπορεί να βοηθήσει την ευρετηρίαση και τη σχετικότητα στην αναζήτηση εικόνων, αλλά από μόνο του δεν καθορίζει την κατάταξη. Οι κατατάξεις εξαρτώνται από πολλά σήματα, όπως η συνάφεια της σελίδας, το structured data, η ανιχνευσιμότητα και η συνολική ποιότητα περιεχομένου.

Q: Πρέπει οι διακοσμητικές εικόνες να έχουν alt text; A: Όχι. Οι διακοσμητικές εικόνες πρέπει να χρησιμοποιούν κενό alt attribute (alt="") ώστε να αγνοούνται από τους αναγνώστες οθόνης και να μην προσθέτουν θόρυβο στην εμπειρία προσβασιμότητας.

Q: Μπορούν τα αυτοματοποιημένα εργαλεία να δημιουργήσουν αποδεκτό alt text; A: Οι αυτόματες προτάσεις από CMS ή η αναγνώριση εικόνας μπορούν να βοηθήσουν, αλλά πάντα να ελέγχετε και να επεξεργάζεστε το μηχανικά δημιουργημένο alt text για ακρίβεια, σαφήνεια και ζητήματα ιδιωτικότητας πριν τη δημοσίευση.

Q: Τι γίνεται με εικόνες σε CSS backgrounds; A: Οι εικόνες υποβάθρου CSS δεν εκτίθενται ως <img> στοιχεία και δεν έχουν alt attribute· οποιοδήποτε πληροφοριακό περιεχόμενο σε εικόνα υποβάθρου πρέπει να παρουσιαστεί σε HTML ώστε να είναι προσβάσιμο.

Το τεχνικό SEO είναι μόνο ένα μέρος της οργανικής ανάπτυξης. Η δημιουργία θεματικής εξουσίας απαιτεί ποιοτικά backlinks και ευρετηριασμένο, προσβάσιμο περιεχόμενο—σκεφτείτε ελεγμένες αγορές και συνεργασίες που δίνουν προτεραιότητα στην indexability των publisher και στο editorial context.Κτίστε αξιοπιστία με ποιοτικά backlinks