Kun sivustosi näkyvyys ja löydettävyys google.fi:ssä on sinulle tärkeätä

Käytännön infoa hakukoneoptimointiin tägien ja lähdekoodin avulla

etusivulle.fi
Toimivaa hakukoneoptimointia

Hakukoneoptimointi auttaa Googlen etusivulle

Miten hakukoneoptimointi lähdekoodi ja tägit liittyvät toisiinsa

”Lue tämä sivu loppuun asti ja opi jotain tärkeätä hakukoneoptimoinnin ja lähdekoodin suhteesta!”


Miksi lähdekoodin lukeminen on tärkeätä kun haluaa tehdä tuloksellista hakukoneoptimointia?

Miten siis lähdekoodi ja tägit näkyvät hakukoneoptimoinnissa?

Hakukoneet kuten Google indeksoivat kaikki sivut käytännössä lukemalla niiden lähdekoodin. Aivan kuten oma selaimesikin tekee: ne lukevat lähdekoodin ja tekevät sen nojalla johtopäätöksensä.

Olisi naiivia ajatella voivansa tehdä toimivaa optimointia ilman, että katselee lähdekoodia omalla sivustollaan ja muilla sivustoilla. Usein hyviä oppiläksyjä on saatavissa juuri vieraita sivustoja katsellessa ja pohtiessa miten ne on teknisesti toteutettu

Hakukoneoptimointi edellyttää, että osaat lukea sivujen lähdekoodin ja tulkita siitä löytyvät tägit oikein

Normaalin nettisivun koodirakenne on yksinkertainen:
On ympäröivät <html> ja </html> tägit, jotka ovat koko sivun alun ja lopun merkit. Ja sitten on sivun ohjaava osio (<head> ja sulkutägi </head>) ja itse sivun koodiosio jossa <body>-tägi avaa sen ja </body>-tägi sulkee sen. Kaikki htlm-tägit aukeavat yhdellä ja sulkeutuvat avaavan tägin sulkutägillä, jossa erona on tuo kauttaviiva ”/” <-merkin perässä. Poikkeuksena tähän sääntöön muutamat kuten esimerkiksi <br /> ja <img /> <hr />, jotka sulkevat itse itsensä.

Tällä tavoin hakukoneoptimoinnin kannalta olennaiset asiat muodostuvat samoista loogisista osista kuin normaalikin html-sivu ja sen tägit. Keskeisiä asioitahan hakukoneoptimoinnissa ovat otsikko-tägit ja title-tägi sekä vaikkapa kuvien (<img>) yhteydessä niiden tiedostonimet ja ”alt” tarkenteet. Kun siis ymmärtää html-tägien koostumuksen, on helpompi lukea lähdekoodia oikein.

Otetaan esimerkiksi kaksi kappaletta aiemmin esitetty lause: ”On ympäröivät <html>” ja sen lähdekoodi: ”On ympäröivät <a href=”https://fi.wikipedia.org/wiki/HTML” rel=”nofollow” target=”_blank”>html</a>”. Lähdekoodissa olennaisena runkona on <a href=”” rel=”nofollow” target=”_blank”>html</a> jolla tekstissä esitetty linkki on tehty nofollow-tyyppiseksi jolloin linkkihyvä ei virtaa siitä ulos Wikipedian sivuun (jolla sitä on jo muutenkin tarpeeksi) ja lisäksi linkki on tehty aukeamaan omaan uuteen alalehteensä, jolloin linkittävä sivu jää auki uuden sivun alle.

Monimutkaiseltakin näyttävä lähdekoodi aukee kun sen purkaa osiinsa.

  • ”On ympäröivät <a href=”https://fi.wikipedia.org/wiki/HTML” rel=”nofollow” target=”_blank”>html</a>”.

    • On ympäröivät – TEKSTIÄ VAIN
    • < – tägin aloitusmerkkinä toimii pienempi kuin merkki
    • a– kyseessä on ankkuri-tägi ”a”
    • href=” – jonka kohde-URL merkitään lainausmerkkeihin ja osoitetaan termillä href=
    • https://fi.wikipedia.org/wiki/HTML – itse kohde URL, jolle käyttäjä menee klikatessaan linkkiä
    • ” – sulkeva lainausmerkki URLille
    • rel=” – hakukoneoptimoinnin kannalta olennainen rel-tägi joka ilmoittaa kohde-URLin suhdetta lähde-sivuun
    • nofollow” – nofollow tarkoittaa, että emme halua hakukoneen johtavan linkkihyvää kohde-URLiin
    • target=” – target merkitään aina lainausmerkkien sisään
    • _blank” – blank avaa oman tabin eli alalehden klikattaessa linkkiä
      . Muita vaihtoehtoja tälle ovat ”_blank _self _parent _top ja framen_nimi_johon_haluat_linkin_aukeavan”
    • > – a-tägin etuosan sulkeva suurempi kuin merkki
    • html – ankkuriteksti, eli se teksti jonka Google indeksoi tämän linkin yhteyteen
    • </a> – a-tägin sulkevan osan tägi
    • . – TEKSTIÄ VAIN

Mitä apuja on lähdikoodin selailuun saatavilla?

Suositeltavaa on käyttää selainten työkaluja lähdekoodin ja tägien selailuun kun teet optimointityötä

Tältä näyttää Chrome kehitystyökalut - mac-selaimella

Kannattaa heti alusta pitäen oppia käyttämään eri selainten (tässä Chrome) kehitystyökaluja eli developer tools -osiota.

Lue lisää robots-tägin kanssa käytettävistä vaihtoehdoista Googlen kehityssivuilta.

Kun aktivoit kehitystyökalut-osion selaimessasi saat lähdekoodin lisäksi runsaasti tietoa sivuston rakenteesta.

Chrome kehitystyökalut - edit html

Yllä näkymä, josta valitsemalla ”Edit as HTML” saa sellaiset tägit aukeamaan html-muotoon, jotka jostain syystä ovat lähdekoodissa muina tägeinä (esim jQuery-hakua varten).

Tämän sivun tehtävänä ei ole opettaa eri selainten työkaluja joten kuvat yllä toimikoot optimoijan lyhytoppaana niihin. Olennaista on ymmärtää lähdekoodin selailun tärkeys kun yritämme ymmärtää miksi jokin sivu palautuu hakukonelistaukseen (serp) ylipäätään ja miksi se palautuu sitten tietylle sijaluvulle ja tietylle sivulle.

Itse käytän lähes pelkästään Chromea ja Safaria…

Miten lähdekoodin selailu käytännössä tapahtuu hakukoneoptimointia tehdessä?

Kun tehtävänä on tehdä sivuston osalta optimointi työ alkaa alusta. Kerätään kaikki tieto mitä sivuston osalta on olennaista, jotta se olisi optimoitu työn päättyessä. Suuri osa, joskaan ei kaikki, ilmenee sivun lähdekoodia katsomalla ja vertaamalla sitä siihen hakutermiin, jolle sivusto optimoidaan. Usein asiakas haluaa optimoinnin jollekin paikkakunnan nimelle ja palvelulle, esim ”parvekelasitus hyvinkää”, mutta missään sivustolla ei ole sanaa hyvinkää sen tähden, että asikasyritys sijaitsee naapurikunnassa. No optimointityö lähdekoodin tutkimisen osalta alkaa siis sillä, että selvitetään lähdekoodista löytyykö ja jos löytyy, mistä löytyy hakutermin eri osat (hyvinkää) ja (parvekelasitus).

Paikkakunta löytyi osoitteesta, hakukoneoptimointi edellyttäisi enemmän

Vain yksi tulos haulla lähdekoodiin paikkakuntanimellä Hyvinkää - mac-selaimella

Ei tulosta haulla lähdekoodiin sanalla parvekelasitus - mac-selaimella

Toisella hakutermillä ”parvekelasitus” ei haulla lähdekoodiin löydy yhtään tulosta, mutta selitys sille miksi sivusto palautuu haullani löytyy META-TITLE-tägistä, jossa on sana ”Parvekelasit” ja META-keyword-tägistä, josta myös löytyy sana perusmuodossaan monikollisena ”parvekelasit”<meta name=”keywords” content=”parvekelasit, terassilasit, parvekekaihtimet, kaihtimet, […]”>. Google osaa tänä päivänä jo melko hyvin yleisimmät suomalaiset sanat eri muodoissaan ja siksi optimointi ei välttämättä kaadu jonkin sanan puutteeseen lähdekoodissa.

Tästä onkin hyvä alkaa puhua sivuston meta-tägeistä nimenomaan hakukoneoptimoinnin näkökulmasta.

Mitkä meta-tägit ovat seo:n kannalta tärkeitä?

Eri hakukoneet katsovat hieman eri meta-tägejä, mutta tämä esitys koskee Suomea ja siksi vain Googlea, jolla on täällä lähes 100% markkinaosuus.

Tärkein meta-tägi on <title>

Tärkein meta-tägi on title;

Title on Googlelle alun alkaen ollut tärkein yksittäinen tägi. Jos title ei ole kunnossa optimointitavoitteen kannalta on turha odottaa hyviä tuloksia. Eri aikoina Google on arvostanut title-tägiä eri tavoin ja puheissa tänä päivänä on Googlen siirtyminen semantiikan suuntaan, siis siihen että iso G tulkitsee merkityksiä ja tästä taasen seurausi se, että hakutermin sanan ei tarvitsisi olla täsmälleen oikeassa muodossa title-elementissä. Tämä ilmenee käytännössä esimerkiksi yllä sanotussa, jossa parvekelasitus ja parvekelasit näyttäisivät tuottavan vastinparin Googlen mielessä. Ne ovat semanttisesti samaa kauraa.

Titleä täydentää ”keywords” tägi, mutta sen merkitys Googlen tuloksissa on vain ohjaava. Esim Bing on perinteisesti käyttänyt sitä enemmän. Google ottaa sen vain mausteena ja siksi sillä ei voi ohjata suuntaa pois title-tägistä, mutta se auttaa tarkentamaan koko tekstin ja titlen luomaa kokonaiskuvaa.

Lue lisää title-tägistä tästä hyvästä Searchengineland.comin tuoreesta artikkelista.

Seuraavana hierarkiassa tulevat tekstin otsikko-tägit h1,h2,h3,h4,h5,h6 ja nimenomaan tässä alenevassa tärkeysjärjestyksessä. Perinteisesti on sanottu, että yksittäisen sivun h1,h2ja h3 tägien tulee olla kunnossa, siis niistä tulee löytyä aiottu hakutermi jossain muodossa.

Toiseksi tärkein meta-tägi on <h1>

Toiseksi tärkein meta-tägi on h1

VIHJE: Miksi lähdekoodin merkitys on hakukoneoptimoijalle suuri? Kun tein kokeiluhaun äsken tuolle hakusanalle ja otin ensimmäisenä tulevan liikkeen ja klikkasin auki sivuston, löytyi paikkakunta ”hyvinkää” etusivulta yhden kerran. Yksi kerta periaatteessa riittää tässä tapauksessa, koska liike tekee lasituksia omalla paikkakunnalaan (se siis sijaitsee Hyvinkäällä ja sen osoitekenttä sisältsi sanan ”hyvinkää”) mutta entä naapurikunnat? Wikipedian mukaan Hyvinkään naapurikunnat ovat Riihimäki ja Hausjärvi pohjoisessa, Mäntsälä idässä, Tuusula ja Nurmijärvi etelässä sekä Vihti ja Loppi lännessä. Löytyyko samainen lasitusliike jollain näistä hakutermi-kunnista, esim ”parvekelasitus loppi” jne. Tehdäänpä koe ja kirjoitetaan jokainen hakutermi google.fi:hin:

Hakukoneoptimointi auttaa Googlen etusivulle

  • parvekelasitus Hyvinkää
  • parvekelasitus Riihimäki
  • parvekelasitus Hausjärvi
  • parvekelasitus Mäntsälä
  • parvekelasitus Tuusula
  • parvekelasitus Nurmijärvi
  • parvekelasitus Loppi

Ja tulos? Ei yllättävä! Mainittu liike löytyy 14.7.2016 tehdyssä haussa anonyymitilassa vain yhden naapurikunnan nimen yhteydessä. Eli seitsemän maantieteellisesti relevanttia kuntaa ja tämä yritys tuottaa hakutuloksen vain kahdessa niistä. Joko firma ei halua lisää liikevaihtoa tai sitten se ei ole optimoinut sivustoaan. Veikkaan jäkimmäistä.

Koehaku parvekelasitus loppi hakusanalla. Hakukoneoptimointi auttaa Googlen etusivulle
Hakukoneoptimointi auttaa Googlen etusivulle
Hakukoneoptimointi auttaa Googlen etusivulle
Hakukoneoptimointi auttaa Googlen etusivulle
Hakukoneoptimointi auttaa Googlen etusivulle
Hakukoneoptimointi auttaa Googlen etusivulle