Open Graph Meta Tags: Όλα Όσα Πρέπει να Γνωρίζεις

Μη μένεις μόνο στο πάτημα ενός κουμπιού για sharing του περιεχομένου. Μάθε όλη τη διεργασία πίσω από το visual κομμάτι των κοινοποιήσεων που βλέπεις στα social media!

open-graph-meta-protocol-compressorΤο σύγχρονο Digital Marketing έχει ως καλύτερο σύμμαχο το περιεχόμενο. Σίγουρα, “Content is King”, αλλά ένας βασιλιάς είναι αδύναμος χωρίς το λαό του, τους ακόλουθούς του.

Food for thought λοιπόν, ποιο είναι το πρώτο πράγμα που σου έρχεται στο μυαλό όταν θέλεις να προσεγγίσεις ένα ευρύτερο κοινό με το νέο super-post σου;

Η αναδημοσίευση στα Social Media φυσικά!

Δεν πρέπει να μείνεις ωστόσο στο πάτημα ενός κουμπιού που χρειάζεται για να δημοσιεύσεις κάτι στα social media, θα πρέπει να γνωρίζεις και όλη τη διεργασία που γίνεται πίσω από όλο αυτό.

Τα τεράστια ακροατήρια του Facebook και του Twitter αποτελούν δύο από τις καλύτερες sharing πλατφόρμες για το υλικό σου, αλλά δεν αρκεί μόνο αυτό.

Πρέπει να γνωρίζεις επίσης πως θα βελτιστοποιήσεις στο μέγιστο, τον τρόπο με τον οποίο θα προβληθεί το περιεχόμενο που θα μοιραστείς.

Γιατί δημιουργήθηκε το Open Graph

To Facebook μας σύστησε το Open Graph το 2010. Στην ουσία, το O.G (εν συντομία) προωθεί τη σύνδεση μεταξύ του Facebook και άλλων ιστοσελίδων, επιτρέποντάς τους να γίνουν “rich graph objects”, αποκτώντας την ίδια λειτουργικότητα με άλλα αντικείμενα (objects) του Facebook.

Με απλά λόγια, το Open Graph έχει να κάνει σχετικά με το πώς η πληροφορία ταξιδεύει από ένα third-party website στο Facebook, όταν για παράδειγμα κοινοποιείς μια σελίδα ή ένα άρθρο.

Για να καταστεί αυτό δυνατό, οι πληροφορίες  αποστέλλονται μέσω O.G meta-tags (ετικετών), που βρίσκονται στο τμήμα <head> του κώδικα της ιστοσελίδας.

Κώδικας open graph στο head του κώδικα

Πλέον, σχεδόν όλες οι πλατφόρμες Social Media εκμεταλλεύονται τις ετικέτες κοινωνικής δικτύωσης (Social Meta Tags). Twitter, LinkedIn, Google Plus και άλλα, αναγνωρίζουν τα O.G Tags.

Το Twitter μάλιστα, έχει τα δικά του meta tags προκειμένου να εμφανίσει το rich card στο wall του, αλλά αν το Twitter bot δεν μπορεί να εντοπίσει κάποιες από αυτές τις ετικέτες, χρησιμοποιεί το O.G αντ’ αυτού.

Γιατί οι marketers πρέπει να γνωρίζουν για το Open Graph

Οι ιστότοποι κοινωνικής δικτύωσης είναι οι κύριες, κινητήριες δυνάμεις, που φέρνουν επισκεψιμότητα σε μια ιστοσελίδα.

Κατά συνέπεια, η ικανότητα για ένα marketer να αξιοποιεί τη δύναμη των Social Media Tags, είναι μια ζωτικής σημασίας ικανότητα.

Οι ετικέτες μπορούν να επηρεάσουν σε μεγάλο βαθμό το conversion rate και τον αριθμό των clicks.

Για παράδειγμα, έχεις κάνει share ποτέ ένα σύνδεσμο στο Facebook, μόνο για να διαπιστώσεις ότι η μικρογραφία έλειπε, ή υπήρχε μια εντελώς διαφορετική εικόνα απ’ ότι περίμενες;

Γνωρίζοντας περισσότερα για τις Open Graphs ετικέτες, θα καταφέρεις να αντιμετωπίσεις εύκολα αυτά τα προβλήματα.

Τα περισσότερα templates, για όποιο CMS και αν χρησιμοποιείς, είναι ήδη Open Graph optimized. Αν για κάποιο λόγο έχεις μείνει πίσω τεχνολογικά, και το site σου δεν χρησιμοποιεί Open Graph, ήρθε η ώρα να το κάνεις.

Τα Open Graph Tags δεν έχουν καμία επίπτωση στο On-Page SEO, αλλά επηρεάζουν θετικά τις κοινοποιήσεις σου στα Social Media. Αυτός είναι ένας παραπάνω από σημαντικός λόγος ώστε  μάθεις περισσότερα για το Open Graph.

Ας ρίξουμε μια ματιά στα πιο σημαντικά Meta Tags για το Facebook, και στο πώς μπορούμε να τα βελτιστοποιήσουμε για αναδημοσίευση περιεχομένου.

OG Titleog:title

Όπως σωστά μπορείτε να μαντέψεις, η ετικέτα αυτή ορίζει τον τίτλο του περιεχομένου σου.

Εξυπηρετεί ένα παρόμοιο σκοπό με την κλασική meta title ετικέτα του κώδικά σου.

Στην πραγματικότητα, αν το Facebook δεν ανιχνεύσει την og:title ετικέτα, θα χρησιμοποιήσει το meta title.

Λάβε υπόψη ότι το κείμενο που εμφανίζεται στο news feed, είναι με έντονα γράμματα (bold) και τραβάει την προσοχή με επιτυχία. Πρέπει να είναι ελκυστικό, όπως και ο τίτλος του post.

Δεν υπάρχει όριο στον αριθμό των χαρακτήρων, αλλά είναι καλό να διατηρηθεί ανάμεσα στους 60 – 90 χαρακτήρες. Αν ο τίτλος είναι μεγαλύτερος από 100 χαρακτήρες, το Facebook θα τον περικόψει στους 88.

Παράδειγμα:

<meta property=”og:title” content=”Your title here” />

og:url

Η ετικέτα αυτή ρυθμίζει το canonical URL για την σελίδα ή το άρθρο που κοινοποιείς.

Αυτό σημαίνει ότι μπορείς να ορίσεις μια σελίδα που το σύνολο των κοινοποιήσεων θα ανακατευθύνει εκεί.

Είναι απολύτως χρήσιμο εάν τυχαίνει να έχεις περισσότερα από ένα URL για το ίδιο περιεχόμενο.

Σημαντική σημείωση: Η διεύθυνση URL που ορίζεις δεν εμφανίζεται στο news feed του Facebook, παρά μόνο το domain.

Παράδειγμα:

<meta property=”og:url” content=”http://www.yourdomain.com” />

og:type

Η ετικέτα αυτή ορίζει το είδος του αντικειμένου που μοιράζεσαι: blog post, video, image ή οτιδήποτε άλλο.

Η λίστα για να επιλέξεις είναι μεγάλη. Ακουλουθούν μερικά παραδείγματα:

Web Based:

  • website
  • article
  • blog

Entertainment:

  • book
  • game
  • movie
  • food

Place:

  • city
  • country

People:

  • actor
  • author
  • politician

Business:

  • company
  • hotel
  • restaurant

Μπορείς να δεις την πλήρη λίστα εδώ.

Αυτή η ετικέτα είναι σημαντική αν η σελίδα σου έχει ένα Like button και αντιπροσωπεύει ένα “real life” αντικείμενο, όπως ένα βιβλίο ή μια ταινία.

Καθορίζει αν το περιεχόμενο σου θα εμφανιστεί στο τμήμα “Ενδιαφέροντα Χρήστη” ενός χρήστη, σε περίπτωση που έχει πατήσει “Like” σε αυτό που μοιραστήκατε.

Στις περισσότερες περιπτώσεις, θα χρησιμοποιήσεις το “website value” (το τι αφορά η σελίδα σου), δεδομένου ότι αυτό που κοινοποιείς ανακατευθύνει σε ένα website.

Στην πραγματικότητα, αν δεν καθορίσεις έναν τύπο, το Facebook θα το διαβάσει ως “website” από προεπιλογή.

Παράδειγμα:

<meta property=”og:type” content=”website” />

og:description

Αυτή η ετικέτα είναι παρόμοια με την ετικέτα meta-description στην γλώσσα HTML.

Εδώ είναι που περιγράφεις το περιεχόμενό σου, αλλά αντί να βλέπεις την περιγραφή όταν κάνεις μια αναζήτηση στην Google, εμφανίζεται κάτω από το Title Link στο Facebook.

Σε αντίθεση με μια κανονική description ετικέτα, η συγκεκριμένη δεν θα επηρεάσει το SEO της σελίδας σου.

Έτσι, δεν χρειάζεται να δαπανήσεις πολύτιμο χρόνο ψάχνοντας τις ιδανικές λέξεις-κλειδιά.

Ωστόσο, είναι μια καλή ιδέα να έχεις μια ελκυστική περιγραφή, διότι θέλεις να κερδίσεις clicks, και αυτή η ετικέτα θα αποδειχθεί πολύτιμος σύμμαχος.

Να τονίσουμε ότι δεν υπάρχει περιορισμός στον αριθμό των χαρακτήρων, αλλά το καλύτερο είναι να χρησιμοποιήσεις μέχρι 200.

Σε ορισμένες περιπτώσεις, το Facebook μπορεί να εμφανίσει μέχρι και 300 χαρακτήρες, αλλά δεν θα υποστηρίζαμε κάτι τέτοιο εάν ζητούσες την άποψη μας.

Παράδειγμα:

<meta property=”og:description” content=”Your entertaining and descriptive copy here, if your meta description is good, use it. ” />

og:image

Αυτή είναι ίσως η πιο ενδιαφέρουσα ετικέτα Open Graph για πολλούς digital marketers, διότι μια εικόνα βοηθάει να διακρίνει πάντα την ποιότητα του περιεχόμενου.

Έτσι θα διασφαλίσεις ότι μια συγκεκριμένη εικόνα θα εμφανίζεται όταν κοινοποιείς μια σελίδα ή ένα post. Μπορεί επίσης να αποδειχθεί “κλειδί” για το conversion rate και το CTR της δημοσίευσής σου.

Βεβαιώσου ότι έχεις ορίσει σωστά την ετικέτα og:image, διαφορετικά το Facebook θα δείξει κάτι τυχαίο, ίσως και ανεπιθύμητο σαν εικόνα, ή δεν θα εμφανίσει τίποτα (όπως στο παρακάτω παράδειγμα), και φυσικά δεν θέλεις κάτι τέτοιο.

OG ImageΕίναι πολύ σημαντικό να θυμάσαι επίσης ότι εάν το website σου είναι στατικό και δεν χρησιμοποιείς κάποιο είδος συστήματος διαχείρισης περιεχομένου (CMS) (πχ Joomla,Wordpress,Weebly), θα πρέπει να αλλάξεις την og:image ετικέτα manually, για κάθε μια από τις σελίδες σου.

Εάν το site σου ελέγχεται μέσω CMS και έχεις εγκαταστήσει το σχετικό plugin, οι og:image ετικέτες δημιουργούνται αυτόματα για κάθε σελίδα.

OG Image 2Εάν χρησιμοποιήσεις μια εικόνα μικρότερη από 400px x 209px, θα εμφανιστεί μια πολύ μικρότερη μικρογραφία, όχι τόσο εντυπωσιακή όσο μια full image scale.

Λάβε υπόψη ότι η εικόνα που θα χρησιμοποιήσεις ως Open Graph Image, μπορεί να είναι διαφορετική από αυτή που έχεις στη σελίδα σου.

Γιατί να μην εκμεταλλευτείς αυτή τη δυνατότητα για καλύτερη προβολή;

Για παράδειγμα, αν ο τίτλος σου είναι καλός, αλλά η φωτογραφία που χρησιμοποιείς όχι και τόσο συναρπαστική, μπορείς να χρησιμοποιήσεις μια εικόνα με μια ή 2 γραμμές παραπάνω (δες το παρακάτω παράδειγμα).

Ένα πράγμα που πρέπει να θυμάσαι, αν το κάνεις αυτό: βάλε το κείμενό σου, ή το πιο σημαντικό μέρος του στη μέση της εικόνας (align center). Αυτό έχει σημασία επειδή το Facebook περικόπτει τις πλευρές των εικόνων.

OG Image 3 Παράδειγμα: <meta property=”og:image” content=”http://www.yourdomain.com/image-name.jpg” />

Advanced Open Graph Tags

Οι παραπάνω Open Graph είναι αυτές που πραγματικά πρέπει να γνωρίζεις (όχι τόσο η og:description, αλλά είναι χρήσιμη).

Υπάρχουν και άλλες, πιο advanced ετικέτες, που μπορείς να χρησιμοποιήσεις για να εμβαθύνεις περισσότερο στο Open Graph.

og:locale:

Καθορίζει τη γλώσσα, American English είναι η προεπιλογή.

og:site_name:

Χρησιμοποιείται εάν η σελίδα ή το αντικείμενο είναι μέρος ενός μεγαλύτερου δικτύου.

og:audio, og:video:

Χρησιμοποιείται για να προσθέσετε αρχεία ήχου ή βίντεο στο αντικείμενο σας.

fb:app_id:

Χρησιμοποιείται για να συνδέσετε στο Facebook μια εφαρμογή με το αντικείμενο (πχ Facebook Comments).

Έλεγχος Open Graph Tags

Για να κάνει τη ζωή μας πιο εύκολη, το Facebook έχει δημιουργήσει ένα εργαλείο που ονομάζεται Open Graph Object Debugger. Έχει δύο πολύ χρήσιμες λειτουργίες.

Πρώτον, όταν πληκτρολογείς το link που θέλεις να ελέγξεις, επιστρέφει τυχόν λάθη και προτάσεις για τις O.G ετικέτες, εάν υπάρχουν. Μπορείς επίσης να ελέγξεις την og:image εικόνα, το πως φαίνεται, την περιγραφή και ούτω καθεξής.

Δεύτερον, καθαρίζει τη μνήμη cache του Facebook.

Φαντάσου αυτό: δημοσιεύεις ένα σύνδεσμο στο Facebook, και βλέπεις ότι υπάρχει λάθος στη μικρογραφία της εικόνας. Μπορείς να πας πίσω στο site σου, να ρυθμίσετε τις O.G ετικέτες και να το δημοσιεύσεις πάλι στο Facebook.

Μάλλον, τίποτα δεν θα συμβεί, και η μικρογραφία θα παραμείνει η ίδια. Αυτό γίνεται λόγω της μνήμης cache.

Το Facebook O.G Debugger θα ανανεώσει την cache μνήμη στους συνδέσμους σου μετά τις προσαρμογές, οπότε μη ξεχνάς να το χρησιμοποιείς κάθε φορά.

facebook debugger

Εφαρμογή Open Graph Tags

Πως θα ορίσεις τις ετικέτες O.G; Βασικά ανήκουν στο <head> μέρος του HTML κώδικα του site σου.

Αν δεν διαχειρίζεσαι εσύ τον κώδικα, θα πρέπει να απευθυνθείς στον web developer σου για βοήθεια. Μπορείς παρ’ όλα αυτά να ετοιμάσεις το δικό σου πακέτο O.G ετικετών, σύμφωνα με όσα γράψαμε παραπάνω για να εξοικονομήσεις πολύτιμο χρόνο.

Εάν χρησιμοποιείς WordPress, εγκατέστησε ένα από τα Plugins που υλοποιούν τον κώδικα για εσένα, όπως για παράδειγμα το Yoast Seo Plugin, ή κάποιο επίσημο Facebook Plugin για να επιλέξεις.

Παραθέτουμε μερικά Plugins για περισσότερες CMS πλατφόρμες:

Twitter Cards

Ομοίως με τα Open Graph Tags του Facebook, έτσι και τα Twitter Cards, σου επιτρέπουν να ξεχωρίσεις μέσα από το πλήθος των tweets.

Εμφανίζουν κάποιο επιπλέον περιεχόμενο που πρόκειται να παραχθεί από το tweet σου.

Twitter rich card

Έτσι, παρέχεις μια εύχρηστη σύνοψη της κοινοποιημένης σελίδας, το Twitter Card.

Παραδόξως, είναι πολλά τα sites που δεν χρησιμοποιούν αυτό το πλεονέκτημα, διότι αποτελεί μια μεγάλη ευκαιρία για να κάνεις το tweet σου να ξεχωρίσει στο συνωστισμένο twitter’s feeds.

Ο καλύτερος τρόπος για να εφαρμόσεις τις ετικέτες είναι πάλι, η εγκατάσταση κάποιου plugin ανάλογα με την πλατφόρμα που χρησιμοποιείς. Αν πάλι δεν έχεις πρόσβαση στο site σου, ή αυτό είναι custom made, τότε θα πρέπει να απευθυνθείς στον web developer σου.

twitter:card

Αυτή η απαιτούμενη ετικέτα λειτουργεί με παρόμοιο τρόπο όπως η og:type. Περιγράφει τον τύπο του περιεχομένου που μοιράζεσαι. Υπάρχουν 7 επιλογές για να επιλέξεις:

  • View summary
  • Photo
  • Video
  • Product
  • App
  • Gallery
  • Large version

Ανάλογα με τον τύπο του περιεχομένου που θα επιλέξεις, το link στο κάτω μέρος του tweet σου θα αλλάξει. Μπορείς να πάρεις: View summary (προβολή περίληψης) , View photo (για φωτό) και ούτω καθεξής. Εάν η ετικέτα δεν έχει οριστεί, το Twitter διαβάζει το link ως “Summary” από προεπιλογή.

Παράδειγμα:

<meta name=”twitter:card” content=”summary” />

twitter:title

Η ετικέτα αυτή κάνει ουσιαστικά το ίδιο πράγμα με την og:title tag. Μπορείς να καθορίσεις τον τίτλο για το άρθρο σου, που θα εμφανίζεται με έντονους χαρακτήρες.

Είναι έξυπνο να αποφευχθεί η επανάληψη του ίδιου κειμένου που έχεις στο tweet σου. Αξιοποίησε στο έπακρο το χώρο που σου παρέχεται και άφησε τα 2 κομμάτια του tweet (τίτλος post, και twitter:title) να αλληλοσυμπληρώνονται μεταξύ τους για να ενισχύσουν το μήνυμά σου. Χρησιμοποίησε έως και 70 χαρακτήρες

Παράδειγμα:

<meta name=”twitter:title” content=”Your title here” />

twitter:description

Χρησιμοποίησε αυτήν την ετικέτα για να γράψεις ένα περιγραφικό κείμενο που οδηγεί στη σελίδα που κοινοποιείς. Όπως με τις Open Graph ετικέτες, δεν επικεντρώνεσαι σε λέξεις κλειδιά, καθώς δεν επηρεάζουν το SEO.

Δημιούργησε ένα σύντομο περιγραφικό κείμενο που συμπληρώνει όμορφα το tweet σου και τον τίτλο. Όριο οι 200 χαρακτήρες.

Παράδειγμα:

<meta name=”twitter:description” content=”Your 200 character description here” />

twitter:url

Η ετικέτα αυτή θέτει το canonical URL για το περιεχόμενο που μοιράζεσαι. (Για περισσότερες πληροφορίες δες την περιγραφή της αντίστοιχης open graph ετικέτας.)

Παράδειγμα:

<meta name=”twitter:url” content=”http://www.yourdomain.com” />

twitter:image

Καλά μάντεψες. Η ετικέτα αυτή ορίζει την εικόνα που συνοδεύει το tweet σου.

Το Twitter επιτρέπει 2 επιλογές, μια κάρτα με μια μικρή ή με μια μεγάλη εικόνα. Εσύ αποφασίζεις ποια θέλεις να εμφανίζεται.

Αν επιλέξεις τη μεγάλη εικόνα, βεβαιώσου ότι έχει ανάλυση τουλάχιστον 280x150px και ότι το μέγεθος του αρχείου είναι κάτω από 1MB.

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

Παράδειγμα:

<meta name=”twitter:image” content=”http://www.yourdomain./image-name.jpg” />

Αίτηση Έγκρισης από το Twitter (Request Approval)

Να θυμάσαι ότι, πριν καταφέρεις να επωφεληθείς από τα Twitter Cards, πρέπει να ζητήσεις έγκριση για τη σελίδα σου από το Twitter.

Ευτυχώς, αυτό δεν παίρνει πολύ χρόνο, και μπορεί να γίνει εύκολα με τη χρήση Card Validator του Twitter.

Μόλις πάρεις την έγκριση, η Card Validator εξυπηρετεί τον ίδιο σκοπό με το Facebook O.G Debugger, που σου επιτρέπει να ελέγχεις τις κοινοποιήσεις και τα links σου πριν τα δημοσιεύσεις.

Twitter Card Plugins

Ομοίως και με το Facebook, υπάρχει πληθώρα plugins διαθέσιμα για να σε βοηθήσουν με τα Twitter Cards.

Παραθέτουμε μερικά Plugins για  CMS πλατφόρμες:

Κλείνοντας

Ο τελικός κώδικας για το Facebook και το Twitter θα μοιάζει περίπου με το παρακάτω:

open graph final code

Είναι εκπληκτικό το πόσο λίγοι άνθρωποι βελτιστοποιούν αυτές τις ετικέτες.

Σαφέστατα αξίζει τον κόπο να το κάνεις γιατί σε βοηθάει να ξεχωρίζεις έναντι του ανταγωνισμού, και μπορείς να αντλήσεις περισσότερα click, views ή και conversions.

Όλα αυτά οδηγούν εν τέλει στο κέρδος. Οι λειτουργίες που περιγράφονται εδώ δεν καλύπτουν όλα όσα μπορείς να κάνετε με τα Open Graphs.

Μπορείς να δείτε ακόμα πιο προχωρημένες λύσεις στις επίσημες ιστοσελίδες του Facebook και του Twitter.

Ο αρθρογράφος: Ο Jacek Blaut είναι έμπειρος growth hacker και inbound marketer στην Growth Republic Ltd, όπου βοηθάει online επιχειρήσεις με τις στρατηγικές ψηφιακού marketing. Έχει επίσης και ένα δικό του growth hacking blog.

Grow Digital Team
Το Grow Digital αποτελεί ένα ενημερωτικό portal βασισμένο στο σύγχρονο Digital Marketing και στις υποκατηγορίες του. Στόχος μας η σαφής, άμεση και έγκυρη πληροφόρηση του Ελληνικού σχετικά με έναν από τους ταχύτερα αναπτυσσόμενους κλάδους στην Ελλάδα.