Σε προηγούμενο άρθρο αναλύσαμε τι είναι τα 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>
Έχετε απορίες, θα χαρώ να σας απαντήσω στα σχόλια!
Σημείωση: Μην βάζετε keywords στο πεδίο για το όνομα καθώς επίσης και links προς άσχετες ιστοσελίδες με τη θεματολογία του άρθρου. Οι διαχειριστές του ifeed θα μαρκάρουν αυτόματα αυτά τα σχόλια ως spam!
0