Γιατί η προεπισκόπηση του συνδέσμου σας φαίνεται λάθος, και πώς να τη διορθώσετε με το Open Graph

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

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

Πώς φτιάχνεται μια προεπισκόπηση συνδέσμου

Όταν ένας σύνδεσμος επικολλάται σε ανάρτηση ή μήνυμα, η εφαρμογή στέλνει έναν crawler στη σελίδα. Ο crawler διαβάζει τις ετικέτες <meta> μέσα στο <head> και σχεδιάζει την κάρτα από αυτές. Οι ετικέτες προέρχονται από το πρωτόκολλο Open Graph, το οποίο ορίζει τέσσερις ως υποχρεωτικές:

• og:title: ο τίτλος της σελίδας, όπως πρέπει να εμφανίζεται στην κάρτα.
• og:type: τι είδους σελίδα είναι, συνήθως website ή article.
• og:image: η εικόνα.
• og:url: το κανονικό URL της σελίδας, το οποίο το πρωτόκολλο ονομάζει μόνιμο αναγνωριστικό της.

Προσθέστε og:description και έχετε την κάρτα. Ένα πλήρες, ελάχιστο σύνολο μοιάζει έτσι:

<meta property="og:title" content="Spring linen collection">
<meta property="og:description" content="Breathable shirts in three colours.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/spring">
<meta property="og:image" content="https://example.com/og/spring.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Three linen shirts on a rail">
<meta name="twitter:card" content="summary_large_image">

Αιτία 1: λείπουν οι ετικέτες

Χωρίς ετικέτες og:, κάθε εφαρμογή πρέπει να βασιστεί σε ό,τι άλλο βρει στη σελίδα, όπως το <title> ή την πρώτη εικόνα, και το τι θα επιλέξει εξαρτάται από την εκάστοτε εφαρμογή. Γι' αυτό ένας σύνδεσμος μπορεί να φαίνεται σωστός στη μία και χαλασμένος στην άλλη. Η λύση είναι να δηλώσετε τις τέσσερις υποχρεωτικές ετικέτες και μια περιγραφή σε κάθε σελίδα που περιμένετε να μοιραστούν οι άνθρωποι, όχι μόνο στην αρχική. Μια σελίδα προϊόντος που μοιράζεται με τις ετικέτες της αρχικής δείχνει την κάρτα της αρχικής.

Αιτία 2: η διεύθυνση της εικόνας είναι σχετική

Αυτό είναι εύκολο να μην το προσέξετε, γιατί η σελίδα φαίνεται σωστή στον δικό σας browser. Το content="/images/og.jpg" δουλεύει για έναν browser που είναι ήδη στον ιστότοπό σας, αλλά ο crawler βρίσκεται έξω από αυτόν. Γράψτε την πλήρη διεύθυνση, ξεκινώντας με https:// και το domain σας. Το ίδιο ισχύει και για το og:url.

Αιτία 3: η εικόνα έχει λάθος μέγεθος ή σχήμα

Κάθε πλατφόρμα δηλώνει τι θέλει, και τυχαίνει να συμφωνούν σε μια ευρεία εικόνα:

• Το LinkedIn αναφέρει στον οδηγό για το πώς να κάνετε έναν ιστότοπο κοινοποιήσιμο ότι η εικόνα πρέπει να έχει τουλάχιστον 1200 × 627 pixel, με προτεινόμενη αναλογία 1.91:1, και να μην είναι μεγαλύτερη από 5 MB.
• Οι οδηγίες καλών πρακτικών κοινοποίησης της Meta προτείνουν εικόνες πλάτους τουλάχιστον 1080 pixel για οθόνες υψηλής ανάλυσης, και τουλάχιστον 600 σε πλάτος για την εμφάνιση διαφημίσεων με εικόνα-σύνδεσμο.
• Η μεγάλη κάρτα εικόνας του X υποστηρίζει αναλογία 2:1 από 300 × 157 έως 4096 × 4096 pixel, κάτω από 5 MB, σε JPG, PNG, WEBP ή GIF, και δεν υποστηρίζει SVG, σύμφωνα με την τεκμηρίωση για developers του (η αρχική σελίδα πλέον ανακατευθύνει, οπότε ο σύνδεσμος περνά από το Internet Archive).

Ένα μέγεθος ταιριάζει και στις τρεις: 1200 × 630. Ξεπερνά το ελάχιστο 1200 × 627 του LinkedIn, είναι πλατύτερο από το 1080 της Meta, και η αναλογία του είναι 1200 ÷ 630 = 1.905, εντός του 5% της αναλογίας 2:1 του X. Μια τετράγωνη ή ψηλή εικόνα θα κοπεί σε πλατιά κάρτα, οπότε κρατήστε το σημαντικό στο κέντρο. Η αριθμομηχανή αναλογιών δείχνει τι κρατά ένα κεντρικό κόψιμο.

Δηλώστε και το μέγεθος στις ετικέτες. Η Meta ζητά τα og:image:width και og:image:height, ώστε ο crawler της να αποδώσει την εικόνα αμέσως, αντί να την κατεβάζει και να την επεξεργάζεται πρώτα. Ο οδηγός για webmasters της το λέει απλά: δηλώστε ύψος και πλάτος, ώστε η εικόνα να φορτώνει σωστά από την πρώτη φορά που μοιράζεστε τη σελίδα.

Αιτία 4: οι ετικέτες προστίθενται με JavaScript

Μερικοί site builders και single-page apps προσθέτουν ετικέτες meta αφού φορτώσει η σελίδα, μέσα στον browser. Ένας crawler που διαβάζει το HTML που στέλνει ο server σας μπορεί να μην τρέξει ποτέ αυτόν τον κώδικα, οπότε δεν βλέπει ποτέ τις ετικέτες. Ελέγξτε τον πηγαίο κώδικα της σελίδας (View Source, όχι τον inspector, που δείχνει τη σελίδα αφού εκτελεστούν τα scripts). Αν οι ετικέτες δεν υπάρχουν στον πηγαίο κώδικα, πιθανότατα ούτε ο crawler τις βλέπει. Η διόρθωση ανήκει στις ρυθμίσεις του ιστοτόπου σας ή στο server-side template του.

Αιτία 5: οι ειδικοί χαρακτήρες χάλασαν την ετικέτα

Ένας τίτλος με διπλά εισαγωγικά, όπως The "only" linen you need, κλείνει νωρίς το attribute content="...", και το υπόλοιπο του τίτλου χάνεται. Οι χαρακτήρες που έχουν σημασία μέσα σε attribute πρέπει να κωδικοποιηθούν: το " γίνεται ", το & γίνεται & και το < γίνεται <. Οι browsers και οι crawlers τους μετατρέπουν ξανά στους αρχικούς χαρακτήρες όταν διαβάζουν την ετικέτα. Η γεννήτρια το κάνει για εσάς, και αυτός είναι ο μισός λόγος να τη χρησιμοποιείτε.

Αιτία 6: η εφαρμογή θυμάται την παλιά έκδοση

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

• Facebook: επικολλήστε το URL στο Sharing Debugger της Meta. Ο οδηγός για webmasters της Meta λέει ότι δείχνει ποιες ετικέτες ανέκτησε ο crawler, με τυχόν σφάλματα ή προειδοποιήσεις, και ενεργοποιεί νέα ανάγνωση. Οι καλές πρακτικές της Meta προσθέτουν ότι το περιεχόμενο που έχει ήδη ανακτηθεί αλλιώς ανανεώνεται σε τυπική περίοδο 24 ωρών.
• LinkedIn: περάστε το URL από το Post Inspector. Η σελίδα βοήθειας του LinkedIn είναι σαφής για το όριο: η ανανέωση αλλάζει την προεπισκόπηση μόνο για νέες αναρτήσεις. Οι αναρτήσεις που περιέχουν ήδη το URL κρατούν την παλιά.

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

Η ετικέτα twitter:card: μία γραμμή, όχι τέσσερις

Το X διαβάζει επίσης το Open Graph. Η τεκμηρίωση των cards του αναφέρει ένα εναλλακτικό για κάθε ετικέτα: το twitter:title πέφτει στο og:title, το twitter:description στο og:description, το twitter:image στο og:image και το twitter:image:alt στο og:image:alt. Άρα δεν χρειάζεται να επαναλάβετε τα πάντα. Η μόνη γραμμή που προσθέτετε είναι η twitter:card: summary_large_image για εικόνα πλήρους πλάτους, ή summary για ένα μικρό τετράγωνο. Αν την παραλείψετε, η ίδια τεκμηρίωση λέει ότι το X μπορεί να δείξει μια μικρή κάρτα περίληψης, γι' αυτό μια μεγάλη εικόνα μερικές φορές εμφανίζεται ως μικρογραφία. Η ίδια τεκμηρίωση περιορίζει τον τίτλο στους 70 χαρακτήρες, την περιγραφή στους 200 και το εναλλακτικό κείμενο στους 420.

Έλεγχος πέντε λεπτών πριν από την κυκλοφορία

1. Δείτε τον πηγαίο κώδικα της σελίδας και βρείτε τις ετικέτες og:. Και οι τέσσερις υποχρεωτικές, συν μια περιγραφή.
2. Ελέγξτε ότι τα og:image και og:url ξεκινούν με https://.
3. Ανοίξτε τη διεύθυνση της εικόνας μόνη της σε browser. Πρέπει να φορτώνει, σε 1200 × 630 ή κοντά σε αυτό.
4. Επικολλήστε το URL στο Sharing Debugger και στο Post Inspector και διαβάστε τις κάρτες.
5. Μόνο τότε κοινοποιήστε το.

Πού μπαίνει το Hermoso

Η Hermoso είναι ένας AI marketing agent: ερευνά τις διαφημίσεις που ήδη αποδίδουν στην αγορά σας, φτιάχνει on-brand εικόνα και βίντεο διαφημίσεις, προγραμματίζει αναρτήσεις στους δικούς σας λογαριασμούς κοινωνικής δικτύωσης και τρέχει καμπάνιες με πληρωμή στους δικούς σας διαφημιστικούς λογαριασμούς. Μια καλή προεπισκόπηση συνδέσμου είναι αυτό που κάνει αυτές τις αναρτήσεις άξιες του κλικ. Η Hermoso δουλεύει στην web εφαρμογή, ή μέσα στο Claude, το ChatGPT και το Cursor μέσω του MCP server της.

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

Γιατί ο σύνδεσμός μου δεν εμφανίζει εικόνα στο Facebook ή στο LinkedIn;

Συνήθως λείπει η ετικέτα og:image, χρησιμοποιεί σχετική διαδρομή αντί για πλήρη διεύθυνση https://, ή δείχνει σε εικόνα πολύ μικρή. Το LinkedIn ζητά τουλάχιστον 1200 × 627 pixel. Αφού τη διορθώσετε, περάστε το URL από το Sharing Debugger της Meta ή από το Post Inspector του LinkedIn, ώστε να το ανακτήσουν ξανά.

Τι μέγεθος πρέπει να έχει μια εικόνα Open Graph;

Το 1200 × 630 pixel λειτουργεί στα μεγάλα δίκτυα. Ικανοποιεί το ελάχιστο 1200 × 627 του LinkedIn σε περίπου 1.91:1, είναι πλατύτερο από τα 1080 pixel που προτείνει η Meta, και είναι κοντά στην αναλογία 2:1 που υποστηρίζει το X για μεγάλες κάρτες εικόνας.

Πώς ενημερώνω την προεπισκόπηση συνδέσμου στο LinkedIn;

Διορθώστε τις ετικέτες στη σελίδα, και μετά εισάγετε το URL στο Post Inspector του LinkedIn. Η ανανεωμένη προεπισκόπηση ισχύει μόνο για νέες αναρτήσεις. Οι αναρτήσεις που περιέχουν ήδη το URL κρατούν την παλιά προεπισκόπηση.

Χρειάζομαι ετικέτες twitter: αν έχω ήδη ετικέτες og:;

Μόνο την twitter:card. Το X πέφτει σε og:title, og:description, og:image και og:image:alt όταν λείπουν οι εκδοχές twitter:.