Для каждого сайта изображения — полезная и неотъемлемая его часть. Они помогают предоставить дополнительный контекст для содержимого страницы, разбить текст, добавить визуальную привлекательность страницам и многое другое.

Но не оптимизированное изображение полезны только тем, кто их видит. Что происходит, когда на ваш сайт заходит человек с ослабленным зрением или когда алгоритмы Google пытаются сканировать картинки на вашем сайте в поисках информации? Вот почему так важно оптимизировать изображения с помощью Alt  текстов, о которых мы сегодня поговорим более детально.

Что такое Alt text?

Alt text — также называемый тегом alt или атрибутом alt — относится к тексту, прикрепленному к изображению для описания того, что оно показывает. Этот текст встроен в код сайта, и его обычно можно посмотреть, наведя курсор на изображение.

Цель тега alt — передать содержимое изображения. Например, если вы занимаетесь ремонтом домов, вы можете использовать изображение поврежденного дома где-нибудь на своем участке. Возможный альтернативный тег для этого изображения мог бы сказать что-то вроде «дом, поврежденный упавшим деревом».

Есть правильный и неправильный способ писать альтернативные теги. Вы должны стремиться предоставить достаточно информации, чтобы помочь людям визуализировать изображение, не видя его на самом деле. Вот несколько вещей, которые вам НЕ следует делать:

• Наполнять свои alt-теги только ключевыми словами
• Максимально упрощать, например, всего лишь одно слово

Лучший совет для написания alt-тегов — это на мгновение отойти от своего маркетингового мышления и просто описать изображение так, как если бы ваш друг в другой комнате спросил о нем, а вы сделали описание вслух.

Вы должны стремиться предоставить достаточно информации, чтобы помочь людям визуализировать изображение, не видя его на самом деле.

Каковы преимущества использования Alt тегов?

Использование атрибутов alt для ваших изображений дает несколько преимуществ. В частности, за три преимущества стоит потратить время на включение тегов alt в изображения на вашем сайте. Вот три способа, которыми alt-теги могут принести пользу вашему бизнесу.

Повышение рейтинга

Одним из наиболее значительных преимуществ использования альтернативных тегов является то, что они могут улучшить ваш рейтинг в поиске Google. Причина связана с тем, как Google ранжирует страницы.

Чтобы Google оценил страницу, он сканирует ее и добавляет в свой поисковый индекс. Когда боты Google сканируют страницу, они сканируют страницу, чтобы понять ее контекст.

Сканеры Google не могут читать изображения, а это значит, что изображения на вашем сайте не будут способствовать вашему рейтингу. Но когда вы используете теги alt, все меняется. К изображению теперь прикреплен описательный текст, что означает, что Google может видеть, о чем идет речь, и учитывать это в вашем рейтинге.

Изображения Google

Альтернативный текст помогает вашим изображениям отображаться в

Если на сайте есть не оптимизированное изображение, поисковик не будет знать, что на них показано.

Доступность изображений для всех пользователей

Последним важным преимуществом атрибутов alt является то, что они могут помочь сделать ваш сайт доступнее. Доступность изображений — это то, что многие компании игнорируют, и она может во многом повысить общую эффективность вашего маркетинга.

Многие пользователи с ослабленным зрением используют программы чтения с экрана для взаимодействия с веб-страницей. Однако, как и алгоритмы Google, программа чтения с экрана не может озвучивать содержание изображения — если вы не используете тег alt. Ведь именно он помогает пользователям понять, что на странице.

Доступность изображений — это не только простая услуга для слабовидящих клиентов, но и способ сделать пользователей более счастливыми и повысить лояльность к вашему бренду, что позволит вам увеличить количество конверсий.

Как создать альтернативные теги?

Создание тегов alt — простой процесс. Все, что вам нужно сделать, это вставить короткий фрагмент кода в код вашего сайта.

Если вы работаете с помощью системы управления контентом (CMS), вам даже не придется углубляться в сам код — многие CMS просто позволят вам щелкнуть изображение, а затем ввести тег alt в поле. Например:Но даже если это не так, добавить тег alt в код — простая задача. Для начала откройте исходный HTML-код своего сайта. Затем найдите изображение, к которому вы хотите добавить тег alt — оно должно выглядеть примерно так:

<img src=”exampleimage.png”>

Чтобы добавить тег alt, вставьте фрагмент кода перед закрывающей угловой скобкой. Код должен иметь следующий формат:

alt=”example description”

Итак, когда вы закончите, вся строка кода должна появиться как комбинация двух вышеуказанных элементов. Вот пример:

<img src=”bookshelfproject.png” alt=”A newly handcrafted bookshelf”>

Вот и все! Вы сможете легко добавить теги alt ко всем вашим изображениям — а если используете систему управления контентом, то это может быть еще проще.Перевод с блога webfx.com.

зачем он + 5 основных правил оформления

Привет, друзья! Я подготовил для вас статью про оптимизацию и посвящена она будет такому атрибуту, как тег alt для изображений. Он используется в описании изображений. Если не пренебрегать им, то можно существенно повысить шансы на более высокие позиции сайта в поисковой выдаче.

Содержание статьи:

Этот вопрос интересует всех «молодых» владельцев сайтов. В частности, его часто задают участники моего бесплатного онлайн-тренинга, как создать свой сайт. Кстати, тренинг длится всего 4 дня. Он построен на практических заданиях. Участники просто повторяют за мной, и после окончания учебной программы у них на руках остается свой веб-ресурс – полностью готовый к развитию и продвижению. Если давно мечтаете о личном проекте, но у вас пока не было возможности заказать сайт, можете сделать его своими руками. Чтобы принять участие в обучении просто оставьте адрес своей электронной почты.

Ну, а теперь перехожу непосредственно к главной теме статьи: тег alt для изображений – что это такое, как правильно его заполнять.

Зачем нужен тег alt для изображений: лаконично о главном

Читайте также: Как создать сайт блог бесплатно и зарабатывать на нем от 300$ в месяц

Тег alt – это обязательный атрибут для фотографий, изображений. В нем содержится описание картинки. Этот атрибут пользователи не видят, ведь браузер показывает им картинки. Если по какой-то причине изображение не демонстрируется (показ отключен или просто не грузится), пользователь на месте картинки увидит текст.

Кроме того, тег альт очень важен для оптимизации и продвижения статей в поисковых системах. Во-первых, поисковые роботы, которые проводят анализ сайта, более позитивно относятся к проектам, у которых прописаны все теги. Во-вторых, в теге прописываются ключевые слова, что положительно отражается на ранжировании проекта.

Как правильно прописать тег alt для изображений: основные правила и рекомендации

Теперь, когда вы знаете, зачем нужен тег alt для изображений, перехожу к подробному рассказу, как работать с ним.

1. Краткое описание изображения

Обязательно создайте лаконичное, но понятное и максимально точное описание картинки. Если вдруг на сайте настроено автоматическое заполнение этого атрибута, необходимо проверить все страницы и изображения, исправить неточности и ошибки.

2. Оптимальная длина

Идеальный вариант – три-четыре слова. Больше – нет смысла. Потому что именно их учитывают поисковые роботы при анализе сайта.

3. Наличие ключевых слов

Чтобы от этого атрибута было максимум пользы, в нем следует использовать ключевые слова, релевантные тексту статьи и соответствующие теме изображения.

4. Уникальность для каждой отдельной картинки

Каждый тег альт должен быть уникальным, отличающимся от других. Думаете, это не всегда возможно сделать? Ошибаетесь! Сейчас попробую вас переубедить.

К примеру, на сайте несколько картинок одного и того же фотоаппарата. Как сделать, чтобы атрибут альт описывал изображение, в нем были ключевые слова, но и сам он оставался уникальным. Вот простой пример для 4-х картинок (капсом выделены ключевые слова):

• фотоаппарат NIKON D5600 AF-P 18-55;
• камера NIKON D5600 AF-P 18-55 вид спереди;
• фотокамера NIKON D5600 AF-P 18-55 черного цвета;
• NIKON D5600 AF-P 18-55 вид сверху.

Как видите, все условия соблюдены! Все очень просто. Если речь идет об одинаковых женских платьях, то здесь обязательно в описание картинки каждой модели следует вставлять название цвета.

5. Подпись под картинкой

Также важно делать правильные подписи под картинкой. Особенно, если на сайте много изображений и фотографий, но мало текста. Тогда наличие дополнительной подписи будет невероятно важно.

Однако тут следует учитывать определенные особенности создания такой подписи, дабы от нее было максимум пользы. Вот как этого добиться:

• гармонично вписать ключевые слова;
• указать факт про предмет, который показан на картинке.

Допустим, что на изображении – наушники фирмы «Кактус» (название выдумано). Тогда хороший вариант подписи к картинке – «Наушники «Кактус» хорошо звучат и помогают прочувствовать каждую ноту» или «Звук в наушниках «Кактус» стал намного приятнее благодаря современной технологии «Молния»». (Название технологии, как вы могли догадаться, тоже выдумано).

Теперь вы знаете не только, зачем нужно прописывать тег alt для изображений, но и как это делать, чтобы достигать нужного результата.

Тег alt для изображений: как к нему относятся поисковые системы

Очень и очень трепетно.

Например, сотрудники компании Яндекс не скрывают, что этот атрибут невероятно важен. В частности, они указывают, что чем точнее и правильнее описание изображения, тем выше вероятность, что картинка окажется на первых позициях в поисковой выдаче. Соответственно, и саму страницу, статью изображение будет тянуть за собой наверх.

Google также учитывает тег. Кроме того, чтобы картинка оказалась на первых позициях, поисковые роботы учитывают такие показатели:

• высокое качество картинки;
• расположения изображения в верхних частях страницы;
• правильная структура каталогов, подразумевающая хранение одинаковых изображений рядом друг с другом;
• указание широты и высоты картинки.

Вот вы и узнали, зачем нужно прописывать тег alt для изображений и как к нему относятся разные поисковые системы.

Тег alt для изображений в распространенных CMS

В завершение расскажу о том, как заполнять тег alt для изображений в популярных системах управления контентом

1. WordPress

Сделать это можно двумя способами. Для этого не нужны какие-то особые умения, а также не потребуются и специальные плагины.

Первый метод – когда добавляете картинку в редакторе статьи. После нажатия на кнопку «Добавить медиафайл» перед вами откроется вся библиотека существующих картинок. Выбрав нужную вам и кликнув по ней, вы увидите с правой стороны информацию об изображении и поля, в которые вводится нужная информация.

Второй метод – если картинка уже добавлена в тело статьи. Тогда нужно просто выделить ее и кликнуть на «карандаш», который появится в подсказке. После этого откроются поля с параметрами для заполнения.

2. Joomla

Тут теги прописываются непосредственно на этапе загрузки картинки в тело статьи. Нужно нажать на соответствующую иконку в редакторе. После этого откроется дополнительное окошко с полями для заполнения.

3. Opencart

Это одна из наиболее популярных систем для интернет-магазинов. Как известно, на таких проектах очень много картинок и изображений, ведь без них нельзя детально описать товар.

А что бы создать собственный интернет магазин, приглашаю вас на свой курс по созданию и продвижению интернет магазина с нуля. С точки зрения скорости заработка денег — интернет магазин лучше, чем сайт/блог,так как уже в первый месяц вы сможете сделать первые продажи и именно это я показываю во время обучения!

Чтобы заполнить тег, нужно в редакторе найти иконку, указывающую на изображение – она демонстрирует картину с горами и солнцем. Потом кликнуть на неё и перед пользователем откроется новое окно. В этом окошке под ссылкой находится строка «Альтернативный текст». Вот именно в эту строку и вводится атрибут альт.

Тег alt для изображений: в завершение

Я вам подробно рассказал, зачем нужно прописывать тег alt для изображений. Надеюсь у вас больше не осталось вопросов по этой теме. Если же вы хотите работать с собственным сайтом, создать свой прибыльный и успешный проект, но не знаете с чего начать, приглашаю вас на мой авторский тренинг. На нем я рассказываю, как сделать сайт своими руками. Обучение – бесплатное. Тренинг длится всего 4 дня. После его завершения у вас будет собственный проект, с первыми статьями и посетителями, готовый к продвижению и развитию.

Разница между alt и названием img — какой использовать

ALT-тег — это тег доступности, который был введен для людей, у которых проблемы со зрением, даже через Google. Он используется для определения того, что представляет собой изображение, и вам никогда не следует ставить альтернативные теги для целей SEO перед посетителями.

Многие люди и даже Мэтт Каттс, который работает в Google, говорят о alt-тегах, как будто они были специально разработаны для поисковых систем, чтобы сообщать ботам, о чем идет речь, это просто не соответствует действительности.

Однако вы можете информировать Google о том, о чем идет речь, присматривая за своей аудиторией, никогда не просто вставляя ключевые слова в тег alt, это снижает восприятие пользователя и делает его очень неестественным.

Ярким примером этого является то, что часто говорят, что кто-то хочет присвоить ключевое слово «Борнмут», в заголовке у него будет Борнмут, в мета-описании h2 затем создадим изображение с альтернативным тегом «Борнмут», хотя это будет работать для SEO это ослабляет пользовательский опыт и пропускает весь смысл тэга alt. Тег alt предназначен для людей, у которых проблемы со зрением или все изображения отключены. Таким образом, тег ALT был разработан, чтобы информировать пользователя о том, что изображение.

Хороший пример этого можно увидеть ниже

<img src="i.jpg" alt="Bournemouth" />

против

<img src="i.jpg" alt="Birdseye view of Bournemouth" />

Приведенный выше пример по-прежнему содержит ваше ключевое слово, в то время как Google и ваша аудитория объясняют, о чем идет речь.

Так что насчет заголовка?

Тег заголовка был разработан, чтобы дать больше информации, когда вы наводите курсор на элемент, он не очень полезен для IMG, потому что, если вы собираетесь использовать одну и ту же информацию для ALT и TITLE, вы можете использовать скрипт для чтения тега alt и собственные зависания, используя JS. Я бы порекомендовал тег title только в том случае, если вы собираетесь предоставить больше информации, чем тег ALT, например, более подробное описание — нет необходимости предоставлять точную информацию в обоих элементах, поскольку это просто раздувает код.

Тег заголовка очень удобен для ссылок, так как при наведении на него может дать вашей аудитории больше информации о ссылке, которую они собираются щелкнуть. Это будет стоить вам, чтобы узнать больше о заголовке тега здесь .

Зачем нужно прописывать Alt-тег? / Хабр

Прописывать alt-тег очень важно, потому что именно по надписи внутри этого тега робот-поисковик Google или Yandex понимает, что это за картинка. Робот ведь не человек, он не умеет читать, он сравнивает последовательность нулей (0) и единиц (1). А именно так все кодируется: и слова, и картинки. И картинка для робота это код, где много нулей и единиц, а поисковая фраза, это тоже нули и единицы, то их много меньше.

Так как сравнить поисковую фразу и картинку?

Именно для этого и существует alt-тег. Это описание картинки. Описание это тоже фраза. И именно по этому описанию сравнивается код поисковой фразы и код картинки.

Сегодня я возьму пример Красное пальто.

Я хочу найти в Google картинки с красным пальто. И проанализирую, как сайт, на который ведет эта картинка добился того, чтобы именно его картинку Google поиск находил и выдавал в результатах поиска.

А потом я сделаю то же самое для всех моих картинок.

ШАГ 1. Введу поисковую фразу Красное пальто в Google

Первая картинка всегда самая кликабельная. Все, что № 1, всегда в поиске просматривается чаще всего. Поэтому я ввожу в Google-поиск фразу

. И вот, что я вижу:

ШАГ 2. Перехожу на сайт, где эта картинка размещена

ШАГ 3. Поищу название картинки

Я попала на сайт со статьей про красные пальто. И попробую найти, где может быть картинка подписана? Вверху/внизу, может при наведении на нее мышью, что-то появится?

Ничего! Я вижу, что при наведении на картинку мышью — нет никакой подписи, и под картиной тоже нет подписи.

Примечание:
На самом деле, при наведении на картинку должен был появиться текст, прописанный в alt-теге. Но это можно убрать искусственно.

ШАГ 4. Открываю код страницы и ищу там alt-тег

Для этого навожу на любое место в странице и зажимаю клик

. Открывается дополнительное окно, где я увижу код страницы.

Тут мы ищем нашу картинку. Ищем по предложению, что над ней, у меня было написано предложение: У вас может быть модель с мехом, капюшоном, шерстяное, кожаное — принципы комбинаций будут похожи.

Я не буду вводить в лупу все предложение, достаточно ввести часть его. Я начну набирать конец предложения = принципы комбинаций. Это уникальная фраза и в огромном коде она быстро находится и подсвечивается желтым. Ниже нее расположен код картинки:

Тут мы видим, что у картинки ПРОПИСАН alt-тег = с чем носить красное пальто, он включает поисковую фразу, что я ввела в Google в шаге 1 = красное пальто. И как в геометрии могу завершить мои доказательства фразой: Что и требовалось доказать.

А именно, напомню. Робот-поисковик выдает результаты поиска, сравнивая фразу, которую ты ввел, с той, что записана в alt-теге.

Поэтому, если ты хочешь, чтобы твои картинки находили другие пользователи в сети, а также твой сайт или блог чаще посещали и это было на автомате и бесплатно, то не ленись прописывать Alt-теги.

Когда я писала моей дочери про alt-тег и скидывала картинки, что прикрепила здесь. Она задала вопрос: Зачем ты мне это пишешь?

Зачем знать, где искать alt-тег?

Я пишу для того, чтобы было понимание, что прописывать Alt-тег для сайта очень важно.

Оставляя alt-тег пустым ты:

1. Теряешь посетителей сайта потому, что они не могут найти твои картинки;
2. Упускаешь бесплатную возможность появляться на первых местах в поиске Google, который в самом верху ВНАЧАЛЕ выдает 1) товары, потом 2) КАРТИНКИ, потом 3) поиск по карте, потом 4) выставляет рекламу, и только потом идут 5) поисковые фразы.

В Яндекс.Поиске картинки расположены на отдельной закладке, но схема поиска по картинам та же. Т.е. если хочешь, чтобы твои картинки находили, значит их нужно подписывать так, чтобы было понятно и людям, и роботам.

Для примера решила взять наш сайт MyMixam.ru, где подобраны модные образы. София не только находит красивые луки, но и подбирает одежду, обувь и аксессуары из этого образа, которые стоят недорого. Не нужно ничего искать или придумывать, нужно только выбирать и покупать. Носить и радоваться.

Я зашла на главную страницу сайта и решила посмотреть, что в alt-теге к картинке Платье-Пиджак.

Открыла код страницы, нашла надпись Платье-пиджак и посмотрела alt-тег.

А там ерунда alt=ix001xw00kdo_1083536 (2). А должно быть alt=Платье-пиджак. В ближайшем будущем все картинки будут подписаны, а значит Google и Yandex нас смогут найти.

Что такое атрибут ALT?

Альтернативные атрибуты — это текст, описывающий изображение. Они полезны для поисковых систем и посетителей с ослабленным зрением.

Атрибут alt — это «альтернативная» текстовая версия изображения, которая отображается на веб-сайте, когда изображение недоступно или когда посетителю нужна текстовая альтернатива. Ниже жирным шрифтом показано, как атрибут alt выглядит в HTML:

alt =" открыл кожаный журнал " />

Альтернативные атрибуты выгодны трем основным группам:

1. слабовидящих посетителей
2. поисковики
3. маркетологов

Посетители с нарушениями зрения

Alt предоставляют посетителям с ослабленным зрением альтернативу изображениям. Это позволяет посетителям использовать программы, которые читают текст вслух, чтобы понять, какие изображения добавляют к контенту.

Например, люди с ослабленным зрением находятся в невыгодном положении при просмотре веб-сайтов, на которых для навигации используются изображения, поскольку у них нет способа узнать основные категории веб-сайта.Но если изображения имеют атрибуты alt, есть способ выяснить назначение этих изображений.

Поисковые системы

Атрибут alt помогает поисковым системам расшифровать тему изображения, чтобы они знали, когда включать изображение в релевантные результаты поиска. Это делает изображения с атрибутами alt более вероятными.

Маркетологи

Рекомендуется использовать атрибуты alt с соответствующими изображениями, поскольку атрибуты alt с большей вероятностью будут занимать более высокое место в результатах поиска.Поиск картинок Google получает более 1 миллиарда просмотров страниц в день. Оптимизация изображений может увеличить долю этого трафика.

Больше внимания на ваши изображения может повысить узнаваемость бренда, если ваши изображения демонстрируют ваш бренд. Кроме того, чем выше рейтинг ваших изображений в поиске изображений, тем больше вероятность, что люди будут нажимать на результаты поиска и посещать ваши страницы. Таким образом, оптимизация изображений может увеличить посещаемость вашего сайта.

Краткое техническое руководство

Атрибут alt используется в теге изображения в HTML.

HTML — это язык форматирования. Его основная роль — объяснять программам вроде Chrome, как размещать элементы дизайна, такие как изображения и текст, на веб-странице. HTML состоит из различных тегов, объясняющих, что и как должно отображаться.

Если вы хотите увидеть, как выглядит HTML, отредактируйте сообщение в блоге в WordPress и щелкните вкладку «Текст», чтобы отобразить HTML-версию сообщения в блоге. Один из распространенных тегов HTML, который вы, вероятно, встретите, — это тег изображения. Выглядит это так:

... />

Атрибуты в теге определяют, что отображается и как это выглядит. В теге изображения атрибут src (сокращение от source) объясняет, какое изображение отображать. Тег изображения ниже имеет атрибут src, который указывает, что должно отображаться изображение book.gif.

src = "book.gif" />

Есть много других атрибутов изображения. Например, вы можете указать высоту и ширину изображения с атрибутами.

height = "200" width = "100" />

Атрибут alt, в частности, является текстовой альтернативой изображения. Обычно атрибуты alt объясняют, что такое изображение. Вот пример тега изображения, использующего атрибут alt.

height = "200" alt = "открытый кожаный журнал с записью в нем" />

Терминология

Альтернативный текст

Люди часто неправильно используют термины «атрибут alt» и «альтернативный текст» как синонимы.Альтернативный текст - это значение, которое задает атрибут alt. Смайлик - это альтернативный текст, указанный в атрибуте alt alt = «Улыбающееся лицо» .

Альтернативный тег

Термин «альтернативный тег» - это неправильное использование и сочетание двух отдельных терминов. Атрибут alt - это тип атрибута, используемый в теге изображения . Технически «тегов alt» не существует, хотя они обычно используются для ссылки на атрибуты alt и / или текст alt.

Ресурсы для альтернативных атрибутов

Синонимы

Начать отслеживание SERPS

Следите за ходом своей маркетинговой кампании, отслеживая рейтинг ваших ключевых слов в нескольких поисковых системах, устройствах или почтовых индексах ежедневно, еженедельно или ежемесячно.

Доступность в Пенсильвании | Изображение ALT Text

Содержание страницы

О тексте ALT

ALT текст относится к невидимому описанию изображений, которые читаются вслух слепым пользователям с помощью программы чтения с экрана. Добавление текста ALT позволяет авторам включать изображения, но при этом предоставлять контент в альтернативном текстовом формате. См. Пример ниже, чтобы узнать, что происходит с программой чтения с экрана, когда не используется текст ALT.

Поскольку на этой странице нет тегов ALT изображений, ее нельзя использовать, когда изображения не отображаются.
Примечание: Автобусный вокзал Ниттани - вымышленная компания.

Если текст ALT не указан, программа чтения с экрана сможет только сказать «IMAGE» или, возможно, предоставить имя файла.

WCAG 2.0 Guideline 1.1.1 - «Весь нетекстовый контент, который предоставляется пользователю, имеет текстовую альтернативу, которая служит аналогичной цели».

На этой странице приведены общие рекомендации по использованию текста в теге ALT . Чтобы узнать о конкретных действиях в рамках конкретного инструмента, выберите ссылку в разделе «Как сделать с помощью ALT-текста».

Точное, краткое описание

Важно не только предоставить текст ALT, но также предоставить тот, который будет полезен в контексте документа. Возможно, вам не нужно включать все детали изображения, и вы можете пропустить чисто декоративные изображения, но те, которые содержат важную информацию, должны быть указаны в тексте ALT.

Хорошее практическое правило, которое следует учитывать, - включить то, что вы могли бы ретранслировать по телефону.

Пример инфографики

Рассмотрим изображение в магазине электронной торговли, на котором изображены два логотипа компании, выпускающей кредитные карты.Если вам нужно знать, какие кредитные карты принимаются, какой текст ALT лучше?

Выберите предпочтительный ALT-текст для логотипа кредитной карты

1. ALT = "Логотипы кредитных карт" (какие?)
2. ALT = "Принимаются Vidi-Visi и Magic Card." (передает определенные карточки)

Художественный пример

Взгляните на эту картину Джорджа Вашингтона в Вэлли-Фордж (иллюстрация из Библиотеки Конгресса).

При выборе тега ALT задача состоит в том, чтобы понять, ПОЧЕМУ изображение включено.

Это в рамках курса истории? курс истории климата? Смысл изображения в том, чтобы показать, как были одеты солидеры, или что ЛаФайет был в Valley Forge?

Ответ может повлиять на то, как вы пишете текст ALT.

Возможный альтернативный текст для картины Джорджа Вашингтона

1. ALT = "Джордж Вашингтон в Вэлли-Фордж" (наиболее сжато)
2. ALT = "Джордж Вашингтон и Лафайет верхом на лошади разговаривают с солдатами в снегу в Вэлли-Фордж" (подробнее)
3. ALT = "Кузница долины зимой.Пейзаж покрыт снегом, солдаты сидят у дороги с костром ». (подчеркивая климат)

Подсказка для длинных описаний: Если описание носит технический характер, возможно, стоит включить его в основной текст, чтобы все читатели могли получить от него пользу.

Заголовок и ALT-текст

При создании текста ALT важно помнить, что он должен описывать изображение. Он НЕ должен включать информацию об авторских правах или любую дополнительную информацию, которая может иметь отношение к зрителям.

См. Пример ниже

Картина Джона Дансмора ок. 1907 г. и изображает Джорджа Вашингтона и маркиза де Лейфайета верхом на лошади. Обратите внимание на небольшие домики на заднем плане. Изображение из Библиотеки Конгресса
ALT Текст =
Джордж Вашингтон на прогулке в зимнем Valley Forge

Сложные изображения и подробное описание

тегов ALT обычно рекомендуется делать краткими (около 125 символов). Однако некоторые изображения настолько сложны, что может потребоваться дополнительная информация.Сегодня большинство экспертов рекомендуют включать текст ALT, который отсылает слепых пользователей к текстовому описанию в другом месте, которое видно всем.

См. Различные примеры в разделе «Сложные изображения».

Начало страницы

Важность альтернативных тегов

Практически всем, кто хоть немного разбирается в доступности, сказали, что они должны использовать теги alt на всех изображениях. Тег alt на самом деле не является тегом; это атрибут в теге изображения.Почему так важно использование этих атрибутов?

Кто пострадал

• Слепым или слабовидящим пользователям нужны теги alt на изображениях. Пользователи, которые не видят экран и зависят от программы чтения с экрана, не смогут понять изображение на странице. Без тега alt программа чтения с экрана прочитает исходный код, и слепой пользователь, скорее всего, услышит что-то вроде «рисунок 42368» или имя файла изображения, например «рисунок htrn.png». Тег alt описывает изображение или, по крайней мере, указывает, что изображение пытается передать человеку, просматривающему страницу.Кроме того, пользователи с увеличением экрана могут быть не в состоянии получить полное представление об изображении и, следовательно, нуждаются в теге alt, чтобы сообщить им, какова цель изображения.
• Некоторые люди с определенными типами когнитивных проблем не могут понять назначение изображения на веб-странице. Они могут навести указатель мыши на изображение и увидеть тег alt, а тег alt может передать им цель изображения и, таким образом, значительно улучшить их работу в Интернете.
• Стоит отметить, что поисковая оптимизация (SEO) также улучшается, если изображения помечены правильно.

Некоторые соображения

• Помните, что теги alt должны передавать цель изображения, а не обязательно дословное описание. Так что сделайте все возможное, чтобы дать важные элементы описания, одновременно передавая, почему присутствует изображение.
• Держите это кратко. Если ваш альтернативный тег должен быть длинным, чтобы передавать информацию, которую должен понять пользователь, рассмотрите возможность использования длинного описания (longdesc) или предоставления подробного описания изображения в тексте страницы.
• Если изображение носит чисто декоративный характер и не служит информационной цели, используйте нулевой тег alt . Программы чтения с экрана игнорируют эти нулевые теги alt, и пользователь программы чтения с экрана никогда даже не узнает о существовании этих декоративных изображений.

  Дополнительные ресурсы:

• Доступность: лучшие практики альтернативного текста изображения

Альтернативный тег и текст для SEO: определение и передовой опыт

Тег alt (атрибут alt или альтернативный тег) может использоваться для обозначения изображений и графики в документе HTML.Если в браузере выбрано отображение изображения, вместо изображения отображается тег alt. В контексте поисковой оптимизации (SEO) это важный параметр при оптимизации на странице, поскольку Google может лучше понять, что можно увидеть на изображениях, благодаря тегам alt. Сохраненный альтернативный текст - это краткое описание выгруженного изображения.

Код для тега alt хранится как элемент HTML в исходном тексте файла изображения. Крайне важно использовать символы двойного кодирования вместо одинарных кавычек:

Большинство CMS предлагает автоматическую реализацию тега alt. При маркировке не забудьте назвать главное ключевое слово и выбрать как можно более короткое и содержательное описание. Кроме того, использование одних и тех же ключевых слов снова и снова для определенного запроса в тегах alt может привести к чрезмерной оптимизации и штрафу за заполнение ключевых слов, теги alt на изображениях должны быть полезны для веб-доступности и естественности.

В 2020 году возможности Google по визуальному пониманию и классификации визуальных запросов значительно выросли благодаря технологиям искусственного интеллекта.Тексты, лица, объекты, места, достопримечательности, животные, пейзажи на изображениях, а также расширение изображений, цветовая палитра, метаданные IPTC и многое другое могут быть использованы для понимания контекста изображения для веб-страницы. Альтернативные теги, URL-адреса изображений, заголовки изображений, подписи к изображениям, ссылки на изображениях, текст-оболочка изображений - это другие, но более старые ранжирование изображений и факторы понимания для поисковой оптимизации. Кроме того, чтобы увидеть, как Google воспринимает изображение в сети, можно использовать Vision AI of Google, который представляет собой новую технологию визуального восприятия AI.

Для чего нужен атрибут ALT?

Атрибут термина alt состоит из двух слов. «Alt» - это сокращение от «альтернативы». Термин «атрибут» также используется в грамматике. Здесь атрибут - это дополнение к существительному, которое описывается еще точнее. Термин «Alt-Tag», который сейчас также используется, является синонимом - английское «tag» обозначает отметку или награду. В коде HTML атрибут является дополнением к команде. Помимо тега alt, существуют другие теги, такие как теги H для заголовков или заголовки в качестве тегов для изображений.Чтобы узнать больше об этих HTML-тегах , вы можете прочитать «Использование семантического HTML и его важность для SEO».

Для графических изображений замещающий текст описывает изображение. Он служит в первую очередь для этой цели, а не для поисковой оптимизации. Информация, хранящаяся в замещающем тексте, может затем отображаться в качестве альтернативы графическому изображению. Это происходит, например, когда пользовательский агент не предлагает поддержку изображений или у пользователя нет графических изображений, автоматически загружаемых браузером или почтовой программой.Атрибуты изображения также можно использовать, если есть проблемы с сервером и графика не может быть загружена. Кроме того, иногда разработчики перемещают папку изображений на сервере, в результате чего изображения на веб-сайте не могут быть видны пользователям и поисковым роботам. Даже тогда тег alt вступает в силу и отображается вместо изображения.

Тег alt играет важную роль в разработке безбарьерных веб-сайтов. В этом случае альтернативный текст для изображений также имеет практическое применение: например, слепые пользователи могут читать веб-контент с помощью так называемых «программ чтения с экрана».Поскольку эти считыватели не могут интерпретировать изображения, они считывают соответствующие теги alt. Таким образом, пользователи с ограниченными возможностями имеют возможность понимать не только тексты, но и графические элементы веб-сайта. Чтобы узнать больше о важности безбарьерного дизайна веб-сайта, удобства использования веб-сайта и взаимодействия с пользователем, ознакомьтесь с нашими рекомендациями.

Атрибуты ALT как контент для поисковых систем

Роботы поисковых систем - очень сложные сборщики данных, даже если они обладают сильным визуальным пониманием и способностью восприятия, помогая поисковым роботам понять существующее назначение изображений на веб-странице, может помочь повысить эффективность сканирования и надежность контента.По этой причине поисковые системы индексируют данные изображений на основе дополнительной информации, которую сканеры находят на веб-сайте. Важным компонентом для распознавания содержимого изображения является атрибут alt. Это помогает поисковым системам определять релевантность графического контента для поиска изображений и обычного поиска.

Сам Google рекомендует использовать альтернативные тексты для графики. В следующем видео Мэтт Каттс (бывший главный борец со спамом и солиситор из Google) объясняет, как можно создавать подходящие тексты ALT: