Alt tekstas: SEO ir prieinamumo vadovas

Apžvalga

Alt tekstas (alt atributas <img> elementuose) yra trumpas teksto aprašymas, skirtas pirmiausia prieinamumui ir kaip atsarginė informacija, kai vaizdas neįkeliamas. Ekrano skaitytuvai perskaito alt tekstą akliesiems arba silpnaregiams vartotojams, ir paieškos varikliai naudoja alt tekstą kaip vieną iš kelių tekstinių signalų apie vaizdo temą. Alt tekstas padeda indeksavimui, nes suteikia parsinamą tekstą vaizdams, tačiau tai yra tik vienas signalas iš daugelio, darančių įtaką reitingams ir matomumui.

Rašykite alt tekstą taip, kad apibūdintumėte informaciją, kurią vaizdas perduoda numatytai auditorijai. Visiškai dekoratyviems vaizdams naudokite tuščią alt atributą (<img src="..." alt="">), kad ekrano skaitytuvai juos praleistų. Sudėtingiems vaizdams – diagramos, infografikos, lentelės – pateikite tekstinę santrauką šalia arba naudokite ARIA/HTML sprendimus ilgesniam aprašymui.

Žingsnis po žingsnio

1) Nustatykite vaizdo vaidmenį: ar vaizdas yra informacinis, funkcinis (pvz., mygtukas), ar dekoratyvus. Informaciniai ir funkciniai vaizdai reikalauja aprašomojo alt teksto; dekoratyvūs vaizdai turėtų turėti tuščią alt atributą.

2) Konkretiai ir glaustai apibūdinkite esminį turinį: parašykite tai, ką vartotojui reikia žinoti iš vaizdo. Išlaikykite alt tekstą trumpą — stenkitės perteikti pagrindinę idėją vienu sakiniu arba fraze. Pavyzdys informacinio alt: <img src="/photos/harbor.jpg" alt="Raudona žvejybinė valtis pririšta uolėtame uoste auštant">.

3) Venkite raktinių žodžių persisotinimo ir perteklinio formuluotės kartojimo. Nenaudokite pradžios frazių kaip „image of“ arba „picture of“ — ekrano skaitytuvai jau nurodo, kad tai vaizdas. Darykite tekstą naudingą žmogui skaitytojui, o ne paieškos variklio roboto.

4) Tvarkykite funkcinį turinį ir valdiklius: jei vaizdas veikia kaip nuoroda arba mygtukas, apibūdinkite veiksmą, kurį jis atlieka. Pavyzdys: <img src="/icons/download.svg" alt="Atsisiųsti produkto duomenų lapą">. Jei valdiklyje yra matomas tekstas, alt turėtų atitikti jo paskirtį arba būti tuščias, jei tekstas jau perteikia veiksmą.

5) Pateikite išsamesnius aprašymus sudėtingiems vaizdams: naudokite pridėtą antraštę, susietą išsamų aprašymą, aria-describedby arba matomą HTML tekstą, kad išplėstumėte diagramos ar infografikos paaiškinimą. Spausdintinei lygiavertei informacijai (duomenų lentelės, ašių žymos) įtraukite svarbiausią informaciją į puslapio tekstą.

6) Naudokite nuoseklias redakcines taisykles: parengkite trumpas stiliaus gaires autoriams (tiksliniai ilgiai, kada sutrumpinti, kalbos taisyklės) ir prijunkite jas prie šablonų arba CMS laukų, kad alt tekstas būtų patikimai užfiksuojamas mastu.

HTML pavyzdžiai

Aprašomas vaizdas: <img src="https://example.com/park.jpg" alt="Vaikas paleidžiantis raudoną aitvarą miesto parke">. Dekoratyvus vaizdas: <img src="/decorative-divider.png" alt="">. Funkcinis vaizdas kaip nuoroda: <a href="/download"><img src="/icons/pdf.svg" alt="Atsisiųsti ataskaitos PDF"></a>.

Alt teksto patikra: techninis kontrolinis sąrašas

**Alt atributų buvimas** — kur tikrinti: view-source, Chrome DevTools Elements arba curl (gaukite visą HTML su curl be -I) — patikrinimas praeinamas, kai kiekvienas reikšmingas <img> turi alt atributą, o dekoratyvūs vaizdai naudoja alt="".

**Renderintas DOM JS įterptiems vaizdams** — kur tikrinti: Chrome DevTools Elements (patikrinkite galutinį DOM) — praeinama, kai vartotojams matomi vaizdai taip pat turi tinkamą alt tekstą renderintame DOM.

**Prieinamumo auditas** — kur tikrinti: Lighthouse Chrome DevTools arba automatinis prieinamumo įrankis — praeinama, kai auditas nerodo trūkstamo alt teksto informaciniams vaizdams ir pažymi tik numatytus dekoratyvius vaizdus.

**Žmogiškojo skaitomumo patikrinimas** — kur tikrinti: atrinktas turinio redaktoriaus peržiūra arba ekrano skaitytuvas (NVDA, VoiceOver) — praeinama, kai alt tekstas perteikia tą pačią naudingą informaciją kaip ir vaizdas apsilankantiems su pagalbinėmis priemonėmis.

**Puslapio indeksuojamumas** — kur tikrinti: savo puslapiams naudokite Google Search Console URL Inspection; trečiųjų šalių puslapiams naudokite site: operatorių kaip indikaciją — praeinama, kai puslapis yra pasiekiamas indeksavimui (neblokuojamas robots.txt arba noindex) ir URL Inspection parodo, kad puslapis žinomas Google. Pastaba: site: yra tik indikacija; URL Inspection yra autoritetingas įrankis jūsų valdomiems puslapiams.

Praktiniai įrankių patarimai

Naudokite curl, kad gautumėte puslapio HTML su konkrečiu user agent: curl -A "Mozilla/5.0 (Windows NT 10.0; Win64; x64)" https://example.com/page > page.html. Nenaudokite -I, jei reikia turinio. Atidarykite išsaugotą failą teksto redaktoriuje arba paleiskite DOM parserį, kad rastumėte <img> žymas ir jų alt atributus.

Paleiskite Lighthouse (Chrome DevTools → Lighthouse), kad aptiktumėte dažnas prieinamumo problemas, ir išbandykite su ekrano skaitytuvu (NVDA Windows, VoiceOver macOS), kad patikrintumėte vartotojo patirtį.

Jei naudojate struktūrizuotus duomenis, nurodančius vaizdus (pvz., Product arba Recipe schema), patikrinkite žymėjimą su Rich Results Test arba Schema Markup Validator, kad užtikrintumėte, jog JSON-LD nurodyti vaizdai yra prieinami ir pasiekiami.

Dažnos problemos

Trūkstamas alt tekstas informaciniuose vaizduose. Tai kenkia prieinamumui ir palieka akluosius be puslapio vizualios informacijos.

Raktinių žodžių persisotinimas: tikslinių raktinių žodžių ar prekės ženklų kartojimas alt atributuose nenatūraliai. Tai suteikia prastą patirtį ir gali būti ignoruojama paieškos variklių.

Failų vardų arba bendrų frazių (pvz., "image1.jpg", "picture") naudojimas kaip alt tekstas, kas nėra prasminga pagalbinėms technologijoms ar indeksavimui.

Pasikliaujant title atributu vietoje alt svarbiai informacijai; daugelis ekrano skaitytuvų title pateikia nekonsistentiškai.

Manant, kad vien alt tekstas lemia vaizdo reitingą. Alt tekstas padeda paieškos sistemoms suprasti vaizdus, bet indeksavimas ir matomumas priklauso nuo puslapio konteksto, struktūrizuotų duomenų, pasiekiamumo ir kitų signalų.

Jei vaizdai įterpiami kliento pusėje naudojant JavaScript, autoriai kartais pamiršta įtraukti alt atributus į renderintą DOM; visuomet patikrinkite galutinį DOM, ne tik serverio HTML.

Perskaitykite techninį SEO vadovą

Dažniausiai užduodami klausimai

Q: How long should alt text be? A: Aim for concise descriptions that communicate the image’s purpose. A single short sentence or phrase is usually adequate; for complex visuals provide a longer accessible description elsewhere on the page.

Q: Does alt text affect SEO ranking? A: Alt text supplies a textual signal that can help indexation and image search relevance, but it does not by itself determine ranking. Rankings depend on many signals including page relevance, structured data, crawlability and overall content quality.

Q: Should decorative images have alt text? A: No. Decorative images should use an empty alt attribute (alt="") so they are ignored by screen readers and do not add noise to the accessibility experience.

Q: Can automated tools generate acceptable alt text? A: Automated suggestions from CMSs or image recognition can help, but always review and edit machine-generated alt text for accuracy, clarity and privacy concerns before publishing.

Q: What about images in CSS backgrounds? A: CSS background images are not exposed as <img> elements and have no alt attribute; any informational content in a background image should be presented in HTML so it’s accessible.

Techninis SEO yra tik viena organinio augimo dalis. Teminio autoriteto kūrimui reikia kokybiškų backlinks ir indeksuotų, prieinamų turinių — apsvarstykite patikrintas marketplaces ir partnerystes, kurios prioritetizuoja leidėjo indeksuojamumą ir redakcinį kontekstą. Kurkite autoritetą su kokybiškais backlinks