Γεννήτρια Open Graph meta tags

Οι ετικέτες από τις οποίες χτίζεται μια προεπισκόπηση συνδέσμου

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

• og:title: ο τίτλος όπως θα πρέπει να εμφανίζεται στην προεπισκόπηση.
• og:type: τι είναι η σελίδα. Το website ταιριάζει στις περισσότερες σελίδες και το article σε μια ανάρτηση blog. Το πρωτόκολλο ορίζει επίσης τύπους όπως profile, book, video.movie και music.song.
• og:image: το URL της εικόνας που αντιπροσωπεύει τη σελίδα.
• og:url: το κανονικό URL, το οποίο το πρωτόκολλο αποκαλεί μόνιμο ID του αντικειμένου.

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

Τι προσθέτει το X: twitter:card

Το X διαβάζει και Open Graph. Η αναφορά markup των cards (η τεκμηρίωση για προγραμματιστές του X, που συνδέεται εδώ μέσω του Internet Archive επειδή η αρχική σελίδα πλέον ανακατευθύνει) αναφέρει την εναλλακτική για κάθε ετικέτα: το twitter:title υποχωρεί στο og:title, το twitter:description στο og:description, το twitter:image στο og:image και το twitter:image:alt στο og:image:alt. Έτσι η μία ετικέτα που αξίζει να προσθέσετε είναι το twitter:card, που επιλέγει τη διάταξη. Αφήστε το εκτός και η ίδια αναφορά λέει ότι το X μπορεί να υποχωρήσει σε ένα μικρό summary card, ακόμη κι αν θέλατε το μεγάλο:

• summary_large_image: μια εικόνα πλήρους πλάτους πάνω από τον τίτλο. Η σελίδα για το card μεγάλης εικόνας του X αναφέρει ότι οι εικόνες γι' αυτό υποστηρίζουν αναλογία 2:1, με ελάχιστες διαστάσεις 300 × 157 και μέγιστες 4096 × 4096 pixel, κάτω από 5MB, σε JPG, PNG, WEBP ή GIF. Το SVG δεν υποστηρίζεται.
• summary: ένα μικρότερο card με τετράγωνη εικόνα. Η σελίδα για το summary card του X αναφέρει ότι η εικόνα υποστηρίζει αναλογία 1:1, από 144 × 144 έως 4096 × 4096 pixel, και περικόπτεται σε τετράγωνο σε όλες τις πλατφόρμες.

Η ίδια αναφορά περιλαμβάνει κάρτες app και player, που χρειάζονται επιπλέον πεδία App Store ή προγράμματος αναπαραγωγής βίντεο, γι' αυτό παραλείπονται εδώ. Τεκμηριώνει επίσης τα όρια που χρησιμοποιούν οι παραπάνω έλεγχοι: 70 χαρακτήρες για τίτλο, 200 για περιγραφή και 420 για εναλλακτικό κείμενο.

Μεγέθη εικόνων που ορίζουν οι πλατφόρμες

• LinkedIn: ο οδηγός για να γίνει ένας ιστότοπος κοινοποιήσιμος ζητά og:title, og:image, og:description και og:url, και αναφέρει μέγιστο μέγεθος αρχείου 5 MB, ελάχιστο 1200 × 627 pixel και προτεινόμενη αναλογία 1.91:1.
• Meta: οι βέλτιστες πρακτικές κοινοποίησης προτείνουν εικόνες πλάτους τουλάχιστον 1080 pixel για οθόνες υψηλής ανάλυσης, και τουλάχιστον 600 pixel πλάτους για την εμφάνιση διαφημίσεων με σύνδεσμο εικόνας. Η ίδια σελίδα ζητά og:image:width και og:image:height ώστε ο crawler να μπορεί να αποδώσει την εικόνα αμέσως χωρίς να χρειάζεται πρώτα να τη κατεβάσει και να την επεξεργαστεί.

Μια εικόνα 1200 × 630 τα πληροί όλα αυτά: είναι τουλάχιστον 1200 × 627 για το LinkedIn, πλατύτερη από 1080 για το Meta, και 1.905:1, εντός 5% από το 2:1 του X’.

Ελέγξτε το και ανανεώστε παλιές προεπισκοπήσεις

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

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

Τι δεν κάνει αυτό το εργαλείο

Δεν ανακτά τη σελίδα ή την εικόνα σας, οπότε δεν μπορεί να δει τι ισχύει πραγματικά live, και η παραπάνω προεπισκόπηση είναι ένα σκαρίφημα κειμένου και όχι μια απόδοση. Γράφει τις ετικέτες· ο ιστότοπός σας πρέπει ακόμη να τις σερβίρει στο <head> της σελίδας, μέσα στο HTML που λαμβάνει ο crawler. Ετικέτες που προστίθενται αργότερα με JavaScript μπορεί να μην φανούν ποτέ. Και δεν γράφει κάρτες app ή player, ούτε τις επιπλέον ιδιότητες που ορίζουν τύποι όπως book ή video.movie.

Αν προτιμάτε να μην τα γράψετε αυτά στο χέρι

Το Hermoso είναι μάρκετινγκ στον αυτόματο πιλότο: ερευνά τις διαφημίσεις που ήδη αποδίδουν στην αγορά σας, φτιάχνει διαφημίσεις εικόνας και βίντεο στο ύφος της μάρκας σας, προγραμματίζει τις αναρτήσεις και τρέχει πληρωμένες καμπάνιες στους δικούς σας διαφημιστικούς λογαριασμούς. Λειτουργεί στην εφαρμογή web ή μέσα στο Claude, το ChatGPT και το Cursor μέσω του διακομιστή MCP.

Δωρεάν εργαλεία: Δημιουργία συνδέσμων UTM · Δημιουργία κωδικού QR · Οδηγός μεγεθών για social media

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

Ποια Open Graph tags είναι υποχρεωτικά;

Το πρωτόκολλο Open Graph αναφέρει τέσσερις υποχρεωτικές ιδιότητες: og:title, og:type, og:image και og:url. Τα og:description, og:site_name και τα tags πλάτους, ύψους και alt της og:image είναι προαιρετικά αλλά αξίζει να προστεθούν.

Χρειάζομαι twitter:title και twitter:image αν έχω og: tags;

Όχι. Η αναφορά markup των καρτών του X λέει ότι τα twitter:title, twitter:description, twitter:image και twitter:image:alt επιστρέφουν στα αντίστοιχα og: τους. Το tag που αξίζει να προστεθεί είναι το twitter:card, που επιλέγει τη διάταξη της κάρτας.

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

Το LinkedIn ζητά τουλάχιστον 1200 × 627 pixels σε 1.91:1 και κάτω από 5 MB. Η Meta προτείνει τουλάχιστον 1080 pixels πλάτος. Η κάρτα μεγάλης εικόνας του X υποστηρίζει 2:1 από 300 × 157 έως 4096 × 4096. Μια εικόνα 1200 × 630 ταιριάζει και στα τρία.

Γιατί ο σύνδεσμός μου δείχνει ακόμα μια παλιά εικόνα αφού άλλαξα τα tags;

Η εφαρμογή αποθήκευσε στην cache το παλιό scrape. Περάστε το URL μέσα από το Sharing Debugger της Meta ή το Post Inspector του LinkedIn για να το ανακτήσετε ξανά. Το LinkedIn σημειώνει ότι οι αναρτήσεις που ήδη μοιράζονται το URL διατηρούν την παλιά προεπισκόπηση.

Γιατί τα εισαγωγικά και τα ampersands αλλάζουν στην έξοδο;

Γίνονται HTML-escaped ώστε το tag να παραμένει έγκυρο. Ένας τίτλος όπως Tom & Jerry's "Sale" γίνεται Tom & Jerry's "Sale" μέσα στο attribute content, και οι browsers και οι crawlers το διαβάζουν ξανά ως το αρχικό κείμενο.

Φορτώνει το εργαλείο την εικόνα μου;

Όχι. Τίποτα από όσα πληκτρολογείτε δεν αποστέλλεται πουθενά και το URL της εικόνας δεν ανακτάται ποτέ, γι' αυτό η προεπισκόπηση δείχνει ένα placeholder αντί για την εικόνα.