Τα Open Graph (OG) tags είναι HTML meta tags που ορίζουν το preview μιας ιστοσελίδας όταν αυτή κοινοποιείται στα social media—όπως τίτλος, περιγραφή, εικόνα, URL και τύπος περιεχομένου. Με απλά λόγια, τα OG tags σας επιτρέπουν να ελέγχετε πώς εμφανίζεται το site σας σε Facebook, LinkedIn, WhatsApp, X και άλλες πλατφόρμες. Η σωστή χρήση των OG tags αυξάνει το click-through rate, ενισχύει την εικόνα του brand και αποτρέπει λάθη όπως λάθος εικόνα ή ελλιπή περιγραφή όταν μοιράζετε link.
Όταν κοινοποιείτε ένα blog post, μια σελίδα προϊόντος ή υπηρεσίας στα social media, οι πλατφόρμες σκανάρουν τη σελίδα και δημιουργούν αυτόματα ένα preview card. Αν δεν έχετε ορίσει Open Graph δεδομένα, τα social media μπορεί να επιλέξουν τυχαία εικόνα, να εμφανίσουν παλιό τίτλο ή να αφήσουν την περιγραφή κενή. Αυτό μπορεί να προκαλέσει σημαντική απώλεια απόδοσης, ειδικά σε καμπάνιες, e-shop προϊόντα, ειδησεογραφικό περιεχόμενο και εταιρικά sites όπου η πρώτη εντύπωση είναι κρίσιμη.
Στον οδηγό αυτό του Hostragons blog εξετάζουμε τι είναι τα Open Graph tags, ποια OG tags είναι απαραίτητα, πώς τα προσθέτετε σε WordPress και custom sites, τις ιδανικές διαστάσεις εικόνας, εργαλεία ελέγχου και συχνά λάθη. Εξηγούμε επίσης πώς το hosting, το SSL και το domain επηρεάζουν έμμεσα την ποιότητα του social preview, με πρακτικά παραδείγματα. Φιλοξενία Ιστού Αναζητούμε τομέα Πιστοποιητικό SSL
Τι είναι το Open Graph Protocol;
Το Open Graph protocol δημιουργήθηκε αρχικά από το Facebook ως πρότυπο metadata. Στόχος του είναι οι ιστοσελίδες να εμφανίζονται με εμπλουτισμένα cards στα social media. Τα OG tags στον HTML κώδικα απαντούν σε ερωτήματα όπως: Ποιος είναι ο τίτλος της σελίδας; Ποια η περιγραφή; Ποια εικόνα πρέπει να προβληθεί; Ποιο το URL; Είναι άρθρο, προϊόν ή video;
Σήμερα το Open Graph δεν περιορίζεται στο Facebook. LinkedIn, WhatsApp, Telegram, Slack και πολλά messaging apps διαβάζουν OG tags για να φτιάξουν το preview. Το X (πρώην Twitter) έχει δικά του Twitter Card tags αλλά συνήθως αξιοποιεί και τα OG tags. Έτσι, το Open Graph αποτελεί γέφυρα μεταξύ τεχνικού SEO, social media optimization και user experience σε σύγχρονες ιστοσελίδες.
Τα OG tags δεν είναι άμεσο ranking factor για το Google. Δηλαδή, προσθέτοντας OG tag δεν θα δείτε αυτόματα καλύτερη θέση στα organic αποτελέσματα. Όμως, όταν το site σας εμφανίζεται πιο καθαρά και επαγγελματικά στα social media, αυξάνεται το traffic, το περιεχόμενο διαμοιράζεται περισσότερο και ενισχύονται τα brand signals. Συνεπώς, τα OG tags συμβάλλουν έμμεσα στη ψηφιακή σας προβολή.
Γιατί τα Open Graph Tags είναι σημαντικά;
Οι χρήστες στα social media αποφασίζουν αν θα κάνουν click σε ένα link μέσα σε δευτερόλεπτα. Τα βασικά στοιχεία που επηρεάζουν αυτή την επιλογή είναι: τίτλος, εικόνα, περιγραφή και αξιόπιστο domain. Τα OG tags σας δίνουν έλεγχο σε αυτά τα τέσσερα στοιχεία. Σε mobile συσκευές, το preview card συχνά είναι η πρώτη και μοναδική εντύπωση για τον χρήστη.
- Αυξάνουν το click rate: Ένας καθαρός τίτλος και ελκυστική εικόνα ξεχωρίζουν στο feed.
- Διασφαλίζουν brand consistency: Το σωστό logo, χρώματα, περιγραφή και URL εμφανίζονται σε κάθε share.
- Αποτρέπουν λάθος εικόνες: Αποφεύγεται η τυχαία επιλογή irrelevant εικόνας από την πλατφόρμα.
- Βελτιώνουν το sharing experience: Δημιουργούνται επαγγελματικά preview cards σε WhatsApp, LinkedIn, Facebook.
- Υποστηρίζουν καμπάνιες: Τα μηνύματα παραδίδονται σωστά σε σελίδες προϊόντος, προσφορών ή ανακοινώσεων.
Για παράδειγμα, σε μια landing page hosting προσφοράς, αν το OG image δείχνει το brand, την έκπτωση και το όνομα της καμπάνιας, ο χρήστης καταλαβαίνει αμέσως το θέμα. Χωρίς OG tags, το σύστημα μπορεί να εμφανίσει μια μικρή εικονίτσα ή άσχετο banner, μειώνοντας την εμπιστοσύνη και το click. Όταν σχεδιάζετε καμπάνιες, υποδομή υψηλής αξιοπιστίας, γρήγορο server και HTTPS είναι επίσης σημαντικά. WordPress hosting Επαγγελματικό Hosting
Απαραίτητα OG Tags για Social Preview
Οι ανάγκες κάθε site διαφέρουν, αλλά μια βασική Open Graph ρύθμιση απαιτεί συγκεκριμένα tags. Αυτά παρέχουν το minimum data set για σωστό preview στα social media.
og:title
og:title είναι ο τίτλος που βλέπει ο χρήστης στα social media. Δεν πρέπει να είναι ίδιος με τον SEO title—πιο σύντομος, ξεκάθαρος, με στόχο το click. 40-60 χαρακτήρες είναι συνήθως ασφαλές, καθώς μεγάλοι τίτλοι κόβονται σε mobile previews.
Παράδειγμα: <meta property='og:title' content='Διαμορφώστε την εμφάνιση σας στα social media με Open Graph Tags'>
og:description
og:description είναι η σύντομη περιγραφή στο preview card. Πρέπει να λέει καθαρά τι θα βρει ο χρήστης στη σελίδα. 120-160 χαρακτήρες είναι ιδανικό. Η περιγραφή δεν πρέπει να είναι υπερβολικά διαφημιστική, αλλά να ενημερώνει και να προκαλεί ενδιαφέρον.
Παράδειγμα: <meta property='og:description' content='Ελέγξτε τίτλο, εικόνα και περιγραφή με OG tags για επαγγελματική παρουσία στα social media.'>
og:image
og:image είναι το URL της εικόνας που προβάλλεται στο share. Η σωστή εικόνα επηρεάζει άμεσα το social media performance. Δώστε το πλήρες URL, διασφαλίστε πρόσβαση μέσω HTTPS και προτιμήστε διαστάσεις 1200 x 630 pixels. Αποφύγετε αρχεία άνω του 1MB για γρήγορη φόρτωση.
Παράδειγμα: <meta property='og:image' content='https://paradeigma.gr/images/open-graph-guide.jpg'>
og:url
og:url δηλώνει το canonical URL για το share. Μην χρησιμοποιείτε parametric URLs, session IDs ή tracking codes. Αν το ίδιο περιεχόμενο εμφανίζεται σε πολλά URLs, το OG url πρέπει να δείχνει το κύριο address ώστε να μην διασπάται το sharing analytics.
og:type
og:type δηλώνει τον τύπο του περιεχομένου. Για blog posts βάλτε article, για homepage website, για προϊόντα product. Έτσι τα social platforms καταλαβαίνουν σωστά το context.
og:site_name & og:locale
og:site_name εμφανίζει το brand name του site. og:locale δείχνει τη γλώσσα και την περιοχή. Για ελληνικά sites, el_GR είναι η κατάλληλη τιμή. Σε πολυγλωσσικά sites ορίστε locale για κάθε version.
Πίνακας με τα Βασικά OG Tags
| Tag | Λειτουργία | Προτεινόμενη χρήση |
|---|---|---|
| og:title | Ορίζει τον τίτλο του social card | 40-60 χαρακτήρες, ξεκάθαρος και σχετικός |
| og:description | Δείχνει σύντομη περιγραφή του link | 120-160 χαρακτήρες, ενημερωτική |
| og:image | Προσδιορίζει την εικόνα του share | 1200 x 630 px, HTTPS, μικρό αρχείο |
| og:url | Το βασικό URL του preview | Canonical, καθαρό, χωρίς παραμέτρους |
| og:type | Εξηγεί το content type | article, website, product κ.ά. |
| og:site_name | Δείχνει το brand/site name | Σταθερό brand name |
| og:locale | Ορίζει γλώσσα & περιοχή | Για ελληνικά el_GR |
Open Graph vs Twitter Card Tags
Τα Open Graph tags διαβάζονται από πολλά social networks, ενώ τα Twitter Card tags είναι ειδικά για το X. Τα δύο συστήματα είναι παρόμοια αλλά διαφέρουν σε naming και properties. Προτείνεται να χρησιμοποιείτε και τα δύο για να έχετε συνεπή preview σε όλες τις πλατφόρμες.
| Κριτήριο | Άνοιγμα Γραφήματος | Κάρτα Twitter |
|---|---|---|
| Κύρια πλατφόρμα | Facebook, LinkedIn, WhatsApp, Slack κ.ά. | Χ (Τwitter) |
| Τίτλος | og:title | twitter:title |
| Περιγραφή | og:description | twitter:description |
| Εικόνα | og:image | twitter:image |
| Τύπος κάρτας | og:type | twitter:card (summary, summary_large_image) |
Για ένα blog post, αφού φτιάξετε τα OG tags, μπορείτε να ορίσετε twitter:card ως summary_large_image για μεγάλο preview. Έτσι το card ξεχωρίζει στο mobile feed του X.
Πώς προσθέτετε Open Graph Tags στο site σας;
Τα OG tags μπαίνουν στο <head> του HTML, δηλαδή στο meta section που διαβάζουν bots και browsers—όχι στο ορατό περιεχόμενο. Ο τρόπος προσθήκης διαφέρει ανάλογα με το CMS ή τη custom πλατφόρμα.
1. Προσθήκη OG tags σε WordPress
Σε WordPress, δεν χρειάζεται να γράψετε κώδικα. Plugins όπως Yoast SEO, Rank Math, All in One SEO επιτρέπουν ορισμό social media τίτλου, περιγραφής και εικόνας ανά post/page.
- Εγκαταστήστε και ενεργοποιήστε SEO plugin.
- Μπείτε στη σελίδα ή το άρθρο για editing.
- Ανοίξτε το social sharing tab.
- Ορίστε τίτλο, περιγραφή, εικόνα για Facebook/LinkedIn.
- Ανεβάστε την εικόνα σε 1200 x 630 px.
- Αποθηκεύστε και ελέγξτε το preview με test tool.
Η ταχύτητα WordPress είναι κρίσιμη: Αν τα social bots δεν φτάνουν τη σελίδα ή ο server αργεί, το preview μπορεί να είναι λανθασμένο. Επιλέξτε γρήγορο, αξιόπιστο WordPress hosting. WordPress hosting LiteSpeed Hosting
2. Προσθήκη OG tags σε custom ή static sites
Σε custom πλατφόρμα (Laravel, Next.js, Nuxt, static site generator, απλό HTML) ορίζετε τα OG tags στο template. Για blog και προϊόντα, τα tags πρέπει να είναι δυναμικά και να αντλούν δεδομένα από τη βάση.
Παράδειγμα: <meta property='og:title' content='Τίτλος σελίδας'> <meta property='og:description' content='Περιγραφή σελίδας'> <meta property='og:image' content='https://site.gr/og-image.jpg'> <meta property='og:url' content='https://site.gr/page'> <meta property='og:type' content='article'>
Συχνό λάθος: Όλες οι σελίδες έχουν το ίδιο OG title και image. Σε μεγάλα e-shops αυτό μειώνει την απόδοση του social sharing. Κάθε σημαντική σελίδα πρέπει να έχει δικό της OG preview.
3. OG tags για προϊόντα σε e-shop
Στη σελίδα προϊόντος, το og:title πρέπει να είναι το όνομα του προϊόντος, στο og:description μια σύντομη περιγραφή με value proposition, og:image υψηλής ποιότητας φωτογραφία. Αποφύγετε παραπλανητικά promo texts σε προϊόντα που δεν είναι διαθέσιμα. Για παραλλαγές προϊόντων, το canonical URL πρέπει να μπαίνει στο og:url.
Όταν κοινοποιείται ένα προϊόν, ο χρήστης πρέπει να καταλαβαίνει άμεσα τι προσφέρει το προϊόν, χωρίς υπερβολές. Η απλή, ξεκάθαρη περιγραφή εμπνέει εμπιστοσύνη.
Ιδανικές διαστάσεις OG εικόνας & αρχείο
Η OG εικόνα είναι το πιο ορατό στοιχείο στο preview. Χαμηλής ανάλυσης, κομμένες ή δυσανάγνωστες εικόνες δεν δείχνουν επαγγελματισμό. Μέχρι το 2026, το ασφαλές μέγεθος είναι 1200 x 630 px (1.91:1 ratio), συμβατό με Facebook, LinkedIn και άλλα.
- Προτεινόμενο μέγεθος: 1200 x 630 px.
- Ελάχιστο: 600 x 315 px (για ποιότητα προτιμήστε μεγαλύτερο).
- Μορφή: JPG ή PNG. WebP μπορεί να μην υποστηρίζεται παντού.
- Μέγιστο μέγεθος αρχείου: Κρατήστε το κάτω από 1MB.
- URL: Χρησιμοποιήστε absolute URL, όχι relative path.
- HTTPS: Η εικόνα πρέπει να είναι προσβάσιμη μέσω ασφαλούς σύνδεσης.
Κρατήστε σημαντικό κείμενο στο κέντρο της εικόνας—όχι στις άκρες, καθώς πολλές πλατφόρμες κάνουν crop. Δημιουργήστε μοναδική OG εικόνα για κάθε post ώστε να αποφύγετε την αίσθηση “repeat” στο social feed.
Έλεγχος OG tags & προβλήματα cache
Μετά την προσθήκη OG tags, πρέπει να τα ελέγξετε. Τα social media κρατούν cache των previews. Αν μια λάθος εικόνα ή περιγραφή “τραβηχτεί” αρχικά, μπορεί να εμφανίζεται για μέρες ακόμα κι αν τη διορθώσετε.
Εργαλεία για testing
- Facebook Sharing Debugger: Κάνει scan το URL, δείχνει τα OG tags και επιτρέπει refresh του cache.
- LinkedIn Post Inspector: Ελέγχει τα LinkedIn previews.
- Twitter Card Validator: Ελέγχει αν τα Twitter Card tags δουλεύουν σωστά.
- WhatsApp test: Στείλτε το link στον εαυτό σας για να δείτε το preview στο κινητό.
Αν δείτε 404, 403, SSL warning, ή robots.txt block, τα social bots δεν μπορούν να φτάσουν τη σελίδα. Ελέγξτε τις ρυθμίσεις ασφαλείας του hosting, τα CDN rules και το firewall. Ένα σωστά ρυθμισμένο SSL είναι κρίσιμο για πρόσβαση bots σε images και page resources. Πιστοποιητικό SSL Τι είναι το CDN Λύση για τα σφάλματα 403 Forbidden
Συχνά λάθη στα Open Graph tags
Μικρά λάθη στα OG tags οδηγούν σε μεγάλα προβλήματα εμφάνισης. Δείτε τα πιο συχνά τεχνικά SEO προβλήματα:
- Relative image path: Μην χρησιμοποιείτε /images/og.jpg. Χρησιμοποιήστε πλήρες URL (π.χ. https://site.gr/images/og.jpg).
- Εικόνα μη προσβάσιμη: Hotlink protection, firewall ή λάθος file permission μπορεί να μπλοκάρει τα bots.
- Ίδιο OG content παντού: Κάθε blog post, προϊόν και υπηρεσία χρειάζεται μοναδικό τίτλο και περιγραφή.
- Υπερβολικά μακρύς τίτλος: Κόβεται στα mobile previews, χάνεται η σαφήνεια.
- Χωρίς HTTPS: Προκαλεί warnings και προβλήματα πρόσβασης.
- Δεν καθαρίζεται το cache: Τα social platforms δείχνουν παλιά εικόνα/περιγραφή.
- Canonical & OG URL ασυμφωνία: Τα shares “σπάνε” σε πολλά URLs.
Παράδειγμα: Αλλάξατε το featured image σε blog post, αλλά το WhatsApp δείχνει ακόμα την παλιά εικόνα. Πρώτα ελέγξτε αν το og:image έχει πραγματικά αλλάξει στο source. Μετά κάντε refresh με Facebook Sharing Debugger ή το αντίστοιχο εργαλείο. Αν παραμένει το πρόβλημα, καθαρίστε CDN και server cache.
Open Graph tags & SEO: Πώς συνδέονται;
Τα OG tags δεν είναι παραδοσιακά SEO meta—δεν επηρεάζουν άμεσα τα search results όπως το title, meta description, canonical ή structured data. Στο SEO του 2026 όμως, με έμφαση στη συμπεριφορά χρήστη, brand trust, περιεχόμενο και multi-channel visibility, το social preview έχει σημασία. Ένα καλό OG preview οδηγεί σε περισσότερα clicks, shares και conversions.
Με το Google AI Overviews και τα πλουσιότερα SERPs, το περιεχόμενο πρέπει να είναι “κατανοητό” όχι μόνο από search bots αλλά και από τα συστήματα preview των social platforms. Έτσι, τα OG tags ανήκουν στην τεχνική SEO checklist.
Γράψτε SEO title και OG title με ίδια intent. Το SEO title ανταγωνίζεται στο Google, το OG title τραβάει προσοχή στο social feed. Δεν πρέπει να αντιφάσκουν ή να αποπροσανατολίζουν τον χρήστη—πρέπει να εκπροσωπούν σωστά το page. Το ίδιο ισχύει για meta description vs og:description.
Checklist Open Graph πριν το launch
Η παρακάτω checklist βοηθά content teams, agencies και webmasters να κάνουν γρήγορο έλεγχο πριν τη δημοσίευση νέας σελίδας.
- Υπάρχει μοναδικό og:title;
- Το og:description είναι σύντομο και ακριβές;
- Το og:image είναι 1200 x 630 px και υψηλής ποιότητας;
- Η εικόνα είναι προσβάσιμη μέσω HTTPS;
- Το og:url συμφωνεί με το canonical URL;
- Το og:type ταιριάζει με τον τύπο περιεχομένου;
- Σε ελληνική σελίδα το og:locale είναι el_GR;
- Έγινε preview test σε Facebook, LinkedIn, WhatsApp;
- Καθαρίστηκε CDN/server cache;
- Ελέγχθηκε αν κόβεται τίτλος/εικόνα στο mobile;
Ακολουθήστε την checklist σε κάθε νέο blog post, προϊόν, καμπάνια και σημαντική εταιρική σελίδα. Έτσι διασφαλίζετε συνέπεια στο social preview και επιταχύνετε το quality control της ομάδας.
Hosting, SSL και Domain: Πώς επηρεάζουν το OG preview
Αν και τα OG tags ορίζονται στον HTML, η σωστή λειτουργία τους απαιτεί αξιόπιστο web infrastructure. Τα social bots πρέπει να λαμβάνουν γρήγορη και έγκυρη απάντηση από τον server. Αν ο server καθυστερεί, το SSL έχει πρόβλημα ή οι εικόνες μπλοκάρονται με 403, το preview card μπορεί να είναι ελλιπές.
Το domain είναι επίσης σημαντικό για το trust. Ένα σύντομο, ευανάγνωστο και σχετικό με το brand domain προσδίδει επαγγελματισμό στο preview. Το SSL είναι απαραίτητο για user trust και συμβατότητα με social media. Αν ξεκινάτε νέο site, ρυθμίστε σωστά domain, hosting και SSL από την αρχή για να αποφύγετε προβλήματα σε sharing και SEO. Αναζητούμε τομέα Φιλοξενία Ιστού Πιστοποιητικό SSL
Συμπέρασμα: Τα Open Graph Tags—μικρό tweak, μεγάλη επίδραση
Τα Open Graph tags είναι βασικά meta δεδομένα που ελέγχουν πώς εμφανίζεται η ιστοσελίδα σας στα social media. Με σωστό τίτλο, περιγραφή, εικόνα και URL, τα links σας γίνονται πιο αξιόπιστα, κατανοητά και click-worthy. Δεν εγγυώνται καλύτερο ranking, αλλά προσφέρουν σημαντικά οφέλη σε social traffic, brand image και content reach.
Πριν δημοσιεύσετε νέο περιεχόμενο, ελέγξτε τα OG tags, προετοιμάστε σωστά τις εικόνες και κάντε test τα previews. Επενδύστε σε γρήγορο hosting, σωστό SSL και domain management για απροβλημάτιστα social cards. Μπορείτε να δοκιμάσετε τις λύσεις του Hostragons για αξιόπιστη βάση και να εντάξετε το OG check στη διαδικασία δημοσίευσης.
Συχνές ερωτήσεις
Ποιος είναι ο ρόλος των Open Graph (OG) tags;
Τα OG tags προσδιορίζουν τον τίτλο, την περιγραφή, την εικόνα και το URL που θα εμφανιστούν όταν κοινοποιείται μια σελίδα στα social media, προσφέροντας πιο επαγγελματικό και συνεπή preview.
Τα OG tags επηρεάζουν άμεσα το SEO ranking;
Όχι άμεσα. Τα OG tags δεν είναι ranking factor, αλλά με υψηλότερο click rate, περισσότερα shares και μεγαλύτερη εμπιστοσύνη στο brand, υποστηρίζουν έμμεσα το SEO.
Ποιες διαστάσεις πρέπει να έχει η OG εικόνα;
Το ασφαλές μέγεθος είναι 1200 x 630 pixels. Η εικόνα πρέπει να είναι προσβάσιμη μέσω HTTPS, υψηλής ποιότητας και κάτω από 1MB.
Πώς προσθέτω OG tags σε WordPress;
Με plugins όπως Yoast SEO, Rank Math ή All in One SEO, ορίζετε τίτλο, περιγραφή και εικόνα ανά post/page εύκολα χωρίς κώδικα.
Τι κάνω αν το WhatsApp δείχνει λάθος εικόνα;
Ελέγξτε ότι το og:image έχει ενημερωθεί στον source, καθαρίστε CDN και server cache, κάντε refresh με Facebook Sharing Debugger και δοκιμάστε ξανά το link.