OG & Twitter Card Generator — Δημιουργός Meta Ετικετών, Ελεγκτής & Προεπισκόπηση
Δημιουργήστε έτοιμες προς επικόλληση <meta> ετικέτες Open Graph και Twitter Card μέσω φόρμας, ή επικολλήστε ένα υπάρχον <head> για έλεγχο ελλιπών ετικετών, μήκους τίτλου/περιγραφής και εγκυρότητας twitter:card — και μετά προεπισκοπήστε τις σε πιστά διαμορφωμένες γραφικές απεικονίσεις καρτών συνδέσμων των Twitter/X, Facebook, LinkedIn και Discord.
🔒 Επεξεργάζεται εξ ολοκλήρου στο πρόγραμμα περιήγησής σας — τίποτα που εισάγετε εδώ δεν μεταφορτώνεται ποτέ.
Αποτέλεσμα
Οι meta ετικέτες Open Graph και Twitter Card καθορίζουν την εμφάνιση ενός συνδέσμου τη στιγμή που επικολλάται στο Slack, το iMessage, ένα tweet ή ένα κανάλι Discord — έναν τίτλο, περιγραφή και εικόνα που επιλέγονται από το <head> της ίδιας της σελίδας, όχι από ό,τι τυχαίνει να αντλήσει η πλατφόρμα από το ορατό κείμενο του σώματος. Αυτό το εργαλείο είναι ταυτόχρονα δημιουργός και ελεγκτής, όχι ένα απλό συμπλήρωμα προτύπου. Στη λειτουργία BUILD, συμπληρώστε τίτλο, περιγραφή, URL εικόνας, κανονικό URL, τύπο περιεχομένου και τύπο κάρτας Twitter και αυτό συνθέτει το ακριβές μπλοκ ετικετών <meta property="og:..."> και <meta name="twitter:..."> έτοιμο προς επικόλληση στο <head> της σελίδας σας, παραλείποντας όποιο πεδίο αφήσετε κενό αντί να εκπέμπει κενές ετικέτες με λευκό περιεχόμενο.
Στη λειτουργία AUDIT, επικολλήστε τον υπάρχοντα κώδικα του <head> σας ή ολόκληρο το HTML της σελίδας και το εργαλείο το αναλύει με τον εγγενή DOMParser του προγράμματος περιήγησης για να εξαγάγει κάθε ήδη υπάρχουσα meta ετικέτα og: και twitter: και έπειτα εκτελεί τους ελέγχους που πραγματικά έχουν σημασία: οι τέσσερις συνήθως υποχρεωτικές ετικέτες (og:title, og:description, og:image, og:url) επισημαίνονται αν λείπουν· το og:title μετριέται σε σχέση με το όριο των περίπου 60 χαρακτήρων όπου ορισμένες πλατφόρμες αρχίζουν να το περικόπτουν και το όριο των περίπου 90 χαρακτήρων όπου θα το κάνουν οι περισσότερες· το og:description μετριέται σε σχέση με το εύρος των περίπου 155 έως 200 χαρακτήρων που επιτρέπουν οι περισσότερες πλατφόρμες πριν το κόψουν· το twitter:card ελέγχεται ως προς τις τέσσερις πραγματικές τιμές που δέχεται ο επικυρωτής καρτών του Twitter — summary, summary_large_image, app, player — και επισημαίνεται αν είναι οτιδήποτε άλλο· και οι διπλότυπες ετικέτες (η ίδια ιδιότητα δηλωμένη δύο φορές, ένα εκπληκτικά συχνό σφάλμα αντιγραφής-επικόλλησης) κατονομάζονται ρητά.
Οι διαστάσεις εικόνας αντιμετωπίζονται με ειλικρίνεια: αυτό το εργαλείο δεν μπορεί να επαληθεύσει το πραγματικό μέγεθος pixel της εικόνας σας χωρίς να την ανακτήσει, και σκόπιμα δεν το κάνει ποτέ, σύμφωνα με την πολιτική του ιστοτόπου περί μη εξωτερικών αιτημάτων. Αν το HTML σας δηλώνει ήδη og:image:width και og:image:height, αυτοί οι δηλωμένοι αριθμοί ελέγχονται ως προς το ευρέως συνιστώμενο ελάχιστο όριο 1200×630· αν όχι, λαμβάνετε μια σαφή επεξηγηματική σημείωση αντί για ένα κατασκευασμένο pass ή fail. Και οι δύο λειτουργίες αποδίδουν τις ίδιες τέσσερις γραφικές απεικονίσεις προεπισκόπησης συνδέσμων — Twitter/X (εναλλαγή ανάμεσα στη συμπαγή διάταξη μικρογραφίας "summary" και τη διάταξη πλήρους πλάτους "summary_large_image" ανάλογα με την τιμή του twitter:card), Facebook, LinkedIn και Discord — η καθεμία πιστά διαμορφωμένη ώστε να ταιριάζει με τις τυπογραφικές συμβάσεις και τις συμβάσεις διάταξης της εκάστοτε πλατφόρμας, αντί για ένα κουτί με διαφορετικό λογότυπο. Και η καθεμία επισημαίνεται ρητά ως ενδεικτική προσέγγιση για σκοπούς σχεδιασμού, καθώς οι πραγματικές πλατφόρμες επανασχεδιάζουν το χρώμιο της προεπισκόπησης με την πάροδο του χρόνου και αυτό το εργαλείο δεν τις ανακτά ούτε τις αντλεί ποτέ για έλεγχο.