Τα SEO meta tags είναι HTML tags που χρησιμοποιούνται για να βοηθήσουν τις μηχανές αναζήτησης να κατανοήσουν το περιεχόμενο μιας ιστοσελίδας. Το βασικό χαρακτηριστικό ενός HTML tag είναι να ορίσει ξεκάθαρα το περιεχόμενο της ιστοσελίδας τόσο στον προγραμματιστή όσο και στο πρόγραμμα περιήγησης.

Μερικά από τα πλεονεκτήματα της σωστής χρήσης των HTML tags είναι τα παρακάτω:

  • Τα HTML tags(σημασιολογικές ετικέτες) βοηθούν τις μηχανές αναζήτησης και τις των συσκευές χρηστών να προσδιορίσουν το περιεχόμενο των ιστοσελίδων.
  • Οι ιστοσελίδες που χρησιμοποιούνται σωστά τα HTML tags είναι πολύ πιο ευανάγνωστες.
  • Έχουν καλύτερη προσβασιμότητα και προσφέρουν καλύτερη εμπειρία στον χρήστη.

Υπάρχουν διάφορα HTML meta tags που είναι σημαντικά για το SEO, αλλά τα πιο σημαντικά είναι τα παρακάτω:

Meta description

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

1<head>
2 <meta name="description" content="This is an example website for a small business that sells handmade soaps. We offer a variety of natural and organic soap bars made with essential oils and botanical ingredients.">
3</head>

Title tag

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

1<head>
2  <title>Handmade Soaps - Natural and Organic Soap Bars</title>
3</head>

Headings tags

Τα heading tags (h1, h2, h3 κλπ) είναι tags που χρησιμοποιούνται για να δηλώσουν τους τίτλους και υποτίτλους μιας σελίδας. Eίναι σημαντικά για το SEO καθώς χρησιμοποιούνται από τις μηχανές αναζήτησης για να κατανοήσουν το περιεχόμενο μιας σελίδας.

Το h1 tag είναι ο βασικός τίτλος της σελίδας και είναι προτεραιότητας σε σχέση με τα υπόλοιπα headings. Επιπλέον, το h2 tag είναι υπότιτλος με υψηλότερη προτεραιότητα απο το h3 κλπ. Είναι σημαντικό να εφαρμόζεται η σωστή σειρά στους headings tags για να παράγει καλύτερο και συνεπέστερο περιεχόμενο για τους επισκέπτες και τις μηχανές αναζήτησης.

Robots tags

Τα robots meta tags είναι tags HTML που χρησιμοποιούνται για να δηλώσουν στις μηχανές αναζήτησης πως να αντιμετωπίσουν μια συγκεκριμένη σελίδα ή ένα κατάλογο σελίδων.

Δύο σημαντικά robots tags είναι το “index” και “follow” tags.

  • Το “index” tag δηλώνει στους crawler ότι επιτρέπεται να καταγράψουν και να ενσωματώσουν τη σελίδα στην κατάλογο τους.
  • Το “follow” tag δηλώνει στους crawler ότι επιτρέπεται να ακολουθούν τους συνδέσμους που βρίσκονται στη σελίδα και να καταγράψουν και αυτές τις σελίδες. Επίσης υπάρχουν διάφορα άλλα robots tags που μπορείτε να χρησιμοποιήσετε, όπως το “noindex” και “nofollow” tags που αντιθέτως αποτρέπουν τους crawler να καταγράψουν ή να ακολουθήσουν συγκεκριμένες σελίδες.

Canonical tags

Τα canonical tags είναι HTML meta tags που χρησιμοποιούνται για να προσδιορίσουν σε μια μηχανή αναζήτησης ποια είναι η “κύρια” ή “οριστική” σελίδα από διάφορες σελίδες που ενδέχεται να έχουν το ίδιο περιεχόμενο. Επιπλέον, επιτρέπει να αποφευχθούν οι ενδεχόμενες διπλότυπες σελίδες στην αναζήτηση και να βελτιωθεί η αναζήτηση.

Το canonical tag περιέχει την URL της “οριστικής” σελίδας και προστίθεται στo head section της σελίδας που θέλουμε να καθορίσουμε ως κύρια.

1<head>
2 <link rel="canonical" href="https://www.example.com/main-page" />
3</head>

Semantic tags

Τα semantic tags είναι HTML tags που χρησιμοποιούνται για να καθορίσουν τον σημασιολογικό χαρακτήρα του περιεχομένου μιας σελίδα. Συγκεκριμένα, επιτρέπουν στους προγραμματιστές να προσδιορίσουν τον τύπο του περιεχομένου που περιέχει ένα συγκεκριμένο tag, για παράδειγμα, είναι ένας τίτλος, κείμενο, λίστα, κλπ.

Παραδείγματα semantic tags περιλαμβάνουν το header tag (<header>),navigation tag (<nav>), main tag (<main>), article tag (<article>), section tag (<section>) και πολλά άλλα.

Τα semantic tags προσφέρουν πολύ περισσότερες πληροφορίες στις μηχανές αναζήτησης και στους screen readers και έτσι είναι σημαντικό να χρησιμοποιούνται σωστά κατά τη δημιουργία του κώδικα HTML της ιστοσελίδας.

Viewport tag

Το viewport είναι ένα HTML meta tag που χρησιμοποιείται για να καθορίσει τον τρόπο που ένα πρόγραμμα περιήγησης θα προβάλλει μια ιστοσελίδα ανάλογα με την συσκευή που χρησιμοποιεί ο χρήστης.

Schema markup tag

Το schema markup προσθέτεται στον κώδικα HTML της σελίδας με χρήση συγκεκριμένων tags που περιγράφουν τα δεδομένα που περιέχονται στη σελίδα. Μπορεί να περιέχει πληροφορίες όπως το όνομα, την κατηγορία, την αξιολόγηση και άλλες λεπτομέρειες σχετικά με ένα προϊόν, μια επιχείρηση, κλπ. Eίναι σημαντικό για το SEO, καθώς επιτρέπει στις μηχανές αναζήτησης να κατανοήσουν καλύτερα τον τύπο και το περιεχόμενο της ιστοσελίδας.

Product schema markup

1<div itemscope itemtype="http://schema.org/Product">
2  <h1 itemprop="name">Super Duper Widget</h1>
3  <img src="widget.jpg" alt="Picture of the Super Duper Widget" itemprop="image" />
4  <p>Price: <span itemprop="price" content="19.99">$19.99</span></p>
5  <p>Availability: <span itemprop="availability" content="InStock">In Stock</span></p>
6  <p>Product Description: <span itemprop="description">This is the best widget you will ever find. It's super duper.</span></p>
7</div>

Restaurant schema markup

1<div itemscope itemtype="http://schema.org/Restaurant">
2  <h1 itemprop="name">The Tasty Cafe</h1>
3  <img src="cafe.jpg" alt="The Tasty Cafe" itemprop="image" />
4  <p>Address: <span itemprop="address">123 Main St, Anytown USA</span></p>
5  <p>Phone: <span itemprop="telephone">555-555-5555</span></p>
6  <p>Price range: <span itemprop="priceRange">$$</span></p>
7  <p>Cuisine: <span itemprop="servesCuisine">American, Mediterranean</span></p>
8</div>

Local company schema markup

 1<div itemscope itemtype="http://schema.org/LocalBusiness">
 2  <h1 itemprop="name">Acme Soap Co.</h1>
 3  <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
 4    <span itemprop="streetAddress">123 Main St.</span>
 5    <span itemprop="addressLocality">Anytown</span>, 
 6    <span itemprop="addressRegion">State</span> 
 7    <span itemprop="postalCode">12345</span>
 8  </div>
 9  <span itemprop="telephone">(555) 555-5555</span>
10  <a itemprop="email" href="mailto:[email protected]">[email protected]</a>
11  <div itemprop="openingHours" content="Mo-Fr 09:00-17:00">
12  <p>Our store is open Monday through Friday from 9am to 5pm.</p>
13  </div>
14</div>


Η σωστή χρήση των HTML tags είναι σημαντική και βοηθά την στην κατανόηση της ιστοσελίδας απο τους browsers επιπλέον σας δίνει κάποια πλεονεκτήματα στο technical SEO τα οποία βοηθούν συμπληρωματικά στην καλύτερη κατάταξη στα αποτελέσματα αναζήτησης.