WebGL-i SEO toimib siis, kui lõuendit kasutatakse visuaalse kujunduse jaoks ja sisu on HTML-is. Google käivitab JavaScripti, kuid <canvas> koosneb ainult pikslitest: Utsubo sõnul on selles „null indekseeritavat teksti”. Seega peavad kõik pealkirjad, tooteandmed, lingid ja lehe sisulised olekud olema serveris loodud HTML-is olemas enne 3D käivitumist. Nii saab Three.js-i sait otsingus sama hästi esile tulla kui iga teine.
Miks ainult lõuendile rajatud SEO ei toimi
Enamikul 3D-saitidel, mis otsingus esile ei tule, on üks neljast probleemist:
- Tekst stseeni sees. 3D-tähtedena modelleeritud või tekstuurile joonistatud pealkirjad on otsingumootoritele ja ekraanilugejatele nähtamatud.
- Sisu ilmub alles pärast JavaScripti käivitumist. Google küll töötleb JavaScripti, kuid renderdamine toimub järjekorras, „kui Google'i ressursid seda võimaldavad”. Google nimetab serveris renderdamist või eelrenderdamist endiselt „väga heaks mõtteks”, muu hulgas seetõttu, et kõik robotid JavaScripti ei käivita.
- Lingid, mis pole tegelikult lingid. Google ütleb, et „leiab lingid ainult siis, kui need on HTML-elemendid
<a>atribuudigahref”. 3D-objekti klõpsusündmuse käsitleja ei ole link. - Üks URL mitme oleku jaoks. Kui iga tootevärv või korter avaneb samal lõuendil ilma URL-i muutuseta, näeb Google üht lehte.
Three.js-i SEO põhimõte: kõigepealt HTML
Ehita leht nii, nagu 3D ei laadikski. Seejärel lisa 3D selle peale.
Praktikas näeb avavaate HTML välja nii:
<section class="hero">
<h1>Ridge 40 maastikujooksujalats</h1>
<p>Süsinikplaat, kolm värvitooni, loodud pikkadeks laskumisteks.</p>
<a href="/shop/ridge-40">Osta Ridge 40</a>
<div class="hero-3d" aria-hidden="true" style="aspect-ratio:16/9">
<img src="/img/ridge-40-poster.webp" alt="" width="1600" height="900">
<canvas></canvas>
</div>
</section>H1, tekst ja link on tavalises HTML-is. 3D-konteineril on atribuut aria-hidden, sest see täidab visuaalset rolli. Eelvaatepilt hoiab koha paigal, nii et lõuendi lisandumisel paigutus ei hüppa. Kui mõni tekst on ainult 3D-keskkonnas, soovitab Utsubo lisada elemendis <noscript> varuversiooni sama pealkirja, kokkuvõtte ja tegevuskutsega.
3D-veebilehe SEO kontrollnimekiri
| Kuluartikkel | Mida teha | Kuidas kontrollida |
|---|---|---|
| Renderdamine | Renderda iga marsruut serveris või eelnevalt valmis (Next.js, Astro ja sarnased tööriistad) | Vaata lehe lähtekoodi: kas H1 on olemas? |
| Iga oleku oma URL | Igal sisulisel olekul on oma indekseeritav URL, näiteks /product/x-pro?color=black |
Iga olek avaneb otse uuel vahekaardil |
| Lingid | Navigeerimiseks päris <a href> lingid; History API, mitte # fragmendid |
Kontrolli saiti SEO-robotiga |
| Metaandmed | Igal URL-il oma title, description ja Open Graphi pilt | Sisesta URL sotsiaalmeedia eelvaate kontrollimise tööriista |
| Struktureeritud andmed | Organization, Product ja FAQPage JSON-LD-vormingus, kooskõlas nähtava sisuga | Rich Results Test |
| Alt-tekstid | Eelvaatepiltidel ja sisulistel piltidel kirjeldav alt-tekst | Ligipääsetavuse audit |
| Kiirus | LCP ≤ 2,5 s, INP ≤ 200 ms, CLS ≤ 0,1 (web.dev) | PageSpeed Insights, päriskasutajate andmed |
Iga oleku eraldi URL on eriti oluline konfiguraatorite ja kinnisvarasaitide puhul. Meie Tallinna elamu näidisprojektis liigub külastaja kursoriga valgustatud aknale, et korterit vaadata. Avaldamiseks mõeldud versioonis oleks igal korteril oma serveris loodud leht, kus tubade arv, pind, hind ja staatus on tavalises HTML-is. Inimesed sirvivad kortereid fassaadi kaudu, Google indekseerib korterite lehti.
Struktureeritud andmed väärivad eraldi märkust. Utsubo nimetab FAQPage'i skeemi „2026. aasta kõige mõjusamaks GEO-võtteks”. GEO tähendab siin nähtavust AI-otsingu vastustes. See on Utsubo seisukoht, mitte Google'i väide. Päris küsimustele nähtavas HTML-is vastamine on siiski mõistlik igal juhul.
Ka kiirus on osa SEO-st. Meie 3D-veebilehe jõudluse juhend käsitleb laadimismahtu ja -järjekorda.
Kuidas kontrollida lehte Search Console'i URL Inspectioniga
Ära eelda, et kõik toimib. Vaata, mida Google tegelikult näeb.
- Ava Search Console ja sisesta lehe aadress tööriista URL Inspection.
- Klõpsa Test live URL (avaldatud URL-i kontroll). Google laadib lehe reaalajas.
- Klõpsa View tested page (vaata kontrollitud lehte). Vahekaardil HTML näed renderdatud koodi: otsi sealt H1-pealkirja, põhiteksti ja linke.
- Ava Screenshot (kuvatõmmis), et näha, kuidas Google lehe kuvas. Kuvatõmmis on saadaval ainult siis, kui reaalaja kontroll õnnestus.
- Vaata jaotisest More info (lisateave) JavaScripti konsooli vigu ja blokeeritud ressursse, näiteks mudelit või skripti, mille robots.txt keelab.
- Kui kõik on olemas, vali Request indexing (taotle indekseerimist). See lisab URL-i järjekorda, kuid Google'i sõnul ei taga indekseerimist. Paljude lehtede puhul on parem kasutada saidikaarti.
Kui HTML-i vahekaardil on ainult laadimisindikaator, oled probleemi leidnud.
Tüüpilised vead 3D-saitidel
- Ainus sisu on laadimiskuva. „Laadimine 0%” ei ole kuigi hea lehepealkiri.
- Vaadete vahetamine ilma URL-i muutuseta. Ilusad üleminekud, kuid ainult üks indekseeritav leht.
- Tekst on osa GLB-mudelist. Hoia tekst HTML-is ja paiguta see CSS-i abil lõuendi peale.
- Kogu sisu on peidetud kaamera liikumise lõpuni. Sisu võib ilmuda animatsiooniga, kuid DOM-is peaks see olema algusest peale.
Enamik neist põhimõtetest kehtib ka rohke animatsiooniga saitidele, kus 3D-d pole; loe artiklit animeeritud veebilehe SEO-st. Kui alles valid tehnoloogiaid, selgitab meie juhend Three.js-i veebilehe loomisest, milline roll on serveris renderdamisel.
