i veltistopoihsh eikonon gia seo

Εξετάζουμε πρώτα, το γιατί οφείλουμε να έχουμε εικόνες και γραφικά στο περιεχόμενο της ιστοσελίδας μας. Η παρουσία εικόνων στα άρθρα, στα κείμενα και γενικότερα στη δομή ενός ιστοχώρου βοηθάει τόσο την εμπειρία χρηστών όσο και τις μηχανές που μας κατατάσσουν. Χρειάζεται λοιπόν να έχουμε εικόνες ? Η απάντηση είναι ξεκάθαρα ΝΑΙ. Ας δούμε και τους λόγους:

 

  • Ζωντανεύουν το κείμενο και το κάνουν πιο ελκυστικό (εμπειρία χρήστη)
  • Προσθέτουν συναίσθημα στην ανάγνωση (εμπειρία χρήστη)
  • Αναπαριστούν περιεχόμενο με οπτικό τρόπο (1 εικόνα 1000 λέξεις) (εμπειρία χρήστη)
  • Παρέχουν συμπυκνωμένη πληροφορία (διαγράμματα, infographics) (εμπειρία χρήστη)
  • Δεσμεύουν το μάτι του αναγνώστη και κεντρίζουν το ενδιαφέρον (εμπειρία χρήστη)
  • Συμμετέχουν στο SEO (βοηθάει τις μηχανές αναζήτησης)

 

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

  1. Τη ταχύτητα φόρτωσης των εικόνων (load time, download size)
  2. Το μέγεθος και η προβολή των εικόνων (dimensions, size)
  3. Τα χαρακτηριστικά και τις ιδιότητες (attributes)

 

Οι ταχύτητες φόρτωσης των εικόνων

Οι ταχύτητες με τις οποίες κατεβαίνουν οι εικόνες κατά την επίσκεψη σε μία ιστοσελίδα, αποτελεί κύριο παράγοντα βελτίωσης των επιδόσεων μας, αφού αποκτούν  όλο και περισσότερη βαρύτητα στους μηχανισμούς αξιολόγησης. Σε μία εποχή που τα πάντα κινούνται σε υψηλούς ρυθμούς μετάδοσης Mbps, η αργή φόρτωση εικόνων ενός website, είναι άμεσα συνδεδεμένη με το βαθμό κατάταξης (αλλά και με την εμπειρία χρήστη).

Η βελτίωση ταχύτητας φόρτωσης των εικόνων

  • Χρησιμοποιούμε ιστοσελίδες, εργαλεία ή υπηρεσίες συμπίεσης εικόνων, όπως τα: Jpegmini, ImageOptim ή και επαγγελματικά software (Photoshop) βελτιώνοντας αισθητά το μέγεθος (file size) των εικόνων. Χρειάζεται ωστόσο προσοχή, ώστε η συμπίεση που θα γίνει να μη πληγώσει τη ποιότητα που τελικά φτάνει στην οθόνη του αναγνώστη.
  • Αφαιρούμε δεδομένα EXIF από τα χαρακτηριστικά του αρχείου εικόνας (δεδομένα που περιλαμβάνουν πχ το κατασκευαστή, την ημερομηνία, τη ταχύτητα κλείστρου, το τύπο συμπίεσης κτλ).
  • Ελέγχουμε εάν η βελτιστοποίηση (συμπίεση) είναι επιτυχημένη μετά τη παρέμβαση μας με εργαλεία υπηρεσιών (όπως πχ το Υslow), ως προς τη συμπεριφορά φόρτωσης στο χρόνο.

Σε κάθε περίπτωση, πρέπει να θυμόμαστε, οι εικόνες να φτάνουν στον αποδέκτη, στο μικρότερο δυνατό μέγεθος αρχείου και αντίστοιχα επιλέγουμε και τη βέλτιστη μορφή αρχείου (.jpeg, .png, .gif κτλ.) για να επιτύχουμε το σκοπό μας. Η google αξιολογεί τη ταχύτητα ενός website (στη σελίδα Pagespeed Insights) δίνοντάς του βαθμολογία έως το 100, και ένας από τους σημαντικότερους παράγοντες που αναδεικνύεται είναι το μέγεθος των εικόνων.

 

Το μέγεθος προβολής των εικόνων

Ένα συχνό λάθος που από βιασύνη ή ερασιτεχνισμό γίνεται, είναι η χρήση εντελώς λανθασμένου μεγέθους εικόνων. Ας το δούμε με ένα παράδειγμα: να έχουμε στα χέρια μας αποθηκευμένη μια εικόνα 2000 Χ 1500 pixels και στον επισκέπτη του website να σερβίρουμε μια μικρή εικόνα πχ μόλις 200 Χ 150 pixels. Έτσι, στη πραγματικότητα, ο χρήστης κάθε φορά κατεβάζει ένα τεράστιο αρχείο μερικών Mb, ενώ στη πραγματικότητα θα μπορούσε να εξυπηρετηθεί με ένα αρχείο λίγων Kb με ίδιο παρόλα αυτά αποτέλεσμα. Το μέγεθος πραγματικής προβολής, λοιπόν, είναι ένα σημαντικό χαρακτηριστικό τόσο ταχύτητας στο χρόνο κατεβάσματος, όσο και τελικής χρήσης ενσωμάτωσης στο περιεχόμενό μας.

Η ολοένα αυξανόμενη χρήση mobile συσκευών (tablets, smartphones) και η τάση να μετράται ξεχωριστά η εμπειρία πλοήγησης σε αυτές, κάνει επιβεβλημένη τη φιλοσοφία προσαρμοζόμενων (responsive) ιστοσελίδων. Αντίστοιχα, και οι εικόνες που έχουμε να διαχειριστούμε σε μια ιστοσελίδα, πρέπει να έχουν ρυθμιστεί σε responsive περιβάλλον. Η ιδιότητα, με την οποία οι εικόνες ρυθμίζονται ως προς τη προσαρμοστικότητά τους στα διάφορα μεγέθη πλάτους οθονών, είναι η <srcset>. Προσθέστε, λοιπόν στις εικόνες σας την ιδιότητα αυτή για να μπορείτε να προσαρμόζονται αυτόματα οι εικόνες στη βέλτιστη εκδοχή μεγέθους τους, στη κάθε συσκευή που χρησιμοποιείται. Οι τελευταίες εκδόσεις συστημάτων διαχείρισης περιεχομένου (CMS), έχουν αντιληφθεί την ανάγκη αυτή και ολοένα και ενσωματώνονται στο κώδικα ανάπτυξης τους, εργαλεία που αυτόματα πραγματοποιούν τη παραπάνω λειτουργία. (πχ WordPress 4.4+)

 

Χαρακτηριστικά και ιδιότητες των εικόνων

Το όνομα αρχείου που χρησιμοποιείται, παρόλο που πολλές φορές μια φωτογραφία έχει περάσει από επεξεργασία, είναι ένα σημαντικό στοιχείο για το SEO. Με απλά λόγια, αποφύγετε να ανεβάζετε αρχεία με αυτόματα (μηχανικά) ονόματα όπως DSC000345.jpeg ή image0005.jpg  αλλά να θυμάστε να βάζετε πραγματικές λέξεις και κατά προτίμηση λέξεις κλειδιά που στοχεύετε. Έτσι, οι εικόνες σας θα έχουν για παράδειγμα τη μορφή paralia-lefkada.jpg, ionio-paralia-kathisma.jpg κτλ. Επίσης, να θυμάστε πως όπου είναι δυνατόν να χρησιμοποιείτε τις λέξεις κλειδιά εντός του ονόματος της εικόνας, όσο πιο αριστερά γίνεται, δηλαδή η βαρύτητα των λέξεων που χρησιμοποιείτε φθίνει από αριστερά προς τα δεξιά.

Ο εναλλακτικός τίτλος (alt text) της εικόνας είναι αρκετά σημαντικός για τις μηχανές και δυστυχώς πολλοί αμελούν να τον προσθέσουν, ενώ είναι κάτι πολύ απλό σαν διαδικασία. Ο εναλλακτικός τίτλος ή ετικέτα, υπάρχει για να βοηθήσει τα software που σκανάρουν τη σελίδα σας ειδικά όταν δεν υπάρχει η δυνατότητα αυτή να προβληθεί ή να φορτωθεί. Για να γίνει πιο κατανοητό, όταν για παράδειγμα κάποιος έχει αποκλείσει την εμφάνιση εικόνων στην οθόνη του (αρκετά συχνό φαινόμενο σε υπηρεσίες προστασίας χρηστών), τότε εμφανίζεται ο εναλλακτικός τίτλος της εικόνας. Η παρουσία του, βοηθάει τους χρήστες που δεν βλέπουν την εικόνα να αντιληφθούν τι “κρύβεται” από πίσω από το εικονίδιο μη ορατής εικόνας, αλλά και τις μηχανές να συνδέσουν περισσότερες λέξεις κλειδιά με το κείμενο που συνοδεύουν. Μη ξεχνάτε, επίσης, ότι η φιλοσοφία να δίνουμε περιγραφές εικόνων βοηθώντας άτομα με προβλήματα όρασης, είναι κάτι που η Google ανταμείβει ως σημαντική εμπειρία χρηστών ΑμεΑ.

 

Επιπλέον τεχνικές και συμβουλές

Σχετικότητα εικόνας με κείμενο

Φροντίστε οι λέξεις κλειδιά που έχουν συμπεριληφθεί στο όνομα αρχείου εικόνας και τον εναλλακτικό της τίτλο, να εμφανίζονται και στο κυρίως σώμα κειμένου του άρθρου. Μάλιστα, βοηθάει να είναι και σχετικά κοντά στο χωροταξικό σχεδιασμό του άρθρου, οι λέξεις αυτές μεταξύ τους. Έτσι, υπάρχει σχετικότητα ανάμεσα σε εικόνες άρθρου, τίτλο σελίδας, περιγραφή σελίδας και κυρίως κείμενο, δίνοντας σας εξτρά πόντους στο SEO.

Χρήση λέξεων κλειδιών αρχείου

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

Βαρύτητα λέξεων ονόματος αρχείου

Όπως και στον εναλλακτικό τίτλο, η σειρά με την οποία τοποθετείτε τις λέξεις κλειδιά μέσα στο όνομα του αρχείου παίζει ρόλο. Για παράδειγμα η εικόνα με όνομα αρχείου ionio-paralia-kathisma.jpg παρουσιάζει βαρύτητα 1 για τη λέξη Ιόνιο, 2 για τη λέξη παραλία και 3 για τη λέξη Κάθισμα. Έτσι, εάν θέλατε να δώσετε περισσότερη αξία στη λέξη παραλία αντί για τη λέξη Ιόνιο, θα έπρεπε το αρχείο σας να έχει ονομαστεί paralia-ionio-kathisma.jpg

Photo banks & stock photos

Προσπαθήστε να μη χρησιμοποιείτε φωτογραφίες και κατασκευασμένες εικόνες από έτοιμες συλλογές (υπάρχουν αμέτρητες τέτοιες υπηρεσίες στο διαδίκτυο όπως το Flickr, το Freeimages κτλ.) καθότι είναι πολυχρησιμοποιημένες και τραυματίζουν την μοναδικότητα της σελίδας σας, ιδιαίτερα όταν έχετε να παραθέσετε αυθεντικά πρωτότυπα άρθρα. Εάν δεν είναι δυνατόν να αποφύγετε τέτοιες πηγές, τουλάχιστον κάνετε μια προσπάθεια να βρείτε λίγο πιο “ψαγμένες”, λιγότερο δημοφιλείς εικόνες. Αυτό, δε το λέμε για να παιδευτείτε, αλλά για να σας επισημάνουμε τη περίπτωση που οι εικόνες που χρησιμοποιείτε να είναι πολύ-φορεμένες και να έχουν παρουσία σε άλλα websites παρόμοια με το δικό σας. Επαναλαμβάνουμε πως η πρωτοτυπία και η μοναδικότητα, είναι κάτι που οι μηχανές ανταμείβουν. Στο σημείο αυτό, να αναφέρουμε και τα δικαιώματα χρήσης, τα οποία πρέπει να προσέχετε για να είστε νομότυπος προς τη χρήση εικόνων ιδιοκτησίας τρίτων.

Αυθεντικές πρωτότυπες εικόνες

Σε συνέχεια της παραπάνω συμβουλής, θέλουμε να αναδείξουμε τη περίπτωση χρήσης πρωτότυπων εικόνων και φωτογραφιών που είναι δίκης σας έμπνευσης και ιδιοκτησίας. Είναι μια τακτική που σιγουρά θα ανταμειφθεί στη διαδικασία image SEO από τις μηχανές αναζήτησης. Να υπενθυμίσουμε, πως εκτός από τις κλασικές σελίδες αποτελεσμάτων (tab ΟΛΑ), κάθε φορά που γίνεται μια αναζήτηση, πραγματοποιείται και μια κατάταξη αποτελεσμάτων εικόνων, στο σχετικό τμήμα (tab ΕΙΚΟΝΕΣ) της Google.

Χρήση animated gifs (κινουμένων εικόνων)

Μια τελευταία τάση σε δημοσιεύσεις, δείχνει την αύξηση της χρήσης κινούμενων εικόνων και γραφικών. Σιγουρά πρόκειται για κάτι που εγκλωβίζει τη ματιά των επισκεπτών, όμως εμπεριέχει και το κίνδυνο απόσπασης της προσοχής από την ουσία του κειμένου σας. Στη περίπτωση που αποφασίσετε να χρησιμοποιήσετε gif τύπους εικόνων, ακολουθήστε ομοίως με παραπάνω τις τακτικές που αναφέραμε, δηλαδή το σωστό όνομα αρχείου, τον εναλλακτικό τίτλο, τη χρήση λέξεων κλειδιών, τη σωστή τοποθέτηση της εικόνας στο κυρίως σώμα του άρθρου και φυσικά τη πρωτοτυπία. Στο τελευταίο, βοηθάει μια πληθώρα εφαρμογών που τελευταία έχουν δημοσιευτεί και κάνουν να φαίνεται ακόμα ο πιο αρχάριος σαν επαγγελματίας του μοντάζ.

Χωροταξική τοποθέτηση εικόνων

Με απλά λόγια, μη τοποθετείτε σε άσχετα σημεία του κυρίως σώματος των άρθρων σας, τις εικόνες σας. Η εγγύτητα των εικόνων (με τα σωστά χαρακτηριστικά) με τις λέξεις κλειδιά των κειμένων σας παίζει ρόλο και δεν είναι αμελητέα. Προσπαθήστε να τοποθετήσετε τις εικόνες σας όσο πιο κοντά γίνεται στις λέξεις που έχετε στοχεύσει και φυσικά κοντά σε στοιχεία με h1 h2 μορφοποίηση, όπως πχ οι τίτλοι που χρησιμοποιείτε.

Λεζάντες εικόνων

Οι λεζάντες εικόνων είναι κάτι πολύ παρεξηγημένο σαν στοιχείο στη σύγχρονη συγγραφή. Το κείμενο της λεζάντας, συχνά παραλείπεται, ενώ δε θα έπρεπε. Από κατασκευής, η λεζάντα, είναι το βοηθητικό κείμενο που συνοδεύει μια εικόνα. Τελευταίες μελέτες, δείχνουν πως όλο και περισσότεροι χρήστες χρησιμοποιούν τις λεζάντες για να εκτιμήσουν το περιεχόμενο ενός κειμένου και γρήγορα να πάρουν μια απόφαση εάν θα το διαβάσουν ή απλά θα το προσπεράσουν. Σημειώνεται, πως οι λεζάντες διαβάζονται 300% περισσότερο από το κυρίως κείμενο, όπως αναφέρει το kissmetrics. Το παραπάνω δεδομένο, είναι αρκετό για να σας πείσει να προσθέσετε λεζάντες στις εικόνες σας, αυξάνοντας την αναγνωσιμότητα και φυσικά εισπράττοντας και το αντίστοιχο πόντο από τις μηχανές για το user experience.

Το πρωτόκολλο Open graph

Εάν είστε περισσότερο εξοικειωμένος με ορολογία κώδικα της ιστοσελίδας σας, προσθέστε στις ιδιότητες της εικόνας το “og:image” εντός του τμήματος <head>. Με αυτό το τρόπο θα βεβαιώσετε τη σωστή συμπεριφορά και μετάφραση των εικόνων από τρίτες ιστοσελίδες και υπηρεσίες. Έτσι, για παράδειγμα, όταν θα κοινοποιήσετε το άρθρο σας στο Facebook ή σε κάποια άλλη δημοφιλή Social Media πλατφόρμα, θα συμπεριληφθεί η σωστή εικόνα και θα μεταφραστεί σωστά στις απαιτήσεις του τρίτου site. Στη περίπτωση που αυτό δε συμβεί άμεσα, τότε δοκιμάσετε να καθαρίσετε τη προσωρινή μνήμη της πλατφόρμας.

Πλήρης html ετικέτα εικόνας

Πάλι αναφερόμενοι σε στοιχεία κώδικα, φροντίστε να χρησιμοποιείτε τις πλήρεις html ετικέτες εικόνων. Έτσι, μια πλήρης ετικέτα έχει ως εξής: <img src=”image.jpg” alt=”image-description” title=”image-tooltip”>. Φροντίστε να συμπληρώνετε όλα τα παραπάνω πεδία, καθότι εάν για παράδειγμα το alt tag είναι κενό, τότε οι μηχανισμοί που σαρώνουν τις σελίδες προσπερνάνε την εικόνα ως μη υπάρχουσα, πράγμα που επιβαρύνει το SEO σας. Το πεδίο του tooltip δεν είναι κάτι τόσο σημαντικό στη βελτιστοποίηση εικόνων, παρόλα αυτά να αναφέρουμε πως στον περιηγητή Chrome εμφανίζεται το title text όταν ο χρήστης αιωρείται (hover) πάνω από την εικόνα, ενώ αντίστοιχα στον IE εμφανίζεται το alt text.

Χρήση XML χαρτών εικόνων

Στη βελτιστοποίηση ενός website, είναι περιττό να πούμε πόση σημασία έχουν οι χάρτες ιστοτόπου (xml sitemaps). Με βάση το παραπάνω, παρόμοια βαρύτητα έχουν και οι χάρτες εικόνων (image maps). Η ίδια η Google, τονίζει τη σημασία της χρήσης τους λέγοντας: “θα χρειαστεί να προσθέσετε ετικέτες εικόνων στους χάρτες σας. Μπορείτε να χρησιμοποιήσετε ξεχωριστό (separate) χάρτη εικόνων για να υποδείξετε τις εικόνες σας ή να χρησιμοποιήσετε ενσωμάτωση στον υπάρχοντα (existing) χάρτη του website σας”.

Οι εικόνες, οι φωτογραφίες και τα animation που έχετε στο site σας, παίζουν σημαντικό ρόλο στη κατάταξη της ιστοσελίδας σας. Αφενός προσδίδουν ομορφιά και αυξάνουν την αναγνωσιμότητα, αφετέρου επηρεάζουν τις μηχανές αναζήτησης σε επίπεδο ταχύτητας, περιγραφικότητας, λέξεων κλειδιών και ενσωματωμένων χαρακτηριστικών. Κάθε επαγγελματίας του SEO που επιθυμεί το βέλτιστο αποτέλεσμα κατάταξης, είναι αδύνατο να αγνοήσει την επιρροή των εικόνων. Παραπάνω αναφέραμε μερικές παραμέτρους που πρέπει να λάβετε σοβαρά υπόψη, καθώς οποιαδήποτε βελτίωση σε επίπεδο εικόνων, έχει άμεσο αντίκτυπο στην ιστοσελίδα σας.

Μέχρι το επόμενο άρθρο, η συμβουλή μου… “don’t be lazy and do image optimization”