Στο παρόν άρθρο θα δούμε χρήσιμες πληροφορίες που αφορούν το Microdata και πως δύναται να βοηθήσουν ένα απλό ιστότοπο να αναρριχηθεί ψηλά στα αποτελέσματα αναζήτησης, με λίγη προεργασία και αρκετή προσοχή, πάντα με τις οδηγίες του Texnologia.Net.
Τι είναι τα Microdata
Όπως αναφέρεται ξεκάθαρα και στο schema.org, η HTML παρουσιάζει τη δομή της πληροφορίας στον browser. Παρόλα αυτά, τούτες οι πληροφορίες είναι γενικές και δεν μπορούν να δώσουν συγκεκριμένες πληροφορίες για αυτό που περιλαμβάνεται στο HTML έγγραφο. Για παράδειγμα η HTML ετικέτα
<h1>Επικεφαλίδα Κειμένου</h1>είναι ένα string, το οποίο μπορεί να σημαίνει έναν διάσημο συγγραφέα, τον τίτλο μιας επιτυχημένης ταινίας ή μιας επιχείρησης. Έτσι λοιπόν, γίνεται πιο δύσκολο για τις μηχανές αναζήτησης (Google, yahoo, Bing κλπ) να κατανοήσουν ακριβώς το είδος της πληροφορίας.
Γιατί να χρησιμοποιήσουμε microdata;
Όπως εξηγήσαμε και πιο πάνω, τα microdata μπορούν να δώσουν συγκεκριμένες πληροφορίες στις μηχανές αναζήτησης και έπειτα αυτές να αξιολογήσουν τι περιεχόμενο θα έπρεπε να παρουσιάσουν στα αποτελέσματα τους, στις social πλατφόρμες τους (πχ google+), καθώς επίσης και τον τρόπο με τον οποίο θα γίνει αυτή η παρουσίαση.
Ας πούμε για παράδειγμα ότι ψάχνουμε συνταγή για μία το πώς γίνεται μια lemon pie. Κάτω από το url των αποτελεσμάτων, θα δούμε ότι παρουσιάζονται πληροφορίες όπως η αξιολόγηση των χρηστών, πόσοι έκαναν την αξιολόγηση, πόσο χρόνο χρειάζεται για να γίνει η lemon pie, ενώ σε κάποιες περιπτώσεις πιο κάτω μπορούμε να δούμε σε ένα άλλο αποτέλεσμα πόσες θερμίδες έχει η συγκεκριμένη συνταγή.
Με λίγα λόγια, μπορούμε να δώσουμε ακριβείς πληροφορίες στις μηχανές αναζήτησης σχετικά με το περιεχόμενο μας, κάτι το οποίο δεν ήταν εφικτό στο παρελθόν.
Ακόμη πιο σημαντική εφαρμογή βλέπουμε στον τομέα του ecommerce, μιας και εδώ εκτός από τις βαθμολογίες, τον αριθμό των αξιολογήσεων κλπ, έχουμε τη δυνατότητα να φιλτράρουμε τα αποτελέσματα με βάση την τιμή, κατηγορία, μέγεθος οθόνης, διάρκεια μπαταρίας κλπ.
Αν και τα microdata προς το παρόν βοηθούν (σχεδόν) αποκλειστικά στην παρουσίαση του περιεχομένου, είναι σίγουρο ότι το επόμενο διάστημα θα παίζουν σημαντικό ρόλο και στο onpage seo της ιστοσελίδας μας. Αν για παράδειγμα ψάχνουμε για καφετέριες, τα microdata θα βοηθούν τις μηχανές αναζήτησης να προσδιορίσουν ποιες ιστοσελίδες είναι σχετικού περιεχομένου και έτσι να εμφανίζουν αντίστοιχα αποτελέσματα.
Πως ενσωματώνουμε τα microdata
Στο προηγούμενο μέρος αναλύσαμε τι είναι τα microdata και ποια τα πλεονεκτήματα τους. Σε αυτό λοιπόν θα δούμε πως μπορούμε να τα ενσωματώσουμε στην ιστοσελίδα μας. Μέσα από το Schema.org, μπορούμε να βρούμε το είδος του αντικειμένου της ιστοσελίδας μας. Για παράδειγμα, αν πρόκειται για ιστοσελίδα εστιατορίου, θα αναζητήσουμε τη λέξη «restaurant». Βλέποντας το https://schema.org/Restaurant, μπορούμε να δούμε όλες τις διαθέσιμες πληροφορίες που υπάρχουν για τις ιστοσελίδες εστιατορίων
Παρακάτω παραθέτουμε ένα ενδεικτικό παράδειγμα πως θα είναι ο κώδικας μας κανονικά και έπειτα με microdata.
<div>
<h1>Το Μικρό Καφέ</h1>
<p> Ανακαλύψτε πάνω από 50 γευστικές μεσογειακές λιχουδιές στο κατάστημα μας </p>
<p>Ώρες Λειτουργίας: Καθημερινά από 9πμ έως 11μμ</p>
<p>Τηλ: 210 111 1111</p>
<p>Δείτε το <a href="http://domain.com/menu">Κατάλογο Μας</a>.</p>
<p>Διεύθυνση:<br />
Στροφάδων 59,<br />
Αθήνα, 11361</p>
<p>Δυνατότητα Κράτησης: Ναι</p>
</div>Πριν εφαρμόσουμε microdata, πρέπει να έχουμε υπόψη μας τις εξής λεπτομέρειες. Κατανοώντας τις, δεν θα έχουμε κανένα πρόβλημα να εφαρμόσουμε microdata σε οποιουδήποτε είδους ιστοσελίδα.
Η έναρξη της κάθε ενότητας, γίνεται με το attribute itemscope.
Ο τύπος της ενότητας καθορίζεται με το itemtype (π.χ. itemtype=”http://schema.org/Restaurant”) και συνήθως μπαίνει ακριβώς δίπλα από το itemscope. Δεν πρέπει να ξεχνάμε, ότι το itemtype πρέπει να έχει το πλήρες url από το schema.org.
Το κάθε στοιχείο μέσα στην ενότητα, έχει το attribute itemprop. Πχ το itemprop=”name” συμβολίζει το όνομα του εστιατορίου. Αν αντίστοιχα το itemprop=”name” βρισκόταν μέσα σε μία ενότητα που ο τύπος της ήταν book, θα συμβόλιζε το όνομα του βιβλίου.
Έχοντας υπόψη μας τα παραπάνω και ενσωματώνοντας microdata, ο κώδικας μας εμφανίζεται κάπως έτσι πλέον.
<div itemscope itemtype="http://schema.org/Restaurant">
<h1 itemprop="name">Το Μικρό Εστιατόριο</h1>
<p itemprop="description">Ανακαλύψτε πάνω από 50 γευστικές <span itemprop="servesCuisine"> μεσογειακές</span> λιχουδιές στο κατάστημα μας</p>
<p>Ώρες Λειτουργίας: <time itemprop="openingHours" datetime="Mo,Tu,We,Th,Fr,Sa,Su 09:00-23:00">Καθημερινά από 9πμ έως 11μμ</span></p>
<p>Τηλ: <span itemprop="telephone">210 111 1111</span></p>
<p>Δείτε το <a href="http://domain.com/menu" itemprop="menu">Κατάλογο Μας</a>.</p>
<p>Διεύθυνση:<br />
<span itemprop="streetAddress">Στροφάδων 59</span>,<br />
<span itemprop="addressLocality">Αθήνα</span>, <span itemprop="postalCode">11361</span></p>
<p>Δυνατότητα Κράτησης: <span itemprop="acceptsReservations" content="true">Ναι</span></p>
</div>
