Archimidis Mertzanos

Προσθήκη schema.org (microdata) σε WordPress Theme. Μέρος 1

Καλησπέρα σας και χρόνια πολλά. Εύχομαι το 2017 να φέρει σε όλους ό,τι επιθυμείτε & ό,τι δεν σας έφερε το 2016. Σίγουρα οι προβλέψεις δεν είναι ό,τι καλύτερο αλλά πραγματικά εάν υπάρχει υγεία όλα τα άλλα-ή έστω όλα- βρίσκονται. Ευχαριστώ για την επίσκεψή σας στο νέο mertzanos.gr το οποίο θα συνεχίσει στην ουσία το webapptester.com με μία μικρή διαφορά. Τα tutorials αλλά και τα γενικότερου ενδιαφέροντος άρθρα θα είναι πολύ πιο developer oriented από ότι τώρα. Εννοείται ότι έχω κατά νου και όλους εσάς που στηρίζετε το webapptester και ξεκινάτε τα πρώτα σας βήματα στο web development,απλά το ύφος των θα πρέπει να είναι πολύ πιο μαζεμένο και straight ώστε να σας δίνεται το έναυσμα για να βρείτε τις λύσεις που σας ταιριάζουν. Μετά από αυτά πάμε γρήγορα να δούμε τι είναι αυτό το schema.org.

Αν σας αρέσουν τα άρθρα, ή οτιδήποτε κάντε τα share να το μάθουν και άλλοι. Όλο το net βασίζεται στην πληροφορία. Μοιραστείτε λοιπόν την πληροφορία χωρίς φόβο αλλά με πάθος!!

Τι είναι το schema.org ;

Μην πάμε μακριά . Ας δούμε τι λέει η Επίσημη ιστοσελίδα του schema.org για το schema.org.

Schema.org is a collaborative, community activity with a mission to create, maintain, and promote schemas for structured data on the Internet, on web pages, in email messages, and beyond.

Το παραπάνω είναι ο βασικός ορισμός του schema.org ο οποίος δεν είναι τόσο κατανοητός με την πρώτη ματιά. Θα προσπαθήσω να το εξηγήσω με κατανοητούς όρους. Το πιο βασικό είναι ότι το schema.org προέρχεται από την ελληνική λέξη «σχήμα» . Το πρώτο που κρατάμε είναι ότι πλέον πρόκειται για «σχήματα» δεδομένων. Με πολύ απλά λόγια το schema.org είναι ένας τρόπος που μπορούμε να παρουσιάσουμε τα δεδομένα σε μία ιστοσελίδα ώστε η μηχανή αναζήτησης που θα την βρει , να μπορεί να «κατανοήσει» ,άρα και να παρουσιάσει καλύτερα , τι είναι αυτό που «δείχνει» αυτή η σελίδα. Για παράδειγμα κάντε μία αναζήτηση στο Google γράφοντας «Carbonara recipe» και παρατηρήστε τι αποτελέσματα παίρνετε.

Παράδειγμα αποτελεσμάτων του schema.org στη μηχανή αναζήτησης Google.

Παράδειγμα αποτελεσμάτων του schema.org στη μηχανή αναζήτησης Google.

Παρατηρείτε ότι τα αποτελέσματα αυτά, δεν είναι μόνο κείμενο αλλά έχουν και εικόνα, κάποιες κριτικές και βαθμολογία, αλλού μπορείτε να δείτε ότι υπάρχουν τα λεπτά ψησίματος του συγκεκριμένου γεύματος και γενικά δίνονται αρκετές πληροφορίες σχετικά με το συγκεκριμένο αποτέλεσμα. Σε αυτές λοιπόν τις σελίδες έχει εφαρμοστεί το λεγόμενο «Recipe Schema».

Πώς ο crawler της Google «βλέπει» αυτές τις έξτρα πληροφορίες; Ο ρόλος των microdata .

Πολλοί αναρωτιούνται πώς ο crawler των διαφόρων μηχανών αναζήτησης βλέπουν και παρουσιάζουν τις διάφορες πληροφορίες, όπως είδαμε στο παράδειγμα. Ένας τρόπος εφαρμογής του schema.org είναι μέσω της χρήσης των microdata. 

Τα microdata είναι «δεδομένα» που τα τοποθετούμε inline μέσα στον HTML κώδικα της σελίδας, με συγκεκριμένο τρόπο, και δίνουν τη δυνατότητα στη μηχανή αναζήτησης να «καταλάβει» τι είναι αυτό που διαβάζει και έτσι να το παρουσιάσει καλύτερα στους χρήστες.

Παράδειγμα από το schema.org – Article Schema.

Ένα απλό παράδειγμα της χρήσης των Microdata είναι το εξής:

Με χρήση microdata:

Δείτε προσεκτικά τον κώδικα παραπάνω και θα δείτε ότι έχει τοποθετηθεί μέσα στο HTML το schema.org και είναι τύπου «Article». Από εκεί και πέρα κάθε schema.org έχει διάφορα microdata και πολλά schemas επικαλύπτουν το ένα το άλλο, για παράδειγμα το «Article» επικαλύπτει το «NewsArticle» κλπ. Έτσι το «NewsArticle» χρησιμοποιεί και microdata από το «Article» και ου το καθ’ εξής. Δείτε διάφορα microdata που μπορεί να έχει ένα «Article«. Είναι προφανές ότι ΔΕΝ είναι υποχρεωτικό να τα έχουμε όλα. Όμως με το εργαλείο που ελέγχουμε την εγκυρότητα της τοποθέτησης του schema.org στη σελίδα μας, μας γίνεται γνωστό ποια είναι τα υποχρεωτικά microdata και ποια όχι.

Επίδραση του schema.org στο SEO της σελίδας

Χωρίς αμφιβολία η προσθήκη του schema.org σε μία ιστοσελίδα δυναμώνει κατά πολύ το SEO της. Δεν ξεχνάμε ποτέ όμως τις 4 λέξεις που θα καθορίσουν εντέλει τη επιτυχία της ή όχι. Content Is The King. Χωρίς καλά κείμενα και άρθρα, SEO και Google δεν υπάρχει . Εκτός αν έχουμε ένα τεράστιο ποσό να δαπανήσουμε σε adwords και γενικότερα διαφήμιση αλλά το ζήτημα που πρέπει να κοιτάμε είναι πώς θα κρατήσουμε τον επισκέπτη και πώς θα τον κάνουμε να μας επισκεφτεί πάλι.

Τοποθέτηση του schema.org σε μια σελίδα

Ύστερα από τα πιο θεωρητικά κομμάτια που αναφέραμε πιο πάνω είναι ώρα να δούμε πώς μπορούμε να τοποθετήσουμε το schema.org στη σελίδα μας και μάλιστα να ελέγξουμε ότι το έχουμε κάνει σωστά. Επειδή στο ίντερνετ υπάρχουν διάφορα, όχι πολλά, tutorials αυτό που θα δούμε είναι πρακτική εφαρμογή του schema.org στην ιστοσελίδα μου, στο mertzanos.gr ! Εννοείται θα ακολουθήσει και ένα μικρό video το οποίο θα αναφέρει 2-3 ιδέες και σκέψεις για το schema.org και το πώς μπορούμε να το τοποθετήσουμε σε υπάρχον theme.

Πώς ελέγχουμε το schema.org

Η Google μας παρέχει ένα εργαλείο το οποίο ονομάζεται structured data testing tool και ελέγχει τη τοποθέτηση των διαφόρων schemas στον κώδικα της ιστοσελίδας μας.

Τι schema είναι αυτό που επιλέγουμε;

Είναι αλήθεια ότι στην επιλογή αυτή έχουμε αρκετές επιλογές εκτός αν η ιστοσελίδα μας μιλάει για κάτι που δεν μπορεί να γίνει πιο συγκεκριμένο . Εντούτοις υπάρχει και το γενικό «WebPage» schema όπου είναι το πλέον γενικό. Το τρικ στις διάφορες σελίδες είναι να δώσουμε στην κάθε μηχανή αναζήτησης ένα hint για το τι είναι το κάθε URL που έχει κάνει crawl. Για παράδειγμα στη σελίδα που εμφανίζονται τα άρθρα μας, στο blog μας δηλαδή, μπορούμε να τοποθετήσουμε γενικό schema τύπου «Blog» και το κάθε ένα άρθρο που θα βρίσκεται στο blog , στη λίστα αυτή να είναι τύπου «BlogPosting«. Σε single άρθρο μπορούμε να χρησιμοποιήσουμε schema τύπου «article«. Βέβαια υπάρχουν και πιο «συγκεκριμένοι τύποι» του schema.org , για παράδειγμα ένα άρθρο μπορεί να είναι «Newsarticle», «Report» και πολλά άλλα. Possibilities are endless.

Ενσωμάτωση schema.org στο υπάρχον WordPress

Στην ιστοσελίδα μου χρησιμοποιώ ένα theme το οποίο ονομάζεται «Read WP». Οι λόγοι  που χρησιμοποιώ έτοιμο WordPress Theme και όχι κάτι tailor-made είναι αρκετοί αυτή τη στιγμή και θα τους μοιραστώ μαζί σας σε άλλο άρθρο. Σε αυτό λοιπόν το theme θα τοποθετήσω το schema.org και θα το κάνω πολύ πιο SEO frindly από ότι είναι. Θα αρχίσω τοποθετώντας το στα single posts και εν συνεχεία σε άλλα σημεία του website. Ίσως βέβαια δεν το τοποθετήσω σε όλο το site διότι δεν είναι και υποχρεωτικό αυτό. Σκεφτείτε ότι αν κάποιος θέλει να είναι 100% σωστός μπορεί να βάλει schema ακόμα και στο logo αλλά και στα navigation menus. Εγώ δεν θα το κάνω αυτό.

Ποιο schema θα χρησιμοποιήσω στο mertzanos.gr;

Το schema:Article είναι αυτό που είναι και πιο γενικό και που ταιριάζει στη ιστοσελίδα μου. Θα μπορούσα να γίνω πιο συγκεκριμένος , χρησιμοποιώντας κάποιο schema όπως το «NewsArticle» αλλά δεν χρειάζεται. Πηγαίνοντας στη σελίδα https://schema.org/Article θα δούμε τι properties μπορούμε να χρησιμοποιήσουμε. Για να ξεκινήσω να τοποθετώ το schema.org βρίσκω στο theme μου το single.php και βρίσκω μέσα στο αρχείο μου που ξεκινάει το single post.

Η συνολική δομή του single.php που υπάρχει στο WordPress Theme μου είναι η:

Διακρίνω την αρχή του άρθρου:

Το κάθε single post βρίσκεται   <article>....</article> . Η πρώτη αλλαγή που θα κάνω είναι η εξής: Μετατρέπω το

σε

Από τη στιγμή που ορίζουμε αυτό ξεκινάει και όλη η εργασία μας για το ποια properties θα βάλουμε στο άρθρο μας. Αν θέλουμε να βρούμε μόνο τα required (υποχρεωτικά) ,απλά τοποθετούμε το URL του άρθρου μας στο ειδικό debugging tool και μας αναλύει τι πρέπει να συμπληρώσουμε ακόμα. Κάνοντας το test παίρνουμε το παρακάτω screenshot:

Σφάλματα στο schema.org

Παρατηρούμε ότι για το schema.org:Article πρέπει υποχρεωτικά να βάλουμε author, πότε δημοσιεύτηκε το άρθρο, headline(τίτλος), URL βασικής εικόνας και όχι μόνο (αυτό είναι tricky) , publisher (συνήθως το URL ή το όνομα της ιστοσελίδας – επίσης tricky) και μας προτείνει και άλλα δύο properties , το dateModified και το mainEntityOfPage. Θα δοκιμάσουμε να βάλουμε τα required, και ότι μείνει θα δοκιμάσουμε να το βάλουμε και αυτό.

Λογικά το author και datepublished θα πρέπει να είναι μέσα σε κομμάτι κώδικα που παρουσιάζει τα metadata του post. Ψάχνοντας τα βρίσκουμε και τοποθετούμε:

Για το author:

το αλλάζω σε :

Παρατηρήστε το «itemprop» πριν το όνομα του author.

Για το datePublished: Εδώ είναι λίγο πιο σύνθετο το θέμα διότι το property αυτό δέχεται date object .Τις περισσότερες φορές η ημερομηνία που βλέπουμε δεν είναι date object αλλά ένα string represantation όπως λέμε. Έτσι αυτό που μπορούμε να κάνουμε εδώ είναι να χρησιμοποιήσουμε το attribute «content» με αυτό το itempop. Το datePublished δέχεται τιμές με συγκεκριμένα formats όπως εδώ

Βρίσκουμε το κομμάτι αυτό:

<span class="post-date"> ..... </span> και μέσα σε αυτό τοποθετούμε το

Έτσι το συνολικό μας κομμάτι κώδικα είναι το :

Για το headline:

Βρίσκω το h1 του άρθρου, ή όποιο σημείο χρησιμοποιεί σαν headline-title και το αλλάζω σε:

Κάνοντας το test για την σωστή δομή των microdata μου , παίρνω το αποτέλεσμα:

Παρατήρηση στα μέχρι στιγμής αποτελέσματα του structured data testing tool

Βλέποντας την παραπάνω εικόνα θα παρατηρήσετε τα εξής: Ότι τα σωστά itemprops τα μαρκάρει με μαύρο και τα λάθος με κόκκινο χρώμα. Ένα άλλο στοιχείο είναι στο σημείο που αναφέρει τα σχετικά με το «author» itemprop. Παρατηρείστε ότι εκτός από το name , που είναι το όνομα του συντάκτη του άρθρου, έχει και ένα @type. Αυτό μας δείχνει ότι το itemprop author δεν ανήκει στην πραγματικότητα στο Article αλλά σε ένα πολύ γενικότερο schema , αυτό του Thing. Έτσι βλέπουμε και στην πράξη ότι ένα schema «κληρονομεί» χαρακτηριστικά και από άλλα schemas και μπορεί να χρησιμοποιήσει τα δικά τους itemprops. Υπάρχουν περιπτώσεις βέβαια που για να χρησιμοποιήσουμε ένα itemprop πρέπει να δηλώσουμε ένα schema μέσα σε ένα άλλο schema, κοινώς να έχουμε nested schemas.

Η συνέχεια του άρθρου αυτού όπως και το video που περιγράφει το τι κάναμε για την τοποθέτηση του schema.org θα δοθεί σε επόμενο άρθρο, στις επόμενες ημέρες. Μέχρι τότε μοιράστε το άρθρο, κοινοποιήστε το και φυσικά αν επιθυμείτε γραφτείτε στο newsletter μου. Μπορείτε επίσης να σχολιάσετε ό,τι θέλετε κάτω από το άρθρο. Ευχαριστώ για την ανάγνωση.

Leave a Reply

1 Σχόλιο on "Προσθήκη schema.org (microdata) σε WordPress Theme. Μέρος 1"

Ενημέρωσε με για..
avatar
Sort by:   νεότερα | παλαιότερα | πιο πολύ ψηφισμένα
wpDiscuz