Lyhyt vastaus
Google Maps -kartan saa verkkosivuille kopioimalla upotuskoodin Google Mapsista ja liittämällä sen sivulle. Se vie minuutin. Ennen kuin teet niin, kannattaa tietää kaksi asiaa: kartta latautuu Googlen palvelimilta heti, kun sivu avataan, ja kävijän selain voi lähettää sen mukana Googlelle aiemmin tallennetun Googlen evästeen ennen kuin kävijä on valinnut mitään.
Siksi upotettu kartta kuuluu useimmiten evästesuostumuksen piiriin, ja se hidastaa sivua selvästi. Hyvä ratkaisu on kirjoittaa osoite tekstinä, lisätä linkki Google Mapsiin ja ladata varsinainen kartta vasta, kun kävijä sitä pyytää.
Kävijä tarvitsee yhteystietosivulta harvoin itse karttaa. Hän tarvitsee tiedon siitä, miten paikalle tullaan, ja napin, joka avaa reittiohjeet hänen omassa puhelimessaan.
Miten Google Maps -kartta lisätään verkkosivuille?
Helpoin tapa on Google Mapsin oma jakotoiminto. Hae yrityksesi osoite Google Mapsista, avaa jakovalikko ja valitse Googlen ohjeen mukaisesti Upota kartta ja sen jälkeen Kopioi HTML. Saat iframe-koodin, jonka liität sivun HTML-lohkoon tai julkaisujärjestelmän upotuskenttään.
Toinen tapa on Maps Embed API, jota käyttävät yleensä kehittäjät. Se vaatii Googlen API-avaimen, ja Googlen dokumentaation mukaan kaikki Maps Embed API -pyynnöt ovat maksuttomia ja käyttömäärä on rajoittamaton. Avaimen etu on, että karttaa voi ohjata tarkemmin parametreilla.
Kummassakin tapauksessa kannattaa tehdä kolme pientä korjausta koodiin. Anna kehykselle leveys ja korkeus, jotta sivu ei hypi kartan latautuessa. Lisää title-määrite, kuten ”Kartta: yrityksen nimi ja osoite”, jotta ruudunlukija osaa kertoa, mikä kehys on. Ja tarkista, että mukana on loading="lazy", joka on myös Googlen dokumentaation esimerkkikoodissa.
Laiska lataus auttaa vain, jos kartta on sivulla alempana. Jos kartta on yhteystietosivun yläosassa, se latautuu joka tapauksessa heti.
Mitä upotus tekee selaimessa
Kokeilimme tavallista Google Mapsin upotuskoodia yksinkertaisella testisivulla, jossa oli otsikko, osoite ja kartta. Sivu avattiin selaimessa, eikä mitään klikattu.
Ilman karttaa sivu teki yhden verkkopyynnön. Kartan kanssa selain teki ennen yhtäkään klikkausta kymmeniä pyyntöjä useaan Googlen verkkotunnukseen, muun muassa karttakuville, kirjasimille ja paikkatiedoille, ja siirsi satoja kilotavuja dataa.
Toinen havainto koski evästeitä. Kun samalla selaimella oli ensin käyty Googlen sivulla ja hyväksytty siellä evästeet, selain lähetti Googlen evästeen karttaa hakiessaan jo ennen kuin testisivulla oli tehty mitään valintaa. Uudella selaimella, jossa Googlen evästeitä ei ollut, kartta ei testissämme asettanut evästeitä.
Moni kävijä on käyttänyt Googlen palveluita samalla selaimella. Heidän kohdallaan kartta ei ole vain kuva, vaan yhteys Googleen, joka tunnistaa selaimen.
Tarvitseeko karttaupotus evästesuostumuksen?
Lähtökohtaisesti tarvitsee. Traficomin evästeohjeistuksen mukaan upotettujen sisältöjen näyttäminen voi vaatia sisältöä isännöivän kolmannen osapuolen evästeitä, jolloin käyttäjän tietoja siirtyy muulle kuin sille palveluntarjoajalle, jonka sivustolla käyttäjä on. Tällaisten evästeiden ei ohjeistuksen mukaan lähtökohtaisesti voida katsoa olevan välttämättömiä, ja niiden käyttöön tulee pyytää suostumus.
Laki ei koske vain evästeiden tallentamista vaan myös laitteelle jo tallennettujen tietojen käyttöä. Testimme mukaan tavallinen karttaupotus käyttää Googlen evästettä, jos selaimessa sellainen on, joten sitä kannattaa kohdella kuten muitakin kolmannen osapuolen upotuksia.
Evästeitä koskevat säännöt ja se, mitä välttämätön tarkoittaa, on käyty läpi artikkelissa evästeet verkkosivuilla.
Suostumus ja kartta käytännössä
Jos sivustolla on evästebanneri, kartan pitää odottaa bannerin lupaa. Banneri voi pysäyttää kävijämittarin mutta jättää upotukset lataamaan vapaasti, joten tarkista tämä erikseen: avaa yhteystietosivu yksityisessä ikkunassa ja katso selaimen kehittäjätyökaluista, hakeeko sivu Googlen karttapalvelua ennen kuin olet valinnut mitään.
Kävijäystävällisin toteutus on paikkamerkki. Kartan paikalla on kuva tai rauhallinen tausta, lyhyt teksti siitä, että kartta haetaan Googlelta, ja painike ”Näytä kartta”. Kartta ladataan vasta painalluksesta, ja kävijä on silloin itse valinnut sen.
Paikkamerkin viereen kannattaa aina laittaa myös suora linkki Google Mapsiin. Moni kävijä ei halua katsoa karttaa sivulla lainkaan, vaan avata reittiohjeet omassa sovelluksessaan.
Bannerin yleisimmistä virheistä, myös upotuksiin liittyvistä, on oma artikkelinsa evästebanneri oikein.
Hidastaako kartta sivustoa?
Hidastaa. Testissämme pelkkä upotettu kartta muutti yhden pyynnön sivun kymmenien pyyntöjen sivuksi, ja sivun latautumisen päättymistä kuvaava aika piteni moninkertaiseksi. Tarkat luvut riippuvat yhteydestä, laitteesta ja kartasta, mutta suunta on selvä.
Puhelimella ero tuntuu eniten. Kartta tuo mukanaan skriptejä, kuvia ja kirjasimia, jotka selaimen pitää ladata ja suorittaa, ja se kilpailee sivun muun sisällön kanssa samasta yhteydestä ja prosessorista.
Laiska lataus auttaa, kun kartta on sivun alaosassa ja kävijä ei aina vieritä sinne asti. Jos kartta on yhteystietosivulla ensimmäisenä, se ladataan heti. Silloin paikkamerkki on nopein ratkaisu, koska raskas osa ladataan vain niille, jotka sitä haluavat.
Nopeutta mittaavista luvuista ja siitä, miten ne luetaan, on artikkeli Core Web Vitals ja PageSpeed Insights.
Kun kartta on jokaisella sivulla
Jos kartta on sivupohjan alaosassa, joka näkyy jokaisella sivulla, se latautuu jokaisella sivulatauksella, myös niillä sivuilla, joilla kukaan ei etsi sijaintia.
Etusivulla ja muilla sivuilla riittää yleensä osoite tekstinä ja linkki reittiohjeisiin. Varsinaisen kartan paikka on yhteystietosivu, ja sielläkin mieluiten paikkamerkin takana.
Jos kartta on välttämätön osa palvelua, esimerkiksi useiden toimipisteiden haussa, kannattaa miettiä erikseen, millainen karttaratkaisu siihen sopii. Yksittäisen osoitteen näyttämiseen raskas upotus on ylimitoitettu.
Mikä on hyvä vaihtoehto upotetulle kartalle?
Hyvä vaihtoehto on yhdistelmä, jossa sijainti kerrotaan tekstinä, reittiohjeet avataan linkillä ja kartta ladataan vain pyynnöstä. Vaihtoehdot rinnakkain:
| Ratkaisu | Nopeus | Suostumus | Mihin sopii |
|---|---|---|---|
| Upotettu kartta | Raskas | Lähtökohtaisesti tarvitaan | Harvoin paras valinta yksittäiselle osoitteelle |
| Kartta klikkauksesta | Kevyt, kunnes klikataan | Kävijä valitsee itse | Yhteystietosivu |
| Linkki Google Mapsiin | Kevyin | Sivu ei lataa mitään Googlelta | Jokainen sivu, erityisesti puhelimella |
| Staattinen karttakuva rajapinnasta | Kevyempi kuin upotus | Kuva haetaan Googlelta | Kun visuaalinen kartta on tärkeä |
| Oma kuva sisäänkäynnistä | Kevyt | Ei yhteyttä Googleen | Kun paikka on vaikea löytää |
Useimmille pienille yrityksille paras yhdistelmä on osoite tekstinä, linkki reittiohjeisiin, kuva sisäänkäynnistä ja kartta klikkauksesta yhteystietosivulla.
Linkki Google Mapsiin ilman avainta
Suora linkki on kevyin tapa auttaa kävijää. Googlen Maps URLs -dokumentaation mukaan linkki ei vaadi API-avainta. Hakulinkki on muotoa https://www.google.com/maps/search/?api=1&query= ja perään tulee osoite, ja reittiohjeiden linkissä käytetään osoitetta https://www.google.com/maps/dir/?api=1&destination= ja määränpäätä.
Osoite pitää dokumentaation mukaan koodata URL-muotoon, jolloin esimerkiksi välilyönnit ja pilkut muutetaan merkeiksi, jotka kelpaavat osoiteriville.
Dokumentaation mukaan Android- ja iOS-laitteilla linkki avautuu Google Maps -sovellukseen, jos se on asennettu, ja muuten selaimeen. Puhelimella kävijä saa siis reittiohjeet suoraan omaan navigointiinsa yhdellä painalluksella, mikä on usein hyödyllisempää kuin sivulla näkyvä pieni kartta.
Staattinen karttakuva
Jos haluat sivulle näkyvän kartan ilman raskasta upotusta, Googlen Maps Static API palauttaa kartan kuvana, jonka voi lisätä sivulle tavallisena kuvana. Googlen dokumentaation mukaan sen käyttö vaatii projektin, jossa on laskutustili, ja rajapinnan käyttöönoton. Hinnoittelu ja käyttömäärät kerrotaan Googlen käyttö- ja laskutussivulla.
Staattinen kuva on kevyempi kuin interaktiivinen kartta, mutta kuva haetaan silti Googlen palvelimelta, kun sivu avataan. Tietosuojan kannalta se ei siis ole sama asia kuin kokonaan oma sisältö.
Moni pieni yritys pärjää ilman karttakuvaa kokonaan. Valokuva omasta sisäänkäynnistä kertoo kävijälle usein enemmän kuin kartta, koska kartta näyttää korttelin ja kuva oven.
Kartta, joka latautuu klikkauksesta
Klikkauksesta latautuva kartta on yksinkertainen toteuttaa, ja sen voi tehdä ilman erillisiä lisäosia. Periaate on tämä:
- Kartan paikalle tulee saman kokoinen alue, jotta sivu ei hypi.
- Alueella on lyhyt teksti, esimerkiksi ”Kartta ladataan Googlen palvelusta. Näytä kartta painikkeesta.”
- Painike on oikea painike, joka toimii myös näppäimistöllä.
- Vasta painalluksen jälkeen sivulle lisätään kartan upotuskoodi.
- Alueen viereen tulee aina linkki reittiohjeisiin.
Jos sivustolla on evästebanneri, sama kartta voi latautua automaattisesti niille kävijöille, jotka ovat jo hyväksyneet kolmannen osapuolen sisällöt bannerissa. Silloin kävijää ei pyydetä valitsemaan samaa asiaa kahteen kertaan.
Mitä yhteystietosivulla pitää olla kartan lisäksi?
Yhteystietosivulla pitää olla kaikki, mitä kävijä tarvitsee ottaakseen yhteyttä tai tullakseen paikalle, ilman että hänen tarvitsee avata karttaa. Tarkista ainakin nämä:
- osoite tekstinä, kopioitavassa muodossa
- puhelinnumero linkkinä, joka soittaa puhelimella yhdellä painalluksella
- sähköpostiosoite tai lomake
- aukioloajat ja poikkeusaukioloajat
- pysäköinti ja se, mistä ovesta tullaan sisään
- lähin joukkoliikenteen pysäkki
- tieto esteettömyydestä, kuten portaista tai hissistä
- yrityksen virallinen nimi ja y-tunnus
Kuvaile sisäänkäynti sanoilla, jos paikka on vaikea löytää: ”Sisäänkäynti pihan puolelta, sininen ovi apteekin vieressä.” Yksi lause säästää monta puhelua.
Osoite tekstinä ja yritysprofiili samaan linjaan
Kirjoitettu osoite on se, jonka hakukone, ruudunlukija ja kävijän puhelimen kopiointitoiminto varmasti ymmärtävät. Kartta kehyksen sisällä ei korvaa sitä.
Kirjoita nimi, osoite ja puhelinnumero täsmälleen samassa muodossa kuin Google-yritysprofiilissa. Kun tiedot vastaavat toisiaan, ne tukevat toisiaan paikallisessa haussa. Yritysprofiilin kuntoon laittamisesta on ohje Google Business Profile -oppaassa.
Samat tiedot voi merkitä sivulle myös rakenteisena tietona, jolloin hakukone saa ne yksiselitteisessä muodossa. Siitä kerrotaan artikkelissa strukturoitu data selkokielellä.
Saavutettavuus: kartta ei saa olla ainoa ohje
Upotettu kartta on ruudunlukijan ja näppäimistön käyttäjälle vaikea. Jos sijainti kerrotaan vain kartalla, osa kävijöistä ei saa tietoa ollenkaan.
Siksi osoite, reittiohje ja sisäänkäynnin kuvaus kirjoitetaan aina tekstinä. Kehykselle annetaan kuvaava title-määrite, ja klikkauksesta latautuvan kartan painike toimii näppäimistöllä ja näyttää kohdistuksen selvästi.
Nämä ovat samoja perusasioita, joita koko sivustolta vaaditaan. Niistä on enemmän artikkelissa verkkosivujen saavutettavuus.
Tarkista oma yhteystietosivusi
Oman sivun tilanteen voi tarkistaa muutamassa minuutissa ilman erillisiä työkaluja.
- Avaa yhteystietosivu selaimen yksityisessä ikkunassa ja pidä kehittäjätyökalujen verkkoliikenteen näkymä auki jo ennen kuin sivu latautuu.
- Älä koske evästebanneriin. Katso, näkyykö listalla pyyntöjä Googlen karttapalveluihin.
- Jos näkyy, kartta latautuu ennen kävijän valintaa, ja se pitää joko liittää suostumukseen tai muuttaa latautumaan klikkauksesta.
- Mittaa sivun nopeus kartan kanssa ja ilman sitä, esimerkiksi PageSpeed Insightsilla, ja vertaa tuloksia.
- Avaa sivu puhelimella ja kokeile, avautuvatko reittiohjeet yhdellä painalluksella.
Jos korjattavaa löytyy, aloita osoitteesta tekstinä ja reittiohjelinkistä. Ne auttavat kävijää heti, ja karttaratkaisun voi vaihtaa sen jälkeen rauhassa.
Yhteenveto
Google Maps -kartan upottaminen on helppoa, mutta upotus latautuu Googlelta heti sivun mukana, voi käyttää kävijän selaimessa olevaa Googlen evästettä ennen mitään valintaa ja hidastaa sivua selvästi. Traficomin linjan mukaan kolmannen osapuolen sisältöjen evästeisiin tarvitaan lähtökohtaisesti suostumus.
Useimmille pienille yrityksille paras ratkaisu on osoite tekstinä, suora linkki reittiohjeisiin, kuva sisäänkäynnistä ja kartta, joka ladataan vasta kävijän pyynnöstä.
Yhteystietosivun tärkein sisältö ei ole kartta vaan tieto siitä, miten paikalle tullaan ja miten yritykseen saa yhteyden.