Κάρτες κοινοποίησης: ετικέτες Open Graph και η εικόνα

Τι είναι μια προεπισκόπηση συνδέσμου

Όταν κάποιος κοινοποιεί έναν σύνδεσμο σε ένα κοινωνικό δίκτυο ή σε μια εφαρμογή μηνυμάτων, η πλατφόρμα διαβάζει τη σελίδα και φτιάχνει μια μικρή κάρτα: μια εικόνα, έναν τίτλο, ένα σύντομο κείμενο και το domain. Οι περισσότερες πλατφόρμες διαβάζουν γι' αυτό τις ετικέτες του πρωτοκόλλου Open Graph, που είναι στοιχεία meta στο head της σελίδας. Το X, πρώην Twitter, διαβάζει επίσης δικές του ετικέτες που ξεκινούν με twitter:. Κάθε πλατφόρμα σχεδιάζει μόνη της την κάρτα της και αποφασίζει πόσο κείμενο δείχνει. Εσύ αποφασίζεις τι λέει η σελίδα στις πλατφόρμες.

Οι βασικές ετικέτες

Το πρωτόκολλο Open Graph, που δημοσιεύεται στο ogp.me, ορίζει τέσσερις ιδιότητες που πρέπει να έχει κάθε σελίδα: og:title, og:type, og:image και og:url. Το og:url είναι η κανονική διεύθυνση της σελίδας. Προαιρετικά, αλλά χρήσιμα, είναι τα og:description, og:site_name και og:locale, η γλώσσα και η περιοχή των ετικετών, για παράδειγμα de_DE.

<meta property="og:title" content="Καλοκαιρινές εκπτώσεις: όλες οι κούπες σε χαμηλότερη τιμή">
<meta property="og:type" content="article">
<meta property="og:url" content="https://example.com/blog/summer-sale">
<meta property="og:image" content="https://example.com/img/summer-sale-1200x630.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Έξι μπλε κούπες σε ξύλινο τραπέζι">
<meta property="og:description" content="Έως τις 31 Αυγούστου: χαμηλότερες τιμές σε κούπες και πιάτα.">
<meta property="og:site_name" content="Κατάστημα Example">
<meta name="twitter:card" content="summary_large_image">

Γράφε κάθε διεύθυνση ολόκληρη, με https://. Το πρωτόκολλο ορίζει τη διεύθυνση ως URL που χρησιμοποιεί http:// ή https://, οπότε μια διαδρομή όπως /img/sale.jpg δεν είναι έγκυρη τιμή. Το og:url πρέπει να ταιριάζει με τον κανονικό σύνδεσμο (canonical) της σελίδας. Αν μια ετικέτα εμφανίζεται δύο φορές με διαφορετικές τιμές, το πρωτόκολλο δίνει προτεραιότητα στην πρώτη.

Η εικόνα κοινοποίησης

Οι περισσότερες προεπισκοπήσεις δείχνουν την εικόνα σε φαρδιά μορφή. Μια εικόνα σε αναλογία περίπου 1,91 : 1, για παράδειγμα 1200 × 630 pixel, συνιστάται συχνά και χωράει στις περισσότερες κάρτες χωρίς περικοπή. Οι τετράγωνες εικόνες συχνά περικόπτονται πάνω και κάτω, γι' αυτό κράτα το σημαντικό περιεχόμενο στη μέση. Για το Google Discover, η Google συνιστά εικόνες πλάτους τουλάχιστον 1200 pixel, μεγάλη προεπισκόπηση που επιτρέπεται με τη ρύθμιση max-image-preview:large και μια εικόνα ορισμένη με og:image ή με σήμανση schema.org. Η Google συμβουλεύει επίσης να αποφεύγεις γενικές εικόνες όπως το λογότυπο του ιστότοπου.

Τα og:image:width και og:image:height δηλώνουν το μέγεθος της εικόνας σε pixel. Το og:image:alt περιγράφει τι υπάρχει στην εικόνα, δεν είναι λεζάντα. Το πρωτόκολλο λέει ότι μια σελίδα με og:image πρέπει να ορίζει επίσης og:image:alt.

Τίτλος και περιγραφή

Το og:title μπορεί να διαφέρει από το στοιχείο title. Δεν χρειάζεται το όνομα του ιστότοπου, γιατί αυτό το φέρει το og:site_name. Οι πλατφόρμες κόβουν τα μεγάλα κείμενα στο δικό τους μήκος, γι' αυτό βάλε πρώτες τις σημαντικές λέξεις. Οι ετικέτες Open Graph μετράνε και πέρα από τα κοινωνικά δίκτυα. Η Google αναφέρει το περιεχόμενο του og:title ως μία από τις πηγές για τους συνδέσμους τίτλου στα αποτελέσματα αναζήτησης, λαμβάνει υπόψη το og:site_name για το όνομα του ιστότοπου και αναφέρει το og:image ως έναν τρόπο να ορίσεις προτιμώμενη εικόνα.

Ετικέτες για το X

Η ετικέτα twitter:card επιλέγει το είδος της κάρτας. Η τιμή summary_large_image ζητά μια μεγάλη, φαρδιά εικόνα, η summary μια μικρή. Αν η σελίδα σου έχει ήδη ετικέτες Open Graph, συχνά αρκεί να προσθέσεις το twitter:card. Οι σελίδες για προγραμματιστές του X δεν ήταν δυνατό να διαβαστούν για αυτόν τον οδηγό, γι' αυτό έλεγξε εκεί τους τρέχοντες κανόνες πριν βασιστείς σε κάποια λεπτομέρεια.

Μία κάρτα ανά σελίδα

Πολλοί ιστότοποι ορίζουν τον ίδιο τίτλο και την ίδια εικόνα για κάθε σελίδα, συχνά μέσω του θέματος. Τότε κάθε κοινοποιημένος σύνδεσμος μοιάζει ίδιος. Δώσε σε κάθε σημαντική σελίδα δικά της og:title, og:description και og:image: σε μια σελίδα προϊόντος τη φωτογραφία του προϊόντος, σε ένα άρθρο την κύρια εικόνα του. Για το og:type, το πρωτόκολλο χρησιμοποιεί, μεταξύ άλλων τύπων, website για μια γενική σελίδα και article για ένα άρθρο. Ένα σύστημα καταστήματος ή περιεχομένου μπορεί να συμπληρώνει αυτές τις ετικέτες αυτόματα από τον τίτλο, την περίληψη και την κύρια εικόνα κάθε σελίδας. Μετά από μια αλλαγή, έλεγξε μία σελίδα από κάθε πρότυπο.

Γιατί η προεπισκόπηση δεν αλλάζει

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

Πριν κοινοποιήσεις μια σελίδα

• Υπάρχουν τα og:title, og:type, og:image και og:url, και είναι το og:url η κανονική διεύθυνση;
• Είναι κάθε διεύθυνση πλήρης, με https://;
• Είναι η εικόνα αρκετά φαρδιά, φορτώνει, και είναι το σημαντικό περιεχόμενο στη μέση;
• Έχουν οριστεί τα og:image:alt, og:image:width και og:image:height;
• Υπάρχει ετικέτα twitter:card, και είναι ο τίτλος αρκετά σύντομος;

Δούλεψε με το Do4U

Ο Έλεγχος κάρτας κοινοποίησης δείχνει πώς μοιάζει μια σελίδα όταν κοινοποιείται ο σύνδεσμός της και ελέγχει τις ετικέτες πίσω από την προεπισκόπηση. Εισάγεις μία διεύθυνση. Το Do4U διαβάζει τη σελίδα και την αρχή της εικόνας κοινοποίησής της. Ο κώδικας συλλέγει τις ετικέτες Open Graph, τις ετικέτες κάρτας Twitter/X και τις εναλλακτικές, δηλαδή τον τίτλο, την meta περιγραφή και την πρώτη εικόνα, καθώς και τον κανονικό σύνδεσμο και τη γλώσσα. Διαβάζει την πραγματική μορφή και το μέγεθος της εικόνας από το αρχείο και τα συγκρίνει με τις ετικέτες. Παίρνεις μια ουδέτερη προεπισκόπηση, έναν πίνακα όλων των ετικετών, ευρήματα με σύντομη αιτιολογία και προτεινόμενες ετικέτες για αντιγραφή. Ετικέτες που μια σελίδα ορίζει μόνο με JavaScript δεν φαίνονται. Δεν χρησιμοποιείται ΤΝ, και ο έλεγχος είναι δωρεάν, με ημερήσιο όριο.

Το Do4U βρίσκει ενδείξεις, εσύ ελέγχεις και αποφασίζεις. Η προεπισκόπηση είναι ένα ουδέτερο σκίτσο: πώς δείχνει μια πλατφόρμα τον σύνδεσμο το αποφασίζει η πλατφόρμα.