OG Image Generator — Social Share Image Maker

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

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

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

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