Περιεχόμενο
- Ετικέτες
- Άνοιγμα γραφήματος Facebook
- Κάρτες Twitter
- Μετα-ετικέτες κοινωνικής δικτύωσης για το Google+ και το Pinterest
- Κοινωνικές μετα-ετικέτες στο WordPress
- Εργαλεία εντοπισμού σφαλμάτων και επικύρωσης
Όταν έρχεστε με μια φοβερή νέα ανάρτηση ιστολογίου, το πρώτο πράγμα που έρχεται στο μυαλό σας για να προσεγγίσετε ένα ευρύτερο κοινό είναι η κοινή χρήση στα κοινωνικά μέσα. Προφανώς, δεν υπάρχει καλύτερη πλατφόρμα από τα μέσα κοινωνικής δικτύωσης για να μοιράζεστε το περιεχόμενό σας, να στοχεύετε τους τοπικούς πελάτες σας και να οδηγείτε μαζική επισκεψιμότητα στον ιστότοπό σας, αλλά γνωρίζετε πώς να βελτιστοποιήσετε το περιεχόμενο ιστού σας για κοινή χρήση κοινωνικών δικτύων;
Συνήθως, οι ιστότοποι κοινωνικής δικτύωσης είναι πραγματικά έξυπνοι να τραβήξουν το σωστό περιεχόμενο για δημοσίευση. Αλλά μερικές φορές το πρόβλημα παρουσιάζεται όταν το περιεχόμενο που κοινοποιείται από τους θαυμαστές σας δεν εμφανίζεται σωστά στις σελίδες κοινωνικών λογαριασμών. Ευτυχώς, υπάρχει ένας τρόπος με τον οποίο μπορούμε να ορίσουμε ακριβώς πώς πρέπει να εμφανίζονται τίτλοι, εικόνες, περιγραφή και πολλά άλλα στις κοινωνικές ροές των οπαδών μας.
Ετικέτες
Σχεδόν όλοι γνωρίζουμε για τις ετικέτες τίτλου και τις ετικέτες μετα-περιγραφής, αλλά πολλοί από εμάς δεν γνωρίζουμε για πολλές άλλες μετα-ετικέτες που διαβάζουν επίσης ιστότοποι κοινωνικής δικτύωσης όπως το Facebook, το Twitter, το Google+ και το Pinterest. Ο λόγος για τον οποίο αυτοί οι ιστότοποι έχουν αρχίσει να χρησιμοποιούν ειδικά μεταδεδομένα είναι να δώσουν στο κοινό καλύτερη ορατότητα κάνοντας τη διαδικασία κοινής χρήσης περιεχομένου άψογη και ευκολότερη.
Καθώς κάθε ιστότοπος κοινωνικού δικτύου έχει τη δική του ετικέτα κοινωνικών μέσων, γνωρίζοντας ακριβώς ποια να συμπεριληφθεί αποδείχθηκε πολύ συγκεχυμένη εργασία. Για παράδειγμα, το Google+ και το Pinterest προτιμούν να χρησιμοποιούν ετικέτες σχήματος, αλλά αναγνωρίζουν επίσης ετικέτες Open Graph Protocol, οι οποίες προτιμούνται από το Facebook και το LinkedIn. Από την άλλη πλευρά, το Twitter έχει ορίσει τις δικές του ετικέτες που ονομάζονται κάρτες Twitter.
Ας δούμε πώς μπορείτε να αξιοποιήσετε όλες αυτές τις μετα-ετικέτες κοινωνικής δικτύωσης.
Άνοιγμα γραφήματος Facebook
Το Open Graph εισήχθη από το Facebook το 2010 για να προωθήσει την ενοποίηση μεταξύ Facebook και άλλων ιστότοπων. Επιτρέπει σε κάθε ιστοσελίδα να γίνει πλούσιο αντικείμενο γραφήματος, το οποίο έχει την ίδια λειτουργικότητα με οποιοδήποτε άλλο αντικείμενο Facebook. Ακολουθεί ένα παράδειγμα:
Με απλά λόγια, το Open Graph είναι ένας τρόπος ελέγχου του τρόπου με τον οποίο οι πληροφορίες θα ταξιδεύουν από μια ιστοσελίδα στο Facebook. Για να αξιοποιήσετε τις ετικέτες Open Graph, πρέπει να τις τοποθετήσετε μεταξύ της κεφαλής> / head> της ιστοσελίδας σας.
Ακολουθούν οι πιο συχνά χρησιμοποιούμενες ετικέτες Open Graph:
og: τίτλος: Αυτός είναι ο τίτλος του περιεχομένου σας που το Facebook συμπληρώνει στο απόσπασμα. Είναι παρόμοιο με την ετικέτα τίτλου html που χρησιμοποιούν οι μηχανές αναζήτησης. Αν και το Facebook δεν έχει όριο στον αριθμό των χαρακτήρων στον τίτλο, αλλά είναι καλύτερο να διατηρήσετε τον αριθμό των χαρακτήρων μεταξύ 60 και 90.
Παράδειγμα:
meta property = "og: title" content = "Social Meta Tags" />
og: περιγραφή: Εδώ περιγράφετε το περιεχόμενο του περιεχομένου σας. Διατηρήστε έως και 300 χαρακτήρες.
Παράδειγμα:
meta property = "og: description" content = "Περιγραφή εδώ" />
og: url: Σε αυτήν την ετικέτα, τοποθετείται η διεύθυνση URL της κοινόχρηστης σελίδας. Αυτή η ετικέτα είναι εξαιρετικά χρήσιμη αν έχετε πολλές διευθύνσεις URL για το ίδιο περιεχόμενο, καθώς διασφαλίζει ότι όλες οι κοινοποιήσεις σας θα μεταβούν στην καθορισμένη σελίδα σας.
Παράδειγμα:
meta property = "og: url" content = "http://www.example.com" />
ουγκ:όνομα ιστοσελίδας: Αυτή η ετικέτα αναφέρει στο Facebook το όνομα του ιστότοπού σας. Δεν χρειάζεται να συμπεριλάβετε αυτήν την ετικέτα, αλλά μπορείτε να τη χρησιμοποιήσετε εάν το αντικείμενο που μοιράζεστε είναι μέρος ενός μεγαλύτερου ιστότοπου.
Παράδειγμα:
meta property = "og: site_name" content = "Το όνομα του ιστότοπού σας" />
og: εικόνα: Αυτή η ετικέτα σάς επιτρέπει να καθορίσετε την απόλυτη διαδρομή της εικόνας που θα εμφανίζεται στο Facebook στο πλούσιο απόσπασμα. Έχει ορισμένες προαιρετικές δομημένες ιδιότητες:
- og: εικόνα: url: Ίδιο με το og: εικόνα.
- og: εικόνα: safe_url: Σας επιτρέπει να χρησιμοποιήσετε μια εναλλακτική διαδρομή για την εικόνα, εάν η ιστοσελίδα απαιτεί HTTPS.
- og: εικόνα: ύψος: Ύψος της εικόνας.
- og: εικόνα: πλάτος: Πλάτος της εικόνας.
- og: εικόνα: τύπος: Ένας τύπος MIME για εικόνα.
Παράδειγμα:
meta property = "og: image" content = "http://example.com/ogp.webp" /> meta property = "og: image: safe_url" content = "https://secure.example.com/ogp. jpg "/> meta property =" og: image: type "content =" image / jpeg "/> meta property =" og: image: width "content =" 500 "/> μετα-ιδιότητα =" og: image: height " περιεχόμενο = "400" />
og: τύπος: Αυτή η ιδιότητα σάς επιτρέπει να καθορίσετε τον τύπο του περιεχομένου που μοιράζεστε. Είναι ανάρτηση ιστολογίου, εικόνα, βίντεο;
Παράδειγμα:
μετα-ιδιότητα = "og: type" content = "article" />
Ο τελικός κώδικας για το Facebook θα έχει την εξής μορφή:
meta property = "og: title" content = "Social Meta Tags" /> meta property = "og: description" content = "Περιγραφή Here" /> meta property = "og: url" content = "http: // www. example.com "/> μετα-ιδιοκτησία =" og: site_name "content =" Το όνομα του ιστότοπού σας "/> μετα-ιδιοκτησία =" og: image "content =" http://example.com/ogp.webp "/> μετα-ιδιοκτησία = "og: image: safe_url" content = "https://secure.example.com/ogp.webp" /> meta property = "og: image: type" content = "image / jpeg" /> μετα-ιδιότητα = " og: image: width "content =" 500 "/> meta property =" og: image: height "content =" 400 "/> μετα-ιδιότητα =" og: type "content =" article "/>
Όπως αναφέραμε νωρίτερα, το LinkedIn υποστηρίζει επίσης ετικέτες Open Graph για να ελέγχει τον τρόπο εμφάνισης της ιστοσελίδας σας όταν γίνεται κοινή χρήση. Έτσι, μόλις εφαρμόσετε τις ετικέτες Open Graph στον ιστότοπό σας, θα λειτουργήσει επίσης για το LinkedIn.
Κάρτες Twitter
Παρόμοια με τις ετικέτες Open Graph του Facebook, οι κάρτες Twitter σάς δίνουν τη δυνατότητα να επισυνάψετε εμπειρίες πολυμέσων σε Tweets που συνδέονται με το περιεχόμενό σας. Επί του παρόντος, το Twitter προσφέρει εννέα διαφορετικούς τύπους καρτών που μπορούν να επισυναφθούν σε tweets.
- Σύνοψη κάρτας: Προεπιλεγμένη κάρτα που περιλαμβάνει τίτλο, περιγραφή, μικρογραφία και απόδοση λογαριασμού Twitter.
- Σύνοψη κάρτας με μεγάλη εικόνα: Είναι παρόμοιο με την προεπιλεγμένη κάρτα σύνοψης, εκτός από το ότι σας επιτρέπει να εμφανίσετε μια εικόνα με επιπλέον λεπτομέρειες και απόδοση.
- Κάρτα συλλογής: Μια κάρτα με ένα άλμπουμ τεσσάρων φωτογραφιών.
- Κάρτα φωτογραφίας: Μια κάρτα με φωτογραφία μεγέθους Tweet.
- Κάρτα παίκτη: Μια κάρτα για την παροχή ήχου, βίντεο ή οποιουδήποτε άλλου τύπου μέσων.
- Κάρτα εφαρμογής: Κάρτα με εφαρμογή για κινητά με δυνατότητα άμεσης λήψης.
- Κάρτα προϊόντος: Μια κάρτα για να αναδείξετε το προϊόν.
- Κάρτα παραγωγής μολύβδου: Μια κάρτα για οδήγηση οδηγών για το προϊόν / την υπηρεσία σας.
- Κάρτα ιστότοπου: Μια κάρτα με τον ιστότοπό σας για την αύξηση της επισκεψιμότητας μέσω κλικ.
Όλες αυτές οι κάρτες μπορούν να επεκταθούν με Εγκαταστάσεις εφαρμογών και Deep-Linking.
Σημείωση: Τόσο η παραγωγή μολύβδου όσο και η κάρτα ιστοτόπου είναι διαθέσιμες μέσω του πίνακα ελέγχου διαφημίσεων Twitter.
Εδώ είναι το παράδειγμα:
Όπως οι ετικέτες Open Graph, οι ετικέτες της κάρτας Twitter πραγματοποιούνται επίσης στην ενότητα head / / head> του κώδικα του ιστότοπού σας. Οι ετικέτες καρτών Twitter που χρησιμοποιούνται πιο συχνά είναι:
twitter: κάρτα: Αυτή η ετικέτα, η οποία μοιάζει πολύ με το og: type, σας επιτρέπει να περιγράψετε τον τύπο του περιεχομένου που θέλετε να μοιραστείτε. Μπορείτε να επιλέξετε από τους εννέα διαφορετικούς τύπους καρτών που περιγράφονται παραπάνω και ο προεπιλεγμένος τύπος κάρτας είναι "Περίληψη".
Παράδειγμα:
meta name = "twitter: card" content = "Περίληψη">
twitter: ιστότοπος: Το όνομα χρήστη Twitter του ιστότοπου, συμπεριλαμβανομένου του «@».
meta name = "twitter: site" content = "@ SiteName">
twitter: δημιουργός: Το όνομα χρήστη Twitter του δημιουργού περιεχομένου με το «@».
Παράδειγμα:
meta name = "twitter: creator" content = "@ AuthorHandle">
twitter: τίτλος: Αυτή η ετικέτα κάνει το ίδιο με το og: title. Πρέπει να καθορίσετε τον τίτλο για το περιεχόμενό σας που θα εμφανίζεται στην κάρτα. Ο τίτλος πρέπει να είναι κάτω από 70 χαρακτήρες.
Παράδειγμα:
meta name = "twitter: title" content = "Τίτλος άρθρου">
twitter: περιγραφή: Εδώ πηγαίνει η περιγραφή του άρθρου σας. Δεν πρέπει να υπερβαίνει τους 200 χαρακτήρες.
Παράδειγμα:
meta name = "twitter: description" content = "Περιγραφή σελίδας">
twitter: εικόνα: src: Αυτή η ετικέτα σάς επιτρέπει να καθορίσετε τη διεύθυνση URL της εικόνας ώστε να αντιπροσωπεύει καλύτερα το περιεχόμενό σας. Η εικόνα δεν πρέπει να είναι μεγαλύτερη από 1MB σε μέγεθος.
Παράδειγμα:
meta name = "twitter: image: src" content = "URL εικόνας">
Εδώ είναι ο τελικός κωδικός για το Twitter:
meta name = "twitter: card" content = "Summary"> meta name = "twitter: site" content = "@ SiteName"> meta name = "twitter: creator" content = "@ AuthorHandle"> μετα-όνομα = "twitter: τίτλος "content =" Article Article "> meta name =" twitter: description "content =" Περιγραφή σελίδας "> όνομα meta =" twitter: image: src "content =" URL εικόνας ">
Μετα-ετικέτες κοινωνικής δικτύωσης για το Google+ και το Pinterest
Αν και τόσο το Google+ όσο και το Pinterest προσφέρουν υποστήριξη για αναγνώριση ετικετών Open Graph Protocol, αλλά προτιμούν τη χρήση σήμανσης μικροδεδομένων Schema.org για τη δημιουργία πλούσιων αποσπασμάτων. Η χρήση σήμανσης μικροδεδομένων δεν βοηθά μόνο τις μηχανές αναζήτησης να παρουσιάζουν το περιεχόμενό σας με χρήσιμο και σχετικό τρόπο, αλλά βελτιώνει και το SEO του ιστότοπού σας.
Ακολουθεί το παράδειγμα για το Google+:
Για να χρησιμοποιήσετε μικροδεδομένα με ένα άρθρο, πρέπει να χρησιμοποιήσετε τη δήλωση που δίνεται παρακάτω στην ετικέτα HTML.
html itemscope itemtype = "http://schema.org/Article">
Η άλλη σήμανση θα βρίσκεται στο κύριο σώμα της ιστοσελίδας σας. Σε περίπτωση που δεν μπορείτε να αποκτήσετε πρόσβαση σε αυτόν τον κωδικό στο CMS, μπορείτε να τον προσθέσετε μαζί με άλλες μετα-ετικέτες.
h1 itemprop = "name"> Η επικεφαλίδα κάτω από 200 χαρακτήρες / h1> img itemprop = "image" src = "Προτεινόμενη εικόνα URL" /> p itemprop = "περιγραφή"> Περιγραφή κάτω από 156 χαρακτήρες / p>
Μόλις σχολιάσετε μια ιστοσελίδα με μικροδεδομένα Schema.org, το Google + / Pinterest θα εμφανίσει τις ιδιότητες: όνομα, εικόνα και περιγραφή που υπάρχει σε οποιονδήποτε τύπο schema.org σε κοινωνικά αποσπάσματα.
Κοινωνικές μετα-ετικέτες στο WordPress
Στο WordPress, υπάρχουν δύο τρόποι προσθήκης κοινωνικών ετικετών στον ιστότοπό σας. Το ένα είναι χρησιμοποιώντας ένα plug-in - όπως το SEO από το Yoast, το SEO Ultimate κ.λπ. - και ένα άλλο μέσω του header.php.
Οι περισσότεροι άνθρωποι χρησιμοποιούν plug-in για την εφαρμογή Social Meta Tags στον ιστότοπό τους στο WordPress, αλλά υπάρχουν λίγοι που ξέρουν πώς να χρησιμοποιούν αυτές τις ετικέτες μέσω του header.php. Εδώ σας δείχνω πώς μπορείτε να ενσωματώσετε το Facebook Open Graph, τις κάρτες Twitter και την ετικέτα Google+ στο αρχείο header.php.
Για να το κάνετε αυτό, πρέπει να προσθέσετε κάποιο κωδικό στο αρχείο header.php. Ανοίξτε το αρχείο header.php και επικολλήστε τον ακόλουθο κώδικα πριν / κεφαλή> ετικέτα.
Για Facebook Open Graph:
μετα-ιδιότητα = "og: title" content = "? php the_title ();?>" /> μετα-ιδιότητα = "og: description" content = "? php the_excerpt ();?>" /> url "content ="? php the_permalink ();?> "/> meta property =" og: site_name "content ="? php bloginfo ('name');?> "/>? php if (has_post_thumbnail ()) { $ post_thumbnail = wp_get_attachment_image_src (get_post_thumbnail_id ($ post-> ID), "large"); $ post_thumbnail_image = $ post_thumbnail [0]; ?> var13 -> meta property = "og: image" content = "? php echo $ post_thumbnail_image;?> var13 ->" />? php}?> var13 ->
Σημείωση: Όπως έχω ήδη αναφέρει παραπάνω, το Google+, το Pinterest και το LinkedIn υποστηρίζουν επίσης ετικέτες Open Graph, δεν υπάρχει κανένας άλλος κωδικός για αυτές.
Για κάρτες Twitter:
? php #twitter cards hack if (is_single () || is_page ()) {$ twitter_url = get_permalink (); $ twitter_title = get_the_title (); $ twitter_desc = get_the_excerpt (); $ twitter_thumbs = wp_get_attachment_image_src (get_post_thumbnail_id ($ post-> ID), πλήρης); $ twitter_thumb = $ twitter_thumbs [0]; εάν (! $ twitter_thumb) {$ twitter_thumb = «http://www.gravatar.com/avatar/8eb9ee80d39f13cbbad56da88ef3a6ee?rating=PG&size=75»; } $ twitter_name = str_replace ('@', '', get_the_author_meta ('twitter')); ?> var13 -> meta name = "twitter: card" value = "Summary_large_image" /> meta name = "twitter: url" value = "? php echo $ twitter_url;?> var13 ->" /> meta name = "twitter: title" value = "? php echo $ twitter_title;?> var13 ->" /> meta name = "twitter: description" value = "? php echo $ twitter_desc;?> var13 ->" /> μετα name = "twitter: image" value = "? php echo $ twitter_thumb;?> var13 ->" /> meta name = "twitter: site" value = "@ Το όνομα χρήστη του Twitter" />? if ($ twitter_name) {?> var13 -> meta name = "twitter: creator" value = "@? php echo $ twitter_name;?> var13 ->" />? }}?> var13 ->
Σημείωση: Μην ξεχάσετε να αντικαταστήσετε την τιμή του twitter: ιστότοπος ετικέτα με το όνομα χρήστη σας στο Twitter. Για παράδειγμα, εάν το όνομα χρήστη του twitter σας είναι Wordpress_INT, τότε twitter: ιστότοπος Η ετικέτα θα έχει την εξής μορφή:
meta name = "twitter: site" value = "@ Wordpress_INT" />
Επιπλέον, μπορείτε να αλλάξετε τον τύπο κάρτας αντικαθιστώντας την τιμή twitter: card με την αγαπημένη σας κάρτα. Για παράδειγμα, εάν θέλετε να χρησιμοποιήσετε την Κάρτα συλλογής, αντικαταστήστε το «Summary_large_image» με το «Gallery».
meta name = "twitter: card" value = "gallery" />
Ακριβώς επειδή έχετε προσθέσει ετικέτες κάρτας Twitter στον ιστότοπό σας, δεν σημαίνει ότι η κάρτα Twitter θα λειτουργεί. Για να ενεργοποιήσετε μια κάρτα Twitter για τον ιστότοπό σας, πρέπει να την επικυρώσετε χρησιμοποιώντας το Twitter Card Validator και να υποβάλετε αίτηση για έγκριση. Μόλις εγκριθεί η κάρτα σας, θα αρχίσει να λειτουργεί.
Εργαλεία εντοπισμού σφαλμάτων και επικύρωσης
Όλοι οι σημαντικοί ιστότοποι κοινωνικής δικτύωσης έχουν το δικό τους Validator ή Debugger που σας επιτρέπει να δοκιμάσετε πώς θα εμφανίζονται οι σύνδεσμοι όταν κοινοποιούνται σε κοινωνικές ροές. Ακολουθούν αυτά τα εργαλεία:
- Εργαλείο δοκιμών δομημένων δεδομένων Google: Παρόλο που αυτό το εργαλείο δεν δείχνει τον τρόπο εμφάνισης της κοινόχρηστης ανάρτησης στο Google+, αλλά δείχνει την παρουσίαση σήμανσης σε μια συγκεκριμένη ιστοσελίδα.
- Σφάλμα Facebook: Αφού εφαρμόσετε τις ετικέτες Open Graph, μπορείτε να χρησιμοποιήσετε αυτό το εργαλείο για να λάβετε σχόλια σχετικά με τη σήμανση της σελίδας σας εισάγοντας απλώς τη διεύθυνση URL του ιστότοπού σας.
- Εργαλείο επικύρωσης Twitter: Όπως ανέφερα παραπάνω, αυτό είναι ένα εργαλείο Twitter που επικυρώνει την Κάρτα Twitter σας. Μπορείτε επίσης να χρησιμοποιήσετε αυτό το εργαλείο για να κάνετε προεπισκόπηση των καρτών Twitter.
- Επικυρωτής Pinterest Rich Pins: Χρησιμοποιώντας αυτό το εργαλείο, μπορείτε να κάνετε προεπισκόπηση και επικύρωση των εμπλουτισμένων καρφιτσών σας για να βεβαιωθείτε ότι είναι τέλεια.
Λόγια: Ajeet Yadav
Η Ajeet Yadav είναι επαγγελματίας προγραμματιστής ιστού, που σχετίζεται με το wordpressintegration.com, μια φημισμένη εταιρεία ανάπτυξης ιστοσελίδων που παρέχει υψηλής ποιότητας υπηρεσία μετατροπής θεμάτων / προτύπων Photoshop σε WordPress. Ακολουθήστε @Wordpress_INT στο Twitter.
