Tapio Kauranen

JavaScript-sivuston hakukoneoptimointi: näin Google ja tekoäly näkevät sivusi

Google osaa suorittaa JavaScriptiä, mutta se tekee sen viiveellä ja omilla ehdoillaan. Moni tekoälybotti ei suorita sitä lainkaan. Jos sivusi sisältö syntyy vasta selaimessa, osa siitä voi jäädä hakukoneilta näkemättä.

Lyhyesti, näin optimoit JavaScript- tai SPA-sivuston hakukoneille:

  • Tee tärkein sisältö valmiiksi HTML:ään palvelinrenderöinnillä tai staattisena.
  • Tee linkeistä tavallisia <a href>-linkkejä.
  • Anna jokaiselle näkymälle oma osoite ilman #-merkkiä.
  • Kirjoita title, kanoninen osoite ja robots-tagi jo HTML:ään.
  • Palauta puuttuvalle sivulle koodi 404, älä 200.

Tämä opas näyttää, miten Google käsittelee JavaScript-sivun, mitkä ovat yleisimmät ongelmat ja miten testaat oman sivustosi. Jokaisessa osiossa on demo, jolla voit kokeilla asian itse.

Eikö sivusi näy Googlessa lainkaan? Lue myös Miksi Google ei indeksoi sivua.

Miten Google indeksoi JavaScript-sivun?

Google käsittelee JavaScript-sivun kolmessa vaiheessa. Näin Google itse kuvaa ne ohjeessaan:

  1. Haku. Googlebot hakee sivun HTML:n ja poimii siitä linkit, joilla on href-osoite.
  2. Renderöinti. Sivu jää jonoon. Kun Googlella on resursseja, Chromium-selain suorittaa sivun JavaScriptin. Jonossa voi Googlen mukaan mennä muutama sekunti tai kauemmin.
  3. Hakemisto. Google lukee renderöidystä sivusta tekstin ja linkit ja lisää sivun hakemistoon.

Kun sisältö on valmiina HTML:ssä, Google näkee sen jo ensimmäisessä vaiheessa. Kun sisältö syntyy JavaScriptillä, se odottaa renderöintiä. Jos jokin menee siinä pieleen, sisältö jää näkemättä.

Renderöintijonoon pääsevät vain sivut, jotka vastaavat koodilla 200. Jos sivun HTML:ssä on noindex, Google voi jättää renderöinnin kokonaan väliin.

Käynnistä viereinen demo: sama hinnasto HTML:nä ja JavaScriptillä Googlebotin silmin.

Googlebot ja JavaScript-sivu

Sisältö JavaScriptillä

<title>Kampaamo Kulma</title>

<div id="app"></div>

<script src="/app.js"></script>

  1. Haku Valmis Googlebot hakee sivun HTML:n ja poimii siitä linkit. HTML:ssä on vain tyhjä sovelluksen paikka: ei tekstiä, ei linkkejä.
  2. Renderöintijono Valmis Sivu odottaa vuoroaan, kunnes Googlella on resursseja. Odottaa jonossa: Googlen mukaan muutaman sekunnin tai kauemmin.
  3. Renderöinti Valmis Chromium-selain suorittaa sivun JavaScriptin. Teksti ja 4 linkkiä löytyivät vasta nyt.
  4. Hakemisto Valmis Google lukee renderöidyn sivun ja lisää sen hakemistoon. Hinnasto on hakemistossa, jos renderöinti onnistui.

Linkit, jotka Googlebot löysi hakujonoon

  • /palvelut/
  • /ajanvaraus/
  • /blogi/
  • /yhteystiedot/

Tulos Näkyy viiveellä

JavaScript-sivun teksti ja linkit odottavat renderöintiä. Jos JavaScript kaatuu, Google ei näe niitä lainkaan, eivätkä JavaScriptiä suorittamattomat botit näe niitä koskaan.

CSR, SSR vai staattinen sivu: mitä hakukone saa ensimmäisessä HTML:ssä?

JavaScript-sivuston hakukoneoptimoinnissa tärkein kysymys on, missä sivun HTML tehdään. Vaihtoehtoja on kolme:

  • Selainrenderöinti (CSR). Palvelin lähettää lähes tyhjän sivun, ja selain rakentaa sisällön JavaScriptillä. Näin toimii tyypillinen SPA eli yhden sivun sovellus.
  • Palvelinrenderöinti (SSR). Palvelin tekee valmiin HTML:n jokaiseen pyyntöön, ja JavaScript herättää sivun eloon vasta sen jälkeen.
  • Staattinen sivu (SSG). HTML tehdään valmiiksi jo silloin, kun sivusto julkaistaan.

Google suosittelee palvelinrenderöintiä tai valmiiksi tehtyä HTML:ää, koska se nopeuttaa sivua ihmisille ja boteille, eivätkä kaikki botit osaa suorittaa JavaScriptiä.

Dynaamista renderöintiä, jossa boteille näytetään eri versio kuin ihmisille, Google kutsuu kiertotieksi, joka ei ole pitkän aikavälin ratkaisu. Sen tilalle Google neuvoo palvelinrenderöintiä, staattista renderöintiä tai hydraatiota.

SPA-sivuston optimointi alkaa siksi yleensä siitä, että tärkeät sivut tehdään palvelimella tai valmiiksi. Esimerkiksi Next.js, Nuxt ja Astro osaavat molemmat.

Kokeile viereistä demoa: vaihda renderöintitapaa ja katso, mitä ensimmäisessä HTML:ssä on.

Mitä ensimmäisessä HTML:ssä on?

Selainrenderöinti (CSR): ensimmäinen HTML

<head>

<title>Kampaamo Kulma</title>

</head>

<body>

<div id="app"></div>

<script src="/app.js"></script>

</body>

Palvelinrenderöinti (SSR): ensimmäinen HTML

<head>

<title>Hinnasto – Kampaamo Kulma</title>

</head>

<body>

<h1>Hinnasto</h1>

<li>Miesten hiustenleikkaus 29 €</li>

<li>Naisten hiustenleikkaus 39–49 €</li>

<li>Lasten hiustenleikkaus (alle 12 v.) 29 €</li>

<script src="/app.js"></script>

</body>

Staattinen sivu (SSG): ensimmäinen HTML

<head>

<title>Hinnasto – Kampaamo Kulma</title>

</head>

<body>

<h1>Hinnasto</h1>

<li>Miesten hiustenleikkaus 29 €</li>

<li>Naisten hiustenleikkaus 39–49 €</li>

<li>Lasten hiustenleikkaus (alle 12 v.) 29 €</li>

<script src="/app.js"></script>

</body>

Selaimessa: sama kaikilla kolmella tavalla

Kampaamo Kulma

Hinnasto

  • Miesten hiustenleikkaus 29 €
  • Naisten hiustenleikkaus 39–49 €
  • Lasten hiustenleikkaus (alle 12 v.) 29 €

Selaimessa sivu näyttää samalta tavasta riippumatta.

Selainrenderöinti (CSR)

  • Googlebot Näkee hinnat vasta renderöinnin jälkeen
  • Tekoälybotit Eivät näe hintoja
  • HTML tehdään Selaimessa joka kerta

Ongelmat ja korjaukset

Yleisimmät JavaScript SEO -ongelmat

Kun JavaScript-sivusto ei näy Googlessa, syy on yleensä jokin näistä kuudesta. Useimmat korjaukset ovat pieniä koodimuutoksia, kun tietää, mitä etsiä.

Viereinen kartta näyttää, missä vaiheessa kukin ongelma katkaisee sivun matkan hakutuloksiin tai tekoälyn vastaukseen.

Missä JavaScript-sivun matka katkeaa?
  1. Haku Googlebot hakee sivun ja seuraa sen linkkejä. 1 4
  2. Renderöinti Chromium suorittaa JavaScriptin, mutta ei vieritä eikä klikkaa. 3
  3. Hakemisto Google päättää renderöidyn sivun perusteella, lisääkö se sivun hakemistoon. 2 5
  4. Tekoälyn vastaus Tekoälybotit lukevat vain palvelimen lähettämän HTML:n. 6
  1. 1 Linkit, joita Google ei seuraa
  2. 2 Title, kanoninen ja noindex
  3. 3 Lazy loading ja loputon vieritys
  4. 4 Hash-reitit
  5. 5 Pehmeät 404-virheet
  6. 6 Tekoälybotit

1. Linkit, joita Google ei seuraa

Google löytää uudet sivut linkkejä seuraamalla. Se seuraa vain linkkejä, jotka ovat <a>-elementtejä ja joilla on href-attribuutti. Näin Google sanoo ohjeessaan.

JavaScript-sovelluksissa siirtymä tehdään usein klikkauksen käsittelijällä. Ihmiselle linkki toimii, mutta Googlelle se ei ole linkki lainkaan.

  • <a href="/hinnasto/"> toimii.
  • <a href="/hinnasto/" onclick="…"> toimii myös: JavaScript saa hoitaa siirtymän, kunhan href on paikallaan.
  • <span onclick="…">, <a onclick="…"> ilman href:iä ja href="javascript:…" eivät toimi.

Kehysten omat linkkikomponentit, kuten Next.js:n Link, tekevät oikean <a href>-elementin. Tarkista se silti valmiista sivusta.

Käynnistä viereinen demo: Googlebot seuraa valikosta vain linkit, joilla on osoite.

Mitä linkkejä Googlebot seuraa?
  • <a href="/palvelut/">Palvelut</a> a-elementti ja href
  • <a href="/hinnasto/" onclick="go(event)">Hinnasto</a> href on paikallaan, vaikka JavaScript hoitaa siirtymän
  • <span onclick="go('/ajanvaraus/')">Ajanvaraus</span> span ei ole linkki
  • <a onclick="go('/lahjakortit/')">Lahjakortit</a> href puuttuu
  • <a href="javascript:go('/blogi/')">Blogi</a> javascript: ei ole osoite
  • <span href="/yhteystiedot/">Yhteystiedot</span> href span-elementissä ei kelpaa

Sivut, jotka Googlebot löysi 2/6 sivua löytyi

  • /palvelut/
  • /hinnasto/
  • /ajanvaraus/
  • /lahjakortit/
  • /blogi/
  • /yhteystiedot/

Googlebot löysi 2 sivua kuudesta. Ajanvaraus, lahjakortit, blogi ja yhteystiedot jäivät löytymättä, koska niiden linkeissä ei ole kelvollista href-osoitetta.

2. Title, kanoninen osoite ja noindex JavaScriptillä

Moni JavaScript-sovellus vaihtaa sivun otsikon ja metatiedot vasta selaimessa. Google hyväksyy osan tästä, mutta ei kaikkea:

  • Title ja kuvaus. Google lukee JavaScriptillä asetetun titlen ja metakuvauksen renderöidystä sivusta. Botit, jotka eivät suorita JavaScriptiä, näkevät vain HTML:n version.
  • Kanoninen osoite. Google ei suosittele sen asettamista JavaScriptillä. Jos teet niin, käytä samaa osoitetta kuin HTML:ssä tai jätä kanoninen HTML:stä kokonaan pois.
  • noindex. Jos ensimmäisessä HTML:ssä on noindex, Google voi jättää renderöinnin väliin, eikä JavaScript ehdi poistaa sitä. Älä laita noindexiä sivun alkuperäiseen koodiin, jos haluat sivun hakemistoon.

Varmin tapa on kirjoittaa kaikki kolme jo palvelimen lähettämään HTML:ään.

Kokeile viereistä demoa: vertaa ensimmäistä HTML:ää ja JavaScriptin jälkeistä sivua kolmessa tapauksessa.

Head-osa ennen ja jälkeen JavaScriptin

Title

Ensimmäinen HTML

<head>

<title>Kampaamo Kulma</title>

</head>

JavaScriptin jälkeen

<head>

<title>Hinnasto – Kampaamo Kulma</title>

<meta name="description" content="Hiustenleikkaus alkaen 29 €.">

</head>

Google Toimii Googlessa

Google lukee JavaScriptillä asetetun titlen ja kuvauksen renderöidystä sivusta. Botit, jotka eivät suorita JavaScriptiä, näkevät vain yleisen otsikon.

Kanoninen

Ensimmäinen HTML

<head>

<link rel="canonical" href="https://kampaamokulma.fi/">

</head>

JavaScriptin jälkeen

<head>

<link rel="canonical" href="https://kampaamokulma.fi/hinnasto/">

</head>

Google Ristiriita

HTML sanoo, että sivun ensisijainen osoite on etusivu, ja JavaScript vaihtaa sen hinnastoon. Google ei suosittele kanonisen osoitteen muuttamista JavaScriptillä: osoitteen pitää olla sama kuin HTML:ssä.

noindex

Ensimmäinen HTML

<head>

<meta name="robots" content="noindex">

</head>

JavaScriptin jälkeen

<head>

<meta name="robots" content="noindex">

</head>

Google Ei hakemistoon

Kun Google näkee noindexin ensimmäisessä HTML:ssä, se voi jättää renderöinnin väliin. JavaScriptin poisto ei silloin ehdi vaikuttaa, eikä sivu päädy hakemistoon.

3. Lazy loading ja loputon vieritys

Lazy loading lataa kuvat ja sisällön vasta, kun niitä tarvitaan. Se nopeuttaa sivua, mutta yksi asia pitää muistaa: Google ei vieritä sivua eikä klikkaa sen nappeja.

Jos kirjoitukset, tuotteet tai arvostelut latautuvat vasta vierittäessä tai ”Näytä lisää” -napista, Google ei näe niitä. Googlen ohje neuvoo näin:

  • Lataa sisältö sen mukaan, onko se näkyvissä, esimerkiksi IntersectionObserverilla, älä vieritys- tai klikkaustapahtumien perusteella.
  • Käytä kuvissa selaimen omaa lazy loadingia (loading="lazy").
  • Anna loputtoman vierityksen jokaiselle osalle oma, pysyvä osoite, kuten /blogi/sivu/2/, ja linkitä osat toisiinsa.
  • Päivitä osoiterivi History API:lla, kun uusi osa latautuu.

Kokeile viereistä demoa: vaihda ihmisen ja Googlebotin näkymän välillä.

Mitä Googlebot näkee blogista?

Kampaamo Kulma

Blogi

  • Kuinka usein hiukset pitää leikata? ei latautunut
  • Värjäys kotona vai kampaamossa? ei latautunut
  • Lasten ensimmäinen hiustenleikkaus ei latautunut

<a href="/blogi/sivu/2/">Seuraava sivu</a>

Tästä alaspäin sisältö latautuu vasta vierittäessä kampaamokulma.fi/blogi/sivu/2/

  • Parran muotoilu kotona ei latautunut
  • Hiusten hoito talvella ei latautunut
  • Mitä kampaajalle kannattaa kertoa? ei latautunut

<a href="/blogi/sivu/3/">Seuraava sivu</a>

Tästä alaspäin sisältö latautuu vasta vierittäessä kampaamokulma.fi/blogi/sivu/3/

  • Kiharat hiukset: leikkaus ja hoito ei latautunut
  • Juhlakampaus ilman stressiä ei latautunut
  • Miksi hiukset sähköistyvät? ei latautunut

Löydetyt kirjoitukset 3/9 kirjoitusta

Googlebot ei vieritä sivua, joten se näkee vain ensimmäiset kolme kirjoitusta. Kuusi jää hakemiston ulkopuolelle.

4. Hash-reitit: #/hinnasto ei ole oma sivu

Osa SPA-sovelluksista vaihtaa näkymää osoitteen #-merkin jälkeisellä osalla, esimerkiksi kampaamokulma.fi/#/hinnasto. Selain ei lähetä #-merkin jälkeistä osaa palvelimelle, eikä Google yleensä tue sitä.

Silloin hinnasto, palvelut ja yhteystiedot eivät saa omaa osoitetta, eivätkä ne voi näkyä hakutuloksissa omina sivuinaan.

Korjaus on History API, jota Google myös suosittelee: jokaisella näkymällä on tavallinen osoite, kuten /hinnasto/. Varmista lisäksi, että osoite toimii suoraan avattuna: palvelimen pitää palauttaa sivu eikä virhettä.

Kokeile viereistä demoa: klikkaa sovelluksen valikkoa ja katso, mitä osoitteita Google saa.

Mitä osoitteita Google näkee?

Hinnasto

Osoitteet, jotka Google saa 1 sivu

  • kampaamokulma.fi/
  • kampaamokulma.fi/#/palvelut kampaamokulma.fi/
  • kampaamokulma.fi/#/hinnasto kampaamokulma.fi/
  • kampaamokulma.fi/#/yhteystiedot kampaamokulma.fi/

Selain ei lähetä #-merkin jälkeistä osaa palvelimelle, eikä Google yleensä tue sitä. Kaikki neljä näkymää ovat Googlelle yksi ja sama osoite.

5. Pehmeä 404: virhesivu, joka vastaa ”200 OK”

SPA-sovelluksen palvelin vastaa usein jokaiseen osoitteeseen samalla sivulla ja koodilla 200. Jos osoitetta ei ole, sovellus näyttää ”Sivua ei löytynyt”, mutta palvelin on jo kertonut Googlelle, että kaikki on kunnossa.

Google merkitsee tällaisen sivun Search Consolessa pehmeäksi 404-virheeksi (soft 404). Googlen suomenkielisessä ohjeessa tilan nimi on ”404-uudelleenohjaus”.

Google neuvoo kaksi korjausta:

  • Ohjaa JavaScriptillä osoitteeseen, johon palvelin vastaa koodilla 404.
  • Lisää virhesivulle JavaScriptillä <meta name="robots" content="noindex">.

Palvelinrenderöidyssä tai staattisessa sivustossa palvelin voi vastata koodilla 404 suoraan.

Kokeile viereistä demoa: sama puuttuva sivu ilman korjausta ja kahdella korjauksella.

Puuttuva sivu, joka vastaa ”200 OK”

Kampaamo Kulma

Hups, sivua ei löytynyt

Tätä palvelua ei enää ole. Katso kaikki palvelumme.

Ei korjausta

Palvelimen vastaus

GET /palvelut/permanentti/

HTTP/1.1 200 OK

Search Console

404-uudelleenohjaus Englanniksi: Soft 404

Palvelin sanoo ”200 OK”, mutta sivu kertoo, ettei sitä ole. Google merkitsee sen pehmeäksi 404-virheeksi.

Ohjaus 404-sivulle

Palvelimen vastaus

GET /palvelut/permanentti/

HTTP/1.1 200 OK → JavaScript ohjaa

GET /404/

HTTP/1.1 404 Not Found

Search Console

Ei löydy (404) Englanniksi: Not found (404)

Google saa oikean vastauksen: sivua ei ole. Poistettu sivu ei kuulu hakemistoon.

const service = services.find((item) => item.path === location.pathname);
if (!service) {
  // Palvelua ei ole: ohjaa osoitteeseen, johon palvelin vastaa koodilla 404.
  window.location.href = '/404/';
}

noindex

Palvelimen vastaus

GET /palvelut/permanentti/

HTTP/1.1 200 OK

+ <meta name="robots" content="noindex">

Search Console

URL-osoitteella on noindex-merkintä Englanniksi: URL marked ‘noindex’

Virhesivu pysyy poissa hakemistosta. Google lukee noindexin renderöidystä sivusta.

const service = services.find((item) => item.path === location.pathname);
if (!service) {
  // Palvelua ei ole: kerro hakukoneille, ettei virhesivua lisätä hakemistoon.
  const robots = document.createElement('meta');
  robots.name = 'robots';
  robots.content = 'noindex';
  document.head.appendChild(robots);
}

6. Tekoälybotit eivät suorita JavaScriptiä

ChatGPT, Claude ja Perplexity hakevat sivuja omilla boteillaan. Vercelin ja MERJ:n selvityksessä (joulukuu 2024) yksikään niistä ei suorittanut JavaScriptiä: ne lukevat vain palvelimen lähettämän HTML:n.

Selvityksessä JavaScriptiä suorittivat vain Googlebot, jota myös Gemini käyttää, ja Applen AppleBot. ChatGPT:n ja Clauden botit kyllä hakivat JavaScript-tiedostoja, mutta eivät suorittaneet niitä.

Määrät eivät ole pieniä: Vercelin verkossa GPTBot teki kuukaudessa 569 miljoonaa hakua ja Clauden botti 370 miljoonaa. Googlebotin vastaava luku oli 4,5 miljardia.

Jos hinnasto tai palvelukuvaus syntyy JavaScriptillä, tekoäly ei näe sitä eikä voi suositella sinua sen perusteella. Lue lisää tekoälyoptimoinnin oppaasta.

Kokeile viereistä demoa: vaihda hinnaston tekotapaa ja katso, mitkä botit näkevät hinnat.

Kuka näkee hinnaston?

Botti ja hakuja kuukaudessa

  • Googlebot ✓ Näkee hinnat Google, myös Gemini · suorittaa JavaScriptin 4,5 mrd
  • GPTBot ✕ Ei näe hintoja OpenAI (ChatGPT) · ei suorita JavaScriptiä 569 milj.
  • ClaudeBot ✕ Ei näe hintoja Anthropic (Claude) · ei suorita JavaScriptiä 370 milj.
  • AppleBot ✓ Näkee hinnat Apple · suorittaa JavaScriptin 314 milj.
  • PerplexityBot ✕ Ei näe hintoja Perplexity · ei suorita JavaScriptiä 24,4 milj.

Tulos 2/5 näkee hinnat

Vain JavaScriptiä suorittavat botit näkevät hinnat. Muut tekivät Vercelin verkossa yhteensä noin 963 miljoonaa hakua kuukaudessa.

Lähde: Vercel ja MERJ: The rise of the AI crawler (17.12.2024). Hakumäärät ovat Vercelin verkosta yhden kuukauden ajalta. Selvityksessä myös Metan ja ByteDancen botit jättivät JavaScriptin suorittamatta.

Näin testaat, näkeekö Google JavaScript-sisältösi

Testaa aina valmis sivu, älä vain koodia. Kolme tarkistusta riittää useimmiten:

  1. Lähdekoodi (Ctrl+U). Näyttää ensimmäisen HTML:n eli sen, minkä palvelin lähettää. Jos tärkeä teksti puuttuu täältä, se syntyy JavaScriptillä.
  2. Kehitystyökalut (F12). Elements-välilehti näyttää sivun sellaisena kuin selain sen rakensi JavaScriptin jälkeen.
  3. Search Consolen URL-tarkistus. Valitse ”Testaa live-URL-osoite” ja sitten ”Näytä testattu sivu”. Näet renderöidyn HTML:n, kuvakaappauksen ja JavaScript-konsolin viestit.

Jos sivusto ei ole omasi, Googlen Rich Results -testi näyttää saman renderöidyn sivun. Google neuvoo käyttämään näitä kahta työkalua.

Viereisen koodin voit liittää selaimen konsoliin millä tahansa sivulla. Se laskee, montako sanaa sivun tekstistä on ensimmäisessä HTML:ssä ja montako selaimessa.

Kokeile viereisiä välilehtiä: sama sivu kolmella työkalulla.

Sama sivu kolmella työkalulla

Ctrl+U

<title>Kampaamo Kulma</title>

<body>

<div id="app"></div>

<script src="/app.js"></script>

Ctrl+U Hinnat puuttuvat

Lähdekoodi näyttää ensimmäisen HTML:n eli sen, minkä palvelin lähettää. Hinnat eivät ole siinä: ne syntyvät JavaScriptillä.

F12

<body>

<div id="app">

<h1>Hinnasto</h1>

<li>Miesten hiustenleikkaus 29 €</li>

<li>Naisten hiustenleikkaus 39–49 €</li>

<li>Lasten hiustenleikkaus (alle 12 v.) 29 €</li>

</div>

F12 Hinnat näkyvät

Kehitystyökalut näyttävät sivun sellaisena kuin selain sen rakensi JavaScriptin jälkeen. Ero lähdekoodiin kertoo, mitä JavaScript lisäsi.

URL-tarkistus

<body>

<div id="app">

<h1>Hinnasto</h1>

<li>Miesten hiustenleikkaus 29 €</li>

<li>Naisten hiustenleikkaus 39–49 €</li>

<li>Lasten hiustenleikkaus (alle 12 v.) 29 €</li>

</div>

URL-tarkistus Google näki hinnat

Live-testi näyttää HTML:n sellaisena kuin Google sen renderöi, kuvakaappauksen ja JavaScript-konsolin viestit. Jos hinnat näkyvät täällä, Google näkee ne.

Vertaa itse: liitä selaimen konsoliin (F12 → Console)

// Liitä selaimen konsoliin (F12 → Console) sivulla, jonka haluat tarkistaa.
const html = await (await fetch(location.href)).text();
const words = (doc) => {
  const copy = doc.cloneNode(true);
  copy.querySelectorAll('script, style, noscript, template').forEach((el) => el.remove());
  const parts = new Intl.Segmenter('fi', { granularity: 'word' }).segment(copy.body.textContent);
  return [...parts].filter((part) => part.isWordLike).length;
};
const first = words(new DOMParser().parseFromString(html, 'text/html'));
const browser = words(document);
console.log('Ensimmäinen HTML: ' + first + ' sanaa. Selaimessa: ' + browser + ' sanaa.');

Esimerkki: tämä sivusto on staattinen Astro-sivusto

Siirsin tapiokauranen.com-sivuston WordPressistä Astroon 29.9.2026. Astro tekee jokaisesta sivusta valmiin HTML-tiedoston jo julkaisuvaiheessa, ja palvelin lähettää tiedoston sellaisenaan.

Siksi tämän oppaan teksti, otsikot ja linkit ovat jo ensimmäisessä HTML:ssä. JavaScriptillä toimivat vain lisät, kuten demot, haku ja teeman vaihto. Google ja tekoälybotit saavat saman tekstin kuin sinä.

Viereinen mittari tekee tälle sivulle saman vertailun kuin edellisen kohdan koodi.

Paina viereistä nappia: mittari hakee tämän sivun HTML:n ja vertaa sitä selaimen näkymään.

Mittaa tämä sivu

Vertaa tämän sivun ensimmäistä HTML:ää ja selaimen näkymää.

Tämän sivun sisältö ensimmäisessä HTML:ssä ja selaimessa
Mitta Ensimmäinen HTML Selaimessa
Tekstin sanoja – –
Linkkejä (a href) – –
Otsikoita (h1–h3) – –

Ensimmäisessä HTML:ssä –

Mittari tarvitsee JavaScriptin. Tämän sivun teksti näkyy silti, koska se on palvelimen lähettämässä HTML:ssä.

Usein kysyttyä JavaScript SEO:sta

Osaako Google lukea JavaScriptiä?

Osaa. Google suorittaa sivun JavaScriptin Chromium-selaimella ennen kuin se lisää sivun hakemistoon.

Renderöinti tapahtuu kuitenkin jonossa, ja Googlebot ei vieritä sivua eikä klikkaa sen nappeja. Jos JavaScript kaatuu tai lataa sisällön vasta vierittäessä, osa sisällöstä jää näkemättä.

Miten optimoin SPA-sivuston hakukoneille?

Tee tärkein sisältö valmiiksi HTML:ään palvelinrenderöinnillä tai staattisena. Käytä linkkeinä a-elementtejä, joissa on href-osoite, ja anna jokaiselle näkymälle oma osoite ilman #-merkkiä.

Kirjoita title, kanoninen osoite ja robots-tagi jo HTML:ään ja palauta puuttuvalle sivulle koodi 404. Testaa lopuksi Search Consolen URL-tarkistuksella.

Haittaako React tai Vue hakukoneoptimointia?

Ei itsessään. Ratkaisevaa on, mitä palvelin lähettää. Kun sovellus tehdään palvelinrenderöitynä tai staattisena, esimerkiksi Next.js:llä tai Nuxtilla, sisältö on HTML:ssä heti.

Pelkästään selaimessa rakentuva sovellus jättää sisällön renderöinnin varaan, eivätkä JavaScriptiä suorittamattomat botit näe sitä.

Tarvitsenko dynaamista renderöintiä?

Et. Google kutsuu dynaamista renderöintiä kiertotieksi, joka ei ole pitkän aikavälin ratkaisu, ja suosittelee tilalle palvelinrenderöintiä, staattista renderöintiä tai hydraatiota.

Näkevätkö ChatGPT ja muut tekoälyt JavaScript-sisällön?

Eivät yleensä. Vercelin ja MERJ:n selvityksessä (joulukuu 2024) OpenAI:n, Anthropicin, Metan, ByteDancen ja Perplexityn botit eivät suorittaneet JavaScriptiä. Googlen ja Applen botit suorittivat.

Kauanko renderöinti kestää?

Googlen mukaan sivu voi olla renderöintijonossa muutaman sekunnin tai kauemmin. Tarkkaa aikaa Google ei lupaa.

Miten näen, mitä Google näkee sivustani?

Search Consolen URL-tarkistuksella: valitse Testaa live-URL-osoite ja sitten Näytä testattu sivu. Näet renderöidyn HTML:n, kuvakaappauksen ja JavaScript-konsolin viestit. Jos sivusto ei ole omasi, käytä Googlen Rich Results -testiä.

Tekninen hakukoneoptimoija JavaScript-sivustolle

Teen teknistä hakukoneoptimointia osana Koodaava SEO konsultti -⁠palvelua.

Selvitän, mitä Google ja tekoälybotit sivustostasi näkevät, mitkä sivut puuttuvat hakemistosta ja miksi. Sen jälkeen korjaan syyt.

Lue lisää teknisestä hakukoneoptimoinnista ja hakukoneoptimoinnin auditoinnista, tai varaa ilmainen tsekki, niin katsotaan sivustosi yhdessä.

Suositeltu

Koodaava SEO konsultti

Korjauksia ja hakukoneoptimointia joka kuukausi, ja samaan hintaan kotisivujen ylläpito ja Google Ads.

760 € /kk

Tyypillisesti 8 tuntia kuussa. Hinta alv 0 %.

  • Hakukoneoptimointi
  • Kotisivujen ylläpito ja kehitys
  • Google Ads
  • Tsekkipalaveri kerran kuussa

Ei aloitusmaksua. Voit lopettaa koska tahansa.

Katso hinta ja sisältö

Tarvitsetko vain yhden asian? Räätälöity tilaus

Mitä tarkistan

  • Indeksoinnin tarkistus Selvitän, mitkä sivut Google on indeksoinut.
  • Indeksi ja sivukartta Vertaan Googlen indeksissä olevien sivujen määrää XML-sivukarttaan ja selvitän erot.
  • Robots-metatiedot Tarkistan, etteivät sivujen robots-metatiedot estä hakukoneita lukemasta sivuja.
  • Sivuston rakenne Varmistan, että kaikki sisältö on alle kahden klikkauksen päässä eikä yksikään sivu jää ilman linkkejä.
  • HTTP-virheet Etsin virhekoodit, kuten 404 (sivua ei löydy), ja korjaan ne.

Koko tarkistuslista

Ilmainen SEO tsekki

60 minuutin Google Meet -palaveri: katsotaan yhdessä, miten sivustosi näkyy Googlessa ja mitä kannattaa korjata ensin.

Varaa ilmainen SEO tsekki

Tai laita sähköpostia: tapio@tapiokauranen.com

Lue seuraavaksi