#12-343. Alt Attribute / Атрибут Alt. Правка

'#6. Тексты : texts';

'Library_ChapterController_actionUpdate_';

'#library_chapter_update_';

VirtualityCMS

Ahrefs

Идентификатор ссылки (англ.)	vigbo-copy
Статус:	Активен

Описание

Идентификатор ссылки (англ.)	ahrefs
Статус:	Активен

Описание:

343. Alt Attribute / Атрибут Alt. Правка

Активен

Экспресс-правка Разметка ред. Summernote ред. Quill ред. CKEditor ред. Trumbowyg ред. Imperavi ред. Jodit

Общая информация

Название

Том: Справочник по SEO

ID Тома: 19

Статус: Пункт меню + на главной
Глава: №13

ID Главы: 343

Статус: Активен
Дата: 16 июня 2025

Время: 01:20:00

День недели: понедельник

Всего знаков в главе: 20556

id (статус)	343 (3)
Идентификатор ссылки (англ.)	alt-attribute
Сайт (ID сайта)	. #3
Смотреть на сайте	https://panel.seoforger/texts/spravochnik-po-seo-onlayn-torgovle-i-internetu/alt-attribute/
Время последнего обновления	14-07-2025 в 13:51:13
Ссылка в БД	https://panel25.seowebdev.ru/seowebdev.ru/texts/spravochnik-po-seo-onlayn-torgovle-i-internetu/alt-attribute/
Картинка	https://static.seowebdev.ru/cache/6/343-alt-attribute_col-12.webp

Полное название и описание

Полное название

Описание главы

Как правило описание должно иметь около 150 знаков. Оно используется для заполнения мета-тега Description веб-страницы.
Сейчас используется - 0 символов

Описание скопировано!

Описание вставлено!

Ключевое слово (главное):

Персонажи:

Метки:

Комментарии:

Примечания:

Полный текст < > & " ' « » – — … • · ← → ↑ ↓ ↔

Юридические: © ® ™

Валюты: € £ ¥ ¢

Типографика: § ¶ ° ± × ÷

Дроби: ½ ⅓ ⅔ ¼ ¾ ⅛ ⅜ ⅝ ⅞

Греческие: α β γ δ ε λ μ π σ ω Δ Σ Ω

Математические: ≈ ≠ ≤ ≥ ∞ √ ∑ ∫ ∂ ∇

<h2 class="mb-4">Что такое атрибут Alt</h2>
<p>Атрибут <code>alt</code> &ndash; это HTML-атрибут, который используется для указания альтернативного текста для изображений. Этот текст отображается в случаях, когда изображение не может быть загружено или просмотрено пользователем. Alt-текст является обязательным атрибутом для тега <code>&lt;img&gt;</code> и играет критически важную роль в доступности веб-сайтов и SEO-оптимизации.</p>
<h2 class="mb-4">Синтаксис и использование</h2>
<p>Атрибут <code>alt</code> добавляется непосредственно в тег изображения:</p>
<div class="bg-light p-3 mb-3"><code>&lt;img src="image.jpg" alt="Описание изображения"&gt;</code></div>
<p>Для XHTML синтаксис выглядит следующим образом:</p>
<div class="bg-light p-3 mb-3"><code>&lt;img src="image.jpg" alt="Описание изображения" /&gt;</code></div>
<h2 class="mb-4">Основные функции Alt-атрибута</h2>
<h3>Доступность веб-сайта</h3>
<p>Alt-текст имеет огромное значение для пользователей с нарушениями зрения, которые используют программы чтения с экрана (скринридеры). Эти программы озвучивают содержимое alt-атрибута вместо изображения, позволяя слепым и слабовидящим пользователям понять содержание и назначение изображения.</p>
<h3>Замещение изображений</h3>
<p>Когда изображение не может быть загружено по техническим причинам (медленное соединение, проблемы с сервером, неправильный путь к файлу), браузер отображает alt-текст вместо изображения. Это позволяет пользователям понять, что должно было находиться на этом месте.</p>
<h3>Текстовые браузеры</h3>
<p>Пользователи текстовых браузеров (таких как Lynx) видят только alt-текст вместо изображений, что делает этот атрибут критически важным для навигации по сайту.</p>
<h2 class="mb-4">Значение для SEO</h2>
<p>Атрибут <code>alt</code> играет важную роль в поисковой оптимизации:</p>
<ul class="mb-3">
<li><strong>Индексация изображений:</strong> Поисковые системы используют alt-текст для понимания содержания изображений и их индексации в поиске по картинкам</li>
<li><strong>Контекстная релевантность:</strong> Alt-текст помогает поисковым системам понять связь между изображением и содержанием страницы</li>
<li><strong>Дополнительный контент:</strong> Текст в alt-атрибуте читается поисковыми роботами как обычный текст страницы, увеличивая объем релевантного контента</li>
</ul>
<h2 class="mb-4">Правила написания эффективного Alt-текста</h2>
<h3>Основные принципы</h3>
<ul class="mb-3">
<li><strong>Краткость:</strong> Alt-текст должен быть кратким и информативным (обычно до 125 символов)</li>
<li><strong>Описание назначения:</strong> Описывайте не внешний вид изображения, а его назначение или смысл в контексте страницы</li>
<li><strong>Естественность:</strong> Используйте естественный язык, избегайте перечисления ключевых слов</li>
<li><strong>Уникальность:</strong> Каждое изображение должно иметь уникальный alt-текст</li>
</ul>
<h3>Примеры правильного использования</h3>
<div class="row mb-4">
<div class="col-md-6">
<h5>Хорошо:</h5>
<div class="bg-success bg-opacity-10 p-3"><code>&lt;img src="logo.png" alt="Логотип компании WebSolutions"&gt;</code><br><code>&lt;img src="chart.png" alt="График роста продаж за 2024 год"&gt;</code></div>
</div>
<div class="col-md-6">
<h5>Плохо:</h5>
<div class="bg-danger bg-opacity-10 p-3"><code>&lt;img src="logo.png" alt="Красивый логотип с синими буквами"&gt;</code><br><code>&lt;img src="chart.png" alt="Изображение график диаграмма продажи"&gt;</code></div>
</div>
</div>
<h2 class="mb-4">Декоративные изображения</h2>
<p>Для чисто декоративных изображений, которые не несут смысловой нагрузки, рекомендуется использовать пустой alt-атрибут:</p>
<div class="bg-light p-3 mb-3"><code>&lt;img src="decoration.png" alt=""&gt;</code></div>
<p>Это указывает скринридерам пропустить изображение, так как оно не содержит важной информации.</p>
<h2 class="mb-4">Распространенные ошибки</h2>
<ul class="mb-4">
<li><strong>Отсутствие alt-атрибута:</strong> Полное отсутствие атрибута создает проблемы доступности</li>
<li><strong>Дублирование названия файла:</strong> Использование имени файла вместо описательного текста</li>
<li><strong>Переспам ключевыми словами:</strong> Неестественное повторение ключевых слов в alt-тексте</li>
<li><strong>Слишком длинный текст:</strong> Чрезмерно подробные описания усложняют восприятие</li>
<li><strong>Использование фраз типа "изображение" или "картинка":</strong> Скринридеры уже сообщают, что это изображение</li>
</ul>
<h2 class="mb-4">Историческая справка</h2>
<p>Атрибут <code>alt</code> был впервые введен в HTML 1.2 в 1993 году для поддержки текстовых браузеров. В HTML 4.01 (1999 год) он стал обязательным для тегов <code>&lt;img&gt;</code> и <code>&lt;area&gt;</code>. Интересно, что Internet Explorer 7 и более ранние версии некорректно отображали alt-текст как всплывающие подсказки, что привело к путанице с атрибутом <code>title</code>. Эта проблема была исправлена в Internet Explorer 8.</p>
<h2 class="mb-4">Юридические аспекты</h2>
<p>Отсутствие alt-атрибутов может иметь серьезные юридические последствия. В разных странах были поданы иски против компаний за нарушение стандартов доступности. Например, в США отсутствие alt-атрибутов может рассматриваться как нарушение Закона об американцах с инвалидностью (ADA).</p>
<h2 class="mb-4">Проверка и аудит</h2>
<p>Для проверки качества alt-атрибутов на сайте можно использовать:</p>
<ul class="mb-3">
<li>Google Lighthouse для аудита доступности.</li>
<li>Валидаторы HTML от W3C.</li>
<li>Специализированные инструменты проверки доступности.</li>
<li>Расширения браузера для разработчиков.</li>
</ul>
<h2>6 лучших практик использования альтернативного текста</h2>
<p>Следуйте этим шести рекомендациям, чтобы повысить эффективность вашего альтернативного текста:</p>
<h3>1. Будьте описательными</h3>
<p>Альтернативный текст должен четко описывать изображение, предоставляя достаточно подробностей, чтобы пользователи поняли его содержание.&nbsp;</p>
<p>Избегайте включения в альтернативный текст следующего:</p>
<ul>
<li><strong>Такие фразы, как &laquo;Изображение&raquo; или &laquo;фотография&raquo;</strong>, являются избыточными. Исключением являются случаи, когда изображение представляет собой реальную фотографию (например, &laquo;Молодая женщина держит фотографию цветка&raquo;).&nbsp;</li>
<li><strong>Авторские права на изображения</strong>, как они должны быть указаны в подписи к изображению или в основном тексте.</li>
<li><strong>Информация, уже содержащаяся в подписи к изображению или основном тексте</strong>, чтобы избежать дублирования информации.</li>
<li><strong>Информация, которую необходимо знать всем пользователям</strong>, например, инструкции по приготовлению рецепта, сопровождаемые изображением готового блюда.</li>
</ul>
<h3>2. Будьте кратки</h3>
<p>Альтернативный текст должен быть лаконичным &ndash; в идеале менее 125 символов &ndash; чтобы пользователи и программы экранного доступа могли быстро его прочитать. Это особенно актуально, поскольку пользователи программ экранного доступа не могут приостановить показ альтернативного текста, чтобы перейти к другому контенту.</p>
<h3>3. Включите соответствующие ключевые слова</h3>
<p>Включите соответствующие ключевые слова в альтернативный текст, чтобы помочь поисковым системам ранжировать ваши изображения. Однако избегайте перенасыщения ключевыми словами, то есть вставки ключевых слов в альтернативный текст до тех пор, пока он не станет неестественным и трудным для чтения.</p>
<h3>4. Не используйте альтернативный текст для декоративных изображений.</h3>
<p>Не используйте альтернативный текст для декоративных изображений, которые только добавляют визуальный интерес и несут мало информации или функций &ndash; это сбивает пользователей с толку.</p>
<p>Используйте атрибут alt со значением null, чтобы указать программам чтения с экрана игнорировать декоративные изображения. Например:</p>
<p><code>&lt;img alt="" src="decorative-image.jpg"&gt;</code></p>
<p>Если исключить атрибут alt, программы чтения с экрана могут вместо этого считывать имя файла изображения. Это неидеально.</p>
<h3>5. Локализуйте альтернативный текст</h3>
<p>Локализуйте альтернативный текст в соответствии с культурным и языковым контекстом вашей аудитории . Это особенно важно для веб-сайтов, ориентированных на различные географические регионы.</p>
<p>Например, British Airways использует альтернативный текст изображения на английском языке для своего англоязычного сайта. И использует французский альтернативный текст изображения на своем франкоязычном сайте для пользователей из Франции.</p>
<p>Кроме того, при локализации альтернативного текста учитывайте различия в терминологии на одном языке.</p>
<p>Например, вид спорта, в котором две команды по 11 человек забивают голы бело-чёрным мячом в сетку, в американском английском называется &laquo;soccer&raquo;. А в британском &ndash; &laquo;football&raquo;.</p>
<p>Чтобы удовлетворить потребности обоих рынков, компания Nike использовала соответствующие термины в альтернативном тексте для домашних футболок чемпионата Бразилии по футболу 2024 года: в зависимости от региональных настроек альтернативный текст отображался как &laquo;soccer replica jersey&raquo; или &laquo;football replica jersey&raquo;.</p>
<h3>6. Регулярно проверяйте альтернативный текст</h3>
<p>Регулярно проверяйте свой альтернативный текст, чтобы выявить и предпринять меры для его улучшения и в конечном итоге помочь своим изображениям занять более высокие позиции в результатах поиска.&nbsp;</p>
<h2>Используйте ИИ для ускорения генерации альтернативного текста</h2>
<p>ИИ может значительно ускорить генерацию альтернативного текста, особенно когда вам нужно написать альтернативный текст для большого количества изображений.</p>
<p>Вот как написать альтернативный текст с помощью ИИ:</p>
<p>Загрузите изображение в инструмент для написания текстов на основе искусственного интеллекта, например, <strong>ChatGPT</strong> или <strong>Claude</strong>. Затем попросите инструмент предложить несколько вариантов альтернативного текста, которые точно описывают изображение и содержат ваши целевые ключевые слова, соблюдая при этом желаемое количество символов.</p>
<p>Например:</p>
<blockquote>
<p>&laquo;Напиши несколько вариантов альтернативного текста для этого изображения. Альтернативный текст должен описывать ключевые элементы изображения, содержать около 125 символов и включать следующие ключевые слова: [вставьте ключевые слова здесь]&raquo;.</p>
</blockquote>
<p>Проверьте предлагаемые инструментом варианты альтернативного текста на точность, релевантность и длину. Затем выберите понравившийся вариант, доработайте его и используйте.</p>
<p>Вот мои результаты, когда я запросил у ChatGPT альтернативный текст для изображения двойной радуги в поле:</p>
<ul>
<li>&laquo;Яркая двойная радуга пересекает облачное голубое небо над сочным зеленым полем с дикими травами на переднем плане&raquo;.</li>
<li>&laquo;Двойная радуга раскинулась в небе над широким, залитым солнцем полем зеленых культур и высоких трав под переменно-облачным небом&raquo;.</li>
<li>&laquo;Сияющая двойная радуга простирается над огромным зеленым полем, сквозь которое пробиваются редкие облака и мягкий солнечный свет&raquo;.</li>
<li>&laquo;Над залитым солнцем зеленым полем, окаймленным дикими травами и деревьями под драматичным облачным небом образуется двойная радуга&raquo;.</li>
<li>&laquo;Зеленое поле, залитое солнечным светом, с двойной радугой, изогнувшейся по небу с переменной облачностью после прошедшего ливня&raquo;.</li>
</ul>
<p>Второй вариант мне понравился больше всего своей объективностью и отсутствием драматизма. Но я посчитал, что описывать поле как широкое и залитое солнцем было бы излишним. А описывать посевы как зелёные &ndash; излишне.</p>
<p>Поэтому я отредактировал альтернативный текст следующим образом:</p>
<p>&laquo;Двойная радуга раскинулась в небе над полем посевов и высокими травами под переменно-облачным небом&raquo;.</p>
<h2 class="mb-4">Заключение</h2>
<p>Атрибут <code>alt</code> &ndash; это не просто техническое требование, а важный элемент создания инклюзивного и SEO-оптимизированного веб-сайта. Правильное использование alt-текста улучшает пользовательский опыт для всех категорий посетителей, повышает позиции сайта в поисковых системах и демонстрирует социальную ответственность владельцев сайта.</p>

Скопировано в буфер!

Вставлено из буфера!

Карточка текста Карточки текста

Тема

Персонажи

Изменить дату действия. 16/06/2025

Выбрать дату

Время: 01:20 .

Идея текста

Сюжет

План действий

Заметки

Редакторские правки

Персонажи

Идея текста

Сюжет

План действий

Заметки

Дополнительные поля
Дополнительные поля отсутствуют

343. Alt Attribute / Атрибут Alt. Правка

Редактировать комментарии, примечания, метки и персонажи

Дополнительные символы

Alt Attribute / Атрибут Alt