Το link preview του WhatsApp δεν εμφανίζεται; Διορθώστε το og:image

Ένα link preview του WhatsApp που δεν εμφανίζεται σχεδόν πάντα οφείλεται σε μία από πέντε αιτίες: η σελίδα δεν έχει ετικέτα og:image, η διεύθυνση URL της εικόνας δεν είναι προσβάσιμη δημόσια, η εικόνα έχει λάθος αναλογία διαστάσεων και το WhatsApp την περικόπτει, η περικοπή είναι σωστή αλλά το preview είναι παρωχημένο, ή το πρόσθετο SEO του καταστήματος εκτυπώνει μια ανταγωνιστική ετικέτα. Αυτός ο οδηγός καλύπτει κάθε αιτία, γιατί δεν μπορείτε να αναγκάσετε το WhatsApp να ανανεώσει, και τι πρέπει να αλλάξετε σε ένα κατάστημα WooCommerce.

Σύντομη απάντηση

Το WhatsApp δημιουργεί μια προεπισκόπηση συνδέσμου από τα Open Graph tags της σελίδας. Εάν το og:image λείπει, δεν είναι προσβάσιμο ή δεν έχει τη μορφή κάρτας 1200×630, η κοινοποίηση φτάνει ως γυμνός σύνδεσμος, ως γκρι πλακίδιο ή ως κακοκομμένη φωτογραφία προϊόντος. Τα περισσότερα καταστήματα WooCommerce δεν ορίζουν ποτέ og:image για τις σελίδες προϊόντων — το πρόσθετο SEO επιστρέφει στη στατική εικόνα εξωφύλλου, και μια τετράγωνη ή ψηλή φωτογραφία προϊόντος χάνει τα πλευρά ή το πάνω μέρος της.

1. Δεν υπάρχει ετικέτα og:image στη σελίδα

Αυτή είναι η πιο συνηθισμένη αιτία σε ένα κατάστημα. Το WordPress και το WooCommerce δεν εκπέμπουν og:image για σελίδες προϊόντων, κατηγοριών ή καταστήματος από προεπιλογή, και ένα θέμα που δεν διαχειρίζεται το Open Graph θα παραλείψει εντελώς την ετικέτα.

Διόρθωση: δείτε τον πηγαίο κώδικα της σελίδας και επιβεβαιώστε ότι υπάρχει μια ετικέτα og:image, ότι είναι απόλυτη (ένα πλήρες https://… URL, ποτέ σχετική διαδρομή) και ότι αποδίδεται από τον διακομιστή — όχι ότι εισάγεται μέσω JavaScript μετά τη φόρτωση. Το WhatsApp δεν εκτελεί το JavaScript σας.

curl -s https://your-store.com/product/example | grep -i 'og:image'

Ένα κενό αποτέλεσμα είναι η απάντησή σας: το WhatsApp δεν έχει καμία εικόνα να εμφανίσει.

2. Η διεύθυνση URL της εικόνας δεν είναι δημόσια προσβάσιμη

Ο ανιχνευτής του WhatsApp ανακτά την εικόνα με τον ίδιο τρόπο που το κάνει οποιοσδήποτε ανώνυμος πελάτης. Μια διεύθυνση URL πίσω από σύνδεση, σε localhost, σε ακατέργαστη διεύθυνση IP ή σε διαδρομή που αποκλείεται από robots.txt θα αποτύχει.

Διόρθωση: επιβεβαιώστε ότι η διεύθυνση URL επιστρέφει μια εικόνα χωρίς διαπιστευτήρια.

curl -I https://your-store.com/wp-content/uploads/product.jpg

Χρειάζεστε 200 OK και Content-Type τύπου image/png ή image/jpeg.

Η παγίδα του robots.txt. Οι κοινωνικοί ανιχνευτές τηρούν το robots.txt, οπότε ένας κανόνας που αποκλείει τη διαδρομή που φιλοξενεί τις εικόνες σας χαλάει την προεπισκόπηση — και τη χαλάει με τρόπο που είναι εύκολο να διαγνωστεί λανθασμένα. Το εργαλείο εντοπισμού σφαλμάτων της Meta αναφέρει τότε "could not be processed as an image. It may be corrupted or may have an invalid format", που διαβάζεται ακριβώς σαν κατεστραμμένη απόδοση. Το curl δεν το αναπαράγει ποτέ, επειδή το curl αγνοεί το robots.txt. Αν οι εικόνες σας εξυπηρετούνται από μια διαδρομή που καλύπτεται από κανόνα Disallow:, η προεπισκόπηση θα αποτύχει όσο έγκυρο κι αν είναι το αρχείο. Το αντιμετωπίσαμε οι ίδιοι στη διαδρομή απόδοσης του FastOG και το διορθώσαμε με μια παράκαμψη Allow: με αντιστοίχιση μεγαλύτερου μήκους.

3. Το WhatsApp περικόπτει την εικόνα του προϊόντος σας — και η επεξεργασία της φωτογραφίας δεν θα το διορθώσει

Αυτό είναι το σύμπτωμα που περιγράφουν οι έμποροι ως "οι εικόνες των προϊόντων μου κόβονται στο WhatsApp", και είναι αυτό που αξίζει να κατανοήσετε σωστά.

Η πλατφόρμα περικόπτει όποια εικόνα της δοθεί σε πλαίσιο 1200×630. Μια φωτογραφία προϊόντος που είναι τετράγωνη ή ψηλή χάνει τα πλευρά ή το πάνω μέρος της· ένα λογότυπο παραμορφώνεται. Η χειροκίνητη περικοπή της αρχικής φωτογραφίας στο Photoshop είναι χαμένο παιχνίδι, επειδή το WhatsApp αποφασίζει την περικοπή με βάση την αναλογία διαστάσεων της κάρτας, όχι τη σύνθεση που επιλέξατε — και η επόμενη φωτογραφία προϊόντος έχει και πάλι διαφορετικό σχήμα.

Η λύση είναι να αλλάξετε την εικόνα που εξυπηρετείτε, όχι τη φωτογραφία που κατέχετε. Στείλτε μια κάρτα που είναι ήδη συντεθειμένη σε 1200×630, με τη φωτογραφία του προϊόντος προσαρμοσμένη μέσα σε αυτήν. Έτσι, η πλατφόρμα δεν έχει πλέον τίποτα να περικόψει.

4. Το σωστό μέγεθος εικόνας για προεπισκόπηση συνδέσμου στο WhatsApp

Το τυπικό μέγεθος εικόνας Open Graph είναι 1200×630 pixel — αναλογία 1,91:1 — και είναι το σχήμα που αναμένει κάθε μεγάλη πλατφόρμα, συμπεριλαμβανομένου του WhatsApp. Αν παρέχετε εικόνα 1200×630, η προεπισκόπηση αποδίδεται όπως προβλέπεται· αν παρέχετε τετράγωνη εικόνα 1000×1000, το WhatsApp θα την περικόψει για να γεμίσει το πλαίσιο.

Διατηρήστε το αρχείο κάτω από 5 MB. Μια κάρτα κειμένου και προϊόντος σε διαστάσεις 1200×630 συνήθως κυμαίνεται μεταξύ 200 KB και 500 KB ως PNG.

Δείτε το Μέγεθος Εικόνας OG: 1200×630 Επεξήγηση για το γιατί αυτή η αναλογία έγινε το πρότυπο.

5. Η προεπισκόπηση είναι παρωχημένη — και δεν μπορείτε να αναγκάσετε το WhatsApp να την ανανεώσει

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

Το WhatsApp αποθηκεύει την προεπισκόπηση σε προσωρινή μνήμη. Αυτή διατηρείται στην εφαρμογή του παραλήπτη, πράγμα που σημαίνει ότι κανένα εργαλείο δεν μπορεί να ζητήσει από το WhatsApp να την ανανεώσει — ούτε ένα πρόγραμμα εντοπισμού σφαλμάτων, ούτε ένα API, ούτε εμείς. Το WhatsApp δεν προσφέρει κανέναν προγραμματιστικό τρόπο ανανέωσης, επομένως δεν υπάρχει κανένα κουμπί για να πατήσετε. Όποιος ισχυρίζεται το αντίθετο περιγράφει τη συμπεριφορά του Facebook, όχι του WhatsApp.

Αυτό που μπορείτε να κάνετε είναι να βεβαιωθείτε ότι η σωστή εικόνα είναι έτοιμη για την επόμενη φορά που το WhatsApp θα διαβάσει τη σελίδα. Γι' αυτό οι διευθύνσεις URL των εξωφύλλων του FastOG βασίζονται στο περιεχόμενο: αλλάξτε τον τίτλο, την τιμή ή την εικόνα του προϊόντος και η διεύθυνση URL αλλάζει μαζί τους, οπότε η επόμενη ανάγνωση δεν μπορεί να παραλάβει την παλιά κάρτα. Το πότε θα γίνει αυτή η ανάγνωση εξαρτάται από το WhatsApp.

Δύο συναφείς πλατφόρμες συμπεριφέρονται με τον ίδιο τρόπο — το LinkedIn και το X δεν προσφέρουν επίσης API ακύρωσης προσωρινής μνήμης και συνήθως επαναδιαβάζουν εντός περίπου μίας εβδομάδας. Οι δικοί τους επιθεωρητές μπορούν να επιταχύνουν τη διαδικασία αν βιάζεστε:

Χρήση του εργαλείου εντοπισμού σφαλμάτων του Facebook για πρόβλημα του WhatsApp. Αξίζει παρ' όλα αυτά να επικολλήσετε τη διεύθυνση URL στο Sharing Debugger, ακόμη κι αν δεν μπορεί να ανανεώσει το WhatsApp, επειδή ανακτά τη σελίδα με τον ίδιο τρόπο που θα το έκανε το WhatsApp και αναφέρει τι πραγματικά βρήκε — ετικέτες που λείπουν, μη προσβάσιμες εικόνες, λανθασμένες μορφές. Αντιμετωπίστε το ως εργαλείο επικύρωσης των ετικετών, όχι ως λύση για την προσωρινή μνήμη του WhatsApp.

6. Διόρθωση αυτού του ζητήματος σε ένα κατάστημα WooCommerce

Στο WooCommerce, η διαδικασία αξίζει να περιγραφεί με ακρίβεια, επειδή η συνήθης αιτία αποτυχίας είναι συνήθως το πρόσθετο SEO, όχι το θέμα:

• Το tag δεν υπάρχει από προεπιλογή. Το WooCommerce δεν περιλαμβάνει og:image για product, product_cat ή τη σελίδα καταστήματος.
• Το πρόσθετο SEO σας καλύπτει το κενό με λανθασμένο τρόπο. Τα Yoast, Rank Math, All in One SEO και SEOPress θα εκτυπώσουν ένα og:image — αλλά για ένα προϊόν χρησιμοποιούν τη στατική εικόνα εξωφύλλου. Αυτή είναι συνήθως μια τετράγωνη ή κατακόρυφη φωτογραφία, που είναι ακριβώς η εικόνα που το WhatsApp στη συνέχεια περικόπτει.
• Προσέξτε για διπλά tags. Αν δύο πρόσθετα εκτυπώνουν και τα δύο og:image, η πλατφόρμα επιλέγει ένα, και μπορεί να μην είναι αυτό που περιμένετε. Δείτε τον πηγαίο κώδικα και μετρήστε πόσα tags og:image εκπέμπει η σελίδα.

Το FastOG για WooCommerce ακολουθεί διαφορετική προσέγγιση: αποδίδει μια κάρτα 1200×630 από ζωντανά δεδομένα καταλόγου (τίτλος, τιμή, ένδειξη προσφοράς, βαθμολογία, φωτογραφία προϊόντος) στη δική του υπηρεσία απόδοσης και στη συνέχεια παραδίδει αυτό το εξώφυλλο στο πρόσθετο SEO που ήδη χρησιμοποιείτε, αντί να εκτυπώνει ένα ανταγωνιστικό tag. Έτσι, διατηρείτε ένα μόνο og:image στη σελίδα, και αυτό είναι μια κάρτα σχεδιασμένη για το πλαίσιο 1.91:1, όχι μια ωμή φωτογραφία προϊόντος.

Επειδή τα εξώφυλλα δημιουργούνται από ζωντανά δεδομένα καταλόγου, η τιμή στην κάρτα ταιριάζει με την τιμή στη σελίδα, και ένα προϊόν με έκπτωση λαμβάνει ένδειξη προσφοράς. Όταν αποθηκεύετε ένα προϊόν, το πρόσθετο ζητά επίσης από το Facebook να ξαναδιαβάσει τη σελίδα — το Facebook είναι η μόνη πλατφόρμα που προσφέρει προγραμματιστική ανανέωση. Τα WhatsApp, LinkedIn και X ακολουθούν το δικό τους χρονοδιάγραμμα, και το πρόσθετο το αναφέρει ξεκάθαρα, αντί να υπόσχεται μια ανανέωση που δεν μπορεί να προσφέρει.

• Εγκατάσταση: FastOG για WooCommerce στο WordPress.org
• Λεπτομέρειες και συχνές ερωτήσεις: Σελίδα ενοποίησης WooCommerce

Ελέγξτε τι θα δει πραγματικά το WhatsApp

Πριν αλλάξετε οτιδήποτε, δείτε τη σελίδα όπως τη βλέπει ένας ανιχνευτής (crawler). Επικολλήστε οποιαδήποτε διεύθυνση URL προϊόντος στο Δείτε τους συνδέσμους σας όπως τους βλέπουν οι αγοραστές — ανακτά τη σελίδα, διαβάζει τις τρέχουσες ετικέτες Open Graph και εμφανίζει την προεπισκόπηση που προκύπτει όπως την αποδίδουν το WhatsApp, το X και το Messenger, δίπλα σε ένα εξώφυλλο FastOG που δημιουργείται από τα ίδια δεδομένα προϊόντος. Δεν απαιτείται εγγραφή.

Προτιμάτε να επιθεωρήσετε τις ακατέργαστες ετικέτες; Χρησιμοποιήστε τη Γεννήτρια ετικετών μεταδεδομένων Open Graph για να δείτε τη σήμανση ή συμβουλευτείτε την αναφορά στο Η εικόνα og:image δεν εμφανίζεται; Πώς να το διορθώσετε.

Συχνές Ερωτήσεις

Γιατί περικόπτεται η εικόνα του προϊόντος μου στο WhatsApp;

Το WhatsApp περικόπτει όποια εικόνα του δίνεται σε ένα πλαίσιο 1200×630. Μια τετράγωνη ή κατακόρυφη φωτογραφία προϊόντος χάνει τα πλευρά της ή το πάνω μέρος της. Αν εξυπηρετήσετε μια κάρτα ήδη συντεθειμένη στα 1200×630 — με τη φωτογραφία του προϊόντος προσαρμοσμένη μέσα στην κάρτα — η πλατφόρμα δεν έχει τίποτα να περικόψει.

Μπορώ να αναγκάσω το WhatsApp να ανανεώσει μια προεπισκόπηση συνδέσμου;

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

Γιατί το Facebook Sharing Debugger δείχνει την εικόνα μου, αλλά το WhatsApp δεν δείχνει τίποτα;

Επειδή πρόκειται για ξεχωριστές προσωρινές αποθηκεύσεις, και το εργαλείο εντοπισμού σφαλμάτων αναφέρεται στις ετικέτες της σελίδας, τις οποίες διαβάζουν και οι δύο πλατφόρμες. Αν το εργαλείο εντοπισμού σφαλμάτων δείχνει μια σωστή εικόνα αλλά το WhatsApp δεν δείχνει τίποτα, οι ετικέτες είναι σωστές και βλέπετε μια μη ανανεωμένη προσωρινή αποθήκευση του WhatsApp. Αν το εργαλείο εντοπισμού σφαλμάτων δεν δείχνει επίσης τίποτα, η ετικέτα λείπει ή η εικόνα δεν είναι προσβάσιμη — εξετάστε τις αιτίες 1 και 2.

Χρησιμοποιεί το WhatsApp το og:image ή το twitter:image;

og:image. Ορίστε τις ετικέτες Open Graph. Το twitter:image προορίζεται για το X.

Χρειάζομαι πρόσθετο (plugin) ή μπορώ απλώς να προσθέσω την ετικέτα μόνος μου;

Μπορείτε να προσθέσετε μια στατική ετικέτα og:image στο θέμα σας μόνοι σας — λειτουργεί και είναι πολύ καλύτερο από το τίποτα. Αυτό που δεν μπορεί να κάνει είναι να παράγει μια ξεχωριστή κάρτα ανά προϊόν χωρίς να δημιουργήσετε χειροκίνητα μία εικόνα ανά προϊόν, και θα είναι ξεπερασμένη κάθε φορά που αλλάζει μια τιμή. Σε αυτό το σημείο αξίζει μια δυναμική εικόνα εξωφύλλου.

Ο ιστότοπός μου δεν είναι στο FastOG. Θα βοηθήσει αυτό παρόλα αυτά;

Ναι — οι πέντε αιτίες αφορούν τη συμπεριφορά της πλατφόρμας, όχι τη συμπεριφορά του FastOG. Εξετάστε τις με τη σειρά με το curl, τον πηγαίο κώδικα της σελίδας και το εργαλείο εντοπισμού σφαλμάτων.

Σχετικά

• Το og:image δεν εμφανίζεται; Πώς να το διορθώσετε
• Άμεση ενημέρωση εικόνας WhatsApp για WooCommerce
• Συγχρονισμός τιμής WooCommerce στην προεπισκόπηση WhatsApp
• Εξαναγκασμός ανανέωσης της κρυφής μνήμης του Facebook Open Graph
• Μέγεθος εικόνας OG: 1200×630 εξηγημένο
• Πώς να αποθηκεύσετε στην κρυφή μνήμη εικόνες OG
• Υπογεγραμμένα URL εικόνων OG
• Γεννήτρια ετικετών μεταδεδομένων Open Graph