Alt текст: ръководство за SEO и достъпност

Преглед

Alt текст (атрибутът alt в <img> елементите) е кратко текстово описание на изображение, предназначено основно за достъпност и като резервен контекст, когато изображението не се зареди. Програми за четене на екрана (screen readers) обявяват alt текста на потребители, които са слепи или с намалено зрение, и търсачки използват alt текста като един от няколко текстови сигнала за темата на изображението. Alt текстът подпомага индексирането, като предоставя парсируем текст за изображенията, но е само един сигнал сред много други, които влияят на класирането и видимостта.

Пишете alt текст, който описва информацията, която изображението предава на целевата аудитория. За изцяло декоративни изображения използвайте празен alt атрибут (<img src="..." alt="">), за да ги пропускат screen readers. За сложни визуализации — графики, инфографики, диаграми — предоставете текстово резюме наблизо или използвайте ARIA/HTML техники за по-дълго описание.

Стъпка по стъпка

1) Определете ролята на изображението: установете дали изображението е информативно, функционално (напр. бутон) или декоративно. Информативните и функционалните изображения се нуждаят от описателен alt текст; декоративните трябва да използват празен alt атрибут.

2) Описвайте същественото съдържание кратко: напишете това, което потребителят трябва да разбере от изображението. Дръжте alt текста кратък — стремете се да предадете основната идея в едно изречение или фраза. Пример за стандартен информативен alt: <img src="/photos/harbor.jpg" alt="Червена рибарска лодка, закотвена в скалисто пристанище при изгрев">.

3) Избягвайте пълнене с ключови думи и излишни повторения. Не поставяйте начален текст като „изображение на“ или „снимка на“ — screen readers вече обявяват ролята на изображението. Направете текста полезен за човека, а не за робот на търсачка.

4) Обработвайте функционалните изображения и контроли: ако изображението е линк или бутон, опишете действието, което извършва. Пример: <img src="/icons/download.svg" alt="Изтеглете продуктовия лист">. Ако контролът има видим текст, alt атрибутът трябва да отразява същата цел или да е празен, ако видимият текст вече предава действието.

5) Осигурете по-дълги описания за сложни изображения: използвайте прилежаща подправа, свързано подробно описание, aria-describedby или видим HTML текст, за да разширите обяснението на графика или инфографиката. За детайли, еквивалентни на печат (таблици с данни, етикети на оси), включете ключовата информация в текста на страницата.

6) Използвайте последователни редакторски правила: създайте кратки указания за авторите (целеви дължини, кога да съкращават, езикови правила) и ги приложете в шаблони или CMS полета, за да се гарантира улавянето на alt текста в мащаб.

HTML примери

Описателно изображение: <img src="https://example.com/park.jpg" alt="Дете пуска червен хвърчило в градски парк">. Декоративно изображение: <img src="/decorative-divider.png" alt="">. Функционално изображение, използвано като линк: <a href="/download"><img src="/icons/pdf.svg" alt="Изтеглете доклада (PDF)"></a>.

Проверка на alt текста: технически контролен списък

Присъствие на alt атрибути — къде да проверите: view-source, Chrome DevTools Elements или curl (изтеглете пълния HTML с curl без -I) — преминава, когато всяко смислено <img> има alt атрибут и декоративните изображения използват alt="".

Рендериран DOM за изображения, вмъкнати от JS — къде да проверите: Chrome DevTools Elements (инспектирайте крайния DOM) — преминава, когато изображенията, видими за потребителите, имат подходящ alt текст в рендерирания DOM.

Аудит за достъпност — къде да проверите: Lighthouse в Chrome DevTools или автоматизиран инструмент за достъпност — преминава, когато одитът не отчита липсващ alt текст за информативни изображения и маркира само преднамерено декоративни изображения.

Проверка за четливост от хора — къде да проверите: пробна ревизия от редактор на съдържание или с помощта на screen reader (NVDA, VoiceOver) — преминава, когато alt текстът предава същата полезна информация като визуала за потребители със специални нужди.

Индексираемост на страницата — къде да проверите: за вашите страници използвайте Google Search Console URL Inspection; за страници на трети страни използвайте оператора site: като индикация — преминава, когато страницата е обходима (не е блокирана от robots.txt или noindex) и URL Inspection показва, че страницата е позната на Google. Забележка: site: е само индикация; URL Inspection е авторитативен за страници, които притежавате.

Практически съвети за инструменти

Използвайте curl, за да изтеглите HTML на страницата като конкретен user agent: curl -A "Mozilla/5.0 (Windows NT 10.0; Win64; x64)" https://example.com/page > page.html. Не използвайте -I ако ви трябва body. Отворете запазения файл в текстов редактор или пуснете DOM парсер, за да намерите <img> таговете и техните alt атрибути.

Стартирайте Lighthouse (Chrome DevTools → Lighthouse), за да откриете чести проблеми с достъпността, и тествайте с screen reader (NVDA на Windows, VoiceOver на macOS), за да потвърдите потребителското изживяване.

Ако използвате структурирани данни, които реферират изображения (напр. Product или Recipe schema), валидирайте маркировката с Rich Results Test или Schema Markup Validator, за да се уверите, че изображенията, посочени в JSON-LD, са налични и достъпни.

Чести проблеми

Липсващ alt текст при информативни изображения. Това уврежда достъпността и лишава слепите потребители от визуалната информация на страницата.

Пълнене с ключови думи: повтаряне на таргет ключови думи или бранд имена в alt атрибутите по неестествен начин. Това дава лошо преживяване и може да бъде игнорирано от търсачките.

Употреба на имена на файлове или общи фрази (напр. "image1.jpg", "picture") като alt текст, което не е смислено за помощните технологии или за индексиране.

Разчитане на атрибута title вместо на alt за критична информация; много screen readers не представят title последователно.

Вярване, че само alt текстът контролира ранкирането на изображението. Alt текстът помага на търсачките да разберат изображенията, но индексирането и видимостта зависят от контекста на страницата, структурирани данни, възможност за обхождане и други сигнали.

Ако изображенията се вмъкват клиентско чрез JavaScript, авторите понякога забравят да включат alt атрибути в рендерирания DOM; винаги инспектирайте крайния DOM, а не само сървърния HTML.

Прочетете Technical SEO Guide

Често задавани въпроси

В: Колко дълъг трябва да бъде alt текстът? О: Стремете се към сбити описания, които комуникират целта на изображението. Едно кратко изречение или фраза обикновено е достатъчно; за сложни визуализации предоставете по-дълго достъпно описание на друго място в страницата.

В: Влияе ли alt текстът на SEO ранкинга? О: Alt текстът дава текстов сигнал, който може да помогне при индексирането и релевантността в търсене на изображения, но не определя самостоятелно ранкирането. Ранкингът зависи от много сигнали, включително релевантността на страницата, структурирани данни, възможност за обхождане и общото качество на съдържанието.

В: Трябва ли декоративните изображения да имат alt текст? О: Не. Декоративните изображения трябва да използват празен alt атрибут (alt=""), така че да бъдат игнорирани от screen readers и да не добавят шум в достъпността.

В: Могат ли автоматизирани инструменти да генерират приемлив alt текст? О: Автоматичните предложения от CMS или разпознаване на изображения могат да помогнат, но винаги преглеждайте и редактирайте машинно генерираните alt текстове за точност, яснота и съображения за поверителност преди публикуване.

В: Какво да правим с изображения в CSS background? О: CSS background изображенията не се експонират като <img> елементи и нямат alt атрибут; всяко информационно съдържание в background изображение трябва да бъде представено в HTML, за да е достъпно.

Technical SEO е част от органичния растеж. Изграждането на тематичен авторитет изисква качествени backlinks и индексирано, достъпно съдържание — обмислете проверени marketplaces и партньорства, които приоритетизират indexability на издателите и редакционния контекст.Изградете авторитет с качествени backlinks