Sivut ja valikko

Moduuli 4: Sivut, ulkoasu ja toiminnot · Lukuaika: 7 minuuttia

Oppimistavoite: Tämän oppitunnin jälkeen osaat lisätä, nimetä uudelleen, siirtää ja poistaa sivuja sekä järjestää valikon alavalikon ja omien linkkien avulla. Tiedät myös, mitä tapahtuu vanhoille osoitteille, yhteystietosivulle ja virhesivulle.

Keskeiset käsitteet: sivu, osoite (slug), etusivu, valikko, alavalikko, väliotsikko, oma linkki, alatunnisteen linkit, yhteystietosivu, virhesivu (404), uudelleenohjaus

Miksi sivuston rakenne on tärkeä

Kävijä päättää muutamassa sekunnissa, löytääkö hän etsimänsä, ja se tapahtuu valikon kautta. Jos valikossa ei ole "Yhteystiedot", tai jos sivun nimi on "Info" vaikka sillä ovat hinnat, kävijä lähtee. Myös hakukoneet lukevat valikkoasi nähdäkseen, mitkä sivut ovat tärkeitä.

Schildersbedrijf Example aloittaa tekoälyn tekemästä ensimmäisestä versiosta: Etusivu, Palvelut, Meistä ja Yhteystiedot. Läpikäynnin jälkeen (oppitunti 2.4) maalari haluaa muuttaa kahta asiaa: oman sivun "Työtapa", jolla on vaiheet tarjouksesta valmiiseen työhön, ja Palvelut-kohdan alle kaksi sivua sisä- ja ulkomaalaukselle. Hän hoitaa sen kahdessa paneelissa: Sivut ja Valikko. Molemmat ovat ilmaisia: sivujen ja valikon hallinta ei kuluta muokkauksia.

Sivut-paneeli

Avaat paneelin vasemman reunan palkin kohdasta Sivut tai keskustelupaneelin oikean yläkulman sivunvaihtimella. Näet kaikki sivustosi sivut. Napsauta sivua, niin se avautuu esikatseluun muokattavaksi.

Mitä teet täällä:

• Lisää sivu: annat vain nimen. Uusi sivu saa otsikon ja tekstilohkon, jossa on ohjeteksti ("Kerro tässä, mitä tämä sivu käsittelee."). Pyydä sen jälkeen tekoälyä täyttämään sivu keskustelussa tai kirjoita teksti itse (oppitunti 3.2). Sivu tulee automaattisesti valikkoon, jos siellä on tilaa, ja alatunnisteen sivulinkkien sarakkeeseen.
• Muokkaa sivua: muutat sivukohtaisesti kenttiä Nimi ja Osoite ja napsautat Tallenna.
• Siirrä ylös ja Siirrä alas: sivujen järjestys. Valikko ja alatunnisteen sivulinkkien sarake seuraavat tätä järjestystä.
• Poista: sivustoeditori kysyy ensin, oletko varma, ja kertoo, kuinka moni sivustosi linkki osoittaa kyseiselle sivulle (valikossa, alatunnisteessa tai painikkeissa). Se poistaa nämä linkit samalla, jotta toimimattomia linkkejä ei jää. Voit palauttaa poistetun sivun kohdasta Versiot (oppitunti 3.5).

Etusivu on erityinen: sitä ei voi poistaa eikä siirtää, ja sen osoite on aina sivustosi pääosoite. Sivustolla voi olla enintään 30 sivua.

Uuden sivun voi pyytää myös keskustelussa ("Tee sivu Työtapa, jossa on neljä vaihetta tarjouksesta valmiiseen työhön"). Silloin tekoäly tekee sen heti sisältöineen. Se on ohje tekoälylle ja kuluttaa 2 muokkausta, koska sivustolle tulee uusi sivu (oppitunti 1.2). Kohdan Lisää sivu kautta se on ilmaista, mutta täytät sivun sen jälkeen itse tai erillisellä ohjeella.

Sudenkuoppa: uuden sivun ohjeteksti on esimerkkisisältöä. Jos unohdat sen, verkossa lukee "Kaksoisnapsauta tätä tekstiä kirjoittaaksesi sen itse". Käy jokainen uusi sivu läpi ennen julkaisua.

Nimi ja osoite: mitä tapahtuu, kun muutat niitä

Jokaisella sivulla on nimi ja osoite. Nimi on se, minkä kävijät näkevät valikossa ja otsikossa. Osoite (alan kielellä slug) on verkko-osoitteen viimeinen osa: osoitteessa www.example.com/werkwijze/ se on werkwijze. Käytä lyhyitä, tavallisia sanoja yhdysmerkeillä erotettuna, ilman isoja kirjaimia tai välimerkkejä.

Jos muutat nimeä, vanhaa nimeä käyttävät valikkokohdat ja alatunnisteen linkit saavat automaattisesti uuden nimen. Valikkokohta, jolla on oma valikkoteksti, säilyttää sen.

Jos muutat osoitetta, sivustosi sisäiset linkit toimivat edelleen: valikko, alatunniste ja painikkeet osoittavat itse sivulle, eivät vanhaan osoitteeseen. Vanha osoite kuitenkin katoaa. Kun seuraavan kerran valitset Julkaise, sivustoeditori poistaa tiedostot, jotka eivät enää kuulu sivustoon, jotta uudelleen nimetystä sivusta ei jää vanhaa osoitetta. Uudelleenohjausta (automaattista ohjausta vanhasta osoitteesta uuteen) ei tehdä. Vanhaa osoitetta käyttävä, esimerkiksi vanhan sähköpostin, Facebookin tai Googlen hakutulosten linkin kautta, päätyy virhesivulle.

Google suosittelee, että osoitteen muuttuessa vanha osoite ohjataan pysyvästi uuteen. Sivustoeditori ei siis tee sitä. Mitä tämä tarkoittaa sinulle?

• Valitse osoitteet huolella ennen kuin jaat sivustosi tai ilmoitat sen Googlelle (oppitunti 6.2).
• Jos osoitetta on myöhemmin kuitenkin muutettava, päivitä se, mihin itse pystyt vaikuttamaan: sähköpostin allekirjoituksen linkit, yritysprofiilisi ja sosiaalisen median profiilisi. Google löytää uuden osoitteen sivustokartan kautta, mutta vanha osoite voi antaa virheilmoituksia jonkin aikaa.
• Jos sinulla on paketti, sivustosi on tiedostoina webhotellipaketissasi, ja siellä uudelleenohjaus onnistuu palvelintason säännöllä. Se ei kuulu sivustoeditorin toimintoihin ja on edistyneille käyttäjille.

Virhesivu

Jokaisen julkaisun yhteydessä sivustoeditori tekee itse virhesivun (alan kielellä 404-sivu, verkkopalvelimen silloin antaman virhekoodin mukaan): visuaalisen ilmeesi mukaisena, valikon ja alatunnisteen kanssa, otsikolla "Tätä sivua ei ole olemassa" ja painikkeella "Etusivulle". Hakukoneet eivät ota sitä mukaan. Katso se kerran: kirjoita sivustosi osoitteen perään polku, jota ei ole, esimerkiksi /bestaat-niet/.

Valikko-paneeli

Kohdassa Valikko järjestät valikon. Muuta järjestystä vetämällä sivuja. Jos vedät sivun toisen sivun päälle, siitä tulee sen alavalikko. Näin Schildersbedrijf Example sijoittaa sivut "Sisämaalaus" ja "Ulkomaalaus" kohdan "Palvelut" alle. Tallenna muutokset napsauttamalla Tallenna valikko; niin kauan kuin et ole tehnyt sitä, näkyvissä on "Valikkoa ei ole vielä tallennettu".

Lisäksi voit:

• lisätä kohdan Oma linkki: verkko-osoitteen (https://...), puhelinnumeron (esimerkiksi tel:0612345678), sähköpostiosoitteen (mailto:...), sivustosi polun (/werkwijze/) tai ankkurin osioon (#offerte);
• lisätä kohdan Väliotsikko: otsikon, jota ei voi napsauttaa ja jonka alle vedät kohtia. Väliotsikko, jonka alla ei ole kohtia, poistuu tallennettaessa;
• antaa kullekin kohdalle oman Valikkoteksti-tekstin. Jos jätät sen tyhjäksi, käytetään sivun nimeä;
• valita sivulle Poista valikosta. Sivu näkyy silloin kohdassa Ei valikossa: sivu on edelleen olemassa, mutta sille pääsee vain osoitteen tietävä tai linkkiä seuraava.

Valikkoluettelossa voi olla enintään 8 kohtaa, samoin alavalikossa. Jos valikko on täynnä, uusi sivu ei tule siihen automaattisesti; näet silloin ilmoituksen ja lisäät sivun itse tai ryhmittelet sivuja alavalikkoon.

Valikon ulkoasua (palkin muotoa) et valitse täällä vaan kohdassa Visuaalinen ilme (oppitunti 4.2). Sisältö pysyy silloin samana.

Sudenkuoppa: sivut, jotka eivät kuulu valikkoon, kuten tietosuojaselosteesi tai lomakkeen jälkeinen kiitossivu, sijoitat kohtaan Ei valikossa. Linkki tietosuojaselosteeseen kuuluu kuitenkin alatunnisteeseen (oppitunti 7.1).

Hyvä yhteystietosivu

Lähes jokainen sivusto tarvitsee yhteystietosivun. Kävijät odottavat sitä valikon oikeaan reunaan tai viimeiseksi kohdaksi. Lisää sivulle:

• yrityksesi nimi, osoite (jos kävijät voivat tulla paikan päälle), puhelinnumero ja sähköpostiosoite;
• yhteydenottolomake (oppitunti 4.3);
• tarvittaessa aukioloajat tai tavoitettavuus ja kartta.

Sivustoeditorissa teet sen osiolla Yhteystiedot (kohdan Osiot tai kohdan Lisää osio valitsimen kautta, oppitunti 3.4). Se näyttää osoitteen, puhelinnumeron, sähköpostin, aukioloajat ja tarvittaessa lomakkeen. Huomaa: ensimmäisessä versiossa on usein esimerkkitietoja, kuten keksitty puhelinnumero. Korvaa ne (oppitunti 2.4).

Yksilölliset otsikot

Jos SEO-paneelissa ei ole omaa otsikkoa, sivustoeditori muodostaa selaimen välilehden ja Googlen otsikon sivun nimestä ja sivustosi nimestä, esimerkiksi "Työtapa | Schildersbedrijf Example"; etusivu saa sivustosi nimen. Kaksi samannimistä sivua saa siis saman otsikon. Anna jokaiselle sivulle oma nimi; parempia otsikoita kirjoitat oppitunnilla 6.1.

Sivustoeditorissa: näin teet sen

1. Avaa Sivut ja napsauta Lisää sivu. Kirjoita "Työtapa" ja napsauta Lisää.
2. Täytä sivu keskustelussa tai kirjoita itse; korvaa ohjeteksti.
3. Tarkista kohdassa Muokkaa sivua kenttä Osoite (esimerkissä werkwijze) ja napsauta Tallenna.
4. Avaa Valikko. Vedä "Työtapa" Palveluiden ja Yhteystietojen väliin. Vedä palvelusivut kohdan "Palvelut" päälle, niin saat alavalikon.
5. Napsauta Tallenna valikko ja katso valikko esikatselussa, myös näkymässä Puhelin.
6. Julkaise sivustosi uudelleen (oppitunti 5.1) ja kokeile itse kaikki valikon linkit.

Yhteenveto

• Kohdassa Sivut lisäät sivuja ja muutat nimeä, osoitetta ja järjestystä; poistaminen onnistuu, ja palautus tapahtuu kohdasta Versiot.
• Sisäiset linkit seuraavat uutta osoitetta, mutta vanha osoite katoaa ilman uudelleenohjausta: valitse osoitteet ennen kuin jaat sivustosi.
• Kohdassa Valikko vedät järjestyksen ja alavalikot paikoilleen, lisäät omia linkkejä ja väliotsikoita ja napsautat Tallenna valikko; luettelossa on enintään 8 kohtaa.
• Virhesivun sivustoeditori tekee itse, visuaalisen ilmeesi mukaisena ja etusivulle vievällä painikkeella.
• Jokaiseen sivustoon kuuluu yhteystietosivu oikeilla tiedoilla ja yksilölliset sivujen nimet.

Tietovisa

Tehtävä

Tehtävä A4.1: Sivusi ja valikkosi. Varmista, että sivustosi valikossa on vähintään kolme sivua, joiden joukossa on yhteystietosivu oikeine yhteystietoinesi, että jokaisella sivulla on oma nimi ja että olet julkaissut sivuston uudelleen. Kirjoita sen jälkeen AI Builder -sivustosi verkko-osoite (ilmainen osoitteesi, kuten schildersbedrijf-example-123.weboke.site, tai oma verkkotunnuksesi). Ohjelma avaa etusivusi kuten kävijä ja tarkistaa: onko valikossa vähintään kolme sivua, toimiiko jokainen valikkolinkki (sivu on olemassa eikä anna virheilmoitusta), onko yhteystietosivu olemassa ja onko jokaisella sivulla oma otsikko. Näet jokaisen kohdan kohdalla vihreän, oranssin tai punaisen merkin. Jos valitset kohdassa Visuaalinen ilme valikon ulkoasuksi Minimaalinen, sivulinkit näkyvät vain alatunnisteessa; käytä tässä tehtävässä ulkoasua, jossa linkit ovat valikkopalkissa.

Lisälukemista

• Ilmainen WordPress-kurssi 4.3: Valikot ja navigaatio
• Ilmainen kurssi Löydettävyys verkossa 7.4: Sisäiset linkit ja sivustosi rakenne
• Ilmainen kurssi Löydettävyys verkossa 8.3: Muuta tai uudista sivusto menettämättä löydettävyyttä
• Site moves with URL changes (Google Search Central, englanniksi): https://developers.google.com/search/docs/crawling-indexing/site-move-with-url-changes