Animatsioon iseenesest ei kahjusta SEO-d. Google ei langeta otsingupositsiooni lehel oleva liikumise pärast. Ta loeb HTML-i ning mõõdab kiirust ja stabiilsust päris kasutajate andmete põhjal. Probleemid tekivad siis, kui animatsioon peidab sisu otsinguroboti eest või koormab lehte sedavõrd, et Core Web Vitalsi näitajad langevad punasesse.
Seega on põhiküsimus: kas Google saab lehte lugeda enne animatsiooni käivitumist?
Mida Google tegelikult mõõdab
Rohke animatsiooniga veebilehe puhul on tähtsad kaks asja.
1. Renderdatud HTML-i sisu. Googlebot paneb lehed renderdusjärjekorda. Kui ressursid võimaldavad, renderdab kasutajaliideseta Chromium lehe ja käivitab JavaScripti. Google indekseerib selle, mida ta saadud HTML-ist leiab. Ta järgib üksnes linke, mis on loodud <a> elementidena ja millel on atribuut href.
2. Lehe kasutuskogemus, sealhulgas Core Web Vitals. Google’i sõnul kasutavad järjestussüsteemid Core Web Vitalsi näitajaid, kuid „ühte ainsat signaali ei ole“ ja otsing „püüab alati näidata kõige asjakohasemat sisu, isegi kui lehe kasutuskogemus jätab soovida“.
See tähendab, et aeglane animatsiooniga sait võib hea sisuga siiski otsingus nähtav olla. Kiire sait, mille sisu Google lugeda ei saa, seda ei suuda.
Neli tegelikku SEO-riski animatsiooniga veebilehtedel
1. Sisu ilmub alles kerimisel
Google’i viitlaadimise juhend ütleb otse: „Google Search ei tee sinu lehel toiminguid.“ Kui jaotise tekst laaditakse või lisatakse alles siis, kui kasutaja selleni kerib, ei pruugi Google seda kunagi näha.
Hoia sisu ja animatsioon eraldi. Tekst peab olema HTML-is algusest peale, animatsioon muudab vaid selle ilmumist. Pealkiri, mis ilmub olekust opacity: 0, on juba DOM-is olemas. Pealkiri, mille kerimissündmuse käsitleja alles API-st küsib, veel ei ole.
See on peamine SEO-reegel kerimisega jutustavatele veebilehtedele: loo iga etapp on lehel päris tekstina olemas ja kerimine toob selle ainult nähtavale.
2. Sisu on olemas ainult JavaScriptis
Rakendused, mis loovad kogu sisu brauseris, jätavad algsesse HTML-i tühja kesta. Google suudab JavaScripti käivitada, kuid renderdamine toimub hiljem. Google ise soovitab endiselt serveripoolset või eelrenderdamist, sest kõik robotid ei oska JavaScripti käivitada. Sageli kuuluvad nende hulka linkide eelvaateid loovad robotid.
Next.js, Astro ja sarnased raamistikud lahendavad selle: renderda leht serveris ning lisa GSAP-i ja Three.js-i efektid pärast laadimist.
3. Tekst on joonistatud canvas-elemendi sisse
WebGL-i ja canvas-elemendi väljund on pikslid. Nagu Utsubo selgitab, ei ole elemendis <canvas> ühtegi indekseeritavat teksti. Kui pealkiri on stseenis 3D-tekstina renderdatud, ei näe Google seda.
Paiguta pealkiri, alapealkiri ja üleskutse tegevusele DOM-tekstina canvas-elemendi peale. 3D-tekst võib jääda visuaalseks efektiks, päris tekst peab olema olemas otsinguroboti ja ekraanilugejate jaoks. Lähemalt loe artiklist „WebGL-veebilehe SEO“.
4. Navigeerimine ja olekud ilma URL-ideta
Kui lehtede vahel liigutakse päris linkide asemel elemendi <div onClick> abil, takistab see otsingurobotil saiti läbi käia. Sama probleem tekib toote värvivariantide või korterite olekutega, mis muutuvad ainult JavaScriptis. Utsubo reegel on üks indekseeritav URL iga olulise oleku kohta, näiteks /product/x?color=black. Kasuta päris <a href> linke ja lisa üleminekule animatsioon.
Riskid ja lahendused lühidalt
| Animatsioonivõte | Mida Google võib näha | Lahendus |
|---|---|---|
| Tekst ilmub kerimisel | Tekst on olemas, kõik korras | Hoia tekst HTML-is, animeeri opacity/transform |
| Tekst laaditakse kerimisel | Mitte midagi | Saada tekst algses HTML-is |
| Ainult brauseris renderdatav Reacti rakendus | Tühi kest enne renderdamist | Serveripoolne renderdamine või eelrenderdamine |
| 3D-pealkiri canvas-elemendis | Tekst puudub | DOM-tekst canvas-elemendi peal |
| Lehtedevahelised üleminekud ainult JS-iga | Lingid puuduvad | Päris <a href> lingid koos üleminekuanimatsiooniga |
| Mahukas sissejuhatav animatsioon | Hilinenud LCP | Esmalt nähtav avavaade, seejärel animatsioon |
Kiirus on endiselt oluline
Animatsioon mõjutab otsingupositsiooni Core Web Vitalsi näitajate, peamiselt LCP kaudu. Kui avavaade ootab sissejuhatava animatsiooni lõppu, ilmub suurim element hilja. Sama juhtub siis, kui 3D-mooduli laadimine takistab lehe kuvamist. Üksikasjad leiad artiklist „Kas animatsioon aeglustab veebilehte?“. Põhireeglid on lihtsad: renderda avavaade HTML-ina, laadi mahukas animatsioon hiljem ning animeeri ainult omadusi transform ja opacity.
Kuidas kontrollida animatsiooniga veebilehte 15 minutiga
- URL-i kontroll Search Console’is. Käivita URL-i reaalajatest ja ava renderdatud HTML. Otsi oma H1-pealkirja, üht lauset lehe keskelt ning navigeerimislinke.
- Lülita JavaScript välja. Keela JS Chrome DevToolsis ja laadi leht uuesti. Allesjääv sisu näitab ligikaudu seda, mida näeb robot, mis lehte ei renderda.
- Kontrolli päris kasutajate andmeid. Search Console’i Core Web Vitalsi aruanne näitab, kas mobiilikasutajate LCP, INP ja CLS on heas vahemikus.
- Klõpsa läbi kõik olekud. Kui värvivariant, vahekaart või stseen muutub ilma URL-i muutuseta, ei saa seda eraldi indekseerida.
