Translate

Παρασκευή, 24 Μαρτίου 2017

Απαραίτητες Κοινωνικές meta - επισημάνσεις για το Twitter, το Google+, το Facebook και πολλά περισσότερα



Στο Moz, προσπαθούμε να συμπεριλάβουμε τα meta-δεδομένα απο τα κοινωνικά δίκτυα σε όλο το νέο υλικό που δημοσιεύουμε. Αυτό μας επιτρέπει να χρησιμοποιήσουμε με τον καλύτερο τρόπο τις δημοσιεύσεις στο Twitter, στο Facebook, στο Google+ και στο Pinterest, με το να ορίζουμε δηλαδή πως ακριβώς πως οι τίτλοι, οι περιγραφές, οι εικόνες και πολλά ακόμη φαίνονται στα κοινωνικά δίκτυα.


Οι χρήσεις  του SEO είναι εξίσου σημαντικές. Γνωρίζουμε απο την εμπειρία μας και απο μελέτες πως τα σωστά δεδομένα, που περιέχουν βέλτιστες εικόνες,  βοηθούν στη διάδοση του περιεχομένου, το οποίο συχνά οδηγεί σε αυξημένες συνδέσεις και αναφορές.



Γνωρίζοντας ακριβώς ποιές κοινωνικές επισημάνσεις χρειάζεται να συμπεριλάβουμε, αυτό μπορεί να προκαλέσει σύγχηση, ακόμα και στους master του διαδικτύου. Αυτή η δημοσίευση απο τον Michael King είναι αρκετά βοηθητική, και οι εκδότες του Wordpreess που χρησιμοποιούν  Yoast's SEO plugin προπορεύονται άριστα σε αυτό το παιχνίδι. Για δική μας άνεση, αναλογιστείτε τις διαφορετικές κατασκευές που υποστηρίζονται απο τις βασικές κοινωνικές πλατφόρμες:

  • Κάρτες Twitter: Συνόψεις, Εικόνες, Βιβλιοθήκες, Εφαρμογές, Βίντεο, Μουσική και Προϊόντα
  • Pinterest: Προϊόντα, Συνταγές, Ταινίες και Άρθρα
  • Google+: Άρθρα, Ιστοσελίδες, Βιβλία, Εκδηλώσεις, Τοπικές Επιχειρήσεις, Οργανισμοί, Άτομα, Προϊόντα και Ανασκοπήσεις
  • Facebook: Άρθρα, Φωτογραφίες, Μουσική, Βίντεο και άλλα

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

Πώς να χρησιμοποιήσετε  αυτά τα πρότυπα
Απλώς κάντε Αντιγραφή- Επικόλληση το πρότυπο μέσα στον επεξεργαστή κειμένου της επιλογής σας. Βεβαιωθείτε οτι θα αντικαταστήσετε οποιοδήποτε πορτοκαλί ή πράσινο κείμενο με τα δικά σας δεδομένα, και προσαρμόστε, διαγράψτε ή προσθέστε όποια επισήμανση θεωρείτε απαραίτητη.

Τα πρώτα τρία απο τα παραπάνω πρότυπα χρησιμοποιούν τυπικά "άρθρα" με σήμανση εγγράφου και δεδομένα, ιδανικά για δημοσιεύεσεις σε ιστοσελίδες και γενικά για γραπτό περιεχόμενο. To οριστικό πρότυπο περιέχει σήμανση εγγράφου για σελίδες με προϊόντα. Για άλλους τύπους δημοσιεύσεων, όπως βιβλία ή συνταγές, αναφερθείτε στις οδηγίες που υπάρχουν στο τέλος του άρθρου.

Όταν τελειώσετε, μην ξεχάσετε την εξέταση και εφαρμογή για έγκριση.


1. The Minimal Template
Η συρρικνωμένη εκδοχή είναι λεπτή και γρήγορη. Περιλαμβάνει ελάχιστες πληροφορίες σχετικές τη δημοσίευση στο Twiiter, στο Facebook, στο Google+ και στο  Pinterest.

Οι τίτλοι των επισημάνσεων και οι μετα-περιγραφές συμπεριλαμβάνονται, αν και δεν είναι τεχνικά επισημάνσεις κοινωνικών δικτύων. Αυτό συμβαίνει επειδή μπορούν να χρησιμοποιηθούν απο τo Google+ και απο άλλες κοινωνικές πλατφόρμες και είναι αρκετά πρακτικό να συμπεριληφθούν σε κάθε σελίδα που εκδίδετε.

Minimum Social Media Tag Template: Article

<!-- Place this data between the <head> tags of your website -->
<title>Page Title. Maximum length 60-70 characters</title>
<meta name="description" content="Page description. No longer than 155 characters." />

<!-- Twitter Card data -->
<meta name="twitter:card" value="summary">

<!-- Open Graph data -->
<meta property="og:title" content="Title Here" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://www.example.com/" />
<meta property="og:image" content="http://example.com/image.jpg" />
<meta property="og:description" content="Description Here" />


2. The Standard Template
Το πρότυπο αυτό αναπαριστά μια αρκετά ισχυρή εφαρμογή των κοινωνικών επισημάνσεων και αναφέρεται στην εργασία σε όλες τις πλατφόρμες. Επιπλέον με όλα τα χαρακτηριστικά της συρρικνωμένης εκδοχής που αναφέρθηκαν παραπάνω, αυτό το υπόδειγμα περιλαμβάνει τα εξής:

  • τη βασική κάρτα σύνοψης του Twitter
  • το σκίτσο του Twitter
  • τις εικόνες ατη σελίδα του Facebook



Standard Social Media Tag Template: Article

<!-- Place this data between the <head> tags of your website -->
<title>Page Title. Maximum length 60-70 characters</title>
<meta name="description" content="Page description. No longer than 155 characters." />

<!-- Twitter Card data -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@publisher_handle">
<meta name="twitter:title" content="Page Title">
<meta name="twitter:description" content="Page description less than 200 characters">
<meta name="twitter:creator" content="@author_handle">
<-- Twitter Summary card images must be at least 120x120px -->
<meta name="twitter:image" content="http://www.example.com/image.jpg">

<!-- Open Graph data -->
<meta property="og:title" content="Title Here" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://www.example.com/" />
<meta property="og:image" content="http://example.com/image.jpg" />
<meta property="og:description" content="Description Here" /> 
<meta property="og:site_name" content="Site Name, i.e. Moz" />
<meta property="fb:admins" content="Facebook numeric ID" />


3. Όλο το πακέτο
Αυτό είναι μεγαλειώδες! Επιπλέον με όλα τα δεδομένα που περιέχει το Standard Template,  το ολοκληρωμένο πρότυπο περιλαμβάνει:

  • Συγγραφική ιδιότητα του Google και σήμανση του εκδότη. Αν και αυτά τα δεδομένα δεν αλλάζουν την εμφάνιση του περιεχομένου σας στο Google+, πιθανώς να προσθέτει συνδέσμους στις σελίδες του Google στα αποτελέσματα αναζήτησης. 
  • σήμανση εγγράφου Schema.org
  • κάρτα σύνοψης του Twitter με μεγάλο εικονίδιο
  • δεδομένα απο το διευρημένο άρθρο Open Graph


Full Social Media Tag Template: Article

<!-- Update your html tag to include the itemscope and itemtype attributes. -->
<html itemscope itemtype="http://schema.org/Article">

<!-- Place this data between the <head> tags of your website -->
<title>Page Title. Maximum length 60-70 characters</title>
<meta name="description" content="Page description. No longer than 155 characters." />

<!-- Schema.org markup for Google+ -->
<meta itemprop="name" content="The Name or Title Here">
<meta itemprop="description" content="This is the page description">
<meta itemprop="image" content="http://www.example.com/image.jpg">

<!-- Twitter Card data -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@publisher_handle">
<meta name="twitter:title" content="Page Title">
<meta name="twitter:description" content="Page description less than 200 characters">
<meta name="twitter:creator" content="@author_handle">
<!-- Twitter summary card with large image must be at least 280x150px -->
<meta name="twitter:image:src" content="http://www.example.com/image.jpg">

<!-- Open Graph data -->
<meta property="og:title" content="Title Here" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://www.example.com/" />
<meta property="og:image" content="http://example.com/image.jpg" />
<meta property="og:description" content="Description Here" />
<meta property="og:site_name" content="Site Name, i.e. Moz" />
<meta property="article:published_time" content="2013-09-17T05:59:00+01:00" />
<meta property="article:modified_time" content="2013-09-16T19:08:47+01:00" />
<meta property="article:section" content="Article Section" />
<meta property="article:tag" content="Article Tag" />
<meta property="fb:admins" content="Facebook numberic ID" />


Επιπλέον: The Product Template
Για τους εμπόρους, η σήμανση προϊόντος είναι πολύ δημοφιλής και συχνά εύκολη για όσους αναπτύσσουν την εφαρμογή του λογισμικού "καλάθι αγορών". Το Product Template διαφέρει απο τη σήμανση άρθρου σε μερικά σημεία:

  • Τροποποιημένη <html> επισήμανση για να εμφανιστούν τα δεδομένα προϊόντων schema.org
  • Η κάρτα προϊόντων Twitter περιέχει τις απαιτούμενες ετικέτες δεδομένων
  • Τα δεδομένα Open Graph περιέχουν στοιχεία κόστους και νομίσματος

Product Social Media Tag Template

<!-- Update your html tag to include the itemscope and itemtype attributes. -->
<html itemscope itemtype="http://schema.org/Product">

<!-- Place this data between the <head> tags of your website -->
<title>Page Title. Maximum length 60-70 characters</title>
<meta name="description" content="Page description. No longer than 155 characters." />

<!-- Schema.org markup for Google+ -->
<meta itemprop="name" content="The Name or Title Here">
<meta itemprop="description" content="This is the page description">
<meta itemprop="image" content="http://www.example.com/image.jpg">

<!-- Twitter Card data -->
<meta name="twitter:card" content="product">
<meta name="twitter:site" content="@publisher_handle">
<meta name="twitter:title" content="Page Title">
<meta name="twitter:description" content="Page description less than 200 characters">
<meta name="twitter:creator" content="@author_handle">
<meta name="twitter:image" content="http://www.example.com/image.jpg">
<meta name="twitter:data1" content="$3">
<meta name="twitter:label1" content="Price">
<meta name="twitter:data2" content="Black">
<meta name="twitter:label2" content="Color">

<!-- Open Graph data -->
<meta property="og:title" content="Title Here" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://www.example.com/" />
<meta property="og:image" content="http://example.com/image.jpg" />
<meta property="og:description" content="Description Here" />
<meta property="og:site_name" content="Site Name, i.e. Moz" />
<meta property="og:price:amount" content="15.00" />
<meta property="og:price:currency" content="USD" />



Εργαλεία για εξέταση και εφαρμογή

A. Εργαλείο Επικύρωσης του Twitter



Πρίν εμφανιστούν οι κάρτες σας στο Twitter, πρέπει πρώτα να επικυρώσετε τον τομέα σας. Ευτυχώς, είναι αρκετά εύκολη η διαδικασία. Αφοού εφαρμόσετε τις κάρτες σας, απλώς εισάγετε το URL μέσα στο εργαλείο επικύρωσης. Αφού ελεγχθεί η σήμανση του εγγράφου, επιλέξτε το κουμπί   "Submit for Approval".


B. Εντοπισμός λαθών στο Facebook



Δεν χρειάζεστε κάποια έγκριση για να δείχνετε τις πληροφορίες σας στο Facebook, αλλά με το εργαλείο εντοπισμού λαθώv που σας προσφέρουν, σας δίνετε ένας πλούτος πληροφοριών σχετικών με όλες τις επισημάνσεις σας και επιπλεόν μπορείτε να αναλύσετε τις επισημάνσεις σας και στο Twitter.


C. Εργαλείο δοκιμής δομημένων πληροφοριών του Google



Οι ειδικοί των ιστοσελίδων παραδοσιακά χρησιμοποιούν το εργαλείο δοκιμής δομημένων πληροφοριών για να ελέγξουν την συγγραφική ιδιότητα και ρίξουν μια ματιά στο πώς θα φαίνονται τα αποσπάσματα στα αποτελέσματα της αναζήτησης. Επίσης, μπορείτε να το χρησιμοποιήσετε για να δείτε τι άλλοι τύποι μετα-δεδομέμων Google μπορούν να αφαιρεθούν απο κάθε σελίδα.


D. Επικυρωτής Rich Pins στο Pinterest



Όπως στο Twitter, το Pinterest απαιτεί μια έγκριση πρόσβασης ώστε να ενεργοποιηθεί η λειτουργία Rich Pin. Χρησιμοποιήστε το εργαλείο επικύρωσης Rich Pin για να δοκιμάσετε τις σημάνσεις των δεδομένων σας και να τις εφαρμόσετε την ίδια στιγμή.


Tips και καλές πρακτικές 


Βελτιστοποίηση των εικόνων

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

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


  • σκίτσο στο Twitter: 120x120px
  • μεγάλη εικόνα στο Facebook: 280x150px
  • Facebook: τα κριτήρια ποικίλουν, αλλά μια εικόνα τουλάχιστουν 200x200px ταιριάζει καλύτερα.  Το Facebook προτείνει μεγάλες εικόνες πάνω απο 1200x630px πλάτος.

Εν συντομία, οι μεγαλύτερες εικόνες σας προσφέρουν περισσότερη προσαρμοστικότητα. Όταν αμφιβάλλεται, δοκιμάστε κάθε σελίδα χρησιμοποιώντας το κατάλληλο εργαλείο για να δείτε πως θα εμφανιζονται οι εικόνες σας.


Η σπουδαιότητα των δεδομένων Open Graph

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

Η διορατικότητα στις σελίδες του Facebook

Η μετα-ιδιότητα "fb:admins" απαιτεί να εισάγετε τον αριθμό ταυτότητας σας στο Facebook και σας δίνει πρόσβαση σε αναλυτικές πληροφορίες σχετικές με το πως το περιεχόμενο της ιστοσελίδας σας δημοσιεύεται στο Facebook. Διαβάστε περισσότερες πληροφορίες σχετικές με την διορατικότητα του Facebook, όπου και συμπεριλαμβάνονται πληροφορίες σχετικά με το πώς να εφαρμόσετε και να ανακαλύψετε τον αριθμό ταυτότητας σας στο Facebook. 



Επιπλέον πηγές

Χρησιμοποιείστε αυτά τα υποδείγματα σε αρχικό στάδιο, αλλά μπορείτε να τα προσαρμόσετε με χιλιάδες τρόπους. Μερικές διαθέσιμες πηγές που θα σας βοηθήσουν στο ταξίδι σας: