Έχεις ποτέ αναρωτηθεί:

• Γιατί όταν κάνω μια αναζήτηση για εικόνες στη Google, οι φωτογραφίες των προϊόντων μου δεν εμφανίζονται ποτέ;
• Χρειάζεται να προσθέσω “Alt Tags” στις εικόνες μου;
• Ποια είναι η διαφορά μεταξύ JPEG, GIF και PNG αρχεία – πότε πρέπει να χρησιμοποιώ το κάθε ένα;

Είσαι στο σωστό άρθρο για να βρεις όλες τις απαντήσεις που χρειάζεσαι.

1. Ονόμασε περιγραφικά τις εικόνες χρησιμοποιώντας απλές λέξεις

Είναι βολικό και εύκολο να μεταφορτώσεις δεκάδες εικόνες προϊόντων στο διαδίκτυο, απευθείας από την ψηφιακή σου κάμερα. Πριν όμως αυτό γίνει μια κακιά συνήθεια, θα πρέπει να σκεφτείς γιατί αποτελεί λάθος κίνηση.

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

Ας δώσουμε ένα παράδειγμα:

Θα μπορούσες να χρησιμοποιήσεις έναν τυχαίο τίτλο που έδωσε η ψηφιακή σου κάμερα στην παραπάνω εικόνα, όπως για παράδειγμα “DCI50015.jpg”. Το πιο σωστό όμως, είναι να ονομάσεις το αρχείο: Nike-Air-Max-Millenium-Gold.jpg.

Βάλε τον εαυτό σου στη θέση του χρήστη που πραγματοποιεί μια αναζήτηση. Τι θα πληκτρολογούσες στη θέση του; Για το παραπάνω παράδειγμα, οι αγοραστές που ενδιαφέρονται για το συγκεκριμένο παπούτσι έψαξαν:

• Nike Air Max Millenium Gold
• Gold Nike Air Max Millenium
• Nike Air Max Gold Millenium

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

2. Βελτιστοποίησε τα Alt Tags σου έξυπνα

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

Το Alt attribute προσθέτει έξτρα αξία στο SEO της ιστοσελίδας σου. Προσθέτοντας κατάλληλα alt tags στις εικόνες, θα δώσεις μια γερή ώθηση στο SEO της ιστοσελίδας σου, όσον αφορά τα αποτελέσματα κατάταξης στις μηχανές αναζήτησης, για συγκεκριμένες φράσεις-κλειδιά.

Αναμφισβήτητα, η προσθήκη alt tags είναι ο αποτελεσματικότερος τρόπος να εμφανιστούν τα προϊόντα ενός ηλεκτρονικού καταστήματος, στην Αναζήτηση Εικόνων Google (Google Image Search) και γενικότερα στο διαδίκτυο.

Ας δούμε ένα παράδειγμα Alt Tag κώδικα:

alt=”nike-air-max-millenium-gold”>

Η #1 προτεραιότητα όταν πρόκειται για βελτιστοποίηση εικόνων, είναι η συμπλήρωση όλων των Alt Tags για κάθε μια εικόνα ξεχωριστά, σε μια ιστοσελίδα.

Διάβασε μερικούς κανόνες των Alt Tags:

• Go Greeklish, για πολλούς και διάφορους λόγους που θα αναλύσουμε στο μέλλον.
• Χρησιμοποίησε απλές λέξεις, όπως ακριβώς κάνεις και για τους τίτλους των αρχείων εικόνων.
• Εάν πουλάς προϊόντα που έχουν πολλούς κωδικούς, νούμερα ή άλλες παραλλαγές, πρόσθεσε τα στα alt tags.
• Μην παραγεμίζεις τα Alt Tags (πχ “buy now millenium nike air max prosfores se poli kali timi”).
• Μην προσθέσεις τα ίδια Alt Tags σε ξεχωριστές εικόνες, υπάρχει κίνδυνος ποινής από την Google.
• Ανά περιόδους, κάνε έναν έλεγχο στον κώδικα της σελίδας σου και εντόπισε ελλειπή Alt Tags που λείπουν από τα προϊόντα.

3. Δώσε βάση στις διαστάσεις και την οπτική γωνία των εικόνων

Μια τάση που επικρατεί στο ηλεκτρονικό εμπόριο, είναι η ανάδειξη ενός προϊόντος από πολλές οπτικές γωνίες. Εάν ήσουν επισκέπτης σε ένα ηλεκτρονικό κατάστημα παπουτσιών και ενδιαφερόσουν να αγοράσεις το ζευγάρι Nike Air Max του παραπάνω παραδείγματος, θα σου έφτανε μόνο μια οπτική γωνία του προϊόντος;

Ένα σωστό e-shop παπουτσιών, για παράδειγμα, θα έδειχνε το προϊόν από διαφορετικές οπτικές γωνίες όπως:

• Το μπροστινό σχεδιασμό
• Τον πλαϊνό σχεδιασμό
• Το πάτημα του
• Τον σχεδιασμό του πίσω μέρους
• Zoom στην αεροσόλα

Ο καλύτερος τρόπος για να επωφεληθείς από αυτές τις επιπλέον φωτογραφίες, είναι να συμπληρώσεις τα Alt Tags τους, και όχι με οποιονδήποτε τρόπο. Θα πρέπει να δημιουργήσεις μοναδικά Alt Tags για κάθε εικόνα/προβολή – του προϊόντος:

• Nike-Air-Max-Millenium-Gold-aerosola.jpg -> χρησιμοποιώντας το alt=” Nike Air Max Millenium Gold Aerosola “
• Nike-Air-Max-Millenium-Gold-Mprosta -> χρησιμοποιώντας το alt=” Nike Air Max Millenium Mprosta “

Διάβασε αυτό για τις μεγαλύτερες εικόνες:

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

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

Αντ’ αυτού, ανέβασε μια μικρότερη εικόνα, και δώσε την δυνατότητα στον επισκέπτη να δει μια μεγέθυνση της, κάνοντας scroll ή zoom in.

4. Μείωσε το μέγεθος των αρχείων/εικόνων σου

Είναι γεγονός ότι:

• Οι περισσότεροι καταναλωτές περιμένουν περίπου για 3 δευτερόλεπτα να φορτώσει μια ιστοσελίδα σε desktop ή laptop – και περίπου 5 δευτερόλεπτα από κινητή συσκευή.
• To Amazon διαπίστωσε ότι εάν η φόρτωση των σελίδων του μειωθεί κατά 1 δευτερόλεπτο, παρατηρεί μείωση στα έσοδα, τάξεως 1.6$ δις τον χρόνο.
• Η Google χρησιμοποιεί τον χρόνο φόρτωσης ιστοσελίδας ως παράγοντας στον αλγόριθμο κατάταξης.

Τι πρέπει να κάνεις;

Ο χρόνος φόρτωσης μιας ιστοσελίδας εξαρτάται από πολλούς παράγοντες. Όσο αφορά τις εικόνες, όσο μεγαλύτερο είναι το μέγεθος των αρχείων, τόσο περισσότερος χρόνος χρειάζεται για να φορτώσει η ιστοσελίδα.

Εάν καταφέρεις να μειώσεις το μέγεθος των αρχείων εικόνων, και να αυξήσεις τον χρόνο φόρτωσης της ιστοσελίδας σου, τότε σίγουρα θα παρατηρήσεις και μια σημαντική μείωση στο bounce rate.

Ένας τρόπος για να μειώσεις το μέγεθος του αρχείου εικόνας, είναι χρησιμοποιώντας την εντολή “Save for Web” στο Adobe Photoshop. Όταν χρησιμοποιείς αυτή την εντολή, στην ουσία ρυθμίζεις την εικόνα να καταλαμβάνει τον ελάχιστο όγκο αρχείου, διατηρώντας παράλληλα όσο το δυνατότερο την ποιότητα.

Και αν δεν έχεις Photoshop, τότε τι;

Εάν δεν έχεις το λογισμικό Adobe Photoshop, υπάρχουν πολλά online εργαλεία που μπορείς να χρησιμοποιήσεις για να επεξεργαστείς τις εικόνες σου. Η Adobe διαθέτει μια online εφαρμογή επεξεργασίας εικόνας στο www.photoshop.com. Η εφαρμογή αυτή δεν έχει όλες τις δυνατότητες της desktop έκδοσης του Photoshop, καλύπτει ωστόσο όλα τα βασικά της επεξεργασίας εικόνας και το πιο σημαντικό, δωρεάν.

Άλλα γνωστά εργαλεία επεξεργασίας εικόνας:

• PicMonkey
• Pixlr
• FotoFlexer
• Gimp

Τι μέγεθος πρέπει να είναι οι εικόνες σου;

Ένας καλός εμπειρικός κανόνας για τις εικόνες ηλεκτρονικού εμπορίου είναι να προσπαθήσει κανείς να κρατήσει το μέγεθος του αρχείου εικόνας του κάτω από 70kb. Αυτό μπορεί να είναι δύσκολο μερικές φορές, ειδικά για μεγάλες εικόνες προϊόντων, αλλά θα το αναλύσουμε παρακάτω…

5. Ποιος τύπος αρχείου εικόνας ταιριάζει για κάθε περίπτωση

Υπάρχουν 3 κοινοί τύποι αρχείων εικόνας που χρησιμοποιούνται για την δημοσίευση εικόνων, τα JPEG, GIF και PNG.

JPEG: Τα JPEG (ή .jpg) αποτελούν ένα “παλιό” είδος αρχείου, και πλέον αποτελεί το de facto πρότυπο αρχείου εικόνας στο internet. Οι εικόνες σε JPEG μορφή μπορούν να συμπιεστούν σε μεγάλο βαθμό, κάτι που έχει ως αποτέλεσμα ποιοτικές εικόνες με μικρό όγκο δεδομένων.

GIFs: Οι εικόνες σε GIF (.gif) μορφή είναι χαμηλότερης ποιότητας από αρχεία JPEG και χρησιμοποιούνται για πιο απλές εικόνες όπως icons & decorative εικόνες. Η GIF μορφή υποστηρίζει επίσης και animations (τα γνωστά σύντομης μορφής βιντεάκια που παίζουν σε facebook κ.α είναι σε .gif μορφή).

Όσον αφορά τη βελτιστοποίηση εικόνας, η χρησιμοποίηση GIF αρχείων για απλές εικόνες σε μια ιστοσελίδα, αποτελεί μια καλή λύση. Για πιο complex εικόνες ωστόσο, η gif μορφή δεν συστήνεται, λόγω του αισθητικού αποτελέσματος που προκύπτει από τη μείωση της ποιότητας.

PNG: Οι PNG εικόνες γίνονται όλο και πιο δημοφιλής ως εναλλακτική λύση των GIF αρχείων εικόνων. Η PNG μορφή υποστηρίζει περισσότερα χρώματα, χωρίς να υποβαθμίζονται με την πάροδο του χρόνου me re-saves, όπως η JPEG.

Ωστόσο, ακόμη κι αν ο τύπος αρχείου PNG έχει αρχίσει να χρησιμοποιείται περισσότερο, το μέγεθος ενός PNG αρχείου μπορεί να είναι πολύ μεγαλύτερο, απ’ ότι το ίδιο αρχείο σε JPEG μορφή.

Παραθέτω μερικές συμβουλές για να θυμάσαι όταν έρχεσαι αντιμέτωπος με την επιλογή μορφής εικόνας:

• Στον τομέα ηλεκτρονικού εμπορίου, η JPEG μορφή θα είναι ο καλύτερος σου φίλος. Παρέχουν την καλύτερη ποιότητα και το μικρότερο μέγεθος αρχείου.
• Ποτέ μη χρησιμοποιείς GIF μορφή όταν θες να περιγράψεις ένα προϊόν με μεγάλη εικόνα. Το μέγεθος του αρχείου α είναι πολύ μεγάλο, και δεν υπάρχει τρόπος για να το μειώσεις. Χρησιμοποίησε gif αρχεία για μικρογραφίες και διακοσμητικές εικόνες
• Τα PNG αρχεία μπορεί να είναι μια καλή εναλλακτική για τα JPEG & GIF αρχεία. Εάν αναγκαστείς να έχεις εικόνες προϊόντων σε PNG μορφή, τότε χρησιμοποίησε PNG-8 έως PNG-24.

Τα περισσότερα λογισμικά επεξεργασίας εικόνας μπορούν να σώσουν τις εικόνες σε οποιοδήποτε από τους παραπάνω τύπους αρχείων.

6. Χρησιμοποίησε σωστά τα thumbnails σου

Πηγή www.cosmotebooks.gr

Τα περισσότερα sites ηλεκτρονικού εμπορίου χρησιμοποιούν μικρογραφίες εικόνων (ή αλλιώς thumbnails). Έτσι, παρέχουν στον επισκέπτη έναν γρήγορο και αποτελεσματικό τρόπο προσπέλασης των προιοντικών κατηγοριών.

Οι μικρογραφίες αποτελούν ένα πολύ σημαντικό κομμάτι ενός ηλεκτρονικού καταστήματος, ωστόσο απαιτούν ιδιαίτερη προσοχή διότι μπορεί να αποτελέσουν αιτία ισοπέδωσης του χρόνου φόρτωσης μιας ιστοσελίδας.

Οι μικρογραφίες εμφανίζονται σε ένα κρίσιμο σημείο, στη διάρκεια ταξιδιού του επισκέπτη (customer’s journey). Στην περίπτωση που καθυστερήσουν σημαντικά την φόρτωση της ιστοσελίδας, ίσως ο επισκέπτης αναγκαστεί να εγκαταλείψει την σελίδα άμεσα.

Γι’ αυτό, φρόντισε το μέγεθος των μικρογραφιών των προϊόντων σου, να είναι όσο το δυνατόν μικρότερο. Λαμβάνοντας υπ’ όψη πάντα το είδος των προϊόντων που πουλάς, ίσως χρειαστεί να θυσιάσεις για λίγο την ποιότητα εμφάνισης των εικόνων, για χάρη του χρόνου φόρτωσης της σελίδας σου. Επίσης, σιγουρέψου ότι τα Alt Tags είναι διαφορετικά σε κάθε εικόνα – το τελευταίο πράγμα που θες είναι να αφήσουν “απ’ έξω” οι μηχανές αναζήτησης τις εικόνες σου, λόγω διπλότυπων ετικετών.

7. Τέσταρε το πώς αποδίδουν εικόνες σου

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

• Τέσταρε τον αριθμό εικόνων των προϊόντων ανά σελίδα: Δεδομένου ότι ο χρόνος φόρτωσης ιστοσελίδας είναι ένας κρίσιμος παράγοντας, μπορεί να διαπιστώσεις ότι η μείωση του αριθμού των εικόνων σε μια σελίδα, ενδέχεται να οδηγήσει σε αυξημένα CTR και πωλήσεις. Αλλά είναι επίσης πιθανό ότι η παροχή πολλών εικόνων ανά σελίδα, (όπως για παράδειγμα οι διαφορετικές απεικονίσεις προϊόντων) να βελτιώσει το user experience και να οδηγήσει σε αύξηση των πωλήσεων. Ο μόνος τρόπος για να το διαπιστώσεις, είναι η δοκιμή.

• Τέσταρε ποιες οπτικές γωνίες προϊόντων θέλουν να βλέπουν οι επισκέπτες: Εάν παρέχεις στους πελάτες σου αυτό που θέλουν να δουν (όσον αφορά διαφορετικά views των προϊόντων), σίγουρα θα αυξήσεις τη συνολική πίστη (customer loyalty). Ένας τρόπος για να βρεις τι τους αρέσει, είναι η διερεύνηση μέσω έρευνας, όπου οι επισκέπτες θα παρακινούνται να απαντήσουν στο ποιες πλευρές του προϊόντος θέλουν να βλέπουν πριν το αγοράσουν. Η συχνή δημιουργία ερωτημάτων προς τους πελάτες σου θα πρέπει αποτελεί σε γενικές γραμμές μια “must” ενέργεια.

• Τέσταρε πόσες λίστες προϊόντων εμφανίζονται στις σελίδες των κατηγοριών: 10, 20, 100 προϊόντα; Δοκίμασε τον αριθμό των προϊόντων που εμφανίζεις σε μια σελίδα κατηγορίας και διαπίστωσε τι αποδίδει καλύτερα για εσένα αλλά και τι προτιμούν οι πελάτες σου.

8. Δημιούργησε Image Sitemaps

Η Google ενθαρρύνει τη χρήση χάρτη ιστοτόπου για εικόνες (image sitemaps) προκειμένου να δώσουν στην μηχανή αναζήτησης τους περισσότερες πληροφορίες, σχετικά με τις διαθέσιμες εικόνες μιας ιστοσελίδας. Αυτό τους επιτρέπει να ανιχνεύουν ακόμα και τις εικόνες που φορτώνονται μέσω Javascript, ένα συχνό πρόβλημα το οποίο παρατηρείται με εικόνες προϊόντων και slider gallieries.

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

Η δημιουργία ενός sitemap δεν είναι πάρα πολύ πολύπλοκη. Βασικά, για κάθε URL στο sitemap, μπορείς να εισάγεις extra πληροφορίες σχετικά με τις εικόνες που βρίσκονται στη συγκεκριμένη σελίδα. Η Google μας δίνει ένα παράδειγμα για το URL:

example.co.uk/sample.html:

 
 
   http://example.co.uk/sample.html
   
     http://example.co.uk/image.jpg
   
   
     http://example.co.uk/photo.jpg
   
  

Μπορείς να βρεις περισσότερες πληροφορίες και ένα σύνολο ορισμών για ετικέτες εικόνας εδώ.

Εάν κάνεις χρήση CMS όπως το WordPress, μπορείς να χρησιμοποιήσεις διαθέσιμα Plugins που θα κάνουν την extra δουλειά για σένα, όπως το Google XML Sitemap & Udinra All Image Sitemap.

9. Χρησιμοποίησε τη σωστή εικόνα

Η εύρεση & χρήση του σωστού τύπου εικόνας για την ιστοσελίδα σου, είναι ένα ουσιαστικό βήμα προς την επιτυχία. Ένα καλό μέρος για να ξεκινήσεις είναι το Flickr.com και το Shutterstock. Και τα 2, έχουν μια μεγάλη ποικιλία από διαφορετικές εικόνες για να επιλέξεις, μαζί με την δυνατότητα να φιλτράρεις το περιεχόμενο ανά άδεια.

Αυτό σημαίνει ότι μπορείς εύκολα να βρεις μια εικόνα που μπορείς να χρησιμοποιήσεις νόμιμα για εμπορικούς σκοπούς, ή ακόμα και μια χωρίς περιορισμούς πνευματικής ιδιοκτησίας. Όσο πιο νόμιμα, τόσο καλύτερα.

10. Πριν προβληματιστείς, ρώτα την Google

Η Google έχει ετοιμάσει μια σειρά με κατευθυντήριες γραμμές και συμβουλές, για να βοηθήσει τους ενδιαφερόμενους να βελτιστοποιήσουν τις εικόνες τους και να προσφέρει καλύτερα αποτελέσματα σε όσους πραγματοποιούν αναζητήσεις στο internet.

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

Εσύ, ποια τακτική χρησιμοποιείς για να βεβαιωθείς ότι οι εικόνες σου εμφανίζονται στα αποτελέσματα αναζήτησης στο internet;