Open Graph Protocol

Το Facebook ως γνωστόν είναι ο κυρίαρχος στα κοινωνικά δίκτυα και μια πολύ καλή πηγή για να αντλήσετε κίνηση για την ιστοσελίδα σας. Το Facebook μέσω του Open Graph protocol μας δίνει την δυνατότητα να επιλέγουμε εμείς πως θα εμφανίζονται οι διάφορες σελίδες μας σε αυτό όταν κάποιος χρήστης μοιράζεται με τους φίλους του κάποια από αυτές ή απλά πατάει το κουμπί Like.

Για να ορίσουμε εμείς πως θα εμφανίζονται οι σελίδες του site μας όταν διαμοιράζονται στο Facebook πρέπει απλά να χρησιμοποιήσουμε τα meta tags του Open Graph protocol. Μερικά από τα meta-tags είναι εμφανή σε όλους μας και επηρεάζουν τον τρόπο που διαμοιράζονται οι σελίδες μας στο Facebook και μερικά από αυτά δεν είναι εμφανή αλλά είναι απαραίτητα για τη σωστή αλληλεπίδραση της ιστοσελίδας μας με το Facebook.

Ενεργοποίηση του Open Graph Protocol

Για να ενεργοποιήσετε το Open Graph στην ιστοσελίδα σας ώστε να μπορούν να λειτουργούν σωστά τα meta tags που προσθέτετε θα πρέπει να προσθέσετε στο html:

xmlns:og="http://ogp.me/ns#"
xmlns:fb="http://www.facebook.com/2008/fbml"

 Παράδειγμα:

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml" dir="ltr" lang="el">

Έτσι είστε έτοιμοι να χρησιμοποιήσετε τα meta tags του Open Graph Protocol.

Ορίστε τα τέσσερα βασικά meta tags του Open Graph

Τα τέσσερα απαραίτητα meta tags του Open Graph που πρέπει να ορίσετε είναι τα og:title, og:type, og:image, og:url.

og:title : Με αυτό το meta tag όπως μπορούμε να συμπεράνουμε και από το όνομά του ορίζουμε τον τίτλο της σελίδας μας (σαν το title html tag).

Παράδειγμα:

<meta property="og:title" content="Δωρεάν προώθηση μέσω Facebook" />

og:type : Με το og:type ορίζουμε το είδος της σελίδας. Για την αρχική σελίδα πρέπει να ορίσουμε website ή blog και για τα κείμενα ή φωτογραφίες / βίντεο της σελίδας μας article.

Παράδειγμα:

<meta property="og:type" content="website" />
<meta property="og:type" content="article" />

og:url : Με το og:url ορίζουμε το url της συγκεκριμένης σελίδας.

Παράδειγμα:

<meta property="og:url" content="https://moserlx.com/2011/09/prosfora-proothisi-facebook-811.html" />

og:image : Με το og:image ορίζουμε το εικονίδιο που θέλουμε να εμφανίζεται όταν κάποιος μοιράζει την σελίδα μας στα κοινωνικά δίκτυα.

Παράδειγμα:

<meta property="og:image" content="https://moserlx.com/wp-content/uploads/2011/08/facebook-business-thumb.jpg" />

Προτινόμενα meta tags που θα πρέπει να συμπεριλάβετε

Εκτός από τα απαραίτητα meta tags του Open Graph Protocol καλό είναι να χρησιμοποιείτε και τα εξής (προαιρετικά μεν αλλά κατά την γνώμη μου δε θα πρέπει να λείπουν από καμία σελίδα του site σας):

fb:admins ή/και fb:app_id : Τα συγκεκριμένα meta tags σαν δίνουν δικαιώματα διαχείρησης στο Facebook συμπληρώστε με το id του λογαριασμού σας ή της εφαρμογής που διαχειρίζεται το site (δεν είναι απαραίτητο να τα συμπεριλάβετε και τα δύο).

Παράδειγμα:

<meta property="fb:admins" content="100001300023003" />
<meta property="fb:admins" content="141292505947165" />

og:site_name : Με το og:site_name καθορίζετε το σύντομο όνομα της ιστοσελίδας σας.

Παράδειγμα:

<meta property="og:site_name" content="MoserLX" />

og: description : Με το og:description δίνουμε μια σύντομη περιγραφή για την συγκεκριμένη σελίδα.

Παράδειγμα:

<meta property="og:description" content="Για το μήνα Σεπτέμβριο προσφέρουμε σε 20 τυχερούς, ΕΝΤΕΛΩΣ ΔΩΡΕΑΝ... 20 πακέτα προώθησης Facebook Business. Κερδίστε μια επαγγελματική σελίδα της επιχείρησης σας στο Facebook και προσελκύστε περισσότερους φίλους." />

Σε περίπτωση που χρησιμοποιείτε το κουμπί Like στις σελίδες σας τα og:description και og:site_name είναι απαραίτητα.

Αυτά λοιπόν με το Open Graph Protocol, με μερικές απλές αλλαγές στον κώδικα της σελίδας σας μπορείτε να ορίζετε εσείς (μέσω των meta tags του Open Graph) πως θα διαμοιράζονται στα κοινωνικά δίκτυα και κυρίως στο Facebook και στο Google Plus.

Αυτά δεν είναι τα μόνα meta tags του Open Graph, για να δείτε τον πλήρη οδηγό αρκεί να επισκευτείτε την σελίδα του Open Graph Protocol στο Facebook.

Για απορίες ή προβλήματα στη χρήση των Facebook meta tags περιμένω σχόλια!

close button
slider-img