- Otsikkotunnisteet ( – ) määrittelevät selkeän sisältöhierarkian, josta hyötyvät käyttäjät, hakukoneet ja avustavat teknologiat.
- Yksittäinen, kuvaava H1-otsikko loogisesti järjestetyillä H2- ja H3-otsikoilla parantaa hakukoneoptimointia, saavutettavuutta ja yleistä luettavuutta.
- Semanttiset HTML-elementit ( , , , ) yhdessä otsikoiden kanssa luovat mielekkään ja helposti navigoitavan asiakirjarakenteen.
- Vältä avainsanojen täyttämistä, otsikkotasojen ohittamista ja otsikoiden käyttämistä vain tyyliin; anna CSS:n hoitaa ulkoasu ja otsikot rakenteen.
HTML-otsikkotagit ovat niitä pieniä koodinpätkiä, jotka hiljaa päättävät, tuntuuko sivusi selkeältä, käytettävältä ja ammattimaiselta vai kaoottiselta tekstiseinältä. Ne muokkaavat sitä, miten ihmiset lukevat sisältöäsi, miten näytönlukijat tulkitsevat sitä ja miten hakukoneet ymmärtävät, mistä kukin sivu todella kertoo.
Kun otsikot jäsennetään oikein HTML:ssä, luodaan käytännössä reaaliaikainen sisällysluettelo sekä ihmisille että koneille. Se tarkoittaa helpompaa navigointia, parempaa saavutettavuutta, enemmän kontekstia Googlelle ja, jos teet asiat oikein, parempia mahdollisuuksia sijoittua hakutuloksissa sinulle tärkeiden aiheiden osalta.
Mitä HTML-otsikot ovat ja miksi ne ovat niin tärkeitä
HTML-otsikot ovat tageja, jotka tulevat että jotka määrittelevät otsikot ja alaotsikot dokumentissa. Ne luovat selkeän tiedon hierarkian: on sivun pääaihe, esittelee tärkeimmät osiot, ja sen jälkeen jaa nuo osiot tarkemmin yksityiskohtiin. Ajattele niitä kuin kirjan rakennetta: kirjan nimi, lukujen otsikot, osioiden otsikot, alaosiot ja niin edelleen.
Toisin kuin geneeriset säiliöt, kuten otsikoilla on eksplisiittinen semanttinen merkitys. Selaimet, hakukoneet ja avustavat teknologiat voivat kaikki havaita ne ja päätellä, miten sisältö on ryhmitelty ja mitkä osat ovat tärkeämpiä. Siksi otsikoiden korvaaminen ylisuurilla kappaleilla tai satunnaisen tekstin muotoileminen suureksi ja lihavoituksi on huono idea sekä hakukoneoptimoinnin että saavutettavuuden näkökulmasta.
Otsikot palvelevat samanaikaisesti kolmea kohdeyleisöä: lukijoita, hakukoneita ja avustavia teknologioita. Lukijoille ne pilkkovat sisällön hallittaviksi lohkoiksi ja tekevät siitä helposti selattavan. Hakukoneille ne korostavat keskeisiä teemoja ja aliaiheita. Näytönlukijoille ne muodostavat navigoitavan jäsennyksen, jonka avulla käyttäjät voivat siirtyä heitä kiinnostaviin osiin sen sijaan, että heidän tarvitsisi kuunnella koko sivun rivi riviltä.
Huolimattomasti käytettyinä otsikot voivat tehdä enemmän haittaa kuin hyötyä. Tasojen ohittaminen, avainsanojen täyttäminen tai niiden käyttäminen vain visuaaliseen muotoiluun häiritsee dokumentin loogista rakennetta. Tämän hämmennyksen kokevat käyttäjät, jotka eksyvät, hakukoneet, jotka tulkitsevat aiheita väärin, ja näytönlukuohjelmien käyttäjät, jotka luottavat otsikoihin ensisijaisena navigointityökalunaan.
HTML-otsikkotagien tyypit (H1-H6) ja niiden rooli
HTML määrittelee kuusi otsikkotasoa: , , , , ja . Ne lähtevät tärkeimmästä ( ) vähiten tärkeäksi ( ). Käytännössä useimmat sivustot harvoin tarvitsevat enempää kuin , ja jos huomaat kurottautuvasi kohti tai Usein se on merkki siitä, että sisältösi kuuluu useille sivuille yhden jättimäisen vierityksen sijaan.
H1: sivun pääotsikko
H1 on ensisijainen otsikko, joka määrittelee sivun yleisen aiheen. Sen tulisi vastata kysymykseen: "Mistä tämä sivu kertoo?" sekä käyttäjille että hakukoneille. Tärkeytensä vuoksi se on luonnollinen paikka sisällyttää pääavainsana tai avainsanalauseke, jolla haluat sivun sijoittuvan – kuulostamatta robottimaiselta.
Paras käytäntö on käyttää yhtä H1-osiota sivua kohden. Nykyaikaiset hakukoneet pystyvät teknisesti käsittelemään useita H1-elementtejä, ja Google on nimenomaisesti sanonut, ettei se riko heidän järjestelmiään, mutta hakukoneoptimoinnin ja saavutettavuuden näkökulmasta yksi selkeä H1 pitää dokumentin jäsennyksen yksinkertaisena ja ennustettavana. Useat H1-elementit hämärtävät fokusta ja vaikeuttavat rakenteen tulkintaa.
H1-lomakkeen tulee olla ytimekäs, kuvaileva ja vakuuttava. Se on usein samanlainen kuin artikkelin tai tuotesivun näkyvä otsikko. Vaikka sen ei tarvitse olla identtinen HTML-koodin kanssa tagin näkyvän hakutuloksissa ja selaimen välilehdissä, H1-koodin tulisi selvästi linjata sen kanssa, jotta käyttäjät eivät ylläty hakutuloksen ja sivulla näkemänsä välisestä erosta.
H1:n ja HTML:n välinen ero tag
H1 näkyy sivun leipätekstissä, kun taas tagi sijaitsee <head>-osiossa ja näkyy hakutuloksissa ja selaimen välilehdillä. Molemmat ovat ratkaisevan tärkeitä hakukoneoptimoinnin kannalta, mutta niillä on eri roolit. H1 opastaa lukijoita heidän saapuessaan sivulle; tagi saa käyttäjät napsauttamaan sivua ensisijaisesti ja antaa hakukoneille tiiviin kuvauksen sivun pääaiheesta.
Se sopii täydellisesti H1:lle ja olla erilaisia, kunhan ne pysyvät läheisissä suhteissa. Monet hakukoneoptimoijat valitsevat hieman lyhyemmän, klikkauksille optimoidun (jotta vältetään katkaisu hakutuloksissa) ja kuvailevampi H1, joka on räätälöity sivulla jo oleville lukijoille.
H2: pääosioiden otsikot
H2-otsikot jakavat sisällön pääosioihin pääaiheen alle. Jos H1 olisi kirjan nimi, H2:t olisivat lukujen otsikot. Jokainen H2 esittelee erillisen aliaiheen, mikä helpottaa käyttäjien selaamaan sivua ja hakukoneiden näkemään ideoiden loogiset ryhmittelyt.
Hakukoneoptimoinnin näkökulmasta H2-algoritmit ovat ihanteellinen paikka sisällyttää aiheeseen liittyviä avainsanoja ja semanttisia variaatioita. Ne auttavat selventämään toissijaisia teemoja kuormittamatta H1:tä liikaa. Hyvin kirjoitetut H2:t voivat jopa olla sopivia rikastettuihin hakutuloksiin, kuten esittelykatkelmiin, erityisesti käyttöoppaissa ja luettelomuotoisissa artikkeleissa.
H3: H2-lohkojen alaosuudet
H3-elementit sijaitsevat H2-otsikoiden alla ja niiden avulla voit jakaa jokaisen pääosan pienempiin, helpommin sulateltaviin osiin. Pitkissä tai monimutkaisissa artikkeleissa H3-koodit estävät valtavia tekstiblokkeja ja ohjaavat lukijoita vaiheittaisten selitysten tai käsitteen yksityiskohtaisen erittelyn kautta.
Avainsanojesi pitkien variaatioiden sisällyttäminen H3-salasanahakuun voi vahvistaa aihekohtaista relevanttiutta. Luonnollisesti tehtynä tämä antaa hakukoneille rikkaamman semanttisen kartan sivusta ja pysyy samalla aidosti hyödyllisenä lukijoille, jotka haluavat yksityiskohtia eksymättä.
H4, H5 ja H6: syvemmät yksityiskohdat
H4-, H5- ja H6-luokkia käytetään H3-luokkien ja sitä korkeampien sisältöjen tarkempaan erittelyyn. Ne ovat harvinaisempia tyypillisillä markkinointi- tai blogisivuilla, mutta voivat olla hyödyllisiä teknisissä dokumenteissa, oikeudellisessa sisällössä tai tietosanakirjaresursseissa, joissa syvä sisäkkäisyys on väistämätöntä.
Vaikka alemman tason otsikoilla on vähemmän suoraa hakukoneoptimointipainoa, ne silti tarkentavat asiakirjan rakennetta ja auttavat navigoinnissa. Niiden liiallinen käyttö tai liian syvien hierarkioiden luominen voi kuitenkin hämmentää sekä käyttäjiä että avustavia teknologioita. Jos saavutat usein H5- tai H6-tason, harkitse uudelleen, pitäisikö sivu jakaa vai yksinkertaistaa.
Otsikot, semanttinen HTML ja dokumentin rakenne
Otsikot ovat vain yksi osa laajempaa semanttista HTML-ekosysteemiä, joka sisältää elementtejä, kuten , , , , , ja . Kun yhdistät otsikot näihin rakenneosiin, luot mielekkään asettelun, jonka selaimet voivat kääntää näytönlukijoiden esteettömyyspuuksi.
Ei-semanttinen lähestymistapa käyttää vain elementit, roolit ja luokat rakenteen simuloimiseksi. Esimerkiksi sivuston otsikon rivittäminen ja navigointisi voi matkia semantiikkaa, mutta se on monisanainen ja vaikeammin ylläpidettävä. Päädyt luottamaan kommentteihin ja tunnisteisiin vain pitääksesi asiat luettavina koodissa.
Semanttinen lähestymistapa korvaa nuo yleiset säilöt , , , ja . Sisällä laitat omasi ja sen sisällä linkkisi. Selaimet ja avustavat teknologiat ymmärtävät välittömästi, mikä alue on sivuston banneri, mikä navigointi ja mikä pääsisältö, ilman kasaa ARIA-rooleja.
Näin yksinkertainen ja hyvin jäsennelty asettelu voisi näyttää käsitteellisesti: huipputason (sivuston banneri), jota seuraa (ensisijainen navigointi), yksi (ensisijainen sisältöalue), valinnainen (täydentävää materiaalia) ja (koko sivustoa koskevat tiedot). Sisällä , sinulla voi olla itsenäisille osille (kuten blogikirjoituksille) ja ryhmitellylle sisällölle, joka ei ole itsenäinen artikkeli.
Jokainen tai tulisi yleensä sisältää oman otsikkonsa. Tästä otsikosta tulee kyseisen asiakirjan osan otsikko. Ilman sitä näytönlukijoiden ja hakukoneiden on vaikeampi ymmärtää, mihin kyseinen osa sivusta on tarkoitettu.
, , ja asiayhteydessä
määrittää sivun ensisijaisen sisällön, ja niitä tulisi olla täsmälleen yksi dokumenttia kohden. Tämä mahdollistaa avustavien teknologioiden ohittaa toistuvat Chrome-elementit (kuten valikot, sivupalkit ja bannerit) ja siirtyä suoraan ydinsisältöön yhdellä komennolla.
on tarkoitettu sivuaville tai täydentäville tiedoille. Tähän sijoitat sivupalkkeja, seliteruutuja, aiheeseen liittyviä linkkejä tai lisähuomautuksia. Sen implisiittinen maamerkkirooli on "täydentävä", mikä auttaa näytönlukijoiden käyttäjiä päättämään, tutkivatko he sitä vai jättävätkö he sen huomiotta.
edustaa sisältöä, joka voisi toimia itsenäisenä osana sivua, jolla se esiintyy. Ajattele uutisartikkeleita, blogikirjoituksia, foorumimerkintöjä tai tuotekortteja, jotka saattavat olla syndikoituja muualla. Jokainen tyypillisesti omalla otsikollaan ja voi sisältää alaosioita.
on tarkoitettu toisiinsa liittyvän sisällön ryhmittelyyn, kun mikään tarkempi semanttinen elementti ei sovi. Osioilla tulisi yleensä olla oma otsikko; ilman sitä ne eivät juurikaan lisää arvoa asiakirjan jäsennykseen ja saattavat aiheuttaa vain hälinää apuvälineteknologian käyttäjille.
Miten otsikot määrittelevät dokumentin rakenteen
Otsikot määrittelevät käsitteellisesti dokumentin rungon, vaikka selaimet eivät koskaan täysin toteuttaneet alkuperäistä HTML5-jäsennysalgoritmia. Näytönlukijoiden käyttäjät luottavat usein tähän implisiittiseen jäsennykseen hyppäämällä otsikosta toiseen tai katsomalla luettelon kaikista sivulla olevista otsikoista päättääkseen, minne siirtyä.
Näille käyttäjille järkevä otsikkojärjestys on ratkaisevan tärkeä. Ottaa jota seuraa ilman "välissä" on kuin hyppäisi luvusta 2 alaosioon 4.3 ilman osiota 3 kuromassa umpeen kuilua. Vaikka se ei olekaan tekninen virhe, se tekee rakenteesta vaikeammin seurattavan.
Älä käytä otsikoita vain saadaksesi tekstistä suurempaa tai paksumpaa. Tuollainen visuaalinen kikka rikkoo semanttisen rakenteen. Puhtaan tyylin osalta käytä CSS:ää (fonttikoko, fontin paino, marginaalit jne.) ja sopivia otsikoita vain silloin, kun olet todella esittelemässä uutta osiota tai alaosiota sisältöön.
Otsikot ja hakukoneoptimointi: miten hakukoneet käyttävät niitä
Hakukoneet jäsentävät otsikoita ymmärtääkseen aiheiden hierarkian ja suhteellisen tärkeyden. H1-osio kertoo sivun pääaiheen, kun taas H2- ja H3-otsikot paljastavat tärkeimmät aliaiheet ja niitä tukevat yksityiskohdat. Tämä rakenne antaa hakuroboteille nopean "kartan" ennen kuin he syventyvät koko tekstiin.
Sivut, joilla on selkeät ja loogiset otsikkohierarkiat, on yleensä helpompi indeksoida ja yhdistää asiaankuuluviin kyselyihin. Tutkimukset ja alan kokemukset osoittavat johdonmukaisesti, että hyvin jäsennelty sisältö voi saavuttaa korkeamman sijoituksen hakutuloksissa ja paremmat klikkaus- ja sitoutumismittarit kuin jäsentämättömät tekstiseinät.
Avainsanojen sijoittaminen otsikoihin on edelleen tärkeää, mutta ei läheskään niin tärkeää kuin vuosia sitten. Google luottaa nykyään hienostuneeseen semanttiseen analyysiin yksinkertaisen avainsanojen laskemisen sijaan. Tästä syystä otsikoiden tulisi asettaa selkeys ja hyödyllisyys etusijalle avainsanojen toiston sijaan.
Hyvät otsikot vastaavat usein suoraan käyttäjän aikomukseen tai heijastelevat tapaa, jolla käyttäjät muotoilevat kysymyksiä. Luonnollisten kysymysten kaltaiset alaotsikot ("Miten HTML-otsikot vaikuttavat saavutettavuuteen?") voivat auttaa sinua saamaan esittelykatkelmia, usein kysyttyjä kysymyksiä sisältäviä rich-tuloksia tai "Ihmiset kysyvät myös" -ruutuja, kun ne yhdistetään tiiviisiin ja hyvin jäsenneltyihin vastauksiin niiden alla.
Avainsanojen käyttö otsikoissa liioittelematta
On silti fiksua sisällyttää ensisijainen avainsanasi H1-osioihin ja kutoa siihen liittyviä termejä H2- ja H3-osioihin, joihin ne sopivat luonnostaan. Avainsanojen täyttäminen – saman lauseen toistaminen luonnottomasti jokaisessa otsikossa – on kuitenkin klassinen tapa laukaista roskapostisignaaleja ja vahingoittaa sekä sijoituksia että käyttäjien luottamusta.
Nykyaikainen lähestymistapa on käyttää otsikoita heijastamaan käyttäjien todellisia kysymyksiä ja aliaiheita. Sen sijaan, että kirjoittaisit viisi kertaa otsikon ”HTML-otsikot SEO”, voisit käyttää otsikoita, kuten ”Kuinka HTML-otsikot parantavat saavutettavuutta” tai ”Yleisiä virheitä otsikkotunnisteita käytettäessä”. Nämä muunnelmat rikastuttavat aiheen relevanttiutta näyttämättä manipuloivilta.
Ainutlaatuiset otsikot ja kannibalisaation välttäminen
Jokaisella sivulla tulisi olla yksilöllinen H1-osio ja yleensä yksilölliset pääotsikot. Saman H1-avainsanan toistaminen useilla sivuilla voi hämmentää hakukoneita siitä, minkä URL-osoitteen tulisi sijoittua tietyllä kyselyllä, ja se voi johtaa avainsanojen kannibalisaatioon, jossa omat sivusi kilpailevat keskenään.
Jos kaksi sivua käsittelee aidosti eri aiheita, käsittele niiden H1-otsikoita ja avainotsikoita vastaavasti. Jos ne ovat liian samankaltaisia, harkitse niiden yhdistämistä, niiden painopisteen eriyttämistä tai sisäisten linkkien muokkaamista sen osoittamiseksi, minkä tulisi olla kyseisen aiheen ensisijainen auktoriteetti.
Saavutettavuus: miksi otsikot ovat ratkaisevan tärkeitä osallistavalle suunnittelulle
Näytönlukuohjelmien ja muiden apuvälineiden käyttäjille otsikot ovat tärkein tapa tutkia ja ymmärtää sivua nopeasti. Monet ihmiset eivät kuuntele alusta loppuun; sen sijaan he ottavat esiin otsikkoluettelon, selaavat sitä kuin sisällysluetteloa ja hyppäävät suoraan tärkeisiin osiin.
Ilman selkeää ja loogista otsikkorakennetta käyttäjät joutuvat käytännössä vaeltamaan sokkona sivulla. Hyvin järjestetty H1–H3-elementtien sarja antaa heille sekunneissa mielikuvan sisällöstä. Jos olet joskus silmäillyt kirjan sisällysluetteloa päättääksesi, onko se lukemisen arvoinen, tämä tuntuu hyvin lähellä totuutta.
Otsikot ovat myös vuorovaikutuksessa semanttisten elementtien, kuten , , ja . Käyttäjät voivat siirtyä paitsi pääsisältöön tai navigointialueille, myös näiden alueiden otsikoiden välillä, mikä tekee pitkistä sivuista paljon vähemmän ylivoimaisia.
Saavutettavuusohjeet suosittelevat otsikoiden käyttöä loogisen ja ennustettavan jäsentelyn luomiseksi, välttäen aukkoja ja tarpeetonta monimutkaisuutta. Useimmille sivuille riittää yksi H1, useita H2-tasoja ja satunnaisia H3-tasoja. Syvät sisäkkäiset tasot ja epäjohdonmukaiset tasot usein vaikeuttavat asioita helpotuksen sijaan.
Yksi H1 sivua kohden: saavutettavuus ja hakukoneoptimointiin liittyvät näkökohdat
Vaikka teknisesti voit käyttää useita H1-elementtejä, käytännössä yksi H1 sivua kohden on ystävällisin ruudunlukijoiden ja hakukoneiden käyttäjille. Se merkitsee selvästi sisältöhierarkian "ylintäsolmua". Muita pääosioita voidaan edelleen esittää H2s-osioilla ja niiden jälkeen ilman, että kokonaiskuva vesittyy.
Historiallisesti oli olemassa ehdotus nimeltä "asiakirjan ääriviivat" -algoritmi, joka olisi sallinut useita H1-kohteita eri osioissa. Selaimet ja avustavat teknologiat eivät kuitenkaan ole koskaan toteuttaneet kyseistä algoritmia, joten siihen ei kannata luottaa. Käytännössä useat H1-algoritmit aiheuttavat yleensä enemmän hämmennystä kuin ratkaisevat.
Rakenne vs. visuaalinen koko: anna CSS:n hoitaa ulkoasu
Yksi yleisimmistä virheistä on otsikkotasojen valitseminen halutun fonttikoon perusteella tarvitsemasi hierarkian sijaan. Esimerkiksi H4-algoritmin käyttäminen vain siksi, että teemasi tyylittelee sen pienemmäksi, vaikka sisältö loogisesti kuuluu H2-algoritmin alle, rikkoo sivun rakenteellisen yhtenäisyyden.
Valitse otsikot aina semanttisen tason perusteella ja käytä sitten CSS-tekstin tasausominaisuus säätääkseen niiden ulkonäköä. Voit tehdä H2-sivusta visuaalisesti H3-sivua pienemmän, jos suunnittelu sitä vaatii; hakukoneet ja avustavat teknologiat eivät välitä pikselikooista, vain taustalla olevasta semantiikasta.
Visuaalisesti piilotetut otsikot vain rakennetta varten
Joskus suunnittelussa ei ole tilaa näkyvälle otsikolle, mutta sisältö tarvitsee sellaisen silti saavutettavuuden ja rakenteen vuoksi. Näissä tapauksissa kehittäjät käyttävät usein "vain näytönlukijalle" tarkoitettua CSS-luokkaa, joka piilottaa otsikon visuaalisesti pitäen sen kuitenkin apuvälineiden saatavilla.
Tyypillinen lähestymistapa sijoittaa elementin näytön ulkopuolelle tai leikkaa sen CSS:llä, jotta se ei vaikuta asetteluun, mutta pysyy esteettömyyspuussa. Esimerkiksi luokka, joka asettaa sijainnin absoluuttiseksi, leveyden ja korkeuden 1 pikseliksi ja leikkaa sisällön, voi saavuttaa tämän. Sitä tulisi kuitenkin käyttää säästeliäästi, koska suuri ero näkevien käyttäjien näkemän ja näytönlukijoiden kuuleman välillä voi olla hämmentävä.
Kaikki rakenteelliset aukot eivät tarvitse piilotettua otsikkoa, mutta tärkeimpien osioiden – kuten sisällysluettelon säilön tai näppäinavigointilohkon – kohdalla se voi tehdä jäsennyksestä yhtenäisemmän ilman, että se sotkee visuaalista suunnittelua.
Parhaat käytännöt tehokkaiden otsikoiden kirjoittamiseen
Tehokkaat otsikot ovat selkeitä, ytimekkäitä, kuvaavia ja johdonmukaisia koko sivulla. Ne kertovat käyttäjille tarkalleen, mitä seuraavalta sisällön osalta voi odottaa, ja ne ovat järkeviä, kun niitä lukee erikseen, kuten näytönlukijan otsikkoluettelo-valintaikkunassa.
Otsikoiden pitäminen suhteellisen lyhyinä – usein noin 3–5 sanaa – on hyvä nyrkkisääntö. Tuo ei ole ehdoton raja, mutta liian pitkät, lausemaiset otsikot hidastavat lukemista ja näyttävät kömpelöiltä asetteluissa. Jos tarvitset lisävivahteita, sijoita ne alla olevaan kappaleeseen äläkä tunge niitä otsikkoon.
Otsikoiden tyylin ja sävyn yhdenmukaisuus auttaa käyttäjiä myös luomaan mielikuvan sivustasi. Jos jotkut otsikot ovat kysymyksiä, toiset käskyjä ja jotkut epämääräisiä lauseita, jäsennys tuntuu sekavalta. Valitse sisältöä vastaava kaava ja pidä siitä kiinni niin paljon kuin mahdollista.
Looginen hierarkia ja tasojen eteneminen
Etene aina otsikkotasojen läpi järjestyksessä hyppäämättä alaspäin. H1-lohkon jälkeen käytä pääosioille H2-lohkoa. H2-lohkon sisällä käytä H3-lohkoa, ja jos sinun on todella jaettava lohkot osiin, siirry H4-lohkoon. Siirtyminen suoraan H2-lohkosta H4-lohkoon viittaa siihen, että jokin välitaso puuttuu, mikä hämmentää sekä avustavia teknologioita että ihmislukijoita.
Ajattele otsikoita sisäkkäisinä säilöinä, älä koristeellisina otsikoina. H3 on H2:n aiheen "sisällä", H4 on kyseisen H3:n sisällä ja niin edelleen. Jos uusi otsikko ei ole käsitteellisesti osa edellisen sisältöä, sen tulisi siirtyä yhden tason taaksepäin ja aloittaa uusi osio sen sijaan, että se pysyisi syvällä sisäkkäisenä.
Mitä otsikkotunnisteille ei saa tehdä
Vältä otsikoiden muuttamista avainsanojen kaatopaikoiksi. Sivujen täyttäminen toistuvilla lauseilla olisi saattanut toimia hakukoneoptimoinnin alkuaikoina, mutta nykyaikaiset algoritmit tunnistavat tämän roskapostiksi ja voivat alentaa sivujen sijoitusta hakutuloksissa sen vuoksi.
Älä piilota otsikkotekstiä hakukoneoptimoinnin vuoksi. CSS-temppujen käyttäminen avainsanojen piilottamiseen näkeviltä käyttäjille, mutta niiden jättämiseen merkintöihin, katsotaan sisällön peittämiseksi ja voi johtaa rangaistukseen. Jos teksti ei ole hyödyllinen käyttäjille, se ei kuulu otsikkoon.
Vältä samanlaisten otsikoiden käyttöä useilla eri sivuilla, ellei sisältö sitä todella vaadi. Kun jokaisella sivustosi blogikirjoituksella on sama H2-otsikko, kuten ”Johdanto” tai ”Loppupäätös”, nämä otsikot eivät juurikaan lisää arvoa hakukoneille tai näytönlukijoiden käyttäjille. Kuvailevammat otsikot (”Miksi HTML-otsikot ovat tärkeitä hakukoneoptimoinnille”) ovat paljon hyödyllisempiä.
Otsikon ensisijainen tehtävä on järjestää sisältöä, ei vain tehdä tekstistä suurempaa tai huomiota herättävämpää. Käytä CSS:ää ulkonäköön ja otsikoita rakenteeseen, niin vältät useimmat yleiset sudenkuopat, jotka vahingoittavat sekä käytettävyyttä että sijoituksia hakutuloksissa.
Edistyneet otsikkotekniikat: ARIA ja syvät hierarkiat
Harvinaisissa tilanteissa, joissa todella tarvitset yli kuutta hierarkiatasoa, ARIA voi laajentaa natiivin HTML:n tarjoamia ominaisuuksia. Attribuutin role="heading" ja aria-level-attribuutin avulla voit merkitä minkä tahansa elementin mielivaltaisen tason otsikoksi, jopa tason 6 jälkeen.
Esimerkiksi, käyttäytyy kuin seitsemännen tason otsikko avustaviin teknologioihin. Vastaavasti voit ohittaa todellisen H3-tason lisäämällä aria-level=”2″, jos sinun on käsiteltävä sitä semanttisesti H2-tasona, vaikka tämä on yleensä parempi ratkaista korjaamalla HTML-koodiasi.
Nämä tekniikat ovat tehokkaita, mutta niitä tulisi käyttää erittäin varoen. Tuki on hyvä tärkeimmissä näytönlukuohjelmissa, mutta syviin ja eksoottisiin hierarkioihin luottaminen voi vaikeuttaa sisällön analysointia ja ylläpitoa. Useimmissa tilanteissa sisällön jakaminen useille sivuille tai osioiden uudelleenjärjestely on siistimpi ja vankempi ratkaisu.
Muista, että tavoitteena ei ole esitellä, kuinka monta otsikkotasoa voit sisäkkäin sijoittaa, vaan auttaa käyttäjiä ja hakukoneita ymmärtämään sisältöäsi nopeasti ja tarkasti. Jos ääriviivat näyttävät fraktaalilta, on luultavasti aika yksinkertaistaa niitä.
Kun yhdistät harkitun otsikkohierarkian semanttisiin säilöihin, helppokäyttöisiin navigointimerkkeihin ja luonnolliseen avainsanojen käyttöön, saat sivuja, jotka on helppo lukea, helpompi indeksoida ja paljon tulevaisuudenkestävämpiä. Tämä yhdistelmä parantaa käyttäjätyytyväisyyttä, tehostaa sitoutumismittareita, kuten sivulla vietettyä aikaa ja vierityssyvyyttä, ja antaa hakukoneille kaikki mahdolliset signaalit siitä, että sisältösi ansaitsee näkyvyyttä kohdehauillasi.
