Verkkosivujen suunnittelu

Hakukoneystävällinen verkkosivusuunnittelu: tarkistuslista

Tarkistuslista käy suunnitteluvaiheessa läpi URL-rakenteen, otsikkohierarkian, nopeuden ja jäsennellyn datan, jotta vältät virheet, joita on vaikea korjata julkaisun jälkeen.

Aurora YazılımToimitustiimi 6 min lukuaika
Hakukoneystävällinen verkkosivusuunnittelu: tarkistuslista
Mitä ovat SEO-ystävälliset verkkosivut?

SEO-ystävälliset verkkosivut on rakennettu alusta asti niin, että hakukoneet voivat helposti indeksoida ja ymmärtää ne. Mielekkäät URL-osoitteet, yksi H1 jokaisella sivulla ja looginen otsikkohierarkia, nopea ja mobiiliystävällinen rakenne, yksilölliset title- ja description-tunnisteet, sisäiset linkit, sivukartta ja jäsennelty data ovat tämän suunnittelun perusosia.

Miksi SEO-ystävällinen sivusto rakennetaan alusta asti?

SEO mielletään usein palveluksi, joka lisätään vasta kun sivusto on julkaistu. Todellisuudessa suuri osa hakunäkyvyyteen vaikuttavista päätöksistä tehdään suunnittelu- ja kehitysvaiheessa: sivujen rakenne, URL-osoitteet, otsikoiden koodaus, kuvien lataus ja se, millä tekniikalla sivut tuotetaan.

Jos nämä päätökset tehdään väärin, jälkikäteen tehty SEO-työ on kuin rakennuksen perustusten paikkaamista ulkopuolelta. URL-rakenteen muuttaminen vaatii uudelleenohjauksia, ja raskaan käyttöliittymän keventäminen vaatii koodaamista uudelleen. Oikein tekeminen heti alussa on sekä halvempaa että kestävämpää.

Alla oleva tarkistuslista kokoaa tekniset ja rakenteelliset kohdat, jotka verkkohankkeen suunnittelu- ja kehitysvaiheessa kannattaa käydä läpi.

Sivuston rakenne ja URL-osoitteet

Hakukoneet löytävät sivuston linkkien kautta. Looginen hierarkia auttaa sekä käyttäjää että hakurobottia löytämään etsimänsä. Sivuston rakenne ja SEO liittyvät siksi suoraan toisiinsa: tärkeille sivuille pitää päästä etusivulta muutamalla klikkauksella.

  • Suunnittele jokaiselle palvelulle tai tuoteryhmälle oma pysyvä sivunsa.
  • Kirjoita URL-osoitteet lyhyinä ja luettavina, ilman ääkkösiä ja erikoismerkkejä: esimerkiksi /web-tasarimi/kurumsal-web-sitesi/.
  • Älä käytä URL-osoitteissa päivämääriä, tunnisteita tai turhia parametreja.
  • Vakioi isojen ja pienten kirjainten käyttö, loppukauttaviiva ja www-valinta yhteen tapaan.
  • Näytä sivun paikka sivustolla leipätekstipolulla (breadcrumb).
  • Älä jätä orpoja sivuja, joihin ei johda linkkiä mistään.

Otsikkohierarkia ja metatunnisteet

Visuaalisessa suunnittelussa otsikot erottuvat koolla ja värillä, koodissa taas H1–H6-tunnisteilla. Jos suunnittelija käyttää H1:tä, koska haluaa tekstin näyttävän isolta, tai kehittäjä koodaa kaikki otsikot samalla tunnisteella, hakukone ymmärtää sivun rakenteen väärin.

  • Jokaisella sivulla tulee olla vain yksi H1, joka kuvaa sivun pääaihetta.
  • Käytä H2- ja H3-otsikoita järjestyksessä niin, että ne heijastavat sisällön osioita.
  • Käytä visuaaliseen kokoon CSS-luokkaa, älä otsikkotunnistetta.
  • Jokaisella sivulla tulee olla yksilöllinen title-tunniste, jossa pääavainsana on lähellä alkua.
  • Kirjoita metakuvaus sivun hyödyistä; älä toista samaa tekstiä kaikilla sivuilla.
  • Määritä Open Graph -tunnisteet jakonäkymää varten.
htmlHead-tunnisteiden perusosat
<title>Yrityksen verkkosivujen suunnittelu | Yrityksen nimi</title>
<meta name="description" content="Lyhyt kuvaus, joka kertoo sivun hyödyn.">
<link rel="canonical" href="https://www.ornek.com/web-tasarimi/kurumsal-web-sitesi/">
<meta property="og:title" content="Yrityksen verkkosivujen suunnittelu">
<meta property="og:image" content="https://www.ornek.com/img/paylasim.jpg">

Nopeus ja Core Web Vitals

Sivun nopeus on suoraan sidoksissa suunnittelupäätöksiin. Suuri avausvideo, monta fonttipaksuutta tai raskaat animaatiokirjastot hidastavat sivua riippumatta siitä, kuinka hyvin koodaus on tehty.

Googlen Core Web Vitals -rajoja voi käyttää suunnittelun tavoitteina: LCP 2,5 sekuntia, INP 200 millisekuntia ja CLS 0,1. Mittareiden yksityiskohdat käymme läpi artikkelissamme mikä on Core Web Vitals ja käytännön keinot oppaassamme miten sivuston nopeutta parannetaan.

  • Kuvat WebP- tai AVIF-muodossa, oikeassa koossa ja leveys- ja korkeustiedoilla.
  • Näytön ulkopuoliset kuvat latautuvat viiveellä; pääkuva etusijalla.
  • Fontit WOFF2-muodossa, vain tarvittavilla paksuuksilla ja merkistöllä.
  • Ei käyttämätöntä CSS:ää eikä JavaScriptiä; ei-kriittiset skriptit lykätty.
  • Välimuisti, pakkaus ja tarvittaessa CDN käytössä.

Mobiiliystävällisyys ja saavutettavuus

Google käyttää sivustojen indeksoinnissa ensisijaisesti mobiiliversiota. Mobiilissa piilotettu tai lyhennetty sisältö voidaan katsoa hakukoneen silmissä puutteelliseksi. Siksi mobiilisuunnittelussa sisältöä ei kannata leikata vaan asettelu on rakennettava uudelleen; lisätietoja sivulta mobiiliystävällinen suunnittelu.

Saavutettavuus ja SEO menevät myös monessa kohdin päällekkäin. Kuviin liitetty mielekäs vaihtoehtoinen teksti, kuvaavat linkkitekstit, oikea otsikkojärjestys ja riittävä värikontrasti helpottavat sekä vammaisten käyttäjien että hakukoneiden sisällön ymmärtämistä.

Tekniset SEO-asetukset suunnittelussa

Näkymättömät mutta kriittiset tekniset asetukset ratkaisevat, miten sivusto indeksoidaan. Teknisen SEO:n suunnittelussa nämä kohdat on tarkistettava:

  • Koko sivusto avautuu https-yhteydellä ja http-osoitteet ohjataan pysyvästi.
  • XML-sivukartta päivittyy automaattisesti ja se on lähetetty Search Consoleen.
  • robots.txt estää vain alueet, joita todella ei pidä indeksoida.
  • Jokaisella sivulla on oikea canonical-osoite; suodatus- ja lajittelusivut eivät tuota kaksoissisältöä.
  • Käytössä on oma, toimiva 404-sivu; rikkinäisiä linkkejä ei ole.
  • Monikielisillä sivustoilla käytetään hreflang-tunnisteita ja omaa URL-osoitetta kutakin kieltä varten.
  • Sisältö näkyy HTML:ssä myös ilman JavaScriptin suoritusta.
textYksinkertainen robots.txt
User-agent: *
Disallow: /panel/

Sitemap: https://www.ornek.com/sitemap.xml

Jäsennelty data

Jäsennelty data kertoo hakukoneelle vakiomuotoisella kielellä, mitä sivun tiedot tarkoittavat: tämä on yritys ja tämä sen osoite, tämä on tuote ja tämä sen hinta, tämä on usein kysytty kysymys. Schema.org-sanasto ja JSON-LD-muoto ovat yleisimmin käytetty tapa.

Jäsennelty data ei nosta sijoitusta suoraan, mutta se tukee kelpoisuutta rikastettuihin hakutuloksiin ja sisällön oikeaa ymmärtämistä. Merkintöjen on vastattava täsmälleen sivulla todella näkyviä tietoja.

  • Yrityssivustoilla Organization tai LocalBusiness
  • Palvelu- ja tuotesivuilla Service tai Product
  • Blogiartikkeleissa Article, leipätekstipolussa BreadcrumbList
  • UKK-osioissa FAQPage
htmlJSON-LD-esimerkki Organization-tyypille
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Organization",
  "name": "Yrityksen nimi",
  "url": "https://www.ornek.com/",
  "logo": "https://www.ornek.com/img/logo.png",
  "telephone": "+90-000-000-00-00"
}
</script>

Sisältö- ja sisäisten linkkien suunnitelma

Vaikka tekninen perusta olisi kuinka vankka, hakukoneen tuo kävijän luo sisältö. Kun suunnitteluvaiheessa määritellään, mihin hakutarkoitukseen kukin sivu vastaa, tekstialueet ja osiot voidaan suunnitella sen mukaisesti. Avainsanatutkimus kannattaa tehdä yhdessä sivukartan kanssa.

Sisäiset linkit siirtävät sivujen välillä sekä käyttäjää että sijoitusvoimaa. Linkitä palvelusivuilta asiaankuuluviin blogiartikkeleihin ja artikkeleista palvelusivuille luontevilla, kuvaavilla teksteillä. Käytä “klikkaa tästä” -tekstin sijaan mielekkäitä ilmauksia, kuten “yrityksen verkkosivujen suunnittelu”.

Kun uudistat olemassa olevaa sivustoa, tämän suunnitelman vertaaminen vanhaan sisältöön estää arvokkaiden sivujen katoamisen. Uudistusvaiheessa huomioitavat asiat olemme koonneet oppaaseen verkkosivujen uudistaminen; muut suunnitteluartikkelimme löydät verkkosivukategoriasta.

Mittaaminen julkaisun jälkeen

SEO-ystävällistä sivustoa tulee mitata julkaisupäivästä alkaen. Lisää sivusto Search Consoleen, lähetä sivukartta ja seuraa indeksointi- ja Core Web Vitals -raportteja. Seuraa analytiikkatyökalussa orgaanista liikennettä, laskeutumissivuja ja konversioita erikseen.

Päivitä sisältöä ja otsikoita sen mukaan, mitkä sivut ovat ensimmäisten kuukausien aikana saaneet näkyvyyttä, millä hakukyselyillä sivusto on näkynyt ja millaiset klikkausprosentit ovat. Tämä on jatkuvaa työtä; säännölliseen raportointiin ja kehittämiseen saat tukea SEO- ja analytiikkapalvelustamme. Myös nopeuden jatkuva seuranta eli nopeus- ja suorituskykyoptimointi kannattaa sisällyttää tähän aikatauluun.

Usein kysytyt kysymykset

01Tuoko SEO-ystävällinen sivusto ykkössijan?

Mikään suunnittelu ei voi luvata tiettyä sijoitusta. SEO-ystävällinen rakenne luo pohjan sille, että sivusto indeksoidaan oikein, ymmärretään ja tarjoaa hyvän kokemuksen; sijoituksen ratkaisevat yhdessä sisällön laatu, kilpailu ja luottamussignaalit.

02Onko nykyinen sivustoni SEO-ystävällinen, mistä sen tietää?

Search Consolen indeksointi- ja käyttökokemusraportit, PageSpeed Insights -tulokset ja sivun lähdekoodin otsikkorakenne antavat hyvän lähtökohdan. Kattava tekninen läpikäynti paljastaa myös piilevät ongelmat, kuten rikkinäiset linkit ja kaksoissisällön.

03Sopivatko JavaScriptillä tehdyt sivustot SEO:lle?

Voivat sopia, mutta sisältö on tarjottava hakukoneelle valmiina HTML:nä. Palvelinpuolen renderöintiä tai staattista tuotantoa käyttävät ratkaisut poistavat tämän ongelman alusta asti.

04Milloin SEO-työ tuottaa tulosta?

Aika vaihtelee sivuston iän, kilpailun ja sisällön määrän mukaan. Teknisten korjausten vaikutus alkaa näkyä indeksoinnin jälkeen, kun taas sisällön ja auktoriteetin kasvu on yleensä useiden kuukausien prosessi.

SEO-ystävälliset verkkosivut siirtävät hakunäkyvyyden pois jälkikäteen lisättävän kerroksen asemasta sivuston perustaksi. Jos haluat toteuttaa tämän listan projektissasi alusta asti URL-rakenteesta jäsenneltyyn dataan, tutustu palveluumme hakukoneystävälliset verkkosivut; jos suunnittelet uutta sivustoa, tutustu yleiseen verkkosivujen suunnittelun lähestymistapaamme.