18Νοέ

ALT Text: Πώς να το εκμεταλλευτείτε/χρησιμοποιήσετε σωστά.

, 18 Νοεμβρίου 2008 | VARIOUS SEO TIPS | 0 Σχόλια

Το ALT attribute ουσιαστικά είναι το κείμενο που περιγράφει μια εικόνα. Οι περισσότεροι web designers δεν δίνουν ιδιαίτερη σημασία σε αυτή την πολύ σημαντική παράμετρο των γραφικών μιας σελίδας, με αποτέλεσμα να παρατηρείται συνήθως 1 από τα 2 «λάθη» ή καλύτερα «ελλείψεις» που ακολουθούν:

Δεν υπάρχει ALT κείμενο

Ο καλύτερος τρόπος, για να περιγράψετε σε έναν άνθρωπο με περιορισμένη όραση τι θα έπρεπε να βλέπει στην σελίδα σας, είναι κάνοντας μια γραπτή περιγραφή των συνοδευτικών εικόνων, έτσι ώστε ο Voice Browser του να του «διαβάσει» αυτά που βλέπει. Το κείμενο αυτό που περιγράφει μια εικόνα, βρίσκεται στο ALT attribute. Επομένως, όταν δεν έχετε ALT, δυσκολεύετε ή ακόμα χειρότερα, εμποδίζετε εντελώς τους χρήστες με περιορισμένη όραση, να καταλάβουν τι υπάρχει στην ιστοσελίδα σας. Κάθε φορά που γίνεται αυτό, χάνετε και έναν χρήστη ο οποίος είναι και πιθανός πελάτης.

Παράδειγμα κενού ALT attribute.

<p>
Κείμενο το οποίο αποτελεί και περιεχόμενο της ιστοσελίδας σας η οποία αναφέρεται στο ποδόσφαιρο.
<img src=»goal.jpg»/>
Συνέχεια του κειμένου μετά από την εισαγωγή της φωτογραφίας/εικόνας.
</p>

Στο παραπάνω παράδειγμα, δεν υπάρχει ALT attribute. Αυτό πρέπει να το αποφεύγετε. Για να είσαστε σύμφωνοι με τα web standards θα πρέπει τουλάχιστον να παρέχετε στο χρήστη ένα άδειο ALT attribute έστω και αν έτσι δεν του παρέχετε καμιά πληροφορία.

Το ALT κείμενο δεν περιγράφει την φωτογραφία

Είναι πολλοί αυτοί που δικαίως υποστηρίζουν πως η ημιμάθεια είναι χειρότερη από την αμάθεια. Γι’ αυτό το λόγο, το ALT attribute πρέπει να συμπληρώνεται με προσοχή, έχοντας σαν στόχο να περιγράφει μια εικόνα με όσο το δυνατόν μεγαλύτερη λεπτομέρεια και όχι να περιέχει π.χ. το όνομα του γραφικού που χρησιμοποιείται. ALT κείμενα με άστοχο περιεχόμενο που απλά δεν σημαίνουν τίποτα μπορεί να είναι Valid σύμφωνα με τα web standards, αλλά αποτελούν παραπλανητικά στοιχεία μιας ιστοσελίδας μπερδεύοντας τους χρήστες, με αποτέλεσμα να τους διώχνουν.

Παράδειγμα κακογραμμένου ALT attribute.

<p>
Κείμενο το οποίο αποτελεί και περιεχόμενο της ιστοσελίδας σας η οποία αναφέρεται στο ποδόσφαιρο.
<img src=»goal.jpg» alt=»γραφικό 5″ title=»»/>
Συνέχεια του κειμένου μετά από την εισαγωγή της φωτογραφίας/εικόνας.
</p>

Περιγράφοντας την εικόνα που είναι στη σελίδα αυτή με τον όρο «γραφικό 5», ο χρήστης που διαβάζει το ALT attribute καταλαβαίνει ότι αυτή η σελίδα έχει μια εικόνα/γραφικό αλλά δεν ξέρει τι δείχνει. Δείχνει εικόνα από τον αγώνα; Περιέχει ένα banner; Είναι κάποιος γραφικός τίτλος; Στο συγκεκριμένο παράδειγμα ο Web Designer δεν έχει περιγράψει τι δείχνει το γραφικό και ο τελικός χρήστης απλά δεν μπορεί να καταλάβει τίποτα.

Παράδειγμα καλογραμμένου ALT attribute.

Παρακάτω ακολουθεί ένα παράδειγμα σωστής χρήσης του ALT.

<p>
Κείμενο το οποίο αποτελεί και περιεχόμενο της ιστοσελίδας σας η οποία αναφέρεται στο ποδόσφαιρο.
<img src=»goal.jpg» alt=»Ο Τάδε κάνει το σκορ 2-0 με αριστερό πλασέ, ύστερα από σέντρα του Δείνα στο 80′.» title=»»/>
Συνέχεια του κειμένου μετά από την εισαγωγή της φωτογραφίας/εικόνας.
</p>

Αυτή είναι μια σωστή εισαγωγή ALT attribute.

Η σωστή περιγραφή όμως ενός ALT attribute δεν βοηθάει μόνο τους χρήστες με περιορισμένη όραση, ή εμάς τους Web Designers να έχουμε σωστό valid κώδικα. Ένας άλλος σημαντικός λόγος για τον οποίο πρέπει να χρησιμοποιείται το ALT είναι γιατί οι μηχανές αναζήτησης το διαβάζουν και καταλαβαίνουν τι περιέχει η σχετική εικόνα. Έτσι, μπορούν να την κάνουν index και να την τοποθετήσουν στο κατάλληλο σημείο της βάσης τους μέχρι κάποιος να την αναζητήσει.

Βασικοί κανόνες συγγραφής ενός ALT κειμένου

Ο καλύτερος τρόπος για να γράψετε σωστά ένα ALT κείμενο είναι να ακολουθήσετε τους παρακάτω βασικούς κανόνες:

  1. Μην πλατειάζετε. Λίγες λέξεις συνήθως είναι αρκετές εκτός και αν το απαιτεί η περίσταση. Ίσως αν θέλετε να αναπτύξετε περισσότερο, θα ήταν προτιμότερο να εκμεταλλευτείτε το συνοδευτικό κείμενο της σελίδας.
  2. Μην χρησιμοποιείτε φράσεις όπως «εικόνα του…», «φωτογραφία της…», κλπ. Εφόσον είναι μέσα σε γραφικό αυτό που περιγράφετε δεν μπορεί παρά να είναι εικόνα.
  3. Μην επαναλαμβάνετε στο ALT κείμενο σας ό,τι γράφετε και στο συνοδευτικό κείμενο της ιστοσελίδας σας. Χρησιμοποιήστε το ALT για να περιγράφετε την εικόνα σαν εικόνα.
  4. Γραφικά που δεν έχουν κάποιο ρόλο στην σελίδα πέραν του διακοσμητικού, είναι προτιμότερο να έχουν κενό ALT attribute.
  5. Προσπαθήστε να περιγράφετε με λόγια το περιεχόμενο της εικόνας σας.
  6. Προσπαθήστε να περιγράφετε τις ενέργειες που τυχόν εξελίσσονται στην εικόνα σας ή τις λειτουργίες της.

Σημεία εφαρμογής του ALT

Γραφικά και εικόνες υπάρχουν πολλά σε μια σελίδα. Κάθε γραφικό και εικόνα έχει το ρόλο της και σε κάθε ρόλο αντιστοιχεί και ένα ALT attribute. Ακολουθεί μια σύντομη λίστα με πιθανούς «τύπους» γραφικών και το αντίστοιχο ALT που θα πρέπει να έχουν:

  1. Τύπος: Λογότυπο
    ALT: Όνομα εταιρίας που αντιπροσωπεύει το λογότυπο
  2. Τύπος: Τίτλος
    ALT: Ό,τι γράφει ο τίτλος
  3. Τύπος: Μενού από γραφικά
    ALT: Όνομα σελίδας την οποία θα επισκεφτεί ο χρήστης αν κάνει κλικ στο κουμπί.
  4. Τύπος: Φωτογραφία
    ALT: Περιγραφή του περιεχομένου ή/και της λειτουργίας της φωτογραφίας.
  5. Τύπος: Διακοσμητικό γραφικό
    ALT: Κενό, χωρίς περιγραφή
  6. Τύπος: Διαφημιστικό banner
    ALT: Όνομα του προϊόντος ή της εταιρίας που διαφημίζεται.
  7. Τύπος: Background images
    ALT: Κενό, χωρίς περιγραφή

Επίλογος

Το ALT, αν και εύκολο στην όψη έχει σημαντική βαρύτητα γιατί μπορεί να κρίνει την επόμενη κίνηση κάποιου χρήστη με ειδικές ανάγκες ο οποίος είναι και πιθανός πελάτης ή αναγνώστης του website σας (ή του πελάτη σας), αλλά και να κρατήσει μακριά ή να έλξει αναλόγως τις μηχανές αναζήτησης. Αξίζει την προσοχή σας και είναι σίγουρο πως με τη σωστή χρήση, το ALT attribute θα σας προσφέρει πολλά.

ΧΡΗΣΙΜΗ ΠΛΗΡΟΦΟΡΙΑ: Το άρθρο ALT Text: Πώς να το εκμεταλλευτείτε/χρησιμοποιήσετε σωστά. γράφτηκε από το WebDesignBlog. Η ομάδα μας σας υπενθυμίζει πως αν θέλετε να ενημερώνεστε για τα νέα του διαδικτύου και για επιλεγμένα άρθρα μας, μπορείτε να γραφτείτε εύκολα στο Newsletter μας ή στο RSS Feed μας.

Ο Σπύρος Παπασπυρόπουλος είναι βραβευμένος Web Professional που δραστηριοποιείται στον χώρο του επαγγελματκού Web Design και του Search Engine Optimisation (SEO) από το 1999. Το 2004 ίδρυσε μαζί με τον Γιάννη Ευσταθίου την βραβευμένη εταιρία x2interactive Web Agency και το 2008 το Web Design Blog.

Σχολιάστε

Back to top

Recent comments

  • Ευχαριστούμε για το σχόλιο Ευγενία. Δυστυχώς δεν γνωρίζουμε αν υπάρχει παρόμοια γραμματοσειρά με την ENGLAND HAND στα Ελληνικά.

    10 δωρεάν καλλιγραφικές γραμματοσειρές
  • Πολύ χρήσιμο άρθρο. Ο αλγόριθμος της Google εξελίσσεται και μαζί του και η τέχνη του seo. Θα έλεγα ότι ωθεί τους seo experts σε μια πιο ολιστική προσέγγιση της online παρουσίας των πελατών τους. Αυτο σημαίνει ότι θα πρέπει να εμπλακούν σε θέματα content strategy, branding και social media γιατί η Google συνυπολογίζει όλα αυτά όταν αποφασίζει για το ranking μιας ιστοσελίδας. Ειδικά το content είναι το κλειδί στην νέα εποχή του search engine optimization. Θα πρέπει να δημιουργείται έχοντας στο μυαλό μας κυρίως τον επισκέπτη της ιστοσελίδας μας και λιγότερο τις μηχανές αναζήτησης. Θα πρέπει να προσθέτει πραγματικό value στους αναγνώστες του και ιδεατά να έχει χαρακτηριστικά που να συμβάλλουν στη δημιουργία buzz στα social media. Με τον τρόπο αυτό θα δημιουργηθούν με φυσικό τρόπο

    Google Panda 3.3, Google Venice και 38 επιπλέον αλλαγές στον αλγόριθμο της Google

Latest From Twitter