Αντιγραφή & επικόλληση Με προεπισκόπηση Περιλαμβάνονται συμβουλές εικόνας/cache

Γεννήτρια OGP Tag (Αυτόματη έξοδος og:title/og:image κ.λπ.)

Εισαγάγετε URL, τίτλο, περιγραφή και URL εικόνας. Δημιουργήστε ετικέτες meta Open Graph + Twitter Card μαζί.

Η λήψη εκτελείται απευθείας στο πρόγραμμα περιήγησής σας (ισχύουν περιορισμοί CORS).

Είσοδος

1) Βασικές πληροφορίες

Απαιτείται

Οδηγός: 30–60 χαρακτήρες 0
Οδηγός: 80–120 χαρακτήρες 0
Μια προεπισκόπηση μικρογραφίας εμφανίζεται όταν φορτώνεται η εικόνα.
Τρέχουσα αναλογία -

Επιλέξτε ιστότοπο ή άρθρο.

2) Twitter Card
Πτυσσόμενο / Ενεργό από προεπιλογή
Συμπερίληψη ετικετών Twitter Card
Κανόνες αυτόματου συγχρονισμού
  • • Εάν το twitter:title είναι κενό, χρησιμοποιήστε το og:title.
  • • Εάν το twitter:description είναι κενό, χρησιμοποιήστε το og:description.
  • • Εάν το twitter:image είναι κενό, χρησιμοποιήστε το og:image.
3) Για προχωρημένους
Ανοίξτε μόνο εάν χρειάζεστε μικρορυθμίσεις.

Κείμενο προσβασιμότητας. Το X υποδεικνύει έως 420 χαρακτήρες.

Η προσθήκη πλάτους/ύψους μπορεί να βοηθήσει τους ανιχνευτές να αποδώσουν ταχύτερα. (Facebook Developers)

Ετικέτες άρθρου (μόνο όταν og:type=article)

Χρησιμοποιήστε ISO 8601 εάν χρειάζεται.

Παραγόμενες ετικέτες meta


            

Προεπισκόπηση

Προεπισκόπηση OG
example.com
Τίτλος προεπισκόπησης
Η περιγραφή θα εμφανιστεί εδώ.
Πολλές εφαρμογές SNS/chat μοιάζουν με αυτό
Προεπισκόπηση κάρτας X summary
example.com
Τίτλος προεπισκόπησης
Η περιγραφή θα εμφανιστεί εδώ.
Εναλλαγή μεταξύ summary και summary_large_image
Σημειώσεις (προαιρετικό)
    Οι σημειώσεις εμφανίζονται εδώ με βάση τις εισαγωγές σας.

    Επιλογές

    Οδηγός μεγέθους εικόνας (παραδείγματα)
    Επιλέξτε OG ή X για να δείτε παραδείγματα μεγεθών
    Υπόδειξη αναλογίας -

    Τρόπος χρήσης / Παραδείγματα

    1. Συμπληρώστε URL, τίτλο, περιγραφή και URL εικόνας.
    2. Επιλέξτε og:type και (προαιρετικά) ρυθμίσεις Twitter Card.
    3. Αντιγράψτε τις ετικέτες που δημιουργήθηκαν και επικολλήστε τις στο <head>.
    Γρήγορο παράδειγμα

    Εισαγάγετε URL + τίτλο + εικόνα, και μετά αντιγράψτε το συνιστώμενο σύνολο.

    Σημειώσεις & συμβουλές

    Τι είναι το OGP;

    Το OGP (Open Graph Protocol) επιτρέπει στις κοινωνικές πλατφόρμες να διαβάζουν τον τίτλο, την περιγραφή και την εικόνα της σελίδας σας.

    Ρυθμίζοντας τα og:title/og:description/og:image, μπορείτε να ελέγχετε πώς εμφανίζονται οι κοινόχρηστοι σύνδεσμοι.

    Οι κάρτες Twitter (X) χρησιμοποιούν παρόμοια μεταδεδομένα και μπορούν να βασιστούν στις ετικέτες OG.

    Οδηγίες μεγέθους εικόνας (για σταθεροποίηση προεπισκοπήσεων)

    Οδηγίες Meta (Facebook)
    • • Ελάχιστο 200×200.
    • • Για καλύτερη εμφάνιση, 1200×630 ή μεγαλύτερο. αναφέρονται τουλάχιστον 600×315. (Facebook Developers)
    • • Μια αναλογία κοντά στο 1.91:1 βοηθά στην αποφυγή περικοπής (κατά προσέγγιση).
    • • Οι οδηγίες για το μέγεθος αρχείου περιλαμβάνουν 8MB ή λιγότερο.
    Οδηγίες κάρτας X (Twitter)
    • • Το summary_large_image υποστηρίζει αναλογία 2:1. ελάχιστο 300×157, μέγιστο 4096×4096. (X Developer)
    • • Συνιστάται μέγεθος αρχείου κάτω από 5MB και κοινές μορφές (JPG/PNG/WEBP/GIF).

    Όταν οι αλλαγές δεν εμφανίζονται (cache & εκ νέου λήψη)

    • • Οι ανιχνευτές SNS αποθηκεύουν τα δεδομένα OG στην κρυφή μνήμη. Χρησιμοποιήστε τα εργαλεία εντοπισμού σφαλμάτων κάθε πλατφόρμας για εκ νέου λήψη. (Facebook Developers)
    • • Εάν αντικαταστήσατε την εικόνα αλλά δεν ενημερώνεται, το ίδιο το URL της εικόνας μπορεί να είναι στην κρυφή μνήμη. αλλάξτε το όνομα αρχείου ή προσθέστε ένα query string.
    • • Η προσθήκη og:image:width/height μπορεί να βελτιώσει τη σταθερότητα της απόδοσης. (Facebook Developers)

    Εργαλεία για επαλήθευση

    FAQ

    Να συμπεριλάβω και ετικέτες Twitter Card;

    Ναι. Το twitter:card και οι σχετικές ετικέτες μπορούν να δημιουργηθούν μαζί. Το X μπορεί να βασιστεί στις ετικέτες OG, οπότε οι ελάχιστες ρυθμίσεις εξακολουθούν να λειτουργούν.

    Προτεινόμενο μέγεθος εικόνας;

    Ως οδηγό, η Meta προτείνει 1200×630 ή μεγαλύτερο (ελάχιστο 600×315) και αναλογία κοντά στο 1.91:1. Το summary_large_image του X έχει διαφορετική αναλογία και ελάχιστα όρια. Επιλέξτε την πλατφόρμα-στόχο.

    Η προεπισκόπηση δεν ενημερώνεται

    Τις περισσότερες φορές φταίει η κρυφή μνήμη (cache). Κάντε εκ νέου λήψη μέσω των debuggers/inspectors και εάν αλλάξατε την εικόνα, χρησιμοποιήστε ένα νέο URL εικόνας.