Γεννήτρια Εικόνων OG — Δημιουργός Εικόνων για Κοινοποίηση στα Social Media

Μια εικόνα Open Graph είναι η εικόνα που εμφανίζεται όταν ένας σύνδεσμος επικολλάται σε μια συνομιλία, ένα tweet ή ένα κανάλι Slack — και κάθε πλατφόρμα που την αποδίδει περιμένει έναν καμβά περίπου 1200×630 pixel, το μέγεθος γύρω από το οποίο σχεδιάστηκαν οι κάρτες og:image του Facebook και summary_large_image του Twitter. Αν το μέγεθος είναι λάθος, η εικόνα κόβεται, θαμπώνει ή συμπιέζεται· αν η διάταξη είναι λάθος, ο τίτλος διαβάζεται σαν δυσανάγνωστη λωρίδα πάνω σε μια φορτωμένη φωτογραφία. Αυτό το εργαλείο συνθέτει την εικόνα στην πραγματική ανάλυση-στόχο χρησιμοποιώντας το Canvas 2D API, οπότε αυτό που βλέπετε στην προεπισκόπηση είναι το ακριβές πλέγμα pixel που θα εξαχθεί στο PNG.

Επιλέξτε ένα φόντο — ένα επίπεδο χρώμα, μια γραμμική διαβάθμιση δύο στάσεων από δύο χρώματα που επιλέγετε, ή μια μεταφορτωμένη φωτογραφία που κόβεται για να γεμίσει το πλήρες κάδρο 1200×630 με τον ίδιο τρόπο που θα το έκανε το CSS background-size: cover, αντί να τεντωθεί εκτός αναλογιών. Πληκτρολογήστε έναν τίτλο και έναν προαιρετικό υπότιτλο: και οι δύο μετρώνται χαρακτήρα προς χαρακτήρα με βάση τις μετρικές γραμματοσειράς του ίδιου του canvas, οπότε ένας τίτλος που είναι πολύ μεγάλος για να χωρέσει σε μία γραμμή αναδιπλώνεται σε δεύτερη ή τρίτη γραμμή σε πραγματικό όριο λέξης, αντί να ξεφεύγει από την άκρη ή να κόβεται αόρατα. Επιλέξτε στοίχιση στο κέντρο ή αριστερά, διαλέξτε ένα χρώμα κειμένου που να διαβάζεται πάνω στο φόντο σας και τοποθετήστε ένα προαιρετικό λογότυπο στη γωνία σε σταθερό, ευανάγνωστο μέγεθος.

Κάτω από τον καμβά, τέσσερις μικρές κάρτες προσεγγίζουν το πώς θα φαίνεται η τελική εικόνα όταν μια πραγματική πλατφόρμα την τυλίξει με το δικό της πλαίσιο: η κάρτα του Twitter/X δείχνει μόνο το domain και έναν έντονο τίτλο κάτω από την εικόνα χωρίς γραμμή περιγραφής, το Facebook προσθέτει μια λωρίδα domain με κεφαλαία πάνω από ένα μπλοκ τίτλου-περιγραφής, το LinkedIn βάζει το domain κάτω από τον τίτλο χωρίς καθόλου περιγραφή και η ενσωμάτωση του Discord τοποθετεί το domain, τον τίτλο και την περιγραφή πάνω από την εικόνα μέσα στο δικό του σκοτεινό θέμα. Αυτές είναι στυλιζαρισμένες προσεγγίσεις για σκοπούς σχεδιασμού — με σαφή επισήμανση ως επεξηγηματικές, με μια γραμμή domain που πληκτρολογείτε εσείς — όχι μια ζωντανή λήψη ή στιγμιότυπο των πραγματικών πλατφορμών, αφού η κοινοποίηση ενός συνδέσμου και το να αφήσετε τον δικό τους ανιχνευτή να διαβάσει τα πραγματικά meta tags og:image και og:title της σελίδας σας είναι αυτό που παράγει στην πράξη τη ζωντανή κάρτα.

Όλα αποδίδονται τοπικά σε ένα στοιχείο HTML canvas στον browser σας: ο τίτλος, ο υπότιτλος, το μεταφορτωμένο φόντο και το λογότυπο δεν φεύγουν ποτέ από τη συσκευή σας και το εξαγόμενο αρχείο είναι ένα καθαρό PNG από canvas.toBlob() που περιέχει μόνο ό,τι συνθέσατε — χωρίς πλαίσια προσομοίωσης, ψεύτικες μπάρες προγράμματος περιήγησης ή λογότυπα πλατφορμών να ενσωματώνονται στην εικόνα που κατεβάζετε. Αν χρειαστείτε στη συνέχεια αλλαγή μεγέθους ή μετατροπή του εξαγόμενου PNG, τα εργαλεία αλλαγής μεγέθους εικόνας και μετατροπέα εικόνας αυτού του ιστοτόπου συνεχίζουν ακριβώς από εκεί που σταματά αυτό.