Βελτιστοποιώντας εικόνες για SEO

Καθένας που παράγει online περιεχόμενο όπως bloggers, δημοσιογράφοι κλπ έρχεται αντιμέτωπος με το δίλημμα. Να χρησιμοποιήσω εικόνες που να συνοδεύουν το άρθρο ή blog post ή όχι; Η απάντηση είναι εύκολη: ΟΠΩΣΔΗΠΟΤΕ (συνήθως). Οι εικόνες δίνουν ζωή σε κάθε κείμενο, μία εικόνα χίλιες λέξεις κλπ. Αυτό που συνήθως αγνοούμε έιναι ότι με τη σωστή δουλειά πάνω στην εικόνα μπορούμε να την κάνουμε να βελτιώσει το SEO της σελίδας. Ας δούμε πώς:

Χρήση Εικόνων

Η επιλογή της κατάλληλης εικόνας/ων είναι σημαντική και βοηθά στην κατανόηση ενός άρθρου, στην ενδυνάμωση ενός επιχειρήματος κ.α. Κάποιοι έχουν μεγαλύτερο ταλέντο στην επιλογή εικόνας κάποιοι πρέπει να το καλλιεργήσουν. Όπως ένας καλός φωτογράφος από όλη την πραγματικότητα που τον περιβάλλει μπορεί και εστιάζει σε ένα κάδρο που παρόλο που το φυλακίζει στα πλαίσια μίας φωτογραφίας αυτό έχει τη δύναμη να αφηγείται μία ιστορία, έτσι και ο συγγραφέας πρέπει να επιλέγει μία εικόνα που είναι σε αρμομία (σσ. να αφηγείται την ίδια ιστορία) με το άρθρο του.

Επιλέγοντας τη σωστή εικόνα

Ιδανικά ανεβάζουμε δική μας εικόνα. Όπως και με το κείμενο είναι το ιδανικό να είμαστε οι δημιουργοί. Επίσης πρέπει να μας αφορά. Αν γράφουμε για την ομάδα μας πρέπει να δείξουμε την ομάδα μας και όχι κάποιο έτοιμο stock photo με μοντέλα. Μερικοί λόγοι για να βάλουμε εικόνες συνοδευτικές του περιεχομένου:
  • Δίνουν έμφαση στον τίτλο ή το θέμα του άρθρου / blog post
  • Αν είναι ενδιαφέρουσες προκαλούν τον χρήστη / αναγνώστη να μπει και να διαβάσει το άρθρο
  • Μπορούν να χρησιμοποιηθούν στα social media
Αν δεν υπάρχει τρόπος να χρησιμοποιήσουμε δικές μας εικόνες / φωτογραφίες υπάρχουν τρόποι να βρούμε ξεχωριστές εικόνες και όχι stock photos. Το γνωστό FlickR είναι μία καλή πηγή όμως για δημόσια χρήση πχ σε ένα production website θα πρέπει να επιλέξουμε εικόνες / φωτογραφίες που καλύπτονται από το Creative Commons License (εκτός και αν θέλουμε να αγοράσουμε οπότε δεν υπάρχει περιορισμός). Φυσικά το Creative Commons License δεν σημαίνει ότι είναι και άνευ όρων και θα πρέπει να διαβάσουμε προσεκτικά τους όρους της συγκεκριμένης άδειας για κάθε image που θέλουμε να χρησιμοποιήσουμε δημόσια. Μάθετε περισσότερα για τις άδειες Creative Commons στο Creative Commons Licenses, ενώ στο FlickR υπάρχει αποκλειστική σελίδα με υλικό με άδεια Creative Commons (cc). Και υπάρχουν και εργαλεία όπως το compfight.com. merry christmas vintage

Μπορούμε να βρούμε πολύ ωραίες vintage εικόνες με την άδεια Creative Commons

Γενικά όσο πιο αυθεντικό (και όχι stock) φαίνεται μία εικόνα τόσο καλύτερα είναι για την προβολή του περιεχομένου και για την εμπειρία του χρήστη. Εναλλακτικά μπορούμε να χρησιμοποιήσουμε καρτούν, animations, ακόμα και γραφήματα για να κάνουμε το κείμενό μας περισσότερο ενδιαφέρον και κατανοητό, ενώ τα τελευταία χρόνια την τιμητική τους έχουν τα animated gifs (όπως το παρακάτω). showcasing gif animation with ape blinking Χρήση των εικόνων στο κείμενο Από τη στιγμή που θα καταλήξουμε στην εικόνα, το επόμενο βήμα είναι να βελτιστοποιήσουμε την εικόνα για χρήση στον Ιστό. Ιδού μερικές απλές ενέργειες.

File Name

Επιλέξουμε ένα περιγραφικό όνομα αρχείου που όπως και η εικόνα καθεαυτή είναι συναφές με το κείμενο. Αν η φωτογραφία δείχνει ηλιοβασίλεμα στην Οία Σαντορίνη δεν αφήσουμε το file name DSC1524.jpg αλλά το μετονομάζουμε σε sunset-oia-santorini.jpg. Το κυρίως keyword μπαίνει στην αρχή του filename.

Scale – Κλιμακούμενες Εικόνες

Το κύριο μέλημα όταν εισάγουμε εικόνες, φωτογραφίες, γραφικά σε ιστοσελίδες είναι το μέγεθος τους. Οι ιστοσελίδες βαραίνουν σε μέγεθος αποκλειστικά λόγων των εικόνων και γραφικών, κάτι που επηρεάζει τους χρόνους φόρτωσης με αποτέλεσμα αρνητική εμπειρία χρήστη αλλά πλέον και αρνητικό αντίκτυπο στο SEO (οι μηχανές αναζήτησης λαμβάνουν σοβαρά τους χρόνους φόρτωσης). Αυτό ισχύει καταρχήν στον σχεδιασμό του website με τα γραφικά και τις εικόνες που είναι μέρος του design με ευθύνη του developer, αλλά ισχύει και στη μετέπειτα διαχείριση για οποιαδήποτε εικόνα ανεβαίνει στο site, με ευθύνη του διαχειριστή (webmaster). Σε κάθε περίπτωση το image πρέπει να είναι σε διαστάσεις που απαιτεί η θέση και η εμφάνιση του, πχ δεν βάζουμε εικόνα 3000px X 3000px σε θέση που θα εμφανιστεί σε διαστάσεις 300Χ300. Σχεδόν όλα τα συστήματα διαχείρισης περιεχομένου (όπως το WordPress) βοηθούν όταν κάνουμε upload ένα image, δίνοντας το σε διάφορες διαστάσεις (πχ small, medium, original κλπ). Αυτό δεν σημαίνει αυτόματα ότι η εικόνα είναι βελτιστοποιημένη, απλά αφορά μόνο το μέγεθος αρχείου.

Βελτιστοποίηση Μεγέθους Εικόνας

Επιλέγουμε πάντα τον κατάλληλο τύπο αρχείου. Για απλές φωτογραφίες όπου δεν χρειαζόμαστε κάποιου είδους διαφάνεια ο καλύτερος και ελαφρύτερος τύπος είναι το jpeg (.jpg) με Save for Web στο Photoshop και επιλογή ποιότητας 50%-60% είναι αρκετά για την καλύτερη σχέση μεταξύ ποιότητας / ανάλυσης και μεγέθους. Από εκεί και πέρα για περαιτέρω βελτιστοποίηση υπάρχουν πάρα πολλά εργαλεία, άλλα downloadable και άλλα online, άλλα δωρεάν, με trial accounts, free plans είτε πληρωτέα. Το Mashable έχει ένα πολύ καλό και αναλυτικό άρθρο για το θέμα, θα πρέπει όμως ν’ αποφασίσουμε και τι είδους συμπίεση θέλουμε, αν μας κάνει το lossy ή θέλουμε οπωσδήποτε lossless (καμία αλλαγή στα pixels).

Υπότιτλοι

Σε αντίθεση με το alt text και το file name, οι υπότιτλοι (captions) είναι το ορατό κείμενο που συνοδεύει την εικόνα. Συνήθως υπάρχει και οπτική (στυλιστική) διαφοροποίηση αυτού του κειμένου από το κυρίως κείμενο, με πχ μικρότερη γραμματοσειρά, πλαίσιο ή background χρώμα κλπ. Οι υπότιτλοι είναι πολύ σημαντικοί και για τις μηχανές αναζήτησης και για την εμπειρία χρήστη. Για τους χρήστες προσφέρουν έναν άμεσο τρόπο για scanning του κειμένου και γι αυτόν τον τρόπο πρώτης ανάγνωσης το περιγραφικό κείμενο που συνοδεύει τις εικόνες είναι ιδανικό για γρήγορη κατανόηση του κειμένου. Τα στοιχεία που βοηθούν στο scanning είναι οι κεφαλίδες, κείμενο bold ή υπογραμμισμένο, λίστες με bullets ή αριθμημένες, γραφικά, captions, quotations και πίνακες περιεχομένων. Από έρευνες έχει φανεί ότι οι χρήστες μίας ιστοσελίδας διαβάζουν τα captions των εικόνων μέχρι και 300% περισσότερο από το ίδιο το άρθρο. Συνεπώς η καθόλου ή η κακή χρήση τους σημαίνει ότι χάνουμε την ευκαιρία να προσεγγίσουμε το μεγαλύτερο μέρος του κοινού μας.

Εναλλακτικό κείμενο

Το alt text είναι το πιο γνωστό στοιχείο usability αλλά κυρίως και accessibility, γιατί είναι στην ουσία ο μόνος τρόπος να πληροφορηθεί ένας χρήστης το περιεχόμενο της εικόνας αν αυτή δεν είναι διαθέσιμη, είτε για λόγους τεχνικούς είτε ανθρώπινους (πχ προβλήματα όρασης). Επίσης κάθε html validator “χτυπάει” αν δεν υπάρχει alt text σε κάποιο image. Συνεπώς κάθε εικόνα στο site μας πρέπει να έχει το alt attribute. Γενικά
  • Διαλέγουμε σχετική εικόνα με το κείμενο
  • Δίνουμε περιγραφικό file name στην εικόνα
  • Οι πραγματικές διαστάσεις της εικόνας να ταιριάζουν με τις διαστάσεις εμφάνισης
  • Μειώνουμε το μέγεθος αρχείου για γρήγορη φόρτωση
  • Προσθέτουμε υπότιτλους (captions)
  • Χρησιμοποιούμε images στα XML Sitemaps

Sharing is caring!