Οι εικόνες αποτελούν αναπόσμαστο κομμάτι των websites.
Έχουν το δικό τους tab στα αποτελέσματα της Google και ακόμη και τον δικό τους αλγόριθμο. Η εμφάνιση στα αποτελέσματα εικόνων στην Google θα πρέπει να αποτελεί μέρος μιας ολοκληρωμένης στρατηγικής SEO.
Το περιεχόμενό σου θα πρέπει να αποτελείται από εικόνες υψηλής ποιότητας, οπότε γιατί να μην τις συμπεριλάβεις στο optimization roadmap σου;
Σε αυτό το άρθρο θα δούμε αναλυτικά tips για SEO image optimization καθώς και οδηγούς για το πώς θα βελτιστοποιήσεις τις εικόνες σου για καλύτερο οργανικό visibility.
Πώς οι μηχανές αναζήτησης αντιλαμβάνονται τις εικόνες
Οι μηχανές αναζήτησης κάνουν crawl τα websites για να ανακαλύψουν εικόνες και να εξάγουν δεδομένα από αυτές, όπως metadata και file names.
Η Google λαμβάνει υπόψη της παράγοντες – όπως το surrounding text, image file name, alt text, captions και το περιεχόμενο της σελίδας – για να κατανοήσει το πλαίσιο των εικόνων.
Παράλληλα, χρησιμοποιεί image recognition τεχνολογία για να κατανοήσει το ίδιο το περιεχόμενο των εικόνων.
Τι είναι το Image SEO
Η βελτιστοποίηση εικόνων είναι ένα σύνολο τεχνικών για την αύξηση του visibility στις μηχανές αναζήτησης με βάση τις γνώσεις μας για τον τρόπο με τον οποίο οι μηχανές αναζήτησης ανιχνεύουν, κατανοούν και ταξινομούν τις εικόνες.
Αυτό περιλαμβάνει το image compression για τη μείωση του χρόνου φόρτωσης, τη χρήση διαφορετικών μεγεθών εικόνων για όλες τις συσκευές, την εφαρμογή lazy loading, την προσθήκη alt text για βελτιωμένη εμπειρία χρήστη, τη χρήση περιγραφικών file names και την εφαρμογή structured data για εικόνες.
Τώρα που βάλαμε τα θεμέλια, πάμε να δούμε κάθε tip ξεχωριστά.
#1 Χρησιμοποίησε το σωστό Image Format
Υπάρχουν δεκάδες image formats διαθέσιμα, αλλά το Google Search υποστηρίζει μόνο τα εξής: JPEG, PNG, WebP, BMP, GIF και SVG.
Ας δούμε λίγο τις διαφορές μεταξύ αυτών των formats και πώς επηρεάζουν το website και το SEO του.
- PNG: Χρησιμοποιεί lossless compression, που σημαίνει ότι δεν χάνονται δεδομένα εικόνας (image data). Έτσι, παράγει εικόνες καλύτερης ποιότητας και υποστηρίζει τη διαφάνεια, αλλά συνοδεύεται από μεγαλύτερο μέγεθος αρχείου και είναι ιδανικό και για εκτύπωση.
- JPEG: Χρησιμοποιεί lossy compression και προκαλεί υποβάθμιση της ποιότητας της εικόνας, αλλά μπορείς να προσαρμόσεις το επίπεδο ποιότητας για να βρεις μια καλή ισσοροπία.
- WebP: Αναπτύχθηκε από την Google, χρησιμοποιεί lossless ή lossy compression και είναι πιο αποτελεσματικό από το JPG (που κυμαίνεται από 25% έως 80%), παρέχοντας έτσι μικρότερα μεγέθη αρχείων σε συγκρίσιμα επίπεδα ποιότητας. Υποστηρίζεται, επίσης, από όλους τους γνωστούς browsers.
- GIF: Χρησιμοποιεί lossless compression, αλλά περιορίζεται σε 256 χρώματα, καθιστώντας το λιγότερο κατάληλλο για εικόνες υψηλής ποιότητας και πιο κατάλληλο για απλά γραφικά και animations.
- SVG: Είναι ένα vector-based format και χρησιμοποιείται για logos, icons, και άλλα designs καθώς μπορεί να κλιμακωθεί σε οποιοδήποτε μέγεθος χωρίς να αυξηθεί το μέγεθος του αρχείου. Αυτό το καθιστά ιδανικό για responsive σχεδιασμό και web design.
- BMP: Μεγάλα και ασυμπίεστα αρχεία εικόνας που διατηρούν πολύ υψηλή ποιότητα. Λόγω του μεγέθους του, δεν χρησιμοποιείται συνήθως για websites, καθώς μπορεί να επιβραδύνει σημαντικά τους χρόνους φόρτωσης της σελίδας.
Εμείς, πιστεύουμε ότι η καλύτερη επιλογή είναι το PNG, το οποίο μπορεί στη συνέχεια να μετατραπεί σε WebP format για web deployment.
Όσον αφορά τη μετατροπή GIF σε WebP, να θυμάσαι ότι οι παλαιότεροι browsers όπως Safari 15.6 (macOS Catalina) και πίσω, δεν υποστηρίζουν animated WebP formats.
Συνήθως, μόνο λίγοι χρήστες χρησιμοποιούν ξεπερασμένες εκδόσεις browser, επομένως δεν χρειάζεται να ανησυχείς για αυτό.
Κατά γενικό κανόνα, όταν χρησιμοποιείς μια συγκεκριμένη τεχνολογία, συνιστάται να παρακολουθείς τακτικά το ποσοστό της επισκεψιμότητας από διάφορες συσκευές μέσω του GA4.
Πώς το compression επηρεάζει τα Image Quality και Load Time
Για να το κατανοήσουμε αυτό, ας χρησιμοποιήσουμε ένα παράδειγμα εικόνας σε BMP format και ας το μετατρέψουμε σε διαφορετικές μορφές.
Δες πώς αλλάζει το μέγεθος του αρχείου και το load time στη σελίδα με βάση το τεστ.
Ως περιβάλλον δοκιμής, χρησιμοποιήθηκε ένας local Apache web server, ενώ συμπεριλήφθηκαν εικόνες σε ένα sample HTML page.
Αυτό δείχνει πόσο αποτελεσματικό είναι το WebP format. Έχει το χαμηλότερο μέγεθος αρχείου και φορτώνει πέντε φορές πιο γρήγορα από το PNG και σχεδόν δύο φορές πιο γρήγορα από τα JPG αρχεία.
Γι’αυτό συνίσταται η χρήση WebP. Εάν το έχεις κάνει αυτό ήδη, σημαίνει ότι έχεις κάνει μεγάλη πρόοδο στο κομμάτι του load time optimization. (Υπάρχουν περιπτώσεις όπου το μέγεθος εικόνας WebP μπορεί να είναι μεγαλύτερο από το αρχικό αρχείο. Μάθε περισσότερα για αυτό στο FAQ page της Google.)
Ωστόσο, η αλλαγή του image format, a.k.a εφαρμογή ενός αλγορίθμου compression, μπορεί να προκαλέσει την απώλεια της ποιότητας και της ευκρίνειάς της. Αυτό σημαίνει ότι θα πρέπει να επιλέξεις το κατάλληλο format με βάση τη φύση του website.
Για παράδειγμα, εάν έχεις ένα website με θέμα τη φωτογραφία όπου η διατήρηση λεπτομερειών υψηλού επιπέδου στις εικόνες είναι το κλειδί για την εμπειρία χρήστη, συνιστάται να χρησιμοποιείς PNG αντί των JPG ή WebP.
Σε αυτή την περίπτωση, μπορείς να εμφανίσεις σε WebP format τα thumbnails που έχουν link προς τις high-quality PNG εικόνες.
Είδαμε παραπάνω για τους διάφορους τύπους εικόνων και τις αντίστοιχες μεθόδους compression.
Ίσως να αναρωτιέσαι τι κάνουν τα διαφορετικά compression εργαλεία εικόνας, όπως τα ShortPixel και TinyJPG.
Τα image compression services χρησιμοποιούν προηγμένους αλγόριθμους και αφαιρούν τα περιττά metadata (όπως EXIF data και GPS tags) για να μειώσουν τα μεγέθη των αρχείων πέρα από το βασικό compression που είναι εγγενής στις τυπικές μορφές αρχείων.
Αυτά τα εργαλεία εφαρμόζουν βελτιωμένες lossy ή lossless compression τεχνικές, αφαιρώντας επιλεκτικά δεδομένα που είναι λιγότερο αισθητά στο ανθρώπινο μάτι.
Για παράδειγμα, όταν το παραπάνω παράδειγμα μετατρέπεται από JPG σε WebP χρησιμοποιώντας το ShortPixel lossy, έχει ως αποτέλεσμα ένα αρχείο 3,8 KB, ενώ το TinyJPG δημιουργεί ένα ελαφρώς διαφορετικό αρχείο 8,7 KB.
Παρακάτω είναι μια λίστα με εργαλεία που κάνουν image compression και optimization που μπορείς να χρησιμοποιήσεις:
Ωστόσο, έχε υπόψη ότι το compression μέσω αυτών των εργαλείων μπορεί να υποβαθμίσει αισθητά την ποιότητα των εικόνων. Για παράδειγμα, όταν αυτό συμβαίνει σε screenshots που περιέχουν text, μπορεί να παραμορφώσει το κείμενο στην εικόνα.
Επομένως, συνιστάται πάντα να ελέγχονται και να επιλέγονται προσεκτικά οι τύποι βελτιστοποίησης.
Τι γίνεται με το AVIF format;
Το AVIF είναι ένα νέο format που υποστηρίζεται σε όλους τους γνωστούς browsers, ενώ υποστηρίζεται πλέον και από το Google Search.
Προσφέρει ακόμη υψηλότερο level of compression χρησιμοποιώντας την lossy τεχνική.
Το ίδιο αρχείο εικόνας, για παράδειγμα, είναι 11kb σε AVIF format σε σύγκριση με το WebP format στα 41 kb.
Ωστόσο, όπως μπορείς να παρατηρήσεις από την παρακάτω σύγκριση, υποβαθμίζει την ποιότητα της εικόνας. Αυτό είναι εμφανές σε μια εικόνα όταν γίνεται compressed χρησιμοποιώντας AVIF compression αλγορίθμους, σε αντίθεση με τη χρήση του WebP στα αριστερά.
Ωστόσο, εάν είσαι ικανοποιημένος με την AVIF ποιότητα και θέλεις να τη χρησιμοποιήσεις, μπορείς να το κάνεις συμπεριλαμβάνοντάς τη στο <picture> tag ως το πρώτο <source>.
Οι browsers που δεν την υποστηρίζουν απλώς θα το αγνοήσουν και θα προχωρήσουν στο επόμενο format που καθορίζεται στο tag <picture>.
Εδώ ακολουθεί ένα δείγμα κώδικα:
<picture>
<!-- AVIF format will be processed if client (i.e. browser ) supports it as a first in list-->
<source type="image/avif"
srcset="image-300w.avif 300w, image-600w.avif 600w, image-1200w.avif 1200w"
sizes="(max-width: 600px) 300px, (max-width: 900px) 600px, 1200px"
>
<!-- WebP format will be processed if client doesn't support AVIF -->
<source type="image/webp"
srcset="image-300w.webp 300w, image-600w.webp 600w, image-1200w.webp 1200w"
sizes="(max-width: 600px) 300px, (max-width: 900px) 600px, 1200px"
>
<!-- If WebP is also not supported, the browser will then fall back to the PNG format -->
<source type="image/png"
srcset="image-300w.png 300w, image-600w.png 600w, image-1200w.png 1200w"
sizes="(max-width: 600px) 300px, (max-width: 900px) 600px, 1200px"
>
<!-- Lastly, if none of the advanced formats are compatible, the browser will default to displaying the JPEG image. -->
<img src="image-300w.jpg"
srcset="image-300w.jpg 300w, image-600w.jpg 600w, image-1200w.jpg 1200w"
sizes="(max-width: 600px) 300px, (max-width: 900px) 600px, 1200px"
alt="Description of the image">
</picture>Αυτή η βελτιωση εγγυάται τη μέγιστη συμβατότητα σε διάφορους browsers και devices.
Θα καλύψουμε το “srcset” και “sizes attributes” αργότερα σε αυτό το άρθρο, εξηγώντας πώς να τα χρησιμοποιήσεις για τη βελτιστοποίηση εικόνων σε διαφορετικές συσκευές και μεγέθη οθόνης, διασφαλίζοντας έτσι ότι φορτώνονται αποτελεσματικά και είναι mobile-friendly.
Η σημασία του uniqueness στις εικόνες
Αρκετά websites είναι γεμάτα με τις ίδιες stock photos, επομένως θέλεις οι εικόνες/φωτογραφίες σου που εμφανίζονται στο website να έχουν uniqueness και να δίνουν αξία στους χρήστες.
Εάν γεμίσεις το website σου με στοκ εικόνες, στερείς την αυθεντικότητα και δίνεις σήμα στην Google ότι δεν προσφέρεις κάτι ξεχωριστό, μιας και η Google κατανοεί πλέον το context και το περιεχόμενο των εικόνων.
Εφόσον η ίδια στοκ φωτογραφία μπορεί να χρησιμοποιηθεί σε άλλα websites, αυτή θα αντιμετωπίζεται ως duplicate περιεχόμενο.
Το πιο γνωστό παράδειγμα είναι αυτό των συμβουλευτικών εταιρειών που υπερηφανεύονται για την εξυπηρέτηση πελατών τους. Όλα αυτά τα websites χρησιμοποιούν ουσιαστικά τις ίδιες στοκ εικόνες ενός κουστουμάτου που γελάει.
Ενώ μπορεί να έχεις κάνει optimize τέτοιου είδες εικόνες όσον αφορά το τεχνικό σκέλος, δεν θα έχει τον ίδιο αντίκτυπο ή πιθανά οφέλη στο SEO με μια unique εικόνα υψηλής ποιότητας.
Όσο περισσότερες original εικόνες έχεις, τόσο καλύτερη θα είναι η εμπειρία χρήστη και τόσο καλύτερες οι πιθανότητες κατάταξης σε σχετικές αναζητήσεις.
Να θυμάσαι ότι οι μεγάλες εικόνες είναι πιο πιθανό να εμφανίζονται στο Google Discover.
Η Google συνιστά οι εικόνες να έχουν πλάτος 1200 px και να ενεργοποιούνται μέσω του max-image-preview:large setting στο robots meta tag για να διασφαλιστεί ότι εμφανίζονται ως “large images” στο Google Discover.
<meta name='robots' content='index, follow, max-image-preview:large' />Βέβαια, η Google δεν εγγυάται ότι θα εμφανίζει πάντα μεγάλες εικόνες, ή thumbnails.
Το καλύτερο που έχεις να κάνεις είναι να συμπεριλάβεις την απαιτούμενη ρύθμιση στο robots meta tag και να βεβαιωθείς ότι οι εικόνες έχουν πλάτος τουλάχιστον 1200 px:
Image file names optimization
Όσον αφορά το SEO, η δημιουργία descriptive και keyword-rich file names είναι υψηλής σημασίας.
Τα file names ειδοποιούν την Google και άλλες μηχανές αναζήτησης σχετικά με το “topic” της εικόνας.
Συνήθως, τα file name που μοιάζουν κάπως έτσι “IMG_722019” ή κάτι παρόμοιο, δεν βοηθούν την Google να κατανοήσει καλύτερα την εικόνα.
Παρόλο που η Google μπορεί πλέον να κατανοήσει το περιεχόμενο της εικόνας, θα ήταν καλή ιδέα να ορίσεις file names που είναι επεξηγηματικά και δίνουν στην Google να καταλάβει πιο εύκολα τι αφορά η εικόνα.
Ανάλογα με το πόσο μεγάλο είναι το library των εικόνων σου, αυτό απαιτεί λίγη δουλειά, αλλά η αλλαγή των default file names είναι πάντα μια καλή πρακτική.
Sitemap και images
Είτε προσθέτεις τις εικόνες σου στο sitemap, είτε δημιουργείς ένα νέο sitemap μόνο για εικόνες, χρείαζεται και είναι απαιραίτητο να βρίσκονται οι εικόνες σου στο sitemap του site.
Το να έχεις τις εικόνες μέσα στο sitemap αυξάνει σημαντικά τις πιθανότητες οι μηχανές αναζήτησης να κάνουν crawl και index τις εικόνες αυτές. Έτσι, αυτό θα οδηγήσει σε μεγαλύτερη επισκεψιμότητα.
Εάν χρησιμοποιείς WordPress, το Yoast και το RankMath είναι plugins που προσφέρουν λύση σε αυτό το πρόβλημα.
Εάν δεν χρησιμοποιείς WordPress, μπορείς να εξετάσεις τη χρήση εργαλείων όπως το Screaming Frog για να δημιουργήσεις ένα sitemap.
Πνευματικά δικαιώματα και copywriting
Ανεξάρτητα από τα image files που επιλέγεις να χρησιμοποιήσεις, θα πρέπει πάντα να βεβαιώνεσαι ότι δεν υπάρχει το ρίσκο των πνευματικών δικαιωμάτων.
Δεν είναι λίγες οι περιπτώσεις όπου brands-κολοσσοί έχουν κληθεί να πληρώσουν πρόστιμα για χρήση πνευματικών δικαιωμάτων, όπως η Skechers η οποία μηνύθηκε για 2,5 εκατομμύρια δολλάρια.
Αν κάποιος images provider όπως οι Getty, Shutterstock και DepositFiles είναι κάτοχος μιας εικόνας που χρησιμοποιείς και δεν έχεις άδεια χρήσης – τότε κινδυνεύεις με μια ακριβή αγωγή.
Σύμφωνα με τον νόμο Digital Millenium Copyright (DMCA), ενδέχεται να σου εκδοθεί μια ειδοποίηση εάν έχεις παραβιάσει τυχόν ζητήματα πνευματικών δικαιωμάτων. Εάν ο κάτοχος του περιεχομένου δει το περιεχόμενό του στο site σου, μπορεί να εκδόσει μια εντολή DMCA με την οποία θα πρέπει να συμμορφωθείς.
SEO-friendly alternative text (alt text)
Τα Alt tags είναι μια εναλλακτική λύση κειμένου σε εικόνες που χρησιμεύει όταν ένας browser δεν μπορεί να φορτώσει σωστά μια εικόνα. Παρόμοια με τον τίτλο της εικόνας, το alt attribute περιγράφει το περιεχόμενο ενός αρχείου εικόνας.
Όταν η εικόνα δεν φορτώσει, θα εμφανιστεί ένα πλαίσιο με το alt tag να εμφανίζετε στην επάνω αριστερή γωνία. Θα πρέπει να βεβαιωθείς ότι τα alt tags ταιριάζουν και είναι σχετικά με την εικόνα που συνοδεύουν.
Τα alt tags ωφελούν και το SEO.
Σίγουρα, θα πρέπει να διασφαλίσεις ότι όλες οι υπόλοιπες SEO ενέργειες βελτιστοποίησης έχουν υλοποιηθεί με τον σωστό τρόπο, αλλά εάν η εικόνα δεν φορτώσει για οποιονδήποτε λόγο, οι χρήστες θα λάβουν γνώση για το τι αφορά το περιεχόμενό της.
Επιπλέον, η προσθήκη των κατάλληλων alt tags στο website μπορεί να βοηθήσει στην επίτευξη καλύτερων rankings, συσχετίζοντας keywords με εικόνες, καθώς το alt text είναι ένας ranking factor.
Παρέχει στην Google χρήσιμες πληροφορίες σχετικά με το θέμα της εικόνας. Η Google χρησιμοποιεί αυτές τις πληροφορίες για να βοηθήσει στον προσδιορισμό της καλύτερης εικόνας που θα επιστρέψει για το ερώτημα ενός χρήστη.
Ας δούμε ένα παράδειγμα ενός καλού και ενός κακού alt text, με βάση το επίσημο documentation της Google:
Επιπλέον, αρκετές χώρες έχουν πλαισιώσει και από νομικής πλευράς τα alt texts, όπως η Αμερική σύμφωνα με τον νόμο American Disabilities Act για άτομα που αντιμετωπίζουν δυσκολία στο να δουν εικόνες.
Ένα περιγραφικό alt text μπορεί να ενημερώσει τους χρήστες για το τι ακριβώς βρίσκεται στη φωτογραφία. Για παράδειγμα, ας υποθέσουμε ότι έχεις μια φωτογραφία με μια σοκολάτα στο site σου.
Το alt text θα μπορούσε να είναι:
<img src=”chocolate-1.jpg” alt=”chocolate”/>Ωστόσο, μια βελτιωμένη έκδοση που περιγράφει αναλυτικά την εικόνα θα μπορούσε να είναι:
<img src=”chocolate-1.jpg” alt=”dark chocolate coffee flavored bar”/>Για περαιτέρω αξία στο SEO, το alt text μπορεί να λειτουργήσει ως anchor text ενός internal link όταν η εικόνα ανακατευθύνει σε διαφορετική σελίδα του site.
Meta title & meta description optimization
Η Google χρησιμοποιεί τον τίτλο και την περιγραφή των σελίδων ως μέρους του αλγορίθμου αναζήτησης εικόνων και φωτογραφιών.
Όλοι οι βασικοί SEO παράγοντες, όπως metadata, heade tags, copies, structured data κ.α., επηρεάζουν τον τρόπο με τον οποίο η Google ταξινομεί τις εικόνες σου.
Φρόντισε, λοιπόν, στις πιο σημαντικές σελίδες που το περιεχόμενό τους περιλαμβάνει εικόνες που είναι εμπορικά σημαντικές, να έχεις βελτιστοποιημένους όλους τα on-site elements του SEO.
Lazy Loading και Preloading
Το Lazy Loading αναβάλλει τη φόρτωση των εικόνων που δεν είναι ορατές στο viewport του χρήστη (above the fold).
Αντί να φορτώσει όλες τις εικόνες κατά τη φόρτωση της σελίδας, το lazy loading κατεβάζει τις εικόνες μόνο όταν πρόκειται να εμφανιστούν στο view του χρήστη καθώς αυτός κάνει scroll.
Αυτό μειώνει το αρχικό load time, επιταχύνει το page performance και μπορεί να βελτιώσει σημαντικά το LCP, ειδικά σε σελίδες με πολλές εικόνες.
Η εφαρμογή του lazy loading είναι τόσο απλή όσο η προσθήκη του loading=”lazy” attribute στο <img> tag.
<img src="image.jpg" loading="lazy" srcset="image-300w.jpg 300w, image-600w.jpg 600w" alt="Description">Πότε όμως μην εφαρμόζεις lazy loading στις εικόνες που βρίσκονται above the fold, καθώς αυτό μπορεί να επηρεάσει αρνητικά το First Contentful Paint (FCP), ένα βασικό metric των Core Web Vitals.
Αντίθετα, μπορείς να τις προ-φορτώσεις (preload) ή να χρησιμοποιήσεις το fetchpriority=”high” attribute.
Το πλεονέκτημα του preloading έναντι του “fetchpriority” attribute είναι ότι το preload υποστηρίζεται από όλους τους browsers, ενώ το δεύτερο δεν υποστηρίζεται από Firefox και Opera browsers.
Ακολουθούν παραδείγματα του preload και της χρήστης του fetchpriority:
<img src="image.jpg" fetchpriority="high" srcset="image-300w.jpg 300w, image-600w.jpg 600w" alt="Description"><link rel="preload" as="image" href="image-600w.jpg" imagesrcset="image-300w.jpg 300w, image-600w.jpg 600w" imagesizes="(max-width: 600px) 300px, 600px">Χρησιμοποιώντας το preload ή το fetchpriority, δίνεις εντολή στον browser να ξεκινήσει να φορτώσει τις εικόνες κατά προτεραιότητα, κάτι που είναι χρήσιμο για τη βελτίωση του Largest Contentful Paint (LCP).
Structured Data και Image SEO
Η προσθήκη των structured data στις εικόνες σου μπορεί να βελτιώσει το performance των σελίδων σου καθοδηγώντας την Google και άλλες μηχανές αναζήτησης ώστε να προσφέρουν καλύτερα visual results.
Για παράδειγμα, μπορείς να συμπεριλάβεις εικόνες των προϊόντων σου μαζί με λεπτομέρειες όπως τιμή, διαθεσιμότητα και αξιολογήσεις στο product schema. Αυτό θα κάνει τα προϊόντα σου να ξεχωρίζουν στα αποτελέσματα αναζήτησης, προσελκύοντας περισσότερη προσοχή από πιθανούς αγοραστές.
Μια άλλη περίπτωση που περιλαμβάνει τη χρήση ενός image schema στο Article schema με πολλαπλά μεγέθη για τη βελτίωση των άρθρων σου στο Google Discover και σε διαφορετικές συσκευές στο Google Search.
Η Google μπορεί να επιλέξει το καλύτερο μέγεθος που ταιριάζουν κατά την εμφάνισή τους.
Ας δούμε ένα παράδειγμα:
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Article",
"headline": "Article Title",
"image": [
"https://example.com/photos/1x1/image.jpg",
"https://example.com/photos/4x3/image.jpg",
"https://example.com/photos/16x9/image.jpg"
],
"datePublished": "2024-01-10T08:00:00+08:00",
"dateModified": "2024-01-10T09:20:00+08:00",
"author": {
"@type": "Person",
"name": "Author Name"
},
...
}
</script>CDN και Image Delivery Speed
Το Content Delivery Network (CDN) είναι ένα σύνολο από servers διεσπαρμένων σε όλο τον κόσμο που φιλοξενούν το περιεχόμενό σου και το σερβίρουν στους χρήστες από μια τοποθεσία server που είναι πλησιέστερα σε αυτούς γεωγραφικά.
Ωστόσο, το σερβίρισμα δεν είναι το μόνο πλεονέκτημα των CDN. Προσφέρουν επίσης δυνατότητες για transformation και optimization.
Περνώντας παραμέτρους μαζί με τα image URLs, μπορείς να ζητήσεις διαφορετικές μεγέθη εικόνας ή μετατροπή των εικόνων σε πιο αποτελεσματικά formats όπως το WebP.
Για παράδειγμα, υπηρεσίες όπως το Cloudflare’s Polish, μπορούν να βελτιστοποιήσουν αυτόματα τα image formats ανιχνεύοντας τη συμβατότητα του browser με το WebP format. Μπορεί να εξυπηρετήσει εικόνες PNG και JPEG σε μορφές WebP κατόπιν αιτήματος.
Παρακάτω θα βρεις μερικά από τα πιο γνωστά και αξιόπιστα CDNs:
Συνοψίζοντας
Επομένως, πριν ξεκινήσεις να ανεβάζεις εικόνες στο site σου, ακολούθησε τα όσα διάβασες παραπάνω.
Το πιο σημαντικό πράγμα είναι να διασφαλίσεις ότι η εικόνα και το alt text είναι σχετικά με τη σελίδα.
Άλλα βασικά πράγματα να έχεις κατά νου:
Επίλεξε τη σωστή μορφή αρχείου.
Σέρβιρε το σωστό μέγεθος για καλύτερη ταχύτητα φόρτωσης.
Βεβαιώσου ότι τα on-page SEO elements (metadata, structured data κ.α.) ταιριάζουν με τις εικόνες σου.
Για το crawlability, δημιούργησε ένα sitemap ή βεβαιώσου ότι οι εικόνες σου βρίσκονται ήδη σε αυτό.
Η βελτιστοποίηση των εικόνων στο SEO είναι κάτι που συχνά παραλείπεται, αλλά είναι απαραίτητο για τις μηχανές αναζήτησης. Πόσο μάλλον, όταν η ίδια η Google άρχισε να δίνει προτεραιότητα στα visual files των αποτελεσμάτων αναζήτησης.
Καλό optimization!