Επικεφαλίδες και η δομή μιας σελίδας

Ενότητα 3: Η τεχνική βάση μιας σελίδας · Χρόνος ανάγνωσης: 11 λεπτά

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

Βασικές έννοιες: επικεφαλίδα (<h1> έως <h6>), κύρια επικεφαλίδα, υποεπικεφαλίδα, παράλειψη επιπέδου, σημασιολογική HTML, αναγνώστης οθόνης, μορφοποιημένο κείμενο που δεν είναι επικεφαλίδα, κείμενο alt, κενό alt="" για διακοσμητικά στοιχεία, όνομα αρχείου, κείμενο μέσα σε εικόνες

Οι επικεφαλίδες είναι ο πίνακας περιεχομένων της σελίδας σας

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

<h1>Bruidsboeketten op maat</h1>
  <h2>Zo werken we</h2>
    <h3>De kennismaking</h3>
    <h3>Het proefboeket</h3>
  <h2>Voorbeelden</h2>
  <h2>Veelgestelde vragen</h2>

Η <h1> είναι η κύρια επικεφαλίδα: για τι πράγμα είναι αυτή η σελίδα; Οι <h2> είναι τα κεφάλαια, οι <h3> οι παράγραφοι μέσα σε αυτά, και ούτω καθεξής έως την <h6>. Η εσοχή παραπάνω υπάρχει μόνο για να φαίνεται η δομή· στην πραγματική HTML δεν παίζει ρόλο.

Δύο ομάδες διαβάζουν πραγματικά αυτή τη δομή:

1. Άνθρωποι με αναγνώστη οθόνης. Ένας τυφλός ή μειωμένης όρασης επισκέπτης συχνά ζητά πρώτα από τον αναγνώστη οθόνης να απαριθμήσει όλες τις επικεφαλίδες και μετά μεταβαίνει στο τμήμα που αναζητά. Χωρίς πραγματικές επικεφαλίδες, η σελίδα είναι ένα ατελείωτο κομμάτι κειμένου.
2. Μηχανές αναζήτησης. Η Google χρησιμοποιεί τις επικεφαλίδες για να καταλάβει τι πραγματεύονται τα διάφορα τμήματα μιας σελίδας.

Τι λέει η Google για τις επικεφαλίδες

Για τις επικεφαλίδες κυκλοφορούν πολλοί μύθοι. Να τι λέει η ίδια η Google:

• Στον οδηγό SEO για αρχάριους της Google αναφέρεται ότι η σειρά των επικεφαλίδων δεν έχει σημασία για το Google Search και ότι δεν υπάρχει μαγικός αριθμός επικεφαλίδων που πρέπει να έχει μια σελίδα. Οι επικεφαλίδες σε λογική σειρά είναι όμως πολύ χρήσιμες για τους αναγνώστες οθόνης.
• Ο John Mueller της Google είπε σε ένα βίντεο (2019) ότι τα συστήματα της Google δεν έχουν πρόβλημα με πολλές επικεφαλίδες <h1> σε μία σελίδα. Η Google προσπαθεί να δουλέψει με την HTML όπως είναι: μία <h1>, πολλές, ή μόνο μορφοποιημένο κείμενο χωρίς πραγματικές επικεφαλίδες.
• Στην τεκμηρίωση για τους συνδέσμους τίτλου (μάθημα 3.1) η Google αναφέρει όμως μια περίπτωση όπου κάτι μπορεί να πάει στραβά: απουσία σαφούς κύριου τίτλου. Αν στην κορυφή υπάρχουν πολλές μεγάλες, εμφανείς επικεφαλίδες και δεν είναι σαφές ποια είναι ο κύριος τίτλος, η Google μπορεί να δυσκολευτεί να επιλέξει έναν καλό σύνδεσμο τίτλου. Η Google συνιστά να ξεχωρίζει σαφώς η κύρια επικεφαλίδα, για παράδειγμα ως η πρώτη ορατή <h1>.

Το συμπέρασμα αυτού του μαθήματος: μία σαφής <h1> ανά σελίδα είναι καλή συνήθεια, όχι επειδή αλλιώς σας τιμωρεί η Google, αλλά επειδή έτσι η σελίδα λέει ξεκάθαρα σε όλους τι πραγματεύεται. Αναγνώστες, αναγνώστες οθόνης και Google δεν μπορούν να το παραβλέψουν. Γι' αυτό ο έλεγχος στην άσκηση A3.2 δείχνει πράσινο όταν υπάρχει ακριβώς μία μη κενή <h1>, πορτοκαλί όταν υπάρχουν περισσότερες από μία και κόκκινο όταν δεν υπάρχει καμία.

Τι πηγαίνει συχνά στραβά

Δομήστε μια σελίδα που δίνει απάντηση

Μια καλή σειρά για σχεδόν κάθε σελίδα:

1. Κύρια επικεφαλίδα (<h1>) που λέει τι βρίσκει εδώ ο επισκέπτης. Συχνά μοιάζει με τον τίτλο από το μάθημα 3.1, αλλά δεν χρειάζεται να είναι ίδια. Ο τίτλος εμφανίζεται στα αποτελέσματα αναζήτησης, η κύρια επικεφαλίδα στην ίδια τη σελίδα.
2. Μια σύντομη εισαγωγή με την πιο σημαντική απάντηση αμέσως.
3. Υποεπικεφαλίδες (<h2>) για κάθε υποθέμα, διατυπωμένες ως κάτι που αναζητά ο αναγνώστης: "Πόσο κοστίζει μια νυφική ανθοδέσμη;" λέει περισσότερα από "Τιμές".
4. Όπου χρειάζεται, <h3> κάτω από μια <h2>, όχι μεμονωμένα.

Το μάθημα 7.3 εμβαθύνει στην ίδια τη συγγραφή. Εδώ μας ενδιαφέρει ο σκελετός.

Εικόνες: κείμενο alt και όνομα αρχείου

Μια μηχανή αναζήτησης δεν "βλέπει" μια φωτογραφία όπως εσείς. Η Google χρησιμοποιεί υπολογιστική όραση, αλλά αντλεί πολλά από το κείμενο γύρω από την εικόνα. Την πιο σημαντική πηγή την αναφέρει η ίδια η Google: το κείμενο alt.

<img src="/beelden/bruidsboeket-pioenrozen-wit.jpg"
     alt="Bruidsboeket met witte pioenrozen en eucalyptus">

Το κείμενο alt (εναλλακτικό κείμενο) έχει δύο ρόλους:

• Προσβασιμότητα: ένας αναγνώστης οθόνης το εκφωνεί σε όποιον δεν μπορεί να δει την εικόνα. Αν η εικόνα δεν φορτώσει, το πρόγραμμα περιήγησης το εμφανίζει στη θέση της φωτογραφίας.
• Κατανόηση: η Google χρησιμοποιεί το κείμενο alt, μαζί με την υπολογιστική όραση, για να καταλάβει τι απεικονίζεται. Αυτό βοηθά κυρίως στο Google Images.

Έτσι γράφετε ένα καλό κείμενο alt:

• Περιγράψτε τι φαίνεται και γιατί βρίσκεται σε αυτή τη σελίδα, σε μία σύντομη πρόταση.
• Χρησιμοποιήστε λέξεις-κλειδιά μόνο όταν ταιριάζουν φυσικά. Η Google προειδοποιεί ότι κείμενα alt γεμάτα λέξεις-κλειδιά δίνουν κακή εμπειρία και μπορεί να θεωρηθούν spam.
• Μια εικόνα που είναι μόνο διακόσμηση (μια γραμμή, ένα μοτίβο φόντου) παίρνει κενό alt: alt="". Τότε ο αναγνώστης οθόνης την παραλείπει. Η απουσία του χαρακτηριστικού alt είναι κάτι άλλο: τότε ένας αναγνώστης οθόνης μερικές φορές εκφωνεί το όνομα του αρχείου.
• Αν η εικόνα περιέχει σημαντικό κείμενο (ωράριο λειτουργίας, τιμή, φυλλάδιο), βάλτε αυτό το κείμενο και ως απλό κείμενο στη σελίδα. Το κείμενο μέσα σε μια εικόνα είναι δύσκολο να διαβαστεί από έναν αναγνώστη οθόνης και από μια μηχανή αναζήτησης.

Και το όνομα αρχείου βοηθά λίγο. Η Google συνιστά σύντομα, περιγραφικά ονόματα και αναφέρει τα image1.jpg ή pic.gif ως παραδείγματα όσων καλύτερα να αποφεύγετε. Το bruidsboeket-pioenrozen-wit.jpg λέει περισσότερα από το IMG_4032.jpg.

Η ταχύτητα και οι διαστάσεις των εικόνων εξετάζονται στο μάθημα 4.3.

Στην πράξη: επικεφαλίδες σε εργαλεία κατασκευής ιστοσελίδων

• Στον AI Builder της WebOké η πρώτη επικεφαλίδα μιας σελίδας γίνεται αυτόματα <h1> και όλες οι επόμενες επικεφαλίδες γίνονται <h2>. Έτσι κάθε σελίδα έχει ακριβώς μία κύρια επικεφαλίδα. Σε κάθε φωτογραφία μπορείτε να συμπληρώσετε μια περιγραφή· αυτή γίνεται το κείμενο alt. Ο έλεγχος SEO σας προειδοποιεί για φωτογραφίες χωρίς περιγραφή.
• Στο WordPress επιλέγετε στον επεξεργαστή μπλοκ, στο μπλοκ Επικεφαλίδα, το επίπεδο (H1 έως H6). Το θέμα συνήθως κάνει ήδη τον ίδιο τον τίτλο της σελίδας <h1>· στο κείμενο χρησιμοποιήστε τότε H2 και χαμηλότερα. Το κείμενο alt το συμπληρώνετε στην εικόνα, στη βιβλιοθήκη πολυμέσων ή στο μπλοκ.

Άλλα εργαλεία κατασκευής ιστοσελίδων λειτουργούν παρόμοια. Αν έχετε αμφιβολία, δείτε τον πηγαίο κώδικα (Ctrl+U) ή αναζητήστε με Ctrl+F το <h1.

Σύνοψη

• Οι επικεφαλίδες (<h1> έως <h6>) είναι ο πίνακας περιεχομένων της σελίδας σας, για αναγνώστες, αναγνώστες οθόνης και μηχανές αναζήτησης.
• Η Google δεν έχει πρόβλημα με πολλές <h1> ή με διαφορετική σειρά, αλλά συνιστά σαφή κύριο τίτλο. Μία σαφής <h1> είναι καλή συνήθεια.
• Επιλέξτε το επίπεδο με βάση τη δομή, όχι το μέγεθος γραμματοσειράς· κατά προτίμηση μην παραλείπετε επίπεδα.
• Ένα καλό κείμενο alt περιγράφει σύντομα τι φαίνεται· η διακόσμηση παίρνει alt=""· όχι συσσώρευση λέξεων-κλειδιών.
• Το σημαντικό κείμενο ανήκει στη σελίδα, όχι μόνο σε μια εικόνα.

Κουίζ

Άσκηση

Άσκηση A3.2: Μία κύρια επικεφαλίδα και λογική δομή. Συμπληρώστε τη διεύθυνση μιας σελίδας του δικού σας site. Το πρόγραμμα ανακτά τη σελίδα, μετρά τις επικεφαλίδες <h1> και δείχνει τη δομή των επικεφαλίδων ως πίνακα περιεχομένων. Βλέπετε αν υπάρχει ακριβώς μία μη κενή κύρια επικεφαλίδα, αν παραλείπονται επίπεδα και πόσες εικόνες δεν έχουν χαρακτηριστικό alt. Συμπληρώστε εκ των προτέρων πόσες <h1> πιστεύετε ότι υπάρχουν. Δεν έχετε δικό σας site; Χρησιμοποιήστε το www.rijksoverheid.nl.

Περαιτέρω ανάγνωση

• Google Search Central, οδηγός SEO για αρχάριους (επικεφαλίδες, κείμενο alt): https://developers.google.com/search/docs/fundamentals/seo-starter-guide
• Google Search Central, βέλτιστες πρακτικές για εικόνες: https://developers.google.com/search/docs/appearance/google-images
• W3C WAI, Headings (προσβάσιμες επικεφαλίδες): https://www.w3.org/WAI/tutorials/page-structure/headings/
• W3C WAI, κείμενα alt: https://www.w3.org/WAI/tutorials/images/