Από Sotirios Terzis ·
Οι εικόνες βοηθούν την αναζήτηση και τα αιτήματα όταν είναι πραγματικές, περιγράφονται με κείμενο και είναι αρκετά μικρές για να φορτώνουν γρήγορα. Χρησιμοποιήστε δικές σας φωτογραφίες όπου μπορείτε, γράψτε σύντομο εναλλακτικό κείμενο (alt) για κάθε εικόνα που έχει νόημα, συμπιέστε τα αρχεία και ορίστε διαστάσεις ώστε η σελίδα να μην πετάγεται. Οι βαριές φωτογραφίες stock χωρίς περιγραφή κάνουν το αντίθετο.
Βασικά σημεία
- Πραγματικές φωτογραφίες της δουλειάς, της ομάδας και του χώρου σας δίνουν στους επισκέπτες αποδείξεις που οι γενικές εικόνες stock δεν μπορούν.
- Το εναλλακτικό κείμενο περιγράφει τι δείχνει μια εικόνα, για αναγνώστες οθόνης και για μηχανές αναζήτησης.
- Οι υπερμεγέθεις εικόνες είναι συχνή αιτία αργών σελίδων, οπότε αλλάξτε μέγεθος και συμπιέστε πριν το ανέβασμα.
- Αν δώσετε σε κάθε εικόνα πλάτος και ύψος, η διάταξη δεν μετακινείται κατά τη φόρτωση.
- Μη χρησιμοποιείτε lazy loading για την κύρια εικόνα στην κορυφή της σελίδας.
Γιατί οι πραγματικές φωτογραφίες νικούν τις stock
Οι επισκέπτες ψάχνουν αποδείξεις ότι μια επιχείρηση είναι αυτό που λέει. Μια φωτογραφία του πραγματικού εργαστηρίου, γραφείου, της ομάδας ή ενός ολοκληρωμένου έργου σας δίνει αυτή την απόδειξη. Μια φωτογραφία stock με χαμογελαστούς ανθρώπους μπροστά σε laptop δεν δίνει καμία, και οι επισκέπτες την έχουν δει κι αλλού. Οι πραγματικές φωτογραφίες δεν χρειάζονται επαγγελματική φωτογράφιση για να είναι χρήσιμες. Καλό φως, καθαρό φόντο και σωστή εστίαση με ένα σύγχρονο κινητό αρκούν για τις περισσότερες μικρές επιχειρήσεις.
Αυτό συνδέεται με τις αποδείξεις που περιγράφουμε στο άρθρο μας για την αρχική σελίδα επιχειρήσεων υπηρεσιών.
Εναλλακτικό κείμενο: τι να γράψετε
Το εναλλακτικό κείμενο είναι μια σύντομη περιγραφή στον κώδικα της σελίδας. Οι αναγνώστες οθόνης το διαβάζουν δυνατά σε όσους δεν βλέπουν την εικόνα, και οι μηχανές αναζήτησης το χρησιμοποιούν για να καταλάβουν τι δείχνει. Περιγράψτε το περιεχόμενο απλά: «Δρύινο τραπέζι φαγητού με έξι καρέκλες σε φωτεινό showroom» είναι καλύτερο από «τραπέζι» ή μια σειρά λέξεων-κλειδιών. Αν μια εικόνα είναι καθαρά διακοσμητική, δώστε της κενό alt ώστε οι αναγνώστες οθόνης να την παραλείπουν.
Μη γεμίζετε το εναλλακτικό κείμενο με λέξεις-κλειδιά. Γράψτε για έναν άνθρωπο που δεν βλέπει την εικόνα. Οι προσβάσιμες εικόνες είναι επίσης μέρος της λίστας ελέγχου για την Πράξη για την Προσβασιμότητα.
Ονόματα αρχείων, μορφές και μέγεθος
Δώστε περιγραφικά ονόματα στα αρχεία πριν τα ανεβάσετε, όπως «drino-trapezi-showroom.jpg» και όχι «IMG_4821.jpg». Σας βοηθά να διαχειρίζεστε τα αρχεία και δίνει στις μηχανές αναζήτησης μια επιπλέον ένδειξη.
Για το μέγεθος, αλλάξτε τις διαστάσεις της εικόνας στο μεγαλύτερο μέγεθος στο οποίο θα εμφανίζεται. Μια φωτογραφία κατευθείαν από κινητό μπορεί να έχει πλάτος αρκετές χιλιάδες pixels, πολύ περισσότερα από όσα χρειάζεται οποιαδήποτε διάταξη. Μετά συμπιέστε την και χρησιμοποιήστε μια σύγχρονη μορφή όπως WebP ή AVIF, που συνήθως είναι μικρότερες από το JPEG σε παρόμοια ποιότητα. Οι περισσότερες σύγχρονες πλατφόρμες websites μπορούν να κάνουν τη μετατροπή για εσάς.
Μετατόπιση διάταξης και φόρτωση
Αν μια σελίδα δεν ξέρει πόσο μεγάλη θα είναι μια εικόνα, το κείμενο πετάγεται προς τα κάτω όταν εμφανιστεί η εικόνα. Ορίστε πλάτος και ύψος σε κάθε εικόνα ή κρατήστε τον χώρο της στη διάταξη. Η Google μετρά αυτό το πέταγμα ως Cumulative Layout Shift, και μια καλή βαθμολογία είναι 0,1 ή λιγότερο.
Οι εικόνες πιο κάτω στη σελίδα μπορούν να φορτώνουν μόνο όταν ο επισκέπτης πλησιάσει με την κύλιση, κάτι που λέγεται lazy loading. Η κύρια εικόνα στην κορυφή της σελίδας, που συχνά είναι το στοιχείο του Largest Contentful Paint, πρέπει να φορτώνει αμέσως. Το όριο της Google για καλό Largest Contentful Paint είναι 2,5 δευτερόλεπτα ή λιγότερο. Ο οδηγός μας για την ταχύτητα του website πηγαίνει πιο βαθιά.
Εικόνες σε τοπικές σελίδες και σελίδες υπηρεσιών
Μια σελίδα για μια υπηρεσία γίνεται πιο πειστική με φωτογραφίες αυτής της υπηρεσίας ολοκληρωμένης. Αν εξυπηρετείτε μια τοπική περιοχή, προσθέστε φωτογραφίες που τη δείχνουν: τον χώρο, το βαν, ολοκληρωμένες δουλειές στην περιοχή. Αναφέρετε το μέρος στη λεζάντα όπου ισχύει. Ο οδηγός μας για το τοπικό SEO απαριθμεί τα άλλα σημεία όπου πρέπει να κρατάτε τα στοιχεία σας ίδια.
Ένας γρήγορος έλεγχος του δικού σας site
Ανοίξτε τις τρεις σημαντικότερες σελίδες σας και ελέγξτε τέσσερα πράγματα. Είναι δικές σας οι φωτογραφίες; Έχει κάθε εικόνα με νόημα περιγραφή; Έχουν τα αρχεία λογικό μέγεθος; Μένει η σελίδα σταθερή όσο φορτώνει; Διορθώστε πρώτα τις βαρύτερες εικόνες.
Αν θέλετε ένα δεύτερο ζευγάρι μάτια, ο δωρεάν έλεγχος website περιλαμβάνει ελέγχους ταχύτητας και εικόνων, και μια δωρεάν γνωριμία 30 λεπτών είναι η ευκαιρία να συζητήσουμε ένα πλάνο φωτογραφιών. Η δουλειά μας δείχνει πώς παρουσιάζουμε πραγματικά έργα.
Περισσότερα από το journal
Πώς να διαλέξετε γραμματοσειρές για το website σας: αναγνωσιμότητα, χαρακτήρας και ταχύτητα
Η γραμματοσειρά δίνει «φωνή» στην επιχείρησή σας πριν διαβαστεί μία λέξη. Πώς να διαλέξετε μία ευανάγνωστη, ταιριαστή στο brand και ελαφριά για τη σελίδα.
Διαβάστε →Brand 3 λεπτά ανάγνωσηςΗ ψυχολογία του χρώματος στον σχεδιασμό websites: τι στηρίζει η έρευνα και τι όχι
Χτίζει το μπλε εμπιστοσύνη και πουλά το κόκκινο; Μια ρεαλιστική ματιά στους συνειρμούς των χρωμάτων και στις επιλογές που βοηθούν μετρήσιμα ένα website.
Διαβάστε →ΕΧΕΤΕ ΚΑΠΟΙΟ ΕΡΓΟ ΣΤΟ ΜΥΑΛΟ ΣΑΣ;
Πείτε μας τι φτιάχνετε — ή ξεκινήστε με έναν δωρεάν έλεγχο του site που έχετε.