Δημιουργός Ετικετών Meta Open Graph

Οι ετικέτες Open Graph είναι τα μικρά κομμάτια HTML που καθορίζουν πώς εμφανίζεται η σελίδα σας όταν κάποιος την κοινοποιεί στο Facebook, στο LinkedIn, στο Slack, στο Discord ή στο X (Twitter). Συμπληρώστε παρακάτω τίτλο, περιγραφή, URL, εικόνα και μερικές επιλογές, παρακολουθήστε την προεπισκόπηση της κάρτας κοινοποίησης να ενημερώνεται άμεσα και αντιγράψτε τις ετικέτες <meta> που δημιουργήθηκαν κατευθείαν στο <head> της σελίδας σας. Όλα γίνονται μέσα στο πρόγραμμα περιήγησής σας — τίποτα δεν αποστέλλεται σε διακομιστή.

Τι είναι αυτό το εργαλείο;

Το Open Graph είναι ένα πρωτόκολλο, που δημιουργήθηκε αρχικά από το Facebook, το οποίο επιτρέπει σε κάθε ιστοσελίδα να περιγράφει τον εαυτό της με ένα μικρό σύνολο ετικετών <meta property="og:..."> τοποθετημένων στο <head> του HTML. Όταν κάποιος επικολλά τον σύνδεσμό σας σε μια κοινωνική εφαρμογή, εφαρμογή συνομιλίας ή messenger, αυτή η εφαρμογή διαβάζει αυτές τις ετικέτες για να δημιουργήσει την κάρτα προεπισκόπησης — τίτλο, περιγραφή και μικρογραφία εικόνας — αντί να μαντεύει από το περιεχόμενο της σελίδας.

Το Twitter (X) χρησιμοποιεί ένα συγγενικό αλλά ξεχωριστό σύνολο ετικετών, <meta name="twitter:...">, για να ελέγχει πώς εμφανίζεται η προεπισκόπηση ενός συνδέσμου συγκεκριμένα στην πλατφόρμα του. Οι περισσότερες ιστοσελίδες ορίζουν και τα δύο: ετικέτες Open Graph για ευρεία συμβατότητα και ετικέτες Twitter Card για να βελτιστοποιήσουν την προεπισκόπηση στο X (για παράδειγμα, επιλέγοντας μια κάρτα με μεγάλη εικόνα αντί για μια μικρή κάρτα σύνοψης).

Χωρίς αυτές τις ετικέτες, ένας κοινοποιημένος σύνδεσμος είτε δεν εμφανίζει καθόλου προεπισκόπηση, είτε η πλατφόρμα προσπαθεί να μαντέψει τίτλο και εικόνα από το ακατέργαστο περιεχόμενο της σελίδας σας — επιλέγοντας συχνά λάθος τίτλο, μια τυχαία ενσωματωμένη εικόνα ή τίποτα. Ο ρητός ορισμός των og:title, og:description και og:image σάς δίνει πλήρη έλεγχο του πώς παρουσιάζεται το περιεχόμενό σας πριν κάποιος κάνει κλικ.

Γιατί να το χρησιμοποιήσετε;

Ζωντανή προεπισκόπηση — δείτε ακριβώς πώς θα φαίνεται η κάρτα κοινοποίησης καθώς πληκτρολογείτε, πριν δημοσιεύσετε οτιδήποτε.
Δημιουργεί ταυτόχρονα τόσο ετικέτες Open Graph (og:title, og:description, og:image, og:url, og:type, og:site_name) όσο και ετικέτες Twitter Card.
Καλύπτει τα πεδία που διαβάζουν πραγματικά οι πλατφόρμες: τίτλο, περιγραφή, κανονικό URL, εικόνα, όνομα ιστοσελίδας, τύπο περιεχομένου και στυλ κάρτας Twitter.
Λειτουργεί εξ ολοκλήρου στην πλευρά του πελάτη — ο τίτλος, η περιγραφή και τα URL σας δεν εγκαταλείπουν ποτέ το πρόγραμμα περιήγησής σας.
Δωρεάν, χωρίς σύνδεση, χωρίς όριο χρήσης — αντιγράψτε το αποτέλεσμα και επικολλήστε το στον κώδικα HTML σας.

Πώς χρησιμοποιείται

Εισαγάγετε τον τίτλο της σελίδας σας και μια σύντομη περιγραφή (στοχεύστε κάτω από ~60 χαρακτήρες για τον τίτλο, ~155–160 για την περιγραφή).
Εισαγάγετε το κανονικό URL της σελίδας και το απόλυτο URL της εικόνας προεπισκόπησης (τα URL εικόνων πρέπει να είναι πλήρως προσδιορισμένα, π.χ. https://example.com/image.jpg, όχι μια σχετική διαδρομή).
Προαιρετικά ορίστε το όνομα της ιστοσελίδας, επιλέξτε ένα og:type (website, article, product, profile, video, music), και διαλέξτε έναν τύπο Twitter Card (summary ή summary_large_image).
Ελέγξτε τη ζωντανή κάρτα προεπισκόπησης για να επιβεβαιώσετε ότι ο τίτλος, η περιγραφή και η εικόνα ταιριάζουν καλά μαζί.
Κάντε κλικ στο «Αντιγραφή» και επικολλήστε τις ετικέτες <meta> που δημιουργήθηκαν στο <head> της σελίδας σας, πριν από την ετικέτα κλεισίματος </head>.

Παράδειγμα

Είσοδος

Τίτλος: «10 δωρεάν εργαλεία για προγραμματιστές που πραγματικά θα χρησιμοποιήσετε»
Περιγραφή: «Μια επιλεγμένη λίστα εργαλείων που τρέχουν στο πρόγραμμα περιήγησης για JSON, regex, UUID και άλλα — χωρίς εγκατάσταση.»
URL: https://example.com/blog/dev-tools
Εικόνα: https://example.com/images/dev-tools-cover.jpg

Έξοδος

<meta property="og:title" content="10 Free Developer Tools You'll Actually Use" />
<meta property="og:description" content="A curated list of browser-based tools for JSON, regex, UUIDs and more — no install required." />
<meta property="og:url" content="https://example.com/blog/dev-tools" />
<meta property="og:image" content="https://example.com/images/dev-tools-cover.jpg" />
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="10 Free Developer Tools You'll Actually Use" />
<meta name="twitter:description" content="A curated list of browser-based tools for JSON, regex, UUIDs and more — no install required." />
<meta name="twitter:image" content="https://example.com/images/dev-tools-cover.jpg" />

Στο αποτέλεσμα περιλαμβάνονται μόνο τα πεδία που συμπληρώνετε, οπότε αν αφήσετε το όνομα ιστοσελίδας κενό, το og:site_name απλώς παραλείπεται από το αποτέλεσμα.

Συνήθη λάθη που πρέπει να αποφεύγετε

Πλήρης απουσία og:image — χωρίς αυτό, οι περισσότερες πλατφόρμες είτε δεν εμφανίζουν καμία εικόνα προεπισκόπησης είτε καταφεύγουν σε μια τυχαία εικόνα από τη σελίδα, κάτι που συνήθως φαίνεται προβληματικό και μη επαγγελματικό.
Χρήση σχετικής διαδρομής εικόνας όπως /images/cover.jpg αντί για πλήρες URL όπως https://example.com/images/cover.jpg — οι crawlers κοινωνικών δικτύων γενικά δεν μπορούν να επιλύσουν σχετικές διαδρομές.
Λάθος λόγος διαστάσεων εικόνας — μια τετράγωνη ή κατακόρυφη εικόνα περικόπτεται άβολα όταν οι πλατφόρμες την αναγκάζουν στο οριζόντιο πλαίσιο 1,91:1· σχεδιάζετε πάντα την εικόνα κοινοποίησης κοντά στο 1200×630.
Τίτλοι ή περιγραφές που περικόπτονται — κρατήστε το og:title κάτω από ~60 χαρακτήρες και το og:description κάτω από ~155–160 χαρακτήρες, ώστε να μην κόβονται με αποσιωπητικά στις περισσότερες πλατφόρμες.
Ξέχασμα ενημέρωσης των προεπισκοπήσεων στην κρυφή μνήμη — μετά την αλλαγή ετικετών og σε μια ενεργή σελίδα, η παλιά προεπισκόπηση μπορεί να παραμείνει στην κρυφή μνήμη του Facebook ή του LinkedIn μέχρι να επιβάλετε χειροκίνητα νέα σάρωση με τα εργαλεία εντοπισμού σφαλμάτων τους.

Πού χρησιμοποιείται κάθε ετικέτα

Τα og:title, og:description και og:image είναι οι τρεις ετικέτες που σχεδόν κάθε πλατφόρμα διαβάζει για να δημιουργήσει προεπισκόπηση. Το og:url λέει στους crawlers ποιο κανονικό σύνδεσμο να συσχετίσουν με την προεπισκόπηση, κάτι που έχει σημασία αν το ίδιο περιεχόμενο είναι προσβάσιμο μέσω πολλών URL. Το og:site_name εμφανίζει μια μικρή ετικέτα (όπως το όνομα της δημοσίευσης ή του brand) πάνω από τον τίτλο σε ορισμένες πλατφόρμες, όπως το Facebook.

Το og:type αλλάζει τι είδους αντικείμενο αντιπροσωπεύει η σελίδα για crawlers που υποστηρίζουν το πλουσιότερο μοντέλο αντικειμένων του Open Graph — για παράδειγμα, το article ενεργοποιεί τα og:article:published_time και og:article:author σε πλατφόρμες που τα διαβάζουν, αν και οι περισσότερες κοινωνικές προεπισκοπήσεις αγνοούν αυτά τα επιπλέον πεδία και χρησιμοποιούν μόνο τη βασική τριάδα τίτλος/περιγραφή/εικόνα.

Το twitter:card ελέγχει τη διάταξη ειδικά στο X: το summary εμφανίζει μια μικρή τετράγωνη μικρογραφία δίπλα στο κείμενο, ενώ το summary_large_image εμφανίζει μια εικόνα πλήρους πλάτους πάνω από το κείμενο — η δεύτερη επιλογή είναι σχεδόν πάντα η καλύτερη για περιεχόμενο με μια ουσιαστική εικόνα εξωφύλλου.

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

Τι μέγεθος πρέπει να έχει το og:image μου;

Το προτεινόμενο μέγεθος είναι 1200×630px — είναι αρκετά μεγάλο για οθόνες υψηλής πυκνότητας και ταιριάζει με τη λόγο διαστάσεων περίπου 1,91:1 στην οποία περικόπτουν την εικόνα το Facebook, το LinkedIn και το X. Κρατήστε το αρχείο κάτω από 5–8MB, χρησιμοποιήστε JPG ή PNG και βεβαιωθείτε ότι το URL της εικόνας είναι πλήρες και απόλυτο, όχι σχετική διαδρομή — οι περισσότεροι crawlers δεν επιλύουν σωστά σχετικές διαδρομές εικόνων.

Γιατί δεν εμφανίζεται η προεπισκόπηση όταν κοινοποιώ τον σύνδεσμο;

Οι πιο συνηθισμένες αιτίες είναι: απουσία og:image, σχετικό αντί για απόλυτο URL εικόνας, το robots.txt να μπλοκάρει τον crawler, ή η πλατφόρμα να εμφανίζει μια αποθηκευμένη στην κρυφή μνήμη έκδοση παλαιότερης προεπισκόπησης. Το Facebook και το LinkedIn αποθηκεύουν επιθετικά τις σαρωμένες προεπισκοπήσεις στην κρυφή μνήμη — χρησιμοποιήστε το Sharing Debugger του Facebook ή το Post Inspector του LinkedIn για να επιβάλετε νέα σάρωση αφού ενημερώσετε τις ετικέτες σας.

Ποια είναι η διαφορά μεταξύ των ετικετών og: και twitter:;

Οι ετικέτες og: (og:title, og:description, og:image κ.λπ.) αποτελούν το πρότυπο Open Graph, το οποίο διαβάζεται από το Facebook, το LinkedIn, το Slack, το Discord, το WhatsApp και τις περισσότερες άλλες πλατφόρμες. Οι ετικέτες twitter: είναι η δική τους μορφή του Twitter/X. Αν λείπουν τα twitter:title ή twitter:image, το X ανατρέχει αυτόματα στην αντίστοιχη ετικέτα og: — όμως ο ρητός ορισμός και των δύο σας δίνει περισσότερο έλεγχο, συμπεριλαμβανομένης της επιλογής summary_large_image για μεγάλη εικόνα προεπισκόπησης.

Ποιο og:type πρέπει να χρησιμοποιήσω;

Το «website» είναι η ασφαλής προεπιλογή για τις περισσότερες σελίδες, συμπεριλαμβανομένων αρχικών σελίδων και γενικού περιεχομένου. Χρησιμοποιήστε «article» για αναρτήσεις ιστολογίου και ειδησεογραφικά άρθρα (ξεκλειδώνει επιπλέον ετικέτες ειδικές για άρθρα, όπως ο χρόνος δημοσίευσης), «product» για σελίδες ηλεκτρονικού εμπορίου και «profile» για προσωπικές σελίδες ή σελίδες προφίλ χρήστη. Ο τύπος επηρεάζει κυρίως ποιες επιπλέον ιδιότητες Open Graph είναι έγκυρες, όχι πώς φαίνεται η βασική κάρτα προεπισκόπησης.

Αποθηκεύει ή στέλνει αυτό το εργαλείο τα δεδομένα μου κάπου;

Όχι. Όλη η δημιουργία γίνεται τοπικά στο πρόγραμμα περιήγησής σας με απλή JavaScript. Τίποτα από όσα πληκτρολογείτε δεν μεταδίδεται, καταγράφεται ή αποθηκεύεται — κλείνοντας την καρτέλα, όλα διαγράφονται.