Mida peaksid teadma front-end arendajad seoses SEO parimate tavadega?

Front-end arendajad mängivad olulist rolli SEO ehk otsingumootori optimeerimise praktikate rakendamises. Kuigi esmapilgul tundub, et front-end arendajate töö tulemus tagab selle, milline veebileht välja näeb ja kui mugav seda kasutada on, siis tehnilisest küljest on front-end arendajate töös aspekte, millel on otsene mõju lehe SEO-le. Järgnevalt tutvustame neid kitsamaid valdkondi, mille teadmine ja rakendamine tagab, et veebileht on otsingumootorite jaoks parimal moel optimeeritud. 

Semantiline HTML

Semantiliste HTML5-siltide nagu <header>, <nav> jne kasutamine aitab otsingumootoritel mõista veebilehe struktuuri ja sisu, parandades otsingutulemuste asjakohasust. Siinkohal toome välja mõned tehnilised soovitused:

1. Kasutage <header>, <nav>, <main>, <section>, <article>, <aside> ja <footer> elemente vastavalt nende tähendusele, et kirjeldada lehekülje ülesehitust selgelt ja loetavalt. Näiteks võib <header> sisaldada saidi pealkirja ja navigatsiooni, <footer> võib sisaldada jaluse infot, <nav> võib hõlmata navigatsioonilinke jne.

2. Kasutage <em> ja <strong> elemente, et rõhutada olulisi sõnu või fraase. <em> märgendab teksti emfaasi, samas kui <strong> rõhutab teksti tugevalt, mis võib aidata otsingumootoreil mõista märksõnade tähtsust.

3. Kasutage <a> elementi linkide jaoks ning lisage neile kirjeldavad tekstid. See aitab otsingumootoritel mõista linkide sihtkohti ja parandab kasutajakogemust.

Kohanduvus ja mobiil-esmalt (mobile-first) lähenemine

Veebileht peab olema hästi kasutatav igas seadmes – olgu selleks lauaarvuti, läpakas, tahvelarvuti või mobiiltelefon – et tagada kasutajasõbralik veebileht igal platvormil (responsive design). Otsingumootorite, sealhulgas Google’i prioriteediks on mobiilse vaate esmane indekseerimine. See tähendab, et Google vaatab esmalt lehekülje mobiiliversiooni, et määrata selle sisu ja asjakohasust kasutajate mobiilseadmete jaoks. See muudatus jõustus 2018. aastal. Põhjus peitub selles, et üha rohkem inimesi kasutab otsinguid ja sirvimist mobiilses seadmes. Hea on kasutada CSS-i meedia päringuid, et kohandada stiile vastavalt erinevatele ekraanilaiustele ja -kõrgustele, vaata allolevat joonist 1:

Joonis 1. CSS-i meedia päringud

Lehe kiiruse optimeerimine

Otsingumootorid soosivad kiireid lehti, samuti meeldivad need kasutajatele.  Laadimisaegade parandamiseks kasutatakse meetodeid nagu piltide optimeerimine, CSS-i, JavaScripti ja HTML-i minimeerimine, brauseri vahemälu kasutamine ning sisu edastamise võrgustike (CDN-ide) kasutamine.

URL-ide struktuur

Otsingumootorid indekseerivad URL-e, et mõista lehekülje sisu ja hierarhiat. Selge ja struktureeritud URL aitab otsingumootoritel mõista lehekülje teemat ning seostada seda asjakohaste otsingupäringutega. Ka inimesed on rohkem valmis klõpsama selge ja arusaadava URL-iga linke, mis omakorda võib mõjutada klikkimismäära (CTR-i ehk click-through-rate’i) otsingutulemustes.

Metasildid

Metasildid, nagu pealkirjade sildid (title tag) ja metakirjeldused (meta description), annavad otsingumootoritele ja kasutajatele olulist teavet veebilehe sisu kohta enne selle külastamist. Õigesti kasutatud metasildid aitavad saiti tõsta Google’i tulemuste seas ettepoole. Ka aitab metasiltide õige kasutamine tagada, et need oleksid kohandatud vastavalt erinevatele ekraanisuurustele, mis on oluline mobiilsete seadmete jaoks.

Pealkirjade sildid

Pealkirjade siltide H1, H2, H3 jne kasutamine loob sisu hierarhia ning muudab selle otsingumootoritele paremini arusaadavamaks. See on oluline mitte ainult otsingumootoritele, vaid ka lugejatele. Ühtlasi võimaldab pealkirjade siltide kasutamine tõsta esile olulisi võtmesõnu (keywords), mis on seotud lehekülje teemaga ja mida inimesed võivad Google’ist infot otsides kasutada. Õigesti määratletud pealkirjasilt annab otsingumootoritele vihje, milline on lehekülje põhiteema, ja aitab neil paremini indekseerida. Huvitav ja köitev pealkirjasilt võib suurendada lehekülje klikkimismäära.

Piltide optimeerimine

SEO seisukohast tuleb piltide korral arvestada:

• alt-tag’i;

• failinime;

• pildi mõõtmeid;

• faili formaati.

Alt-tag

Alt-tag kui pilti kirjeldav lühike tekst aitab Google’i robotitel paremini mõista pildi sisu, sest nad ei suuda pilti näha samal moel nagu inimesed. Hea variant on kasutada <img> elementidel alt-atribuuti, et lisada lühike ja kirjeldav tekst piltide alternatiiviks juhul, kui pilt kasutaja jaoks ära ei lae – kasutajal on siinjuures võimalik aimu saada, mida pilt kujutab.

Failinimi

Failinimi peaks olema kompaktne ja sarnaselt alt-tag’iga kirjeldama pildi sisu või andma edasi pildiga seotud infot – ka see aitab Google’i robotitel sisu paremini mõista.

Pildi mõõtmed

Pildi mõõtmete vähendamine, kahjustamata sealhulgas pildi kvaliteeti, mõjub hästi lehe kiirusele.

Faili formaat

Ka faili formaadil on mõju lehe kiirusele, näiteks soovitatakse .png- või .jpg-laiendiga pildid konverteerida WebP-formaati, mille Google välja arendas ja mis võimaldab pilte kuvada väiksema mahuga kui teiste formaatide puhul.

Open Graph Image

Open Graph Image on seotud Open Graph Protocol’iga (OGP-ga) – see on metasiltide kogum, mida saab lisada veebilehtedele, et kontrollida nende kuvamist sotsiaalmeedias näiteks Facebookis, Twitteris, LinkedInis ja mujal. Need sildid pakuvad struktureeritud andmeid, mis aitavad platvormidel mõista lehe sisu ja kuvada seda visuaalselt atraktiivsel viisil. Oletame, et kasutaja jagab enda Facebooki kontol mõne saidi artiklit. Open graph image’i kasutamine kuvab artikliga kaasnevat pilti nii, et see paremini köidab kasutaja tähelepanu. Vaata selgituseks allolevat joonist 2:

Joonis 2. Open Graph Image’i näide. Allikas: https://kaydee.net/blog/open-graph-image/

Kui lingitud sisu jagatakse sotsiaalmeedias ja sellel on kaasas atraktiivne pilt, suurendab see tõenäosust, et kasutajad klikivad lingil ja külastavad veebilehte. See suurendab liiklust ja võib positiivselt mõjutada veebilehe SEO-d.

Struktureeritud andmed

Struktureeritud andmed (structured data) tähendavad SEO kontekstis teatud tüüpi koodimärgendusi, mida saab lisada veebilehele, et aidata otsingumootoritel paremini mõista selle sisu. Seda saab lisada spetsiifiliste märgenduskeelte, näiteks JSON-LD-i, RDFa või Microdata abil. Arendajatele on abiks Schema.org – see on ühine projekt, mille käivitasid Google, Bing, Yahoo! ja Yandex, et pakkuda standardseid märgendusskeeme struktureeritud andmete jaoks.

Sisemised lingid

Sisemised lingid ehk lingid, mis ühendavad sama domeeni erinevaid lehekülgi, määravad, kui tõhus on infovahetus veebisaidi ja otsingumootori vahel.  Google’i robot leiab linkide abil üles olulise sisu, mida kasutab hiljem otsingutulemuste järjestamisel. Lisaks luuakse linkide abil seoseid erinevate lehekülgede vahel – see on tähtis orgaanilise nähtavuse seisukohast. Sisemistes linkides on hea kasutada olulisi võtmesõnu.

JavaScripti õige rakendamine

Liigne või ebakorrektne JavaScripti kasutamine võib takistada otsingumootoritel saidi indekseerimist. Ajalooliselt on Google'i indekseerija peamiselt keskendunud HTML-sisule ja JavaScript'i mõistmine on suures pildis olnud raskendatud. Viimastel aastatel on Google’i robotid teinud edusamme suutlikkuses JavaScript'i mõista, ent hea on siiski tagada, et sait toimib ka siis, kui JavaScript on keelatud. Loe lähemalt artiklist ”Kas Google näeb minu kodulehe sisu?”.

SSL/HTTPS

SEO seisukohast on SSL (Secure Sockets Layer) ja HTTPS (Hypertext Transfer Protocol Secure) olulised turvalisust tagavad tegurid. SSL tagab krüpteeritud andmeedastuse veebilehe ja kasutaja vahel. See on eriti oluline, kui veebilehel kogutakse isiklikke andmeid, näiteks makseinfo või kasutajakontoga seotud informatsiooni. Saidid, millel pole SSL-sertifikaati, saavad reeglina madalama reitingu, sest Google hindab turvalisust kõrgelt. Ka eelistavad otsingumootorid saite, mis kasutavad HTTPS-i, mitte HTTP-d (Hypertext Transfer Protocol) – viimane on ebaturvaline. HTTPS krüpteerib andmeedastuse veebilehe ja kasutaja vahel. See tähendab, et kui kasutaja sisestab veebilehel isiklikke andmeid, on see teave krüpteeritud ja kaitstud kolmandate isikute eest. HTTP puhul liiguvad andmed avatult ja neid on kergem kätte saada.

Ligipääsetavus

On oluline, et veebileht on mugav kasutada kõigile, sealhulgas puuetega inimestele. See ei paranda mitte ainult kasutajate kogemust, vaid mõjutab positiivselt ka SEO-d. Ligipääsetavuse tagamine hõlmab korralikku ARIA (Accessible Rich Internet Applications) rollide kasutamist ja ekraanilugejate jaoks navigeerimisvõimaluste tagamist. Ligipääsetavust parandades saab muuta veebilehed ühtlasi kaasavamaks ning jõuda laiema vaatajaskonnani.

Sisu kvaliteet

Kuigi kvaliteetse sisu loomine ei ole otsene osa front-end-arendusest, on hea kvaliteediga ja asjakohane sisu SEO puhul oluline. Koostöö sisukirjutajaga on vajalik, et tagada hästi liigendatud sisu, kus kasutatakse sobival määral õigeid võtmesõnu.

Hea front-end arendaja mõistab SEO praktikaid

Lühidalt öeldes võib väita, et veebilehe sisu struktuuri loomine, turvalisuse tagamine ja muud SEO-ga seotud olulised aspektid sõltuvad front-end arendaja tööst. Seega on front-end arendajate jaoks oluline mõista SEO parimaid tavasid, et veebileht oleks Google’i otsingutulemustes võimalikult kõrgel positsioonil.