Telegram, WhatsApp+380637610482
Βαλέρι Ντανιούκ
Βαλέρι ΝτανιούκπρογραμματιστήςΑνάπτυξη εργαλείων Τεχνητής Νοημοσύνης για επιχειρήσεις. Υψηλής ποιότητας. Προσιτό.Αποστολή μηνύματος στο Telegram

Online Έλεγχος SEO εικόνας: Alt, Lazy Loading, WebP και Srcset – Τι να διορθώσετε

Έλεγχος SEO εικόνας στο διαδίκτυο: alt, αργή φόρτωση, WebP και srcset, βαθμολογία 0–100 για κάθε εικόνα

Τι θα λάβετε

  • Βαθμολογία 0–100 και σχόλια για κάθε εικόνα στη σελίδα: alt, αργή φόρτωση, πλάτος/ύψος, WebP/AVIF, srcset — δωρεάν
  • Κατανόηση του τρόπου υπολογισμού της βαθμολογίας σας και ποιες επεξεργασίες θα τη βελτιώσουν ταχύτερα
  • Έτοιμα παραδείγματα κώδικα για την κύρια εικόνα, τις εικόνες που προσαρμόζονται στις ανάγκες και τις ετικέτες alt
Εφαρμογή: σε 15 λεπτάΑποθηκεύει: Επισκεψιμότητα και χρόνοι φόρτωσης εικόνων Google στο τηλέφωνό σας

Η σύντομη απάντηση: για να ελέγξετε εικόνες σε μια σελίδα για SEO, επικολλήστε τη διεύθυνση URL της στο δωρεάν εργαλείο SEO Image Checker του PromoPilot. Το εργαλείο θα αναλύσει έως και 100 ετικέτες <img>: εάν υπάρχει ετικέτα alt, εάν έχει οριστεί loading="lazy", εάν έχουν οριστεί το πλάτος και το ύψος, εάν χρησιμοποιούνται WebP, AVIF ή SVG και εάν υπάρχει srcset. Το αποτέλεσμα είναι μια βαθμολογία από 0 έως 100 και σχόλια για κάθε εικόνα. Παρακάτω θα βρείτε πώς υπολογίζεται η βαθμολογία, τι πρέπει να διορθωθεί πρώτα και τι δεν βλέπει το εργαλείο.

Κατασκευάζω ιστοσελίδες και καταστήματα εδώ και 12 χρόνια και οι εικόνες αποτελούν το κύριο εμπόδιο σχεδόν σε κάθε ένα από αυτά. Μια τυπική κάρτα προϊόντος: πέντε φωτογραφίες 3MB απευθείας από την κάμερα, ένα κενό εναλλακτικό κείμενο και το όνομα αρχείου είναι IMG_4512.jpg.

Τι ελέγχει ο Έλεγχος SEO εικόνας;

Το εργαλείο εξετάζει κάθε εικόνα στη σελίδα με βάση πέντε κριτήρια και τα προσθέτει μαζί για να σχηματίσει μια συνολική βαθμολογία.

Τι ελέγχει; Τι κοιτάζει; Γιατί είναι αυτό σημαντικό για το SEO και τις επιχειρήσεις;
Εναλλακτική Υπάρχει περιγραφή κειμένου για κάθε <img> Κατάταξη εικόνων Google με βάση την εναλλακτική, προσβασιμότητα για τυφλούς
Αργή φόρτωση Το χαρακτηριστικό loading="lazy" εφαρμόζεται σε εικόνες κάτω από την πρώτη οθόνη. Η σελίδα δεν φορτώνει τίποτα στο οποίο ο επισκέπτης δεν έχει κάνει κύλιση ακόμα.
Πλάτος και ύψος Καθορίζονται οι διαστάσεις στα χαρακτηριστικά της ετικέτας; Τα μπλοκ δεν "πηδούν" κατά τη φόρτωση - αυτή είναι μια μέτρηση CLS
Σχήμα και διάταξις βιβλίου WebP, AVIF ή SVG ανά επέκταση αρχείου Οι σύγχρονες μορφές είναι αισθητά μικρότερες από τις JPG και PNG.
Σρκσέτι Υπάρχουν επιλογές εικόνας για διαφορετικές οθόνες; Το τηλέφωνο λαμβάνει το μικρό αρχείο, όχι την έκδοση οθόνης.

Κάθε εικόνα λαμβάνει μια λίστα σχολίων και η σελίδα λαμβάνει μια τελική βαθμολογία. Αυτό είναι βολικό: μπορείτε να δείτε όχι μόνο τι δεν πάει καλά, αλλά και ποια εικόνα φταίει.

Πώς να ελέγξετε εικόνες σε έναν ιστότοπο στο διαδίκτυο;

Ελέγξτε τις εικόνες σε 4 βήματα: επικολλήστε τη διεύθυνση URL, περιμένετε να σαρωθούν έως και 100 εικόνες, δείτε την αξιολόγηση και διορθώστε τυχόν σχόλια.

  1. Άνοιγμα του Ελέγχου SEO εικόνων.
  2. Εισαγάγετε τη διεύθυνση της σελίδας, κατά προτίμηση μία με πολλές φωτογραφίες: κάρτα προϊόντος, κατηγορία, άρθρο ιστολογίου, χαρτοφυλάκιο.
  3. Κάντε κλικ στην επιλογή "Έλεγχος" και περιμένετε να σαρωθούν όλες οι εικόνες.
  4. Δείτε τη βαθμολογία και τη λίστα σχολίων για κάθε εικόνα.
  5. Παρακαλώ διορθώστε τα προβλήματα και ελέγξτε ξανά τη σελίδα.

Έτσι φαίνεται η σελίδα εργαλείων: πεδίο διεύθυνσης, λίστα ελέγχων και Συχνές ερωτήσεις.

Δωρεάν σελίδα Image SEO Checker του PromoPilot: Πεδίο URL, έλεγχος alt, αργή φόρτωση, WebP/AVIF και srcset

Πώς υπολογίζεται η βαθμολογία και τι πρέπει να διορθωθεί πρώτα;

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

Εξέταση Πρόστιμο Σχόλιο
Εναλλακτική Λιγότερο από το 50% των εικόνων με alt — -30. λιγότερο από 80% — -15. λιγότερο από 100% — -5 Το πιο σημαντικό σημείο
Αργή φόρτωση λιγότερο από 50% - −15· λιγότερο από 80% - −8 Οι τρεις πρώτες φωτογραφίες δεν λαμβάνονται υπόψη
Πλάτος και ύψος λιγότερο από 50% - −15· λιγότερο από 80% - −8 Οι διαστάσεις που βασίζονται μόνο σε CSS δεν λαμβάνονται υπόψη.
WebP, AVIF ή SVG λιγότερο από 30% - -10 Η μορφή καθορίζεται από την επέκταση
Srcset για εικόνες ράστερ λιγότερο από 30% - -10 Το SVG δεν χρειάζεται srcset

Εδώ είναι η εντολή εργασίας μου:

  1. Alt. Το πιο ακριβό αντικείμενο και το πιο εύκολο στην επισκευή. Γράψτε τι εμφανίζεται: alt="Кожаный рюкзак Nord 20 л, коричневый, вид сбоку", όχι alt="рюкзак купить дёшево рюкзак". Για διακοσμητικά στοιχεία, χρησιμοποιήστε ένα κενό alt="".
  2. Πλάτος και ύψος. Καθορίστε τις πραγματικές διαστάσεις στα χαρακτηριστικά και προσθέστε img { max-width: 100%; height: auto; } στο CSS—η εικόνα θα παραμείνει responsive και η διάταξη θα σταματήσει να μεταπηδά.
  3. Η αργή φόρτωση ισχύει για όλα τα στοιχεία που βρίσκονται στο κάτω μέρος. Ωστόσο, είναι επιζήμια για την εικόνα του ήρωα: πρέπει να φορτώνεται αμέσως και με προτεραιότητα.
  4. WebP ή AVIF. WordPress υποστηρίζει μεταφορτώσεις WebP από την έκδοση 5.8 και το AVIF από την έκδοση 6.5.
  5. Srcset για μεγάλες φωτογραφίες, ώστε το τηλέφωνο να μην κατεβάζει την έκδοση για οθόνη.

Ένα παράδειγμα σωστής κύριας εικόνας και προσαρμοστικής φωτογραφίας στο κείμενο:

<img src="/img/hero.webp" alt="Мастерская кожаных изделий Nord" width="1200" height="600" fetchpriority="high"> <img src="/img/bag-700.webp" srcset="/img/bag-700.webp 700w, /img/bag-1400.webp 1400w" sizes="(max-width: 700px) 100vw, 700px" alt="Рюкзак Nord 20 л, вид сбоку" width="700" height="700" loading="lazy">

Πώς να γράψω μια καλή ετικέτα alt για μια εικόνα;

Η ετικέτα alt είναι το πιο σημαντικό στοιχείο της αξιολόγησης και εκεί γίνονται τα λάθη που γίνονται συχνότερα: είτε αφήνοντάς την κενή είτε γεμίζοντάς την με λέξεις-κλειδιά. Ένας απλός κανόνας: περιγράψτε την εικόνα σε κάποιον που δεν μπορεί να τη δει με μία πρόταση.

Εικόνα Κακή εναλλακτική Καλή εναλλακτική
Φωτογραφία προϊόντος рюкзак купить рюкзак недорого Кожаный рюкзак Nord 20 л, коричневый, вид спереди
Φωτογραφία ομάδας photo1 Мастера мастерской Nord за работой над сумкой
Διάγραμμα ή γράφημα график Рост заказов с сайта по месяцам: с 40 до 120 в месяц
Εικονίδιο διακόσμησης иконка empty alt="" — δεν χρειάζεται να το διαβάσετε

Για έναν κατάλογο, είναι βολικό να δημιουργήσετε ετικέτες alt χρησιμοποιώντας ένα πρότυπο: όνομα προϊόντος + χρώμα ή παραλλαγή + γωνία. Με αυτόν τον τρόπο, πέντε φωτογραφίες σε μία μόνο κάρτα θα έχουν πέντε διαφορετικές, χρήσιμες περιγραφές, αντί για πέντε πανομοιότυπες.

Το όνομα του αρχείου έχει επίσης σημασία: kozhanyj-ryukzak-nord-korichnevyj.webp είναι καλύτερο από IMG_4512.jpg. Δεν έχει νόημα να μετονομάζετε παλιά αρχεία μόνο και μόνο γι' αυτό, αλλά να ανεβάζετε νέα με περιγραφικά ονόματα.

Σύγκριση: Έλεγχος SEO εικόνας και εναλλακτικές λύσεις

Εργαλείο Τι είναι δωρεάν; Περιορισμοί Για ποιον είναι κατάλληλο;
PromoPilot — Ελεγκτής SEO εικόνας Alt, αργή φόρτωση, πλάτος/ύψος, μορφές, srcset; βαθμολογία 0–100 και σχόλια για κάθε εικόνα Έως 100 εικόνες, το μέγεθος του αρχείου δεν έχει εκτιμηθεί Γρήγορη ανάλυση εικόνων από οποιαδήποτε σελίδα
Google PageSpeed Insights Έλεγχοι εικόνας ως μέρος της δοκιμής ταχύτητας: μορφή, μέγεθος, αργή φόρτωση Αναμεμειγμένο με δεκάδες άλλους ελέγχους, το alt μόλις που καταλαβαίνει Αξιολόγηση της επίδρασης των εικόνων στην ταχύτητα
Σκουός Συμπίεση και μετατροπή μιας μεμονωμένης εικόνας σε ένα πρόγραμμα περιήγησης Δεν ελέγχει τη σελίδα, λειτουργεί με αρχεία Προετοιμασία μεμονωμένων εικόνων
Ουρλιάζοντας Βάτραχος SEO Αράχνη Λίστα εικόνων χωρίς εναλλακτικό κείμενο σε ολόκληρο τον ιστότοπο Απαιτείται εγκατάσταση, η δωρεάν έκδοση έχει όριο στις διευθύνσεις Εναλλακτικός έλεγχος σε εκατοντάδες σελίδες

Συμπέρασμα: Ένας online ελεγκτής δείχνει τι δεν πάει καλά με τις εικόνες σε μια συγκεκριμένη σελίδα, το PageSpeed δείχνει πόσο κοστίζει σε ταχύτητα και το Squoosh ή ένας μετατροπέας βοηθά στην επιδιόρθωση των ίδιων των αρχείων.

Το PromoPilot διαθέτει 87 δωρεάν εργαλεία SEO, συμπεριλαμβανομένου ενός εργαλείου συμπίεσης εικόνων και ενός μετατροπέα WebP που λειτουργούν απευθείας στο πρόγραμμα περιήγησης, χωρίς να χρειάζεται να ανεβάσετε αρχεία στον διακομιστή. Για να κατανοήσετε το συνολικό μέγεθος σελίδας, ανατρέξτε στο άρθρο μας στη σειρά ανάλυσης ταχύτητας σελίδας.

Τι δεν βλέπει η επαλήθευση εικόνας;

Ας είμαστε ειλικρινείς σχετικά με τα όρια του εργαλείου—είναι σημαντικό να τα γνωρίζουμε για να ερμηνεύσουμε με ακρίβεια την αξιολόγηση:

  • Το μέγεθος του αρχείου δεν λαμβάνεται υπόψη — οι εικόνες δεν λαμβάνονται. Η μορφή καθορίζεται από την επέκταση.
  • <picture> δεν αναλύεται: Το JPG στο <img> θα επισημανθεί ακόμα κι αν υπάρχει AVIF ή WebP στο <source> δίπλα του.
  • Οι εικόνες φόντου από CSS και οι εικόνες που προστέθηκαν από JavaScript δεν περιλαμβάνονται στην αναφορά.
  • Οι διαστάσεις που καθορίζονται μόνο σε CSS δεν λαμβάνονται υπόψη.
  • Μια σελίδα χωρίς ούτε μία <img> λαμβάνει 50 πόντους - αυτό δεν είναι "τα μισά λάθη", αλλά "τίποτα για αξιολόγηση".

Πότε ένα δωρεάν εργαλείο δεν είναι αρκετό;

Εικόνες πριν και μετά τη βελτιστοποίηση: κενά alt και βαριά JPG έναντι περιγραφών, WebP, καθορισμένων διαστάσεων και srcset

Η διόρθωση του εναλλακτικού κειμένου σε μία μόνο σελίδα διαρκεί δέκα λεπτά. Αλλά αν το κατάστημα έχει πέντε χιλιάδες προϊόντα, είναι αδύνατο να το κάνετε χειροκίνητα. Χρειάζεστε έναν ειδικό εάν:

  • Το alt θα πρέπει να δημιουργείται αυτόματα από το όνομα, το χρώμα και τη γωνία για ολόκληρο τον κατάλογο.
  • Οι εικόνες φορτώνονται από την κάμερα χωρίς συμπίεση και απαιτείται αυτόματη αγωγός: συμπίεση, WebP, πολλαπλά μεγέθη.
  • Το θέμα του ιστότοπου εμφανίζει φωτογραφίες χωρίς πλάτος, ύψος και srcset και το πρότυπο πρέπει να διορθωθεί.
  • Θέλετε να λάβετε επισκεψιμότητα από τις Εικόνες Google για ερωτήματα σχετικά με προϊόντα;

Τι μπορώ να κάνω για την ιστοσελίδα σας;

Είμαι ο Valeriy Danyuk, προγραμματιστής και ειδικός SEO με 12 χρόνια εμπειρίας και πάνω από 200 πελάτες, συμπεριλαμβανομένων πολυάριθμων ηλεκτρονικών καταστημάτων με χιλιάδες φωτογραφίες.

SEO και έλεγχος

Καταστήματα και κατάλογοι

Λογιστική και αυτοματοποίηση

Στείλτε μου έναν σύνδεσμο για την κάρτα προϊόντος στο Telegram - Θα σας πω πόσα μπορείτε να κερδίσετε με βάση τις εικόνες.

Αποτέλεσμα

  1. Το online εργαλείο ελέγχου εικόνων SEO αναλύει έως και 100 εικόνες σε μια σελίδα και αποδίδει μια βαθμολογία από 0 έως 100, μαζί με σχόλια για κάθε μία.
  2. Οι περισσότεροι βαθμοί δίνονται στις διαστάσεις alt και πλάτους/ύψους, ακολουθούμενες από τις διαστάσεις lazy loading, WebP/AVIF και srcset.
  3. Η κύρια εικόνα δεν χρειάζεται αργή φόρτωση - χρειάζεται fetchpriority="high".
  4. Για μεγάλους καταλόγους, η επεξεργασία φωτογραφιών είναι αυτοματοποιημένη—ή επιλέγεται μια πλατφόρμα όπου αυτό έχει ήδη γίνει, για παράδειγμα, 1001site.

Ελέγξτε την πιο βαριά σελίδα του ιστότοπού σας με το δωρεάν Image SEO Checker — ξεκινήστε με το alt.

Πηγές

  • Σελίδα Ελέγχου SEO Εικόνας του PromoPilot - έλεγχοι, κανόνες αξιολόγησης, περιορισμοί και Συχνές Ερωτήσεις.
  • Κέντρο Αναζήτησης Google - Προτάσεις εικόνων για αναζήτηση.
  • Google PageSpeed Insights και Squoosh - Περιγραφές λειτουργιών.

Αναφορές και πηγές

Ερωτήσεις και απαντήσεις

Γιατί είναι σημαντικές οι ετικέτες alt για το SEO;

Το εναλλακτικό κείμενο περιγράφει την εικόνα για τις μηχανές αναζήτησης και τα προγράμματα ανάγνωσης οθόνης για τυφλούς. Google Images χρησιμοποιεί εναλλακτικό κείμενο για σκοπούς κατάταξης και, στη σελίδα, βοηθά στην επεξήγηση του περιεχομένου της φωτογραφίας. Τα διακοσμητικά στοιχεία μπορούν να αφεθούν με ένα κενό alt="".

Πώς επηρεάζει το μέγεθος της εικόνας τα Core Web Vitals;

Οι μεγάλες εικόνες επιβραδύνουν το LCP—τον χρόνο απόδοσης του μεγαλύτερου στοιχείου στην πρώτη οθόνη, το οποίο συχνά είναι μια φωτογραφία. Οι σύγχρονες μορφές WebP και AVIF, η συμπίεση, οι σωστές διαστάσεις και το srcset βοηθούν, όπως και η αποφυγή της αργής φόρτωσης και ο ορισμός υψηλής προτεραιότητας φόρτωσης για την κύρια εικόνα.

Ελέγχει το εργαλείο το βάρος του αρχείου;

Όχι. Το εργαλείο δεν κατεβάζει εικόνες, επομένως δεν εκτιμά το μέγεθος του αρχείου. Καθορίζει τη μορφή με βάση την επέκταση. Για να μάθετε το μέγεθος των εικόνων και ολόκληρης της σελίδας, χρησιμοποιήστε την Ανάλυση Ταχύτητας Σελίδας ή το PageSpeed Insights.

Ελέγξαμε την ιστοσελίδα, αλλά δεν υπάρχει κανείς να την διορθώσει;

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