Что такое атрибут alt: Что такое атрибуты Alt и Title для картинок и как их правильно составлять

Содержание

Что такое атрибуты Alt и Title для картинок и как их правильно составлять

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

Использование картинок сделает сайт привлекательнее и поможет удержать посетителей на нем, но что более важно, из поиска по картинкам в Яндексе или Google к вам на сайт может прийти дополнительный трафик (при корректном использовании атрибутов Alt и Title тега <img>).

Что такое атрибут Alt для картинок

Атрибут Alt для картинок – это текст, описывающий изображение в html-теге <img>. Он становится видимым в случае невозможности загрузки изображения. На месте незагруженной картинки будет показан текст (при заполненном атрибуте Alt).

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

А вот так будет выглядеть картинка с текстом «Стиральная машина Славда WS30T/ET» в атрибуте Alt тега <img>:

Атрибут Alt дает возможность узнать, что изображено на картинке, когда пользователь не может ее увидеть. Кроме того, прописанный текст в атрибуте Alt учитывается поисковыми роботами при индексации сайта. Наконец, оптимизация названий картинок и атрибутов Alt в теге <img> упрощает поиск изображений, например, в Яндекс или Google Картинках.

Как правильно составить атрибут Alt для картинок

Оптимальное количество слов – 3-5, но длина текста тега не более 75-80 символов. Мы рекомендуем использовать краткую и сжатую, но содержательную информацию.
Обязательное условие – использование ключевых запросов.
Ключевые слова лучше употреблять в именительном падеже, чтобы облегчить поиск.
Избегайте спама: мы не рекомендуем перечислять большое количество ключей через запятую, как и в других тегах.
Необходимо, чтобы Alt относился к тексту страницы и описывал то, что изображено на картинке.

Атрибут Title для изображений

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

В html-коде заполненный атрибут Title для картинок выглядит так:

Правильно составленный атрибут Title даже помогает улучшить поведенческие факторы.

Как правильно составлять Title для картинок

Атрибут Title должен соответствовать изображению. Не следует писать в нем то, что не имеет к картинке никакого отношения.
Лучше использовать небольшой по длине Title для удобства пользователей – никто не захочет читать километровую подсказку к картинке.
Желательно наличие ключевых слов. Не стоит употреблять такие слова, как «фото», «картинка» и т.д., ведь и так понятно, что это такое.

Пример правильного заполнения атрибутов Alt и Title для тега <img>

Рассмотрим на примере, как можно прописать текст в атрибутах Alt и Title для картинки. Для этого возьмем изображение с сайта строительной компании.

При составлении Alt необходимо сделать акцент на то, что вы продаете/предлагаете. Для картинки из нашего примера будет предпочтительнее составить альт «Строительство дома из бревна», а не просто «дом» или «строительство».

Атрибут Title для данного изображения можно немного видоизменить и составить так: «Строительство бревенчатого дома».

Трудности при заполнении Alt и Title

Несколько фотографий одного и того же товара

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

В данном случае можно порекомендовать добавлять название цвета в текст Alt и Title. Например, для платья зеленого цвета можно составить такой Alt: «женское зеленое платье», а для платья красного цвета – «женское красное платье».
Большое количество товаров

Крупные интернет-магазины могут столкнуться со следующей проблемой: на сайте слишком много товаров и изображений для них. Чтобы составить атрибуты Alt и Title для тысячи товаров вручную, потребуется очень много времени. Поэтому, в данном случае, можно автоматизировать вывод этих атрибутов из названия продукции и/или заголовка Н1, а также добавить цвет или артикул товара.

Правильно заполненные атрибуты Alt и Title к картинкам помогут в поисковой оптимизации сайта. Но не стоит забывать и про другие аспекты оптимизации картинок, такие как «вес», качество и название изображений. Если у вас нет времени на составление атрибутов Alt и Title, мы можем помочь вам и выполнить эту работу за вас.

что это такое, что значит тег

Москва г. Москва, ул. Нобеля 7, п. 56 +7 (800) 700-59-30

Alt (Альт) – это атрибут для тега img, в котором устанавливается альтернативный текст для изображения. Текстовая информация отображается при отключенной загрузке графики в браузере пользователя и дает понять, что изображено на этой картинке. Название «alt» HTML-тег получил от слова alternative – альтернативный вариант текста.

Зачем заполнять атрибут alt

В поисковой системе индексируется не только текст, но и графическая информация, и изображения – один из источников дополнительного трафика. Чтобы показывать релевантные изображения при поиске по картинкам, Google и Яндекс ориентируются на теги, в которых и написано, что представлено на них. Благодаря этому в результатах поиска пользователь получает именно то, что искал.

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

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

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

Правила правильного заполнения alt

Для достижения максимального результата от заполнения тегов alt нужно придерживаться следующих правил.

Поисковые системы игнорируют длинные описания, поэтому регулируйте длину alt до 5–6 слов, но не превышайте 200–250 символов.
Описание изображения должно четко соответствовать его содержимому. Например, бессмысленно вставлять фразу «домашний кот» для изображения с автомобилем.
Для увеличения эффекта от оптимизации картинок рекомендуется использовать ключевые слова из тега h2 или заголовка статьи, но только в том случае, если они похожи по смыслу.
Не используйте в тексте большое количество ключевых слов, не допускайте спама в описании.

Не оптимизируйте атрибуты alt у изображений, которые относятся к фону вашего сайта, элементам меню. У них тег должен быть пустым или вовсе отсутствовать. Изображения для элементов дизайна по возможности можно выносить в CSS-спрайты.
Не придумывайте дополнительные теги alt для похожих картинок из одного материала или товара. Например, у вас интернет-магазин курток, у каждой несколько фотографий. Это значит, что для всех вы пишете одно и то же название, только можете добавить цифры 1, 2, 3 для разграничения.

Правила заполнения тега ALT

Правила заполнения ALT

Атрибут ALT (HTML тега img )

Alt (альт) – это атрибут тега img, позволяющий внести текстовое описание содержимого картинки. В HTML этот тег используется для добавления альтернативного описания изображения. Отсюда и такое название (alt – сокращенно от alternative). Теги альт используются для двух целей:

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

Ранжирование по картинкам

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

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

Не должен превышать 200–250 символов с пробелами. Оптимальный вариант – 5-6 слов.
Обязан быть релевантным запросу пользователя.
Описание должно совпадать с содержимым самой картинки.
В тег alt желательно вписать ключевое слово/фразу, которое содержится в заголовке страницы title или в названии статьи h2. Это увеличивает шансы на попадание в топ.

Альт должен быть только у контентных картинок. У фона и элементов интерфейса данный атрибут должен оставаться пустым.

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

Альтернативное описание

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

Как заполняется

В HTML alt является лишь атрибутом, несмотря на то, что все его привыкли называть тегом. Тегом в данном случае является img и записывается он следующим образом:

[img alt=”текст”]

По умолчанию он пустой. Задача веб-мастера – добавить вместо «текст» альтернативное описание содержимого:

[a href=»/index.php»][img src=»images/home.png» alt=»Вернуться на главную страницу»][/a]

Так выглядит alt, когда изображение представлено в виде ссылки.

Как правильно заполнять alt и title для картинок

Содержание:

Атрибуты alt и title в роли помощников по оптимизации

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

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

Что же из себя представляют атрибуты alt и title? Нужно ли их заполнять? Какова их роль в поисковой оптимизации? Продолжайте читать и Вы получите ответы на перечисленные и некоторые другие не менее важные вопросы.

Атрибут title. Необходимость и основные правила использования

Если честно, атрибут title является далеко не обязательным элементом SEO-оптимизации. Основная цель его использования – давать подсказки пользователям насчет содержимого просматриваемого изображения. При наведении курсора на картинку выводится содержимое атрибута title в белом прямоугольнике.

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

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

Не содержал информацию, по смыслу не соответствующую картинке. Иначе это будет вызывать отталкивающий эффект.
Был не слишком длинным. Ограничений как таковых нет, но всплывающая подсказка в две–три строки явно будет портить впечатление.
По возможности содержал одно из основных ключевых слов. Да, поисковики не зачтут этот дополнительный «прогиб». Но зато посетитель лишний раз убедится в релевантности просматриваемого материала его изначальному запросу в поисковой системе.
Не дублировать заголовки на странице (основной title, h2, h3 и т. д.) и содержимое атрибута alt. 100%-й уникальности тут, конечно же, добиться невозможно. Но добавить разбавляющие слова вроде «фото» или «картинка» по силам каждому.

Важность и нюансы заполнения атрибута alt изображений

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

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

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

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

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

Для того чтобы безопасно продвинуться в данном виде поиска нужно при заполнении атрибута alt изображений придерживаться следующих рекомендаций:

Как и название самого графического файла, атрибут alt для картинок должен по смыслу соответствовать их содержимому и быть релевантным обтекающему тексту.
Длина текста не должна быть меньше 3–4 слов и длиннее 250 символов.
Использовать ключевые слова можно, но не стоит перечислять в нем сразу несколько из них, так как поисковики посчитают это спамом и могут исключить из выдачи не только само изображение, но и всю страницу, на которой оно размещено.
Выберите одно, наиболее подходящее, и разбавьте парочкой дополнительных, стараясь сделать так, чтобы его употребление выглядело максимально естественным.
Также можно взять ту же фразу, что и в атрибуте title (если она не очень длинная) и заменить употребленные там слова-разбавители (например, вместо «картинка» использовать «фото»).
Не употреблять слова вроде «купить», «оформить», «цена», если они напрямую не относятся к изображению (если это не прайс-лист, например).

Коротко подведем итоги

Атрибут title:

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

Заполненный атрибут alt изображений:

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

Все вышеперечисленные моменты однозначно являются положительными. И поэтому выводы по поводу необходимости заполнения атрибутов alt и title Вы вполне сможете сделать сами.

Благодарим за внимание. Ждем Ваших вопросов под этой статьей.

Что такое атрибуты Alt и Title в WordPress, как их использовать

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

Что такое тег alt у изображений — описание картинок

Alt, или альтернативный текст, – это атрибут, добавленный к тегу вставки изображения в HTML-коде. Такой текст появляется внутри контейнера картинки, когда она по какой-либо причине не может быть отображена на странице. Это помогает поисковым системам понять, что показано на этом графическом элементе.

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

Что такое атрибут подписи заголовка title для изображений в WordPress

Title – это еще один атрибут, который можно добавить к тегу изображения в HTML-коде. Он используется для заголовка графического элемента и указывает его название. Заголовок показывается во всплывающей подсказке, когда пользователь наводит курсор мыши на картинку. Текст, введенный внутри title, не будет показан пользователю, если изображение не отображается на странице.

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

ALT и TITLE атрибуты изображений

8. Ответы на частые вопросы

Alt и TITLE – это описание изображение?
Нет. ALT – это альтернативное описание картинки. Title – это дополнительная подсказка. Google не рекомендует делать длинные атрибуты.

Могут ли Alt и Title дублировать друг друга?
Дублирование содержания допустимо.
Согласоно комментариями Джона Мюллера (Google) – при дублирование атрибутом это безусловно будет считаться дубликатом, но в этом нет никакой проблемы.

Яндекс рекомендует делать TITLE уникальным (но ничего не указывает, относительно дублирования содержания атрибута ALT и TITLE):

Но в других источниках можно встретить, что дублирование допустимо:

Многие крупные магазины используют формат повторения h2, пример:

Обязательно ли заполнять атрибуты Alt и Title для картинок?
Что говорит Яндекс:

Что говорит Google:

Объективно, поисковые системы рекомендуют заполнять атрибуты. На практике, основным тегом атрибутом ALT, тайтл удобно использовать как дополнение для юзабилити. Поэтому, если вам нужен трафик из поиска по картинкам и у вас отсутствует альт – у вас будут трудности.

Писать с большой буквы или маленькой?
Это не имеет значения.

На каком языке заполнять атрибуты Alt и TITLE?
На том языке, на котром сайт. Если ваш сайт на русском языке – заполните атрибуты на русском.

Где обычно заполняются атрибуты Alt и TITLE?
Как правило, это делается с помочью системы управления контентом (CMS). Поэтому, все зависит от возможностей админки.

Какой ALT и TITLE должен быть у логотипа сайта
Исключительно название компании.

Через CMS:
К примеру, в WordPress есть предустановленное поле при загрузке изображения:

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

<іmg srс="Путь к картинке">

Атрибуты:
alt=”Альтернативное описание” title=”Дополнительная информация”

И привести к виду:

<іmg srс="Путь к картинке" alt="Описание" title="Подсказка">

что это такое за тег

Атрибут Alt – что это? Это специальное расширение, созданное для тега img в HTML. Он предназначен для прописывания альтернативного текста для изображений на странице. Содержащаяся в атрибуте информация отображается только в двух случаях:

при отключении загрузки графического контента;
при плохом качестве или низкой скорости подключения к Интернету.

То есть тег Alt помогает пользователю понимать контекст графического контента, когда загрузить его не удалось.

Почему нужно прописывать атрибут Alt

Сегодня поисковые системы умеют индексировать не только текстовое, но и графическое наполнение страниц. Однако с определением релевантности картинок алгоритмы справляются не так хорошо. Поэтому тематика такого контента во многом определяется с помощью тега Alt. Информация из него анализируется для формирования выдачи поиска по картинкам в Google и «Яндексе». Следовательно, если добавить в поле Alt небольшой релевантный текст, то можно получить дополнительный источник трафика, которого никогда не бывает слишком много. Текст для HTML-атрибута Alt могут увидеть пользователи, поэтому при его составлении нужно не забывать про читабельность и полезность. Для справедливости нужно отметить, что на позиции сайта в стандартной органической выдаче атрибут «альт» не влияет.

Как правильно заполнить Alt

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

Оптимальная длина Alt – это 4-6 слов с общим объемом не более 200 символов. Более длинные тексты в этом поле поисковые системы игнорируют.
Описание должно быть релевантным тематическому содержанию графического контента. К примеру, нет смысла подписывать картинку с велосипедом «красивый щенок играет».
Постарайтесь внедрить в атрибут Alt ключевые слова из заголовка и h2, если они имеют тематическое соответствие с изображением.
Избегайте переспама и нечитаемых сочетаний тематической лексики.
Графическое наполнение для элементов дизайна нужно убирать в CSS-спрайты. Если это не сделано, то не нужно заполнять их поля Alt.
Необязательно придумывать уникальные описания для похожих картинок, расположенных на одной странице. К примеру, если создается обзор топ-10 велосипедов, то к условной фразе «горный велосипед» можно просто добавить цифры (1, 2, 3, 4 и т. д.) для индивидуализации.

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

Другие термины на букву «A»

Все термины SEO-Википедии

Теги термина

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

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

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

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

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

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

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

Атрибуты

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

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

`Как оптимизировать замещающий текст и текст заголовка • Yoast`

 Йост де Валк Йост де Валк - основатель и директор по продуктам Yoast. Он интернет-предприниматель, который незадолго до основания Yoast инвестировал и консультировал несколько стартапов. Его основная специализация - разработка программного обеспечения с открытым исходным кодом и цифровой маркетинг.
 Добавление изображений к статьям побуждает людей читать их, и хорошо подобранные изображения также могут служить резервной копией вашего сообщения и обеспечить вам хороший рейтинг в результатах поиска изображений.Но вы всегда должны помнить о том, чтобы давать своим изображениям хорошие атрибуты  alt : альтернативный текст усиливает сообщение ваших статей с помощью пауков поисковых систем и улучшает доступность вашего веб-сайта. В этой статье объясняется все об атрибутах alt и title, а также почему вы должны их оптимизировать.
 Содержание 
  Есть ли у вас оранжевая отметка для ключевой фразы в атрибутах alt в Yoast SEO? Прочтите, как сделать эту пулю зеленой. 
 Что такое атрибуты alt и атрибуты заголовка? 
 Это полный тег изображения HTML:
   
 Атрибуты alt и title изображения обычно называются тегом alt или тегом alt и заголовком. Но технически это не теги, это атрибуты. Альтернативный текст описывает, что изображено на изображении, и его функции на странице. Поэтому, если вы используете изображение в качестве кнопки для покупки продукта X, в замещающем тексте должно быть написано: «кнопка для покупки продукта X».
 Тег  alt  используется программами чтения с экрана, то есть браузерами, используемыми слепыми и слабовидящими людьми.Эти программы чтения с экрана сообщают им, что изображено на изображении, считывая тег  alt . Атрибут  title  отображается как всплывающая подсказка при наведении курсора на элемент. Таким образом, в случае кнопки с изображением заголовок изображения может содержать дополнительный призыв к действию. Однако это не лучшая практика.
 Каждое изображение  должно иметь  альтернативный текст. Не только для целей SEO, но и потому, что слепые и слабовидящие люди иначе не будут знать, о чем изображение. Атрибут заголовка - , а не .Более того, в большинстве случаев добавлять его не имеет смысла. Они доступны только для пользователей мыши (или других указывающих устройств), и единственный случай, когда атрибут  title  равен , требуется  для доступности, - это теги   </code> и <code><frame> </code>.</p><p> Если информация, передаваемая атрибутом <code> title </code> релевантна, подумайте о том, чтобы сделать ее доступной где-нибудь в другом месте, в виде обычного текста, а если она не актуальна, рассмотрите возможность полного удаления атрибута <code> title </code>.</p><h4><span class="ez-toc-section" id="i-18"> Но что, если изображение не имеет цели? </span></h4><p> Если в вашем дизайне есть изображения <em> исключительно </em> из соображений дизайна, вы делаете это неправильно. Эти изображения должны быть в вашем CSS, а не в HTML. Если вы действительно не можете изменить эти изображения, присвойте им пустой атрибут <code> alt </code>, например:</p><p> <code> <noscript><img class="lazy lazy-hidden" src = "image.png" alt = ""></noscript><img class="lazyload lazy lazy-hidden" src = "image.png" alt = ""><noscript><img src = "image.png" alt = ""></noscript> </code></p><p> Пустой атрибут <code> alt </code> гарантирует, что программы чтения с экрана пропускают изображение.В WordPress вы можете оставить поле «Альтернативный текст» в настройках изображения пустым.</p><h3><span class="ez-toc-section" id="_SEO"> альтернативный текст и SEO </span></h3><p> В статье Google об изображениях есть заголовок «Используйте описательный замещающий текст». Это не случайно: Google уделяет относительно высокое значение альтернативному тексту. Они используют его, чтобы определить, что находится на изображении, а также как оно соотносится с окружающим текстом. Вот почему в нашем анализе контента Yoast SEO у нас есть функция, которая специально проверяет, есть ли у вас хотя бы <em> одно изображение </em> с тегом alt, содержащим вашу ключевую фразу.</p><h3><span class="ez-toc-section" id="_alt-6"> Что делает ключевая фраза в атрибутах alt изображения? </span></h3><p> Ключевое слово в оценке атрибутов alt изображения в Yoast SEO проверяет, есть ли изображения в вашем сообщении и есть ли у этих изображений альтернативный текст с ключевой фразой фокуса. Добавляя замещающий текст, вы предоставляете пользователям программ чтения с экрана и поисковым системам текстовое описание того, что находится на этом изображении. Это улучшает доступность и ваши шансы на ранжирование в поиске изображений.</p><p> Мы определенно <em>, а не </em>, говорим, что вы должны спамить ключевую фразу в каждом теге alt.Вам нужны хорошие, высококачественные, похожие изображения для ваших сообщений, где имеет смысл использовать ключевое слово focus в замещающем тексте. Вот совет Google по выбору хорошего альтернативного текста:</p><blockquote><p> При выборе замещающего текста сосредоточьтесь на создании полезного, насыщенного информацией содержания, которое использует ключевые слова соответствующим образом и находится в контексте содержания страницы. Избегайте заполнения атрибутов alt ключевыми словами (наполнение ключевыми словами), поскольку это отрицательно влияет на пользовательский опыт и может привести к тому, что ваш сайт будет рассматриваться как спам.</p></blockquote><p> Если ваше изображение относится к определенному продукту, включите в тег alt и полное название продукта, и идентификатор продукта, чтобы его было легче найти. В общем: если ключевая фраза может быть полезна для поиска того, что <em> находится на изображении </em>, включите ее в тег alt, если можете. Кроме того, не забудьте изменить имя файла изображения, чтобы оно действительно описывало то, что на нем.</p><h4><span class="ez-toc-section" id="i-19"> Оценочные баллы </span></h4><p> Если в вашем контенте более 4 изображений, вы получите зеленую отметку только в том случае, если процент изображений с ключевой фразой в замещающем тексте находится в пределах от 30 до 70%.Когда вы используете ключевую фразу более чем в 70% изображений, ваш маркер станет оранжевым, чтобы не допустить переполнения ключевыми словами. Если у вас есть Yoast SEO Premium, плагин также будет учитывать синонимы, которые вы добавили в свою ключевую фразу.</p><h4><span class="ez-toc-section" id="Go_Premium"> Go Premium и </span></h4><strong> получают доступ к этой функции </strong>!</h4><p> Получите доступ ко многим функциям и <strong> всем нашим курсам SEO </strong> с плагином Yoast SEO Premium:</p><h3><span class="ez-toc-section" id="_alt_title_WordPress"> атрибуты alt и title в WordPress </span></h3><p> Когда вы загружаете изображение в WordPress, вы можете установить заголовок и атрибут alt.По умолчанию в атрибуте title используется имя файла изображения. И если вы не вводите атрибут alt, он копирует его в атрибут alt. Хотя это лучше, чем ничего не писать, это довольно плохая практика. Вам действительно нужно потратить время на создание правильного альтернативного текста для каждого изображения, которое вы добавляете в сообщение. Пользователи и поисковые системы будут вам за это благодарны.</p><h4><span class="ez-toc-section" id="_alt_WordPress"> Как добавить атрибуты alt в WordPress </span></h4><p> WordPress упрощает добавление атрибутов <code> alt </code>. Следуйте инструкциям ниже, чтобы добавить их к своим изображениям.Нет оправдания тому, что вы делаете это неправильно. Ваше (изображение) SEO действительно выиграет, если вы правильно разберетесь с этими мелкими деталями. Пользователи с ослабленным зрением также полюбят вас за это еще больше.</p><ol><li> <strong> Войдите на свой сайт WordPress. </strong><p> Когда вы войдете в систему, вы попадете в «Личный кабинет».</p></li><li> <strong> Откройте сообщение или страницу для редактирования содержимого. </strong></li><li> <strong> Щелкните блок изображения, чтобы открыть настройки изображения на вкладке «Блок» боковой панели.</strong><p> Вы увидите, что настройки изображения появятся на вкладке «Блок» боковой панели.</p></li><li> <strong> Добавьте альтернативный текст и атрибут заголовка. </strong><p></p></li><li> <strong> Нажмите «Обновить». </strong><p> Нажмите кнопку «Обновить» в правом верхнем углу.</p></li></ol><h3><span class="ez-toc-section" id="_SEO-2"> Подробнее об изображении SEO </span></h3><p> У нас есть очень популярная (и более длинная) статья о Image SEO. В этом посте рассказывается о множестве различных способов оптимизации изображений, но относительно не хватает деталей, когда речь идет о тегах <code> alt </code> и <code> title </code> - подумайте об этом как о надстройке к этой статье.Я рекомендую прочитать его, когда вы здесь закончите.</p><p> Подробнее: Оптимизация изображений для поисковых систем »</p><h3><span class="ez-toc-section" id="i-20"> Далее! </span></h3><ul><li> Событие <strong> Comference online 2021 </strong> 14-15 октября 2021 г.  Команда Yoast спонсирует онлайн-конференцию 2021 года, нажмите здесь, чтобы узнать, будем ли мы там, кто будет и многое другое!
Все мероприятия, в которых мы будем участвовать »</li><li> Вебинар по SEO <strong> Yoast Вебинар по новостям SEO - 31 августа 2021 года </strong> 31 августа 2021 г.  Зарегистрируйтесь на наш веб-семинар по новостям SEO в августе 2021 года.Наши SEO-эксперты Джоно и Джуст расскажут вам о последних новостях Google и WordPress.
Все вебинары Yoast SEO »</li></ul><h2><span class="ez-toc-section" id="_SEO-3"> Что это такое, как это писать и почему это важно для SEO </span></h2><p> Если вы тратите время на оптимизацию содержимого, заголовков, подзаголовков и метаописаний своего блога или веб-сайта для поисковых систем, следующее изображение должно вас насторожить:</p><p> Снимок экрана выше является первой страницей результатов поисковой системы (SERP), которую Google создает для поискового запроса "примеры таблиц Excel".«Обратите внимание, как, помимо вкладки« Изображения »вверху, Google помещает значительный пакет интерактивных изображений в начало главной страницы результатов - до того, как какие-либо результаты с обычным текстом станут даже видимыми.</p><p> Сегодня почти 38% результатов выдачи Google показывают изображения - и этот показатель, вероятно, будет расти. Это означает, что, несмотря на все ваши усилия по поисковой оптимизации, вы все равно можете упустить другой источник органического трафика: изображения вашего сайта. Как вы попадаете в этот источник трафика? Альтернативный текст изображения.</p><p></p><h3><span class="ez-toc-section" id="i-21"> Что такое замещающий текст? </span></h3><p> Альтернативный текст, также называемый альтернативными тегами и альтернативными описаниями, представляет собой письменную копию, которая появляется вместо изображения на веб-странице, если изображение не загружается на экран пользователя.Этот текст помогает инструментам чтения с экрана описывать изображения для читателей с ослабленным зрением и позволяет поисковым системам лучше сканировать и оценивать ваш сайт.</p><p> Независимо от того, проводите ли вы SEO для своего бизнеса или нет, оптимизация альтернативного текста изображения вашего веб-сайта - это ваш билет к созданию лучшего пользовательского опыта для ваших посетителей, независимо от того, как они впервые нашли вас.</p><h4><span class="ez-toc-section" id="i-22"> Как добавить замещающий текст к изображениям </span></h4><p> В большинстве систем управления контентом (CMS) щелчок по изображению в теле сообщения блога приводит к созданию модуля оптимизации изображений или расширенного текста, в котором вы можете создавать и изменять замещающий текст изображения.</p><p> Давайте рассмотрим, что следующие шаги для CMS Hub и WordPress ниже.</p><h5><span class="ez-toc-section" id="_HubSpot_CMS"> Как добавить замещающий текст в HubSpot CMS </span></h5><p> В HubSpot, как только вы щелкнете изображение и щелкните значок редактирования (который выглядит как карандаш), появится всплывающее окно оптимизации изображения.</p><p> Вот как выглядит это окно оптимизации изображения в CMS на вашем портале HubSpot:</p><p></p><p> Ваш замещающий текст затем автоматически записывается в исходный HTML-код веб-страницы, где вы можете дальше редактировать замещающий текст изображения, если ваша CMS не имеет легко редактируемого окна замещающего текста.Вот как этот тег alt может выглядеть в исходном коде статьи:</p><p></p><h5><span class="ez-toc-section" id="_WordPress_CMS"> Как добавить замещающий текст в WordPress CMS </span></h5><p> В WordPress при нажатии на изображение автоматически откроется вкладка <strong> Block </strong> на боковой панели. В разделе «Настройки изображения» добавьте замещающий текст в пустое поле.</p><p></p><p> Когда будете готовы, щелкните <strong> Обновить </strong> на панели инструментов в верхней части экрана.</p><p> Самое главное правило альтернативного текста? <strong> Будьте описательными и конкретными.</strong> Однако имейте в виду, что это правило замещающего текста может потерять свое значение, если ваш замещающий текст также не учитывает контекст изображения. Замещающий текст может не попасть в цель тремя разными способами. Рассмотрим примеры ниже.</p><h3><span class="ez-toc-section" id="3"> 3 примера замещающего текста изображений (хорошее и плохое) </span></h3><h4><span class="ez-toc-section" id="1"> 1. Ключевое слово и деталь </span></h4><p></p><h5><span class="ez-toc-section" id="i-23"> Неверный замещающий текст </span></h5> <code> alt = "Стена офиса HubSpot Сингапур Фрески на рабочем месте входящий маркетинг оранжевые стены отправить его" </code><p> Что не так со строкой замещающего текста выше? Слишком много ссылок на HubSpot.Использование замещающего текста для вставки ключевых слов во фрагментированные предложения добавляет к изображению слишком много путаницы и недостаточного контекста. Эти ключевые слова могут быть важны для издателя, но не для поисковых роботов.</p><p> Фактически, альтернативный текст выше затрудняет для Google понимание того, как изображение соотносится с остальной частью веб-страницы или статьи, на которой оно публикуется, что препятствует ранжированию изображения по соответствующим ключевым словам <em> longtail </em>, которые имеют более высокий уровень интереса. их.</p><p> Что еще хуже, если вы наберете слишком много ключевых слов, вы можете понести штраф Google.</p><h5><span class="ez-toc-section" id="i-24"> Хороший замещающий текст </span></h5><p> Принимая во внимание неправильный альтернативный текст (см. Выше), лучший альтернативный текст для этого изображения может быть:</p> <code> alt = "Оранжевая фреска с надписью" отправить "на стене в сингапурском офисе HubSpot" </code><h4><span class="ez-toc-section" id="2"> 2. Детализация и специфика </span></h4><p> <strong> </strong></p><p> <em> Изображение предоставлено Уинслоу Таунсон </em></p><h5><span class="ez-toc-section" id="i-25"> Неверный замещающий текст </span></h5> <code> alt = "Бейсболист отбивает мяч на бейсбольном поле" </code><p> Строка замещающего текста выше технически следует первому правилу альтернативного текста - быть описательной - но она не является описательной в правильном смысле.Да, на изображении выше показано бейсбольное поле и игрок, отбивающий бейсбольный мяч. Но это также фотография Фенуэй-Парка - и Дэвида Ортиса из Red Sox № 34, показывающего один на правом поле. Это важные особенности, которые Google потребуется для правильной индексации изображения, если оно, скажем, в блоге о спорте в Бостоне.</p><h5><span class="ez-toc-section" id="i-26"> Хороший замещающий текст </span></h5><p> Принимая во внимание неправильный альтернативный текст (см. Выше), лучший альтернативный текст для этого изображения может быть:</p> <code> alt = "Дэвид Ортис из команды Boston Red Sox отбивает мяч с домашней площадки в Fenway Park" </code><h4><span class="ez-toc-section" id="3-2"> 3.Специфика и контекст </span></h4><p></p><p> <em> Изображение через </em> <em> UCLA </em></p><p> Оба изображения выше имеют четкий контекст, который может помочь нам написать хороший альтернативный текст - один взят из офиса HubSpot, а другой - Fenway Park. Но что, если у вашего изображения нет официального контекста (например, названия места), которым можно было бы его описать?</p><p> Здесь вам нужно будет использовать тему статьи или веб-страницы, на которой вы публикуете изображение. Вот несколько плохих и хороших примеров альтернативного текста в зависимости от причины, по которой вы его публикуете:</p><h5><span class="ez-toc-section" id="i-27"> Для статьи о посещении бизнес-школы </span></h5><h5><span class="ez-toc-section" id="i-28"> Неверный замещающий текст </span></h5> <code> alt = "Женщина, указывающая на экран компьютера человека" </code><p> Строка замещающего текста выше обычно проходит как приличный замещающий текст, но, учитывая, что наша цель - опубликовать это изображение со статьей о поступлении в бизнес-школу, мы упускаем некоторые варианты ключевых слов, которые могли бы помочь Google связать изображение с отдельными разделами статьи.</p><h5><span class="ez-toc-section" id="i-29"> Хороший замещающий текст </span></h5><p> Принимая во внимание неправильный альтернативный текст (см. Выше), лучший альтернативный текст для этого изображения может быть:</p> <code> alt = "Профессор бизнес-школы указывает на экран компьютера студента" </code><h5><span class="ez-toc-section" id="i-30"> Для веб-страницы образовательного программного обеспечения для учителей бизнес-школ </span></h5><h5><span class="ez-toc-section" id="i-31"> Неверный замещающий текст </span></h5> <code> alt = "Учитель указывает на экран компьютера ученика" </code><p> Строка замещающего текста выше почти так же описательна и конкретна, как хороший замещающий текст из предыдущего примера, так почему же ее недостаточно для веб-страницы, посвященной программному обеспечению для образования? Этот пример еще глубже погружается в тему бизнес-школы и указывает, что идеальной аудиторией для этой веб-страницы являются учителя.Следовательно, замещающий текст изображения должен это отражать.</p><h5><span class="ez-toc-section" id="i-32"> Хороший замещающий текст </span></h5><p> Принимая во внимание неправильный альтернативный текст (см. Выше), лучший альтернативный текст для этого изображения может быть:</p> <code> alt = "Профессор, использующий образовательное программное обеспечение для обучения учащегося бизнес-школы" </code><h3><span class="ez-toc-section" id="i-33"> Оптимальные методы работы с замещающим текстом изображения </span></h3><p> В конечном итоге замещающий текст изображения должен быть конкретным, но также репрезентативным для темы поддерживаемой им веб-страницы. Уловили идею? Вот несколько важных ключей к написанию эффективного замещающего текста изображения:</p><ul><li> <strong> Опишите изображение и будьте конкретны.</strong> Используйте как предмет изображения, так и контекст, чтобы направлять вас.</li><li> <strong> Добавьте контекст, относящийся к теме страницы. </strong> Если на изображении нет узнаваемого места или человека, добавьте контекст на основе содержимого страницы. Например, альтернативным текстом для стандартного изображения человека, печатающего на компьютере, может быть «Женщина, оптимизирующая веб-сайт WordPress для SEO» или «Женщина, изучающая бесплатные платформы для ведения блогов», в зависимости от темы веб-страницы.</li><li> <strong> Используйте альтернативный текст длиной менее 125 символов </strong>.Инструменты чтения с экрана обычно перестают читать замещающий текст на этом этапе, отсекая длинный альтернативный текст в неудобные моменты при вербализации этого описания для слабовидящих.</li><li> <strong> Не начинайте замещающий текст с «изображение ...» или «изображение ...» </strong> Перейти прямо к описанию изображения. Инструменты чтения с экрана (и Google, если на то пошло) идентифицируют его как изображение из исходного HTML-кода статьи.</li><li> <strong> Используйте ключевые слова, но экономно. </strong> Включайте целевое ключевое слово вашей статьи только в том случае, если его легко включить в альтернативный текст.Если нет, рассмотрите <em> семантических </em> ключевых слов или просто самые важные термины в длиннохвостом ключевом слове. Например, если ключевое слово заголовка вашей статьи - «как привлечь потенциальных клиентов», вы можете использовать «создание потенциальных клиентов» в своем замещающем тексте, поскольку «как» может быть трудно естественным образом включить в замещающий текст изображения.</li><li> <strong> Не впихивайте ключевое слово в замещающий текст каждого изображения. </strong> Если ваше сообщение в блоге содержит серию изображений тела, включите ключевое слово хотя бы в одно из этих изображений. Определите изображение, которое, по вашему мнению, наиболее репрезентативно для вашей темы, и назначьте ему ключевое слово.Придерживайтесь более эстетичных описаний в окружающих СМИ.</li><li> <strong> Проверка орфографических ошибок. </strong> Слова с ошибками в замещающем тексте изображения могут нанести вред пользователю или запутать поисковые системы при сканировании вашего сайта. Вы должны просмотреть замещающий текст, как и любой другой контент на странице.</li><li> <strong> Не добавляйте замещающий текст к каждому изображению. </strong> Вы должны добавить замещающий текст к большинству изображений на веб-странице в целях SEO, UX и доступности, однако есть исключения. Например, изображения, которые носят исключительно декоративный характер или описаны в тексте рядом, должны иметь пустой атрибут alt.Для получения более подробной информации о том, когда добавлять замещающий текст, а когда нет, ознакомьтесь с этим деревом решений.</li></ul><h3><span class="ez-toc-section" id="_SEO-4"> Как альтернативный текст влияет на SEO </span></h3><p> Согласно Google, альтернативный текст используется - в сочетании с алгоритмами компьютерного зрения и содержимым страницы - для понимания тематики изображений.</p> Таким образом, замещающий текст<p> помогает Google лучше понять не только содержание изображений, но и веб-страницу в целом. Это может помочь увеличить вероятность того, что ваши изображения появятся в результатах поиска изображений.</p><p> При создании контента по теме подумайте, как ваша аудитория может предпочесть находить ответы на свои вопросы по этой теме. Во многих случаях поисковикам Google не нужен классический синий результат поиска с гиперссылкой - им нужно само изображение, встроенное в вашу веб-страницу.</p><p> Например, посетитель, ищущий, как удалить дубликаты в Excel, может предпочесть снимок экрана, чтобы сразу понять, как выполнить задачу.</p><p></p><p> Источник изображения</p><p> Поскольку это изображение имеет оптимизированный замещающий текст, оно появляется в результатах поиска изображений по ключевому слову longtail «как удалить дубликаты в Excel."Поскольку сообщение также появляется в результатах веб-поиска по тому же ключевому слову, посетители могут попасть на сообщение в блоге через эти два разных канала.</p><h3><span class="ez-toc-section" id="i-34"> Почему важен замещающий текст изображения? </span></h3><p> Мы уже упоминали несколько причин, по которым замещающий текст изображения важен, а именно: доступность, удобство для пользователя и трафик изображений. Понимание этих причин поможет вам написать лучший альтернативный текст для ваших изображений. Ниже мы более подробно рассмотрим основные причины, по которым замещающий текст изображения важен.</p><h4><span class="ez-toc-section" id="i-35"> Доступность </span></h4><p> Еще в 1999 году W3C опубликовал свои рекомендации 1.0 по обеспечению доступности веб-контента, чтобы объяснить, как сделать контент более доступным для пользователей с ограниченными возможностями. Одно из этих правил заключалось в том, чтобы «предоставить эквивалентные альтернативы звуковому и визуальному контенту». Это означало, что любые веб-страницы, включая изображения (или фильмы, звуки, апплеты и т. Д.), Должны включать информацию, эквивалентную своему визуальному или слуховому содержанию.</p><p> Например, скажем, веб-страница содержит изображение направленной вверх стрелки, которая ведет к оглавлению.Текстовым эквивалентом может быть «Перейти к оглавлению». Это позволит пользователю с программой чтения с экрана или другой вспомогательной технологией понять назначение изображения, не видя его.</p><p> Другими словами, замещающий текст помогает обеспечить доступность вашего визуального контента для всех пользователей, включая людей с нарушениями зрения.</p><h4><span class="ez-toc-section" id="i-36"> Пользовательский опыт </span></h4><p> Альтернативный текст не только обеспечивает лучший пользовательский интерфейс для пользователей с ограниченными возможностями - он обеспечивает лучший пользовательский интерфейс для всех пользователей. Скажем, у посетителя соединение с низкой пропускной способностью, поэтому изображения на вашей веб-странице не загружаются.Вместо того, чтобы просто видеть значок неработающей ссылки, они также увидят замещающий текст. Это позволит им понять, что изображение должно было передать.</p><p> Например, пользователь может видеть изображение слева. Если они не могут - из-за инвалидности, проблемы с пропускной способностью или по другой причине - они услышат или увидят замещающий текст справа. Это поможет улучшить взаимодействие с пользователем, чем если бы не было альтернативного текста.</p><p></p><p> Источник изображения</p><h4><span class="ez-toc-section" id="i-37"> Трафик изображений </span></h4><p> Одна из самых важных вещей, которые может сделать для вас замещающий текст изображения, - это превратить ваши изображения в результаты поиска с гиперссылками, которые появляются либо в Картинках Google, либо в виде пакетов изображений.Пакеты изображений - это особые результаты, отображаемые в виде горизонтального ряда ссылок на изображения, которые могут появляться в любой органической позиции (включая первое место в поисковой выдаче, как показано в примере во вступлении).</p><p> изображений, которые появляются либо в изображениях Google, либо в пакетах изображений, предоставляют еще один способ привлечь обычных посетителей. Это может привести к увеличению количества посетителей на тысячи - по крайней мере, в случае с HubSpot.</p><p> Начиная с 2018 года, команда блога HubSpot внедрила новую стратегию SEO, которая, в частности, была более сосредоточена на оптимизации замещающего текста изображений.Это помогло увеличить трафик изображений в блоге на 779% менее чем за год, в результате чего количество обычных просмотров увеличилось на 160 000. Вы можете узнать больше об успехах команды в этом сообщении в блоге.</p><h3><span class="ez-toc-section" id="i-38"> Добавление замещающего текста изображения на ваш сайт </span></h3><p> Итак, с чего начать разработку альтернативного текста для сообщений в блогах и веб-страниц? Рассмотрите возможность проведения базового аудита вашего существующего контента, чтобы увидеть, где вы можете включить замещающий текст в ранее немаркированные изображения. Посмотрите, как изменяется ваш органический трафик между страницами, которым вы присвоили новые теги alt.</p><p> Чем больше изображений вы оптимизируете, тем лучше будет продвигаться ваша стратегия SEO.</p><p> <em> Примечание редактора: этот пост был первоначально опубликован в сентябре 2018 года и был обновлен для полноты. </em></p><p></p><h2><span class="ez-toc-section" id="_ALT_HTML"> Доступность в Пенсильвании | Советы по тегу изображения ALT для HTML </span></h2><h3><span class="ez-toc-section" id="i-39"> Содержание страницы </span></h3><h4><span class="ez-toc-section" id="i-40"> Основные методы </span></h4><h4><span class="ez-toc-section" id="i-41"> Сложные изображения </span></h4><h4><span class="ez-toc-section" id="i-42"> Изображения как ссылки </span></h4><h3><span class="ez-toc-section" id="i-43"> Терминология </span></h3><p> Есть несколько терминов, которые обычно используются для описания текста ALT.Их можно использовать в разных контекстах, даже на этом веб-сайте.</p><ul><li> <b> ALT-текст </b> - концепция добавления удобного для чтения с экрана текста альтернативного описания изображения. Это может быть реализовано по-разному для разных типов документов.</li><li> <b> Атрибут ALT (HTML) </b> - В HTML текст ALT вставляется в атрибут ALT в теге IMG.</li><li> <b> ALT «Тег» </b> - Сокращенная ссылка на атрибут ALT.</li></ul><h3><span class="ez-toc-section" id="_ALT_Text"> Демонстрация ALT Text </span></h3><h4><span class="ez-toc-section" id="i-44"> Назначение </span></h4><p> Текст ALT добавляет текстовое описание к изображению на веб-странице и должен использоваться для всех изображений, графических маркеров и графических горизонтальных правил.</p><p> ALT текст используется пользователями программ чтения с экрана, чтобы предоставить им текстовый эквивалент изображений. В визуальных браузерах, таких как Firefox, текст ALT отображается, когда изображение не работает или когда все изображения отключены.</p><h4><span class="ez-toc-section" id="_WCAG"> Руководство WCAG </span></h4><p> <strong> Руководство WCAG 2.0 1.1.1. </strong> - «Весь нетекстовый контент, который предоставляется пользователю, имеет текстовую альтернативу, которая служит аналогичной цели».</p><h4><span class="ez-toc-section" id="i-45"> Примеры кнопок изображения </span></h4><p> Считайте изображения для разделов гипотетического образовательного сайта, все ниже которых содержат декоративный текст.<br/> <b> Примечание: </b> Любой текст, используемый в изображении, должен соответствовать правилам четкости и контрастности.</p><p></p><p> <br/> <br/> <br/></p><h4><span class="ez-toc-section" id="_ALT-2"> Вывод устройства чтения экрана с тегом ALT </span></h4><p> Если изображения не загружаются, текст ALT покажет, что изображения сказали бы в браузере, таком как Firefox.</p><h4><span class="ez-toc-section" id="_ALT-3"> Вывод устройства чтения с экрана без тега ALT </span></h4><p> Без текста ALT никто не может знать, каким было бы содержимое изображения.</p><p></p><h3><span class="ez-toc-section" id="_ALT-4"> Реализация атрибута ALT </span></h3><p> Ниже приведены несколько примеров того, как можно реализовать текст ALT в зависимости от контекста.</p><h4><span class="ez-toc-section" id="i-46"> Джордж Вашингтон Живопись </span></h4><p></p><h5><span class="ez-toc-section" id="i-47"> Посмотреть код </span></h5><p> Реализуйте текст ALT как атрибут в теге IMG. См. Пример ниже.</p><p> <code> <noscript><img class="lazy lazy-hidden" src = &#038; quot; Джордж Вашингтон и Лафайет верхом на лошади разговаривают с солдатами в снегу в Вэлли-Фордж .quot;></noscript><img class="lazyload lazy lazy-hidden" src = &#038; quot; Джордж Вашингтон и Лафайет верхом на лошади разговаривают с солдатами в снегу в Вэлли-Фордж .quot;><noscript><img src = &#038; quot; Джордж Вашингтон и Лафайет верхом на лошади разговаривают с солдатами в снегу в Вэлли-Фордж .quot;></noscript> </code></p><p> Другие атрибуты, такие как HEIGHT и WIDTH, все еще могут быть включены.</p><p> <b> Примечание: </b> Рекомендуемая длина текста ALT составляет около 125 символов. Это вмещает текстовое поле ALT программы чтения с экрана JAWS.Однако это не соответствует рекомендациям WCAG.</p><h4><span class="ez-toc-section" id="i-48"> Подписи к изображениям и альтернативный текст </span></h4><p> Любая информация об изображении, такая как информация об авторских правах, источнике изображения или дополнительная информация, должна быть помещена в текст подписи под изображением, а не в тексте ALT. См. Пример ниже.</p><p> <br/> Подпись: Картина Джона Уорда Дансмора «Вашингтон и Лафайет в Вэлли-Фордж» 1907 года. Изображение любезно предоставлено Библиотекой Конгресса.</p><h4><span class="ez-toc-section" id="i-49"> Логотипы </span></h4><p> Для логотипов, особенно логотипов, которые повторяются, достаточно указать, какой это логотип, не обязательно полностью описывать его</p><p></p><p> <code> <noscript><img class="lazy lazy-hidden" src = "CampLogo.gif "<b></noscript><img class="lazyload lazy lazy-hidden" src = "CampLogo.gif "<b><noscript><img src = "CampLogo.gif "<b></noscript> alt =" Логотип лагеря 2011 "</b> </code></p><p></p><h3><span class="ez-toc-section" id="_ALT-5"> Неправильное использование текста ALT </span></h3><p> ALT-текст <b> следует использовать ТОЛЬКО для описания изображения </b>.</p><p> Следует использовать <strong> НЕ </strong> для:</p><ul><li> ввести текст всплывающей подсказки,</li><li> предоставить информацию об авторских правах или источнике изображения или</li><li> передают дополнительную информацию о графике.</li><li> ввести условия поиска (это можно сделать с помощью правильного использования заголовков).</li></ul><h3><span class="ez-toc-section" id="i-50"> Пустой замещающий текст для декоративных изображений </span></h3><p> Некоторые изображения используются исключительно в целях макета или для улучшения содержимого для зрячих пользователей и не содержат содержимого.</p><p> Тег ALT для этих изображений может быть пустым (<b> <alt = «»> или <alt = »«>) </b>, чтобы программы чтения с экрана полностью их игнорировали.</p><p> В приведенном ниже примере будет использоваться образец изображения радужной панели инструментов, за которым следуют некоторые доступные и недоступные примеры кода.</p><h4><span class="ez-toc-section" id="_Rainbow"> Панель инструментов Rainbow </span></h4><p> Предположим, веб-сторона была разработана с радужной панелью инструментов, используемой для разделения фрагментов текста.</p><p></p><h5><span class="ez-toc-section" id="i-51"> Код изображения доступной панели инструментов </span></h5><p> <code> <noscript><img class="lazy lazy-hidden" src = "examples / Spectrumtooltip.gif" <b></noscript><img class="lazyload lazy lazy-hidden" src = "examples / Spectrumtooltip.gif" <b><noscript><img src = "examples / Spectrumtooltip.gif" <b></noscript> alt = "" </b>> </code> <br/> OR <br/> <code> <noscript><img class="lazy lazy-hidden" src = "examples / Spectrumtooltip.gif" <b></noscript><img class="lazyload lazy lazy-hidden" src = "examples / Spectrumtooltip.gif" <b><noscript><img src = "examples / Spectrumtooltip.gif" <b></noscript> alt = "" </b>> </code></p><p> <i> Программа чтения с экрана ничего не говорит и переходит к следующему разделу </i></p><p> Примечание. Атрибут ALT с пробелом считается менее правильным, но может быть единственной опцией, разрешенной в некоторых системах управления контентом.</p><h5><span class="ez-toc-section" id="i-52"> Код изображения менее удобной панели инструментов </span></h5><p> <code> <noscript><img class="lazy lazy-hidden" src = "examples / Spectrumtooltip.gif" <b></noscript><img class="lazyload lazy lazy-hidden" src = "examples / Spectrumtooltip.gif" <b><noscript><img src = "examples / Spectrumtooltip.gif" <b></noscript> alt = "Линия радуги, используемая в качестве панели инструментов" </b>> </code></p><p> Программа чтения с экрана сообщает: <i> «Радужная линия как панель инструментов». </i> Если у вас восемнадцать радужных панелей инструментов, программа чтения с экрана повторит это восемнадцать раз. Этот текст не имеет отношения к пользователю программы чтения с экрана и увеличивает время чтения.</p><h5><span class="ez-toc-section" id="_ALT-6"> Нет тега ALT </span></h5><p> <code> <noscript><img class="lazy lazy-hidden" src = "examples / Spectrum.gif "></noscript><img class="lazyload lazy lazy-hidden" src = "examples / Spectrum.gif "><noscript><img src = "examples / Spectrum.gif "></noscript> </code></p><p> <i> <b> Без тега ALT программа чтения с экрана </b> говорит «Изображение», что заставляет пользователей задуматься, не упустили ли они что-нибудь важное. </i></p><p></p><h3><span class="ez-toc-section" id="i-53"> Резюме замещающий текст </span></h3><p> Если текстовое описание уже предусмотрено для изображения в основном тексте страницы, тогда тег ALT может просто предоставить краткое изложение изображения, а не полное описание.</p><p> См. На странице Изображение примеры того, как это можно использовать в различных ситуациях.</p><h4><span class="ez-toc-section" id="i-54"> Пример текста с изображением </span></h4><p> Ниже представлено изображение молекулы насыщенного жира с 18 молекулами углерода. Обратите внимание, что одинарные связи между элементами делают углеродную цепь относительно прямой. Единственная двойная связь находится справа, соединяя последний атом углерода с атомом кислорода.</p><p></p><h5><span class="ez-toc-section" id="_ALT_Tag"> Доступная сводка ALT Tag </span></h5><p> <code> <... alt = "молекула насыщенного жира с 18 Cs"> </code></p><h5><span class="ez-toc-section" id="_ALT-7"> Менее доступный, подробный тег ALT </span></h5><p> <code> <...alt = "Диаграмма показывает ряд Cs, соединенных горизонтальными линиями с H над каждым C, соединенным с вертикальными линиями. Справа третья H, а справа C соединена с O, затем H с одиночные строки, а также O с двумя линиями. "> </code></p><p> <b> ПРИМЕЧАНИЕ: </b> Этот вид описания был бы полезен, если бы он был необходим для понимания содержания, хотя лучшая стратегия может состоять в том, чтобы <b> включить описание в саму веб-страницу </b> или сделать ссылку на более подробное описание, как обсуждается в следующий раздел.Предположительно, любому студенту курса потребуется расширенное описание, чтобы понять структуру насыщенного жира</p><h3><span class="ez-toc-section" id="i-55"> Ссылки на расширенные описания </span></h3><p> В некоторых случаях может потребоваться добавить ссылку на расширенное описание изображения, особенно в случаях, когда изображения используются для передачи важного контента. Для этого есть несколько вариантов, но в приведенном ниже примере теги SUMMARY и DETAILS HTML 5 используются для создания кнопки раскрывающегося меню.</p><p> Эта опция работает в большинстве современных браузеров и не требует написания скриптов.Это также позволяет <b> зрячим пользователям </b> просматривать описание, которое может быть полезно, если графика не соответствует всем правилам использования цвета и контрастности.</p><h4><span class="ez-toc-section" id="i-56"> Пример диаграммы </span></h4><p> На приведенной ниже диаграмме показаны 10 штатов с наибольшим количеством жителей Пенсильвании, говорящих на немецком языке, по данным недавней переписи населения США. Ссылка на подробное описание ниже предоставляет дополнительные данные.</p><p></p><p> ALT: Таблица 10 штатов с наибольшим количеством жителей Пенсильвании, говорящих на немецком языке. См. Дополнительную информацию в подробном описании.</p><p> <b> Примечание: </b> Кто-то, использующий клавиатуру, может использовать клавишу ENTER / RETURN для переключения описания off и on. Обратите внимание, что длинные описания могут включать расширенный текст, включая таблицы и списки.</p><h5><span class="ez-toc-section" id="i-57"> Длинное описание </span></h5> Список 10 лучших штатов с номерами<p> На гистограмме выше показаны 10 штатов с наибольшим количеством жителей Пенсильвании, говорящих на немецком языке. Состояния от наибольшего к наименьшему числу говорящих:</p><ul><li> ПА (51 760)</li><li> ОН (28 705)</li><li> В (15895)</li><li> WI (7,205)</li><li> Нью-Йорк (6 485)</li><li> ПН (4 085)</li><li> MI (3,370)</li><li> Нью-Джерси (3,020)</li><li> Иллинойс (2315)</li><li> MD (2,040)</li></ul><h4><span class="ez-toc-section" id="i-58"> Посмотреть код </span></h4><p> Подробное описание встроено в тег DETAILS.Первый тег ниже - это тег SUMMARY, который предоставляет текст для раскрывающегося меню. Фрагмент кода также включает текст «Длинное описание» внутри тега h5, чтобы обеспечить место назначения заголовка для программ чтения с экрана. Наконец, добавляется атрибут TABINDEX = ”0 ″, чтобы гарантировать поддержку фокуса клавиатуры.</p><h5><span class="ez-toc-section" id="i-59"> Фрагмент кода </span></h5><pre>  <h5><span class="ez-toc-section" id="i-60"> Подробное описание </span></h5> 
<подробности>
<summary tabindex = "0"> Список 10 лучших штатов с числами </summary>
На гистограмме выше показаны 10 штатов с наибольшим количеством жителей Пенсильвании, говорящих на немецком языке.Состояния от большинства до наименьшего числа ораторов:
<ul>
 <li> PA (51 760)
 <li> ОН (28 705)
 <li> IN (15 895)
 <li> Висконсин (7205)
 <li> Нью-Йорк (6 485)
 <li> Миссури (4 085)
 <li> Мичиган (3 370)
 <li> Нью-Джерси (3020)
 <li> Иллинойс (2315)
 <li> MD (2 040)
</ul>
</details> </pre><p> В дополнение к приведенному выше коду HTML, CSS можно использовать для добавления форматирования к тегам SUMMARY и DETAILS.В приведенном ниже CSS код включает спецификации, позволяющие сделать тег SUMMARY больше похожим на ссылку. Он также добавляет рамку к тегу DETAILS.</p><h4><span class="ez-toc-section" id="_CSS"> Посмотреть CSS </span></h4><pre> подробностей {
    граница: 1px solid # 333;
    цвет: # 333;
    заполнение: 1em}

резюме {
font-weight: жирный;
    цвет: # 018;
    граница: 2px сплошная прозрачная;
    маржа: -1em;}

summary: focus, summary: hover {
    цвет: # 018;
    текст-оформление: подчеркивание;
    цвет фона: #def;
    граница: 2px solid # 018
}
 </pre><h3><span class="ez-toc-section" id="i-61"> Ссылки и кнопки </span></h3><p> Для изображений, используемых в качестве элементов навигации для запуска таких функций, как печать, загрузка или сохранение, ALT-текст <b> должен описывать пункт назначения или функцию </b>, а не изображение.</p><h4><span class="ez-toc-section" id="Clickable_vs_Non-Clickable_Penn_State_Shield"> Clickable vs. Non-Clickable Penn State Shield </span></h4><p> Когда щит Penn State используется на веб-странице, используемый текст ALT зависит от того, является ли он кликабельным (т. Е. Ссылается на домашнюю страницу Penn State) или нет.</p><p></p><p> Если изображение щита штата Пенсильвания используется для предоставления интерактивной ссылки на домашнюю страницу, текст ALT должен указывать место назначения (т. Е. ALT = «Домашняя страница штата Пенсильвания»). Обратите внимание, что тег IMG встроен в тег A для ссылка.</p><h5><span class="ez-toc-section" id="ALT_Clickable_Shield"> ALT текст для Clickable Shield </span></h5><p> <code> <a href = "http: // www.psu.edu "> <noscript><img class="lazy lazy-hidden" src =" psulogo.gif "<b></noscript><img class="lazyload lazy lazy-hidden" src =" psulogo.gif "<b><noscript><img src =" psulogo.gif "<b></noscript> alt =" Домашняя страница штата Пенсильвания "</b>> </a> </code></p><p> <i> Программа чтения с экрана скажет «Домашняя страница Пенсильванского университета», что является местом назначения </i></p><p> Примечание. Если экран НЕ активен, тогда текст ALT может быть «Penn State» или «Penn State shield».</p><h5><span class="ez-toc-section" id="i-62"> Щит без щелчка </span></h5><p> <code> <a href="http://www.psu.edu"> <noscript><img class="lazy lazy-hidden" src = "psulogo.gif" <b></noscript><img class="lazyload lazy lazy-hidden" src = "psulogo.gif" <b><noscript><img src = "psulogo.gif" <b></noscript> alt = "Penn State Logo" </b>> </a> </code></p><p> <i> Программа чтения с экрана скажет «Логотип Penn State», но не укажет, что эта ссылка ведет на домашнюю страницу Penn State.</i></p><p></p><p> Атрибут TITLE текста IMG может использоваться для создания всплывающей подсказки для зрячих пользователей. Но учтите это.</p><ul><li> Атрибут TITLE - <b> НЕ читается вслух по умолчанию </b> в большинстве программ чтения с экрана.</li><li> ALT Text обычно не отображается как всплывающая подсказка в большинстве браузеров.</li></ul><p> Если подсказка необходима для зрячих пользователей, то можно использовать атрибут <b> TITLE и ALT с одинаковой информацией </b>, чтобы гарантировать, что одинаковая информация доставляется обеим аудиториям.</p><p> См. Этот пример ниже</p><h4><span class="ez-toc-section" id="i-63"> Кнопка "Избранное" Сердце с подсказкой </span></h4><p> Рассмотрим версию изображения сердца ниже, которое можно использовать в интерфейсе для выбора любимых элементов (например, любимых песен или электронных книг).</p><p></p><p> И текст ALT, и атрибут TITLE - «Избранное»</p><h5><span class="ez-toc-section" id="i-64"> Посмотреть код </span></h5><p> <code> <noscript><img class="lazy lazy-hidden" src = "heart.png" <b></noscript><img class="lazyload lazy lazy-hidden" src = "heart.png" <b><noscript><img src = "heart.png" <b></noscript> alt = "Избранное" title = "Избранное"> </b> </code></p><p></p><h3><span class="ez-toc-section" id="i-65"> Объединение ссылки с текстом вместе </span></h3><p> Если ссылка включает изображение и текст ниже, их следует объединить, если это возможно, и можно использовать пустой ALT-текст.</p><p> Снова используя значок «Избранное», пример и код будут следующими.</p><p> <br/> Избранное</p><h5><span class="ez-toc-section" id="i-66"> Посмотреть код </span></h5><p> <code> <a href="#"> <br/> <noscript><img class="lazy lazy-hidden" src = "heart.png" <b></noscript><img class="lazyload lazy lazy-hidden" src = "heart.png" <b><noscript><img src = "heart.png" <b></noscript> alt = "" </b>> <br/> Избранное <br/> </a> <br/> </code></p><p> Начало страницы</p><h2><span class="ez-toc-section" id="WebAIM"> WebAIM: альтернативный текст </span></h2><h3><span class="ez-toc-section" id="i-67"> Введение </span></h3><p> Добавление альтернативного текста к изображениям - это первый принцип веб-доступности. Это также один из самых сложных в реализации.Интернет изобилует изображениями с отсутствующим, неправильным или плохим альтернативным текстом. Как и многое другое в веб-доступности, определение подходящего, эквивалентного альтернативного текста часто является вопросом личной интерпретации. В этой статье на примерах будет представлена наша опытная интерпретация правильного использования альтернативного текста.</p><p> Важно</p><p> Также см. Нашу статью об изображениях для получения дополнительной информации о доступности изображений.</p><h3><span class="ez-toc-section" id="i-68"> Основы альтернативного текста </span></h3><p> Альтернативный текст обеспечивает текстовую альтернативу нетекстовому содержимому веб-страниц.Мы будем обсуждать альтернативный текст только для изображений, хотя эти принципы могут быть применены к медиа, апплетам или другому нетекстовому веб-контенту.</p><p> Альтернативный текст выполняет несколько функций:</p><ul><li> Он читается программами чтения с экрана вместо изображений, позволяя содержание и функции изображения быть доступными для людей с зрительными или определенными когнитивными нарушениями.</li><li> Отображается вместо изображения в браузерах, если файл изображения не загружен или если пользователь решил не просматривать изображения.</li><li> Он обеспечивает семантическое значение и описание изображений, которые могут быть прочитаны поисковыми системами или использованы для последующего определения содержимого изображения только на основе контекста страницы.</li></ul><p> Ключевой принцип заключается в том, что компьютеры и программы чтения с экрана не могут анализировать изображение и определять, что оно представляет. Как разработчики, пользователю необходимо предоставить текст, который представляет <strong> КОНТЕНТ </strong> и <strong> ФУНКЦИЯ </strong> изображений в вашем веб-контенте.</p><p> Альтернативный текст может быть представлен двумя способами:</p><ul><li> В атрибуте <code> alt </code> элемента <code> img </code>.</li><li> В контексте или окружении самого изображения.</li></ul><p> Это означает, что атрибут <code> alt </code> (иногда называемый тегом <code> alt </code> <em> </em>, хотя технически это неверно) не единственный механизм для предоставления содержимого и функции изображения. Эта информация также может быть предоставлена в тексте рядом с изображением или на странице, содержащей изображение. В некоторых случаях, когда эквивалент не может быть представлен лаконично, может быть предоставлена ссылка на отдельную страницу, которая содержит более подробное описание содержимого изображения.</p><p> Важно</p><p> Термин <em> альтернативный текст </em>, используемый в этой статье, относится к текстовому эквиваленту изображения, независимо от того, где находится этот текст. Это относится не только к атрибуту <code> alt </code> тега изображения. <em> Альтернативный атрибут </em> будет использоваться при ссылке на сам атрибут, который часто, но не исключительно, содержит альтернативный текст <em> </em>.</p><p> <em> <strong> Каждое изображение должно иметь атрибут <code> alt </code>.</strong> </em> Это требование стандарта HTML (возможно, с некоторыми исключениями в HTML5). Изображения без атрибута <code> alt </code>, скорее всего, недоступны. В некоторых случаях изображениям может быть присвоено пустое значение атрибута <code> alt </code> (например, <code> alt = "" </code>, иногда называемый "нулевым" альтернативным текстом).</p><h3><span class="ez-toc-section" id="i-69"> Контекст - это все </span></h3><p> При определении подходящего альтернативного текста для изображений контекст решает все. Альтернативный текст для одного изображения может сильно отличаться в зависимости от контекста и окружения самого изображения.Возьмем, к примеру, следующее изображение Джорджа Вашингтона:</p><p></p><p> Альтернативный текст для этого изображения может сильно измениться в зависимости от контекста, как показано ниже.</p><p> Примечание</p><p> Чтобы наилучшим образом представить эти принципы альтернативного текста, большинству изображений в этой статье был предоставлен альтернативный текст «пример изображения». Однако содержание изображений обычно представлено в контексте страницы.</p><h4><span class="ez-toc-section" id="_1"> Пример 1 </span></h4><p></p><p> Из-за его роли главнокомандующего американскими войсками в Войне за независимость, а затем и первого президента Соединенных Штатов Джорджа Вашингтона часто называют «отцом своей страны».</p><p> Какой альтернативный текст подходит для изображения в Примере 1?</p><ol><li> "Образ Джорджа Вашингтона"</li><li> «Джордж Вашингтон, первый президент США»</li><li> Достаточно пустого атрибута <code> alt </code> (<code> alt = "" </code>).</li><li> "Джордж Вашингтон"</li></ol><p> Первый шаг при определении подходящего альтернативного текста для изображения состоит в том, чтобы решить, представляет ли изображение <strong> контент </strong> и имеет ли изображение функцию <strong> </strong>.В большинстве случаев изображение будет иметь функцию только в том случае, если оно содержится в ссылке (или является активной точкой карты изображения или кнопкой). Определить, представляет ли изображение контент и что это за контент, может быть намного сложнее. Если контент, который передает изображение, представлен в тексте в окружающем контексте изображения, тогда может быть достаточно пустого атрибута <code> alt </code>. В приведенном выше примере контент, представленный изображением, должен информировать пользователя о том, что это Джордж Вашингтон. Изображение не имеет функции, потому что это не ссылка и на него нельзя щелкнуть.</p><p> Давайте рассмотрим некоторые важные правила, касающиеся атрибута <code> alt </code>.</p><p> Важно</p><p> Атрибут <code> alt </code> обычно должен <em> </em>:</p><ul><li> <strong> Будьте точны и эквивалентны </strong> при представлении того же <em> содержимого </em> и <em> функции </em> изображения.</li><li> <strong> Будьте лаконичны. </strong> Это означает, что правильное содержание (если есть контент) и функция (если есть функция) изображения должны быть представлены настолько лаконично, насколько это необходимо.Обычно требуется не более нескольких слов, хотя редко могут быть уместными короткие предложения.</li><li> <strong> НЕ являются избыточными </strong> или не предоставляют ту же информацию, что и текст в контексте изображения.</li><li> <strong> НЕ используйте фразы «изображение…» или «изображение…» для описания изображения. </strong> Обычно пользователю очевидно, что это изображение. И если изображение передает контент, обычно нет необходимости, чтобы пользователь знал, что это изображение передает контент, а не текст.Если тот факт, что изображение является фотографией или иллюстрацией и т. Д., Является важным содержанием, может быть полезно включить это в альтернативный текст.</li></ul><p> Исходя из этих правил, вариант D (<code> alt = "Джордж Вашингтон" </code>), вероятно, будет лучшим альтернативным текстом в этом случае. Вариант А без необходимости описывает изображение как изображение. Вариант B предоставляет дополнительную информацию, которая не представлена непосредственно на изображении, а также является избыточной для содержимого, представленного позже в тексте.Вариант C (без атрибута <code> alt </code>) не подходит, потому что изображение передает контент, который непосредственно не представлен в окружающем контексте. Несмотря на то, что окружающий текст указывает на то, что он относится к Джорджу Вашингтону, визуальные пользователи могут сказать это непосредственно по содержимому изображения - поэтому, если изображение передает контент, ему следует дать альтернативный текст.</p><h4><span class="ez-toc-section" id="_2"> Пример 2 </span></h4><p> <br/> <strong> Джордж Вашингтон </strong></p><p> Из-за его роли главнокомандующего американскими войсками в Войне за независимость, а затем и первого президента Соединенных Штатов Джорджа Вашингтона часто называют «отцом своей страны».</p><p> Каким будет соответствующий атрибут <code> alt </code> для изображения в примере 2?</p><ol><li> "Джордж Вашингтон"</li><li> Достаточно пустого атрибута <code> alt </code> (<code> alt = "" </code>).</li><li> "Изображение"</li><li> Изображение не требует атрибута <code> alt </code>.</li></ol><p> В этом случае содержимое изображения представлено в окружающем содержимом, поэтому вариант B (<code> alt = "" </code>) является лучшим выбором.Вариант А был бы лишним. Вариант C предоставляет постороннюю и бесполезную информацию. Вариант D (без атрибута <code> alt </code>) никогда не будет правильным выбором - каждое изображение должно иметь атрибут <code> alt </code>.</p><h4><span class="ez-toc-section" id="_3"> Пример 3 </span></h4><p> <br/> <strong> Джордж Вашингтон </strong></p><p> Каким будет соответствующий атрибут <code> alt </code> для изображения в примере 3?</p><ol><li> Достаточно пустого атрибута <code> alt </code> (<code> alt = "" </code>).</li><li> «Запись в Википедии Джорджа Вашингтона»</li><li> «Подробнее»</li><li> "Джордж Вашингтон"</li></ol><p> В этом случае изображение также является ссылкой, поэтому у него есть функция.Когда изображение находится внутри ссылки, функция изображения должна быть представлена в альтернативном тексте, который также находится внутри ссылки. В этом случае в ссылке, описывающей функцию, нет смежного текста, поэтому он должен быть представлен в атрибуте <code> alt </code>. В результате вариант D («Джордж Вашингтон»), вероятно, является лучшим выбором. Хотя слова «Джордж Вашингтон» в атрибуте <code> alt </code> дублируют текст, который следует ниже, в этом случае избыточность необходима для адекватного описания функции.</p><p> Вариант А не подходит. <strong> Изображение, которое является единственным элементом ссылки, никогда не должно иметь отсутствующего или пустого атрибута <code> alt </code>. </strong> Это связано с тем, что программа чтения с экрана должна прочитать ЧТО-ТО, чтобы идентифицировать ссылку. Программы чтения с экрана могут считывать имя файла изображения или URL-адрес страницы, на которую ведет ссылка, что может оказаться полезным или бесполезным. И помните, что ссылка может быть прочитана вне контекста окружающего текста, например, когда пользователь перемещается по ссылкам на странице.Вариант B предоставляет контент, который недоступен только через изображение (т. Е. Вы не можете определить ссылки изображения на Википедию, просто взглянув на него). Вариант C не дает адекватного описания функции, особенно вне контекста.</p><p> Весь этот пример также можно было бы значительно улучшить, поместив изображение и текстовую подпись в одну ссылку:</p><p> В этом случае как содержание, так и функция ссылки и изображения представлены внутри ссылки, поэтому изображению может быть присвоено значение <code> alt = "" </code>, чтобы избежать избыточности.</p><p> По возможности избегайте использования словосочетаний «ссылка на ...» или «щелкните это изображение, чтобы ...» или аналогичных формулировок в атрибуте <code> alt </code>. Ссылки идентифицируются программами чтения с экрана как ссылки и должны быть визуально очевидны для зрячих пользователей.</p><h4><span class="ez-toc-section" id="_4"> Пример 4 </span></h4><p></p><p> В этой картине художник Эмануэль Лойце использовал свет, цвет, форму, перспективу, пропорции и движение для создания композиции.</p><p> Какой атрибут <code> alt </code> будет наиболее подходящим для изображения в примере 4?</p><ol><li> "Джордж Вашингтон"</li><li> "Картина Джорджа Вашингтона"</li><li> "Картина Джорджа Вашингтона, пересекающего реку Делавэр"</li><li> "Классическая картина, демонстрирующая использование света и цвета для создания композиции.«</li><li> «Картина Джорджа Вашингтона, пересекающего реку Делавэр. Вихревые волны окружают лодку, где величественный Джордж Вашингтон смотрит вперед из шторма в лучи света через реку, ведя свои осторожные войска в бой».</li></ol><p> Как и раньше, мы должны определить, представлено ли содержимое изображения в окружающем контексте. В данном случае это не так (по крайней мере, не полностью). Изображение отсутствует в ссылке, поэтому функция отсутствует.Но этот образ представляет собой гораздо более сложное исследование, и лучший ответ не может быть адекватно определен в ограниченном контексте, который нам был дан. Тем не менее, давайте рассмотрим возможные варианты.</p><p> Вариант А («Джордж Вашингтон»), вероятно, неадекватно описывает содержание изображения. Тот факт, что на картине изображен Джордж Вашингтон, не обязательно имеет значение в этом контексте. Вариант B («Картина Джорджа Вашингтона») может быть адекватным, но не дает особого дополнительного содержания.Однако может быть уместным описать изображение как картину, а не как фотографию или другой тип изображения. Вариант C предоставляет дополнительную информацию, которая может помочь пользователю идентифицировать сам контент. Помните, что альтернативный текст предназначен не только для слепых. Многие зрячие пользователи смогут идентифицировать конкретную рассматриваемую картину по этому описанию, тогда как «Джордж Вашингтон» сам по себе не будет достаточно описательным. Вариант D может быть подходящим, если целью изображения является представление определенной художественной техники, а содержание самого изображения не имеет значения.Вариант E также может быть подходящей альтернативой, если подробное изучение картины необходимо, но оно слишком длинное и многословное, чтобы быть полезным - такой текст лучше использовать в качестве текста на веб-странице.</p><p> Как видите, здесь нет <em> одного </em> правильного ответа. Лучший альтернативный текст будет зависеть от контекста и предполагаемого содержания изображения.</p><h3><span class="ez-toc-section" id="i-70"> Функциональные образы </span></h3><p> Изображения часто используются не только для предоставления контента, но и для обеспечения важных функций, таких как навигация.</p><h4><span class="ez-toc-section" id="_5"> Пример 5 </span></h4><p> Изображение «Продукты» является частью панели навигации.</p><p> Какой атрибут <code> alt </code> будет наиболее подходящим для навигационного изображения «Продукты» в примере 5?</p><ol><li> «Продукция»</li><li> «Ссылка на товары»</li><li> Изображение не передает контент, поэтому (<code> alt = "" </code>) будет достаточно.</li></ol><p> В данном случае вариант А - лучший ответ. Он обеспечивает как содержание, так и функцию изображения.На изображении отображается слово «Продукты», а также ссылка на страницу продуктов на сайте. Изображение будет идентифицировано как находящееся внутри ссылки, поэтому «Ссылка на» не требуется, что делает вариант B плохим выбором. Поскольку изображение - единственный объект в ссылке, <code> alt = "" </code> никогда не подходит. <strong> Когда изображение содержит только текст, отображаемый текст обычно может использоваться как альтернативный текст. </strong></p><h4><span class="ez-toc-section" id="_6"> Пример 6 </span></h4><p> Перейдите на следующую страницу, чтобы прочитать о президентстве Джорджа Вашингтона.</p><p></p><p> Какой атрибут <code> alt </code> будет наиболее подходящим для изображения синей стрелки в примере 6?</p><ol><li> "следующая"</li><li> "следующая страница"</li><li> «Президентство Джорджа Вашингтона»</li><li> «Продолжить президентство Джорджа Вашингтона»</li></ol><p> Опять же, это пример, на который нет однозначного наилучшего ответа. Фактически, в этом примере, вероятно, может быть уместен любой из вариантов.Вариантов A и B, вероятно, будет достаточно в большинстве случаев, если пользователю будет ясно, что в статье несколько страниц. Вариант C очень четко представляет функцию ссылки, но не указывает, что ссылка ведет на следующую страницу в серии. Вариант D может быть лучшим решением, поскольку он представляет функцию ссылки и сообщает, что она является частью серии страниц. Как указывалось ранее, определение наиболее подходящего альтернативного текста зависит от индивидуальной интерпретации, исходя из более широкого контекста рассматриваемого изображения.Описание этого изображения («стрелка») не подходит. Возможно, лучшим решением было бы разместить текст «Следующая страница» или аналогичный рядом с изображением и внутри ссылки, и в этом случае изображению можно было бы присвоить <code> alt = "" </code>.</p><h4><span class="ez-toc-section" id="_7"> Пример 7 </span></h4><p> Какой атрибут <code> alt </code> будет наиболее подходящим для изображения значка в примере 7? Обратите внимание, что значок находится внутри ссылки.</p><ol><li> «Заявление о приеме на работу»</li><li> "PDF-файл"</li><li> «Значок PDF»</li><li> Содержание изображения представлено в контексте, поэтому (<code> alt = "" </code>) подходит.</li></ol><p> Обратите внимание, что изображение находится внутри ссылки. Если бы его не было внутри ссылки, то текст <code> alt </code> мог бы быть другим. В этом случае, поскольку изображение предоставляет дополнительную информацию о функции ссылки, важно, чтобы оно находилось внутри самой ссылки и читалось вместе со ссылкой. Это очень важно, потому что ссылки часто доступны вне контекста из их окружения.</p><p> Вариант A («Заявление о приеме на работу») дублирует окружающий текст, поэтому это не лучший выбор.Вариант B - лучший выбор (хотя, возможно, будет достаточно даже более лаконичного «PDF») - он четко предоставляет содержимое, которое представлено изображением - ссылка на файл PDF. Функция («Загрузить заявление о приеме на работу») представлена в тексте ссылки, поэтому ее не нужно снова включать в атрибут <code> alt </code>. Вариант C («значок PDF») действительно описывает само изображение, поэтому не подходит для данного контекста. В другом контексте может быть важно, чтобы пользователь знал, что это изображение действительно является значком.Вариант D (пустой текст <code> alt </code>) не предоставляет важную информацию, которую представляет изображение.</p><p> Здесь важно отметить, что если бы значок сам был ссылкой на документ, альтернативный текст должен обеспечивать полную альтернативу содержания и функции комбинации ссылка / изображение. Что-то вроде «Скачать заявление о приеме на работу в формате PDF». Самого по себе «формата PDF» будет недостаточно, особенно если есть несколько документов со ссылками такого рода.В этом случае пользователь программы чтения с экрана, который перемещается по ссылкам на странице, услышит: «Формат PDF, формат PDF, формат PDF ...». Как правило, если одно и то же изображение используется на странице несколько раз, чтобы ссылки на разные места, альтернативный текст внутри ссылки должен указывать на различия.</p><h3><span class="ez-toc-section" id="i-71"> Декоративные изображения </span></h3><p> Декоративные изображения не представляют важного содержания, используются в макетных или неинформативных целях и не отображаются в ссылке. Почти во всех случаях разделители и декоративные изображения должны иметь пустые значения атрибута <code> alt </code> (<code> alt = "" </code>).</p><h4><span class="ez-toc-section" id="_8"> Пример 8 </span></h4><p> Текст содержимого здесь.</p><p></p><p> Текст нижнего колонтитула здесь.</p><p> Каким будет соответствующий атрибут <code> alt </code> для изображения горизонтального разделителя в примере 8?</p><ol><li> "декоративная строчка"</li><li> «Начало нижнего колонтитула»</li><li> «сепаратор»</li><li> <code> alt = "" </code> хватит</li></ol><p> Поскольку изображение не передает контент и не находится внутри ссылки, вариант D является наиболее подходящим выбором.Описание изображения не подходит.</p><p> Примечание</p><p> Когда изображение используется только в декоративных целях, часто лучше удалить изображение из содержимого страницы и добавить его в качестве фонового изображения с помощью CSS. Это полностью устранит необходимость в альтернативном тексте и удалит изображение из семантического и структурного потока страницы.</p><h4><span class="ez-toc-section" id="_9"> Пример 9 </span></h4><p> Наш бизнес обещает лучший сервис на планете.Наша команда профессионально обучена, чтобы предлагать отличное обслуживание клиентов на протяжении всего процесса переговоров по контракту.</p><p> Удовлетворение потребностей клиентов является нашим главным приоритетом и гарантировано, или ваши деньги вернутся.</p><p> Каким будет соответствующий атрибут <code> alt </code> для изображения в примере 9?</p><ol><li> «рукопожатие»</li><li> «Бизнесмены пожимают друг другу руки для заключения договора»</li><li> <code> alt = "" </code> хватит</li><li> «Гарантируем профессиональные услуги»</li></ol><p> При анализе этого примера определите, представляет ли изображение важный контент.В этом случае я бы сказал, что это не так. В современной практике в Интернете многим таким изображениям дается <em> описательный, </em> альтернативный текст, даже если изображения не содержат полезного контента. Вариант C (<code> alt = "" </code>), вероятно, будет наиболее подходящим в этом случае, потому что изображение не передает релевантный или важный контент. Варианты A и B описывают изображение, но не передают эквивалент того, что передает само изображение - что в данном случае является ничем или, возможно, только эмоциональным настроением или чувством.Другими словами, изображение в основном декоративное. Вариант D явно неверен, хотя стоит отметить, что дополнительная информация часто вводится в текст <code> alt </code>, чтобы предоставить дополнительную информацию или предоставить дополнительные ключевые слова для поисковых систем. Такая практика не является подходящим использованием альтернативного текста.</p><p> Примечание</p><p> Во многих случаях вы можете задать вопрос: «Если бы я не мог использовать это изображение, что бы я поставил на его место?» для определения подходящего альтернативного текста.</p><p> В приведенном выше примере маловероятно, что фотография рукопожатия будет заменена текстом, поэтому, вероятно, достаточно <code> alt = "" </code>.</p><h3><span class="ez-toc-section" id="i-72"> Расширенные изображения </span></h3><p> В некоторых случаях определение альтернативного текста может быть более трудным. Со всеми изображениями пользовательское тестирование и тестирование в программах чтения с экрана и текстовых браузерах может помочь вам определить наиболее подходящий метод для реализации альтернативного текста.</p><h4><span class="ez-toc-section" id="i-73"> Кнопки изображения формы </span></h4><p> Кнопки изображения формы должны иметь атрибут <code> alt </code>, который описывает функцию кнопки.Кнопки с изображениями часто используются для создания более привлекательных или уменьшенных версий кнопок стандартной формы. Альтернативный текст должен описывать, что будет делать кнопка при выборе, например «Поиск», «Отправить», «Зарегистрироваться», «Разместить заказ» и т. Д. Например, <code> <input type = "image" alt = "Отправить Search "> </code> может быть подходящим для кнопки с изображением в форме поиска по сайту.</p><h4><span class="ez-toc-section" id="i-74"> Карты изображений </span></h4><p> При использовании клиентских карт изображений у основного изображения должен быть атрибут <code> alt </code>.Атрибут <code> alt </code> должен представлять любой контент, который представлен с изображением, но не представлен горячими точками карты изображения. Например, если у вас есть карта штата Нью-Йорк, на которой есть горячие точки для каждого региона, изображение может иметь значение атрибута <code> alt </code> «Регионы Нью-Йорка». Если основное изображение не передает контент, а в первую очередь является контейнером для горячих точек (например, панель навигации), тогда подходит <code> alt = "" </code>.</p><p> Каждая горячая точка карты изображения (элемент <code> area </code>) должна иметь эквивалентный атрибут <code> alt </code>.Поскольку горячие точки являются интерактивными, каждая из них должна иметь альтернативный текст, описывающий функцию этой точки доступа.</p><p> Поскольку горячим точкам для карт изображений на стороне сервера нельзя дать альтернативный текст и поскольку они недоступны с клавиатуры, их не следует использовать.</p><h4><span class="ez-toc-section" id="i-75"> Срезы изображения </span></h4><p> Иногда большие изображения разделяются на несколько изображений на веб-сайте в целях дизайна. Когда несколько фрагментов изображения вместе передают контент, этот контент должен быть представлен пользователю.Обычно это делается путем предоставления альтернативного текста в атрибуте <code> alt </code> самого большого или наиболее заметного фрагмента изображения. Нецелесообразно повторять альтернативный текст без надобности, разбивать альтернативный текст по множеству атрибутов image <code> alt </code> или предоставлять вообще отсутствие альтернативы. Если фрагмент изображения находится внутри ссылки, альтернативный текст, описывающий функцию ссылки, должен быть предоставлен в атрибуте images <code> alt </code>, в атрибуте <code> alt </code> другого изображения внутри той же ссылки или в тексте внутри той же ссылки.Каждая ссылка должна содержать функциональный текст, описывающий функцию ссылок.</p><h4><span class="ez-toc-section" id="i-76"> Фоновые изображения </span></h4><p> Невозможно добавить альтернативный текст непосредственно в CSS или другие фоновые изображения. Изображения, передающие контент, обычно не следует размещать на фоне страницы или элемента.</p><p> Фоновые изображения, однако, можно использовать для декоративных изображений, таким образом удаляя изображение из потока содержимого страницы и устраняя необходимость в пустом атрибуте <code> alt </code>.</p><p> Иногда для представления контента используются спрайты изображений или другие фоновые изображения. Хотя их обычно следует избегать, если они используются, любой контент, передаваемый через фоновое изображение, должен быть доступен в разметке страницы. Если вместо изображения значка PDF в примере 7 выше было представлено фоновое изображение CSS, вы могли бы использовать технику замены текста для представления содержимого в ссылке:</p><p> <code> <a href="application.pdf"> Загрузите заявление о приеме на работу <span> (PDF) </span> </a> </code></p><p> Затем вы должны использовать CSS для размещения текста «(PDF)» (элемент <code> span </code>) за пределами экрана.См. CSS в действии: невидимое содержимое только для пользователей программ чтения с экрана для получения дополнительных сведений. Зрячие пользователи увидят фоновое изображение PDF, а пользователи программ чтения с экрана услышат закадровый текст «(PDF)».</p><h4><span class="ez-toc-section" id="i-77"> Логотипы </span></h4><p> В сети распространена практика, когда основной логотип сайта также ссылается на главную страницу сайта. Поскольку это довольно стандартная практика, обычно достаточно предоставить альтернативный текст для изображения, например, название вашей компании (<code> alt = "Acme Company </code>)".Идентификация логотипа как фактического логотипа (<code> alt = "Логотип компании Acme" </code>) обычно не требуется. Содержание и функции не являются «логотипом». Разработчики часто идентифицируют изображение как изображение для домашней страницы (<code> alt = "Домашняя страница компании Acme </code>), хотя, если изображение постоянно находится в начале страницы и альтернативный текст уместен, эта дополнительная информация не требуется.</p><h4><span class="ez-toc-section" id="i-78"> Сложные изображения </span></h4><p> Если эквивалентная альтернатива для сложного изображения, такого как диаграмма, график или карта, не может быть ограничена кратким атрибутом alt (возможно, парой предложений длиной), тогда альтернативу следует предоставить в другом месте.Альтернативный контент часто может быть представлен в контексте страницы, например, в соседней таблице данных. Альтернативный текст также может быть предоставлен путем ссылки на отдельную веб-страницу, которая предоставляет более подробное описание сложного изображения. Ссылка может быть рядом с изображением или само изображение может быть связано со страницей с длинным описанием. Альтернативный текст изображения должен по-прежнему описывать общее содержание изображения.</p><p> <code> <noscript><img class="lazy lazy-hidden" src = "sales.jpg" alt = "График годовых данных о продажах"></noscript><img class="lazyload lazy lazy-hidden" src = "sales.jpg" alt = "График годовых данных о продажах"><noscript><img src = "sales.jpg" alt = "График годовых данных о продажах"></noscript> <br> <br/> <a href = "salesdata.htm "> Просмотреть данные о продажах </a> </code></p><p> Примечание к longdesc</p><p> Атрибут <code> longdesc </code> был предназначен для ссылки на страницу с подробным описанием. Значение атрибута <code> longdesc </code> элемента <code> img </code> будет содержать URL-адрес страницы подробного описания, а НЕ <strong> НЕ </strong> сам текст подробного описания. Однако <code> longdesc </code> работает только с некоторыми программами чтения с экрана. Кроме того, зрячие пользователи обычно не знают, что страница описания доступна.Кроме того, атрибут <code> longdesc </code> не является частью HTML5. По этим причинам не рекомендуется полагаться на <code> longdesc </code> <em> при предоставлении доступа к этой странице с подробным описанием </em>.</p><p> Мы представили обзор поддержки longdesc (проведен в сентябре 2015 г.).</p><h4><span class="ez-toc-section" id="_figcaption"> Рисунок и figcaption </span></h4><p> HTML5 вводит элемент <code> figure </code>, необязательно с <code> figcaption </code>, который является самодостаточным и обычно упоминается как единый блок из основного потока документа.Фигура может быть удалена из основного потока документа, не влияя на смысл документа.</p><p> <code> figure </code> и <code> figcaption </code> позволяют семантическую ассоциацию между фигурой и подписью к рисунку. <code> figcaption </code> может предоставлять сводку или дополнительную информацию о фигуре и / или связывать фигуру с содержащим ее документом. Однако любое изображение внутри рисунка должно по-прежнему иметь значение атрибута <code> alt </code>, которое представляет альтернативный текст изображения - это не должно передаваться через <code> figcaption </code>.</p><p> Вы можете узнать больше о figure и figcaption в How do you figure?</p><h3><span class="ez-toc-section" id="i-79"> Заключение </span></h3><p> Несмотря на то, что это самая большая проблема, влияющая на веб-доступность, все еще существуют различные и неправильные методы для реализации альтернативного текста. Следуя основным принципам, изложенным здесь, веб-разработчики могут сделать свой веб-контент более доступным для людей с ограниченными возможностями.</p><ul><li> Добавление альтернативного текста к изображениям - один из самых простых способов доступа
принципы, которые нужно изучить, и одни из самых сложных для освоения.</li><li> Альтернативный текст может быть предоставлен в атрибуте <code> alt </code> или в окружающем контексте изображения.</li><li> Каждое изображение должно иметь атрибут <code> alt </code>.</li><li> Альтернативный текст <em> следует </em>:<ul><li> представляют СОДЕРЖАНИЕ и ФУНКЦИЮ изображения.</li><li> будьте лаконичны.</li></ul></li><li> Альтернативный текст <em> не должен </em>:<ul><li> быть избыточным (быть таким же, как смежный или основной текст).</li><li> используйте фразы «изображение…» или «изображение…».</li></ul></li><li> Соответствующий альтернативный текст сильно зависит от контекста изображения.</li><li> Альтернативный текст функционального изображения (например, изображения в ссылке) должен описывать
функция, а также содержание.</li><li> Для декоративных изображений по-прежнему требуется атрибут <code> alt </code>, но он должен быть пустым (<code> alt = "" </code>).</li></ul><p> Доступность Интернета в целом резко увеличилась бы, если бы альтернативный текст был предоставлен и реализован правильно.</p><h2><span class="ez-toc-section" id="i-80"> Полное руководство по альтернативному атрибуту (или альтернативному тексту) </span></h2><h4><span class="ez-toc-section" id="i-81"> Содержание </span></h4><p></p><h4><span class="ez-toc-section" id="i-82"> Определение </span></h4><p> Альтернативный текст, «атрибут alt» или «альтернативный текст» - это атрибут HTML, который описывает изображение как текст. Атрибуты alt видны не пользователям, а поисковым системам, чтобы помочь определить, о чем это изображение. <br/></p><p></p><h3><span class="ez-toc-section" id="_alt-7"> Почему важен атрибут alt? </span></h3><p></p><p> Текст атрибута Alt также используется программами чтения с экрана для передачи информации, в то время как названия изображений не могут отображаться программами чтения с экрана.Это помогает отображать текст в случае, если изображение не может быть отображено браузером.</p><p></p><p></p><p> Картинка лучше тысячи слов. Однако изображения без атрибута alt становятся неактуальными для поисковых систем, поскольку он используется их программным обеспечением для распознавания изображений, чтобы определить, о чем это изображение.</p><p></p><p> Если поисковые системы не знают, что находится на изображении, они не могут определить, как оно соотносится с содержанием страницы. Они также не смогут определить, соответствует ли это поисковому запросу изображения.С помощью машинного обучения и искусственного интеллекта поисковые системы становятся все ближе к определению того, чем должно быть изображение, пониманию действий и идентификации объектов внутри изображений. Тем не менее, изображения, объясненные фактическим владельцем, позволяют технологиям обрабатывать информацию быстрее.</p><p></p><p> К счастью, есть относительно простой способ решить эту проблему для улучшения вашего SEO и взаимодействия с пользователем: альтернативный текст с изображением. Предоставляя замещающий текст, вы помогаете поисковым системам идентифицировать и классифицировать изображения, чтобы предоставить пользователям релевантную информацию.<br/></p><p></p><h3><span class="ez-toc-section" id="i-83"> Разница между замещающим текстом изображения и заголовком изображения </span></h3><p></p><p> Альтернативный текст - это атрибут HTML в HTML, который дает дополнительную информацию об изображении. Название изображения отображается во всплывающем окне, когда вы наводите указатель мыши на изображение. Если изображение не отображается, предоставляется замещающий текст, но не заголовок изображения. <br/></p><p></p><h3><span class="ez-toc-section" id="i-84"> Рекомендации: как написать замещающий текст </span></h3><p></p><p> Изображения - это контент, который требует, чтобы они были качественными, привлекательными и увлекательными; Альтернативный текст требует того же уровня качества.Вот несколько рекомендаций, чтобы узнать, как написать лучший замещающий текст для ваших изображений:</p><h4><span class="ez-toc-section" id="i-85"> Быть информативным </span></h4><p> Описание изображения может включать существительные, глаголы, прилагательные и наречия. Описание того, что происходит на изображении, или что произошло, или что должно произойти, должно быть написано так, чтобы поисковые системы могли эффективно обрабатывать эту информацию.</p><ul><li> Разрешить пользователю визуализировать изображение, если и когда изображение не загружается</li><li> Не более 1 или 2 предложений</li><li> Избегайте использования таких фраз, как «графика» или «изображение», а также ненужной информации, которая может удлинить текст.</li></ul><h4><span class="ez-toc-section" id="i-86"> Избегайте переполнения ключевыми словами </span></h4><p> Вам потребуется столько же усилий при создании подробной информации для пользователей, чтобы идентифицировать ваши изображения, так и при создании тегов заголовков и метаописаний.</p><p></p><p> Ниже приведены несколько примеров рекомендаций, которые помогут вам определить, что поисковые системы ищут в альтернативном тексте:</p><p></p><ul><li> <strong> Плохо (отсутствует альтернативный текст): </strong> <noscript><img class="lazy lazy-hidden" src = ”puppy.jpg” alt = ”” /></noscript><img class="lazyload lazy lazy-hidden" src = ”puppy.jpg” alt = ”” /><noscript><img src = ”puppy.jpg” alt = ”” /></noscript></li><li> <strong> Плохо (набивка ключевых слов): </strong> <noscript><img class="lazy lazy-hidden" src = ”puppy.jpg ”alt =” щенок собака щенок щенок щенки щенки собачки щенки помет щенки ретривер лабрадор волкодав сеттер пойнтер щенок щенки джек-рассел-терьера корм для собак дешевый корм для собак корм для щенков ”/></noscript><img class="lazyload lazy lazy-hidden" src = ”puppy.jpg ”alt =” щенок собака щенок щенок щенки щенки собачки щенки помет щенки ретривер лабрадор волкодав сеттер пойнтер щенок щенки джек-рассел-терьера корм для собак дешевый корм для собак корм для щенков ”/><noscript><img src = ”puppy.jpg ”alt =” щенок собака щенок щенок щенки щенки собачки щенки помет щенки ретривер лабрадор волкодав сеттер пойнтер щенок щенки джек-рассел-терьера корм для собак дешевый корм для собак корм для щенков ”/></noscript></li><li> <strong> Лучше: </strong> <noscript><img class="lazy lazy-hidden" src = ”puppy.jpg” alt = ”puppy” /></noscript><img class="lazyload lazy lazy-hidden" src = ”puppy.jpg” alt = ”puppy” /><noscript><img src = ”puppy.jpg” alt = ”puppy” /></noscript></li><li> <strong> Лучшее: </strong> <noscript><img class="lazy lazy-hidden" src = ”puppy.jpg” alt = “Щенок далматина играет в поисках” /></noscript><img class="lazyload lazy lazy-hidden" src = ”puppy.jpg” alt = “Щенок далматина играет в поисках” /><noscript><img src = ”puppy.jpg” alt = “Щенок далматина играет в поисках” /></noscript></li></ul><p></p><h3><span class="ez-toc-section" id="_alt_WordPress-2"> Как добавить атрибут alt в WordPress </span></h3><p></p><p> Есть три способа добавить замещающий текст в WordPress.</p><p></p><ul><li> Если вы загружаете изображение прямо на саму страницу:</li></ul><ul><li> Вы можете редактировать изображение, щелкнув изображение и выбрав значок карандаша <strong> </strong>.</li></ul><p></p><p></p><p></p><ul><li> Перейдите в <strong> Библиотеку </strong> и выберите изображение, к которому вы хотите добавить замещающий текст.</li></ul><p></p><p> <br/></p><p></p><h3><span class="ez-toc-section" id="_alt_Wix"> Как добавить атрибут alt в Wix </span></h3><p></p><p> Вы можете добавить изображения для замещающего текста после того, как добавите изображение на страницу.Если вы уже добавили изображение, вы можете нажать на значок шестеренки <strong> </strong>.</p><p></p><p></p><p> Выделите изображение, затем щелкните первую опцию справа под названием <strong> Заголовок (замещающий текст) </strong>, где вы можете добавить свое описание.</p><p> <br/></p><p></p><h3><span class="ez-toc-section" id="_Shopify"> Как добавить альтернативный текст в Shopify </span></h3><p></p><p> Shopify имеет медиа-библиотеку, расположенную в <strong> Settings </strong>> <strong> Files </strong>. Однако вы не сможете добавлять замещающий текст к изображениям отсюда.Есть три места, где вы можете редактировать описания изображений.</p><p></p><p> Если загруженные изображения являются изображениями продуктов, вы можете нажать на функцию «<strong> ALT </strong>», расположенную в нижней части каждого изображения.</p><p></p><p></p><p> Или добавьте замещающий текст прямо на изображение здесь:</p><p></p><p></p><p> Если вы создаете настоящую страницу с изображением, добавленным к ней, есть трехэтапный процесс добавления замещающего текста. Вам нужно будет щелкнуть значок изображения, чтобы загрузить изображение, затем щелкнуть фактическое изображение, а затем снова щелкнуть значок изображения.</p><p></p><p></p><p> Вы также можете добавить замещающий текст к URL-адресу изображения:</p><p></p><p></p><p> Избранные изображения важно идентифицировать на каждой странице, в коллекции или посте. После того, как вы добавили изображение, вам нужно будет нажать «Обновить», чтобы иметь возможность добавить замещающий текст для этого конкретного изображения.</p><p></p><p></p><p></p><p> Если вы уже загрузили сотни или тысячи изображений, лучший способ добавить замещающий текст ко всем изображениям - перейти к каждому продукту по отдельности или, возможно, загрузить плагин.В электронной коммерции большая часть замещающего текста связана с продуктами, особенностями и типами. Эти плагины могут помочь вам добавить основное описание, однако вам следует сосредоточиться на предоставлении высококачественных описаний и избегать оптимизации и автоматизации альтернативного текста. <br/></p><p></p><h3><span class="ez-toc-section" id="i-87"> Некоторые плагины, которые могут помочь вам ускорить выполнение замещающего текста </span></h3><h4><span class="ez-toc-section" id="_Lion"> Приложение Lion </span></h4><p></p><p></p><p> Этот плагин Lion Apps не поможет вам добавить описательный замещающий текст к вашим изображениям, но он позволяет добавлять к изображениям название продукта, тип и продавца для описания продукта.</p><p> <br/></p><p></p><h4><span class="ez-toc-section" id="SEO"> SEO Все в одном </span></h4><p></p><p></p><p> Приложение Softpulse Infotech SEO All in One предоставляет вам еще одну переменную на выбор. «Вариант заголовка» позволяет вам добавлять более одного варианта продукта, например цвет, размер и стиль, к вашим описаниям замещающего текста.</p><p></p><p> <br/></p><p></p><h4><span class="ez-toc-section" id="_SEO_Booster_Apps"> Оптимизатор изображений SEO от Booster Apps </span></h4><p></p><p></p><p> SEO Image Optimizer от Booster Apps - самый популярный плагин, так как многие пользователи Shopify используют их приложения.Однако все они созданы равными и делают одно и то же для замещающего текста.</p><p></p><h2><span class="ez-toc-section" id="i-88"> Как оптимизировать изображения </span></h2><p> Альтернативный текст (альтернативный текст) описывает изображение на веб-странице. Он находится в коде HTML и обычно не отображается на самой странице.</p><p> Но что такого важного в замещающем тексте? И как вы можете использовать его для улучшения SEO и удобства пользователей?</p><p> В этом руководстве вы узнаете:</p><p><h3><span class="ez-toc-section" id="i-89"> Почему так важен замещающий текст? </span></h3></p><p> Альтернативный текст имеет значение по четырем основным причинам.</p><ol><li> Улучшает доступность</li><li> Может улучшить «актуальность темы»</li><li> Может помочь вам занять место в Картинках Google</li><li> Служит в качестве якорного текста для ссылок на изображения</li></ol><h4><span class="ez-toc-section" id="1-2"> 1. Альтернативный текст улучшает доступность </span></h4><p> Миллионы людей с нарушениями зрения, и многие используют программы чтения с экрана для просмотра онлайн-контента. Они работают путем преобразования экранного содержимого, включая изображения, в аудио.</p><p> Изображения без замещающего текста вызывают проблемы у программ чтения с экрана, потому что нет способа передать содержание изображения пользователю.Обычно они пропускают эти изображения или, что еще хуже, зачитывают длинные и бесполезные имена файлов изображений.</p><p></p><p> Google говорит о важности альтернативного текста для пользователей с программами чтения с экрана в своем руководстве для начинающих по SEO.</p><h4><span class="ez-toc-section" id="2-2"> 2. Альтернативный текст может повысить «актуальность» </span></h4><p> Google просматривает слова на странице, чтобы понять, о чем они говорят.</p><p> Например, если на странице упоминаются пудели, лабрадоры и ретриверы, значит, Google знает, что речь идет о породах собак.</p><p></p><p> Как это относится к изображениям?</p><p> Потому что иногда контекст «заперт» в изображениях, которые Google не может прочитать.</p><p></p><p> Хотя Google почти наверняка может сказать, что это изображения собак без альтернативного текста, конкретная порода может быть менее очевидной - и именно здесь появляется альтернативный текст.</p><p></p><h4><span class="ez-toc-section" id="3_Google"> 3. Альтернативный текст может помочь вам занять место в Google Изображения </span></h4><p> Google Images - вторая по величине поисковая система в мире. На его долю приходится 20,45% всех поисковых запросов в Интернете, что позволяет ему опережать YouTube, Bing и другие поисковые системы вместе взятые.</p><p> Это означает, что есть возможность привлекать трафик из Картинок Google.</p><p> Достаточно взглянуть на количество кликов, которые мы получили на блог Ahrefs из Google Images за последние три месяца:</p><p> Sidenote.</p> Это лишь небольшой процент нашего трафика, потому что мы ведем SEO-блог. Обычно люди не ищут информацию, которую мы публикуем, с помощью поиска по картинкам. Совершенно другая история для тех, кто работает в визуальных нишах, таких как мода или еда, где люди часто находят контент с помощью поиска по изображениям.<p> Джон Мюллер из Google говорит, что замещающий текст - важная часть оптимизации для Google Картинок:</p><blockquote data-conversation="none"><p dir="ltr" lang="en"> Замещающий текст чрезвычайно полезен для Картинок Google - если вы хотите, чтобы ваши изображения занимали там место.Даже если вы используете отложенную загрузку, вы знаете, какое изображение будет загружено, поэтому загрузите эту информацию как можно раньше и проверьте, как она отображается. - 🍌 John 🍌 (@JohnMu) 4 сентября 2018 г.</p></blockquote><h4><span class="ez-toc-section" id="4"> 4. Альтернативный текст служит в качестве якорного текста для ссылок на изображения </span></h4><p> Якорный текст относится к интерактивным словам, которые связывают одну веб-страницу с другой. Google использует его, чтобы лучше понять веб-страницу и ее содержание.</p><p></p><p> Но не все ссылки являются текстовыми; некоторые изображения.</p><p> Google сообщает:</p><blockquote><p> Если вы все же решите использовать изображение в качестве ссылки, заполнение замещающего текста <strong> поможет Google лучше понять страницу, на которую вы ссылаетесь на </strong>.Представьте, что вы пишете якорный текст для текстовой ссылки.</p></blockquote><p></p><p><h3><span class="ez-toc-section" id="i-90"> Как добавить замещающий текст к изображениям </span></h3></p><p> Просто добавьте атрибут alt к тегу <code> <img> </code> в HTML-коде.</p><p> <strong> Изображение с тегом alt: </strong></p><p> <code> <noscript><img class="lazy lazy-hidden" src = «pie.jpg» <strong></noscript><img class="lazyload lazy lazy-hidden" src = «pie.jpg» <strong><noscript><img src = «pie.jpg» <strong></noscript> alt = «steak and ale pie» </strong>> </code></p><p> Если вы используете современную CMS, вы можете добавить альтернативный текст, не копаясь в HTML-коде.</p><p> Например, в WordPress есть поле для замещающего текста при добавлении изображения на страницу или сообщение:</p><p> В других CMS все похоже.</p><p> Вот инструкции для некоторых из самых популярных:</p><p><h3><span class="ez-toc-section" id="i-91"> Следует ли добавлять замещающий текст ко всем изображениям? </span></h3></p><p> Нет, это распространенное заблуждение.</p><p> Если изображение предназначено для декоративных целей и не несет важной информации, добавлять замещающий текст не нужно.</p><p> Например, на некоторых веб-сайтах есть значки для разделения контента:</p><p> Они предназначены только для того, чтобы красиво выглядеть, поэтому вам не следует добавлять замещающий текст. Это только вызовет раздражение у посетителей с помощью программ чтения с экрана и не принесет странице никакой «SEO-ценности».</p><p> То же самое и с общими или стандартными изображениями, например:</p><p> Наличие альтернативного текста, который гласит «ванна и свеча», бесполезно для читателей с ослабленным зрением, потому что это информация, которую им не нужно знать. Было бы лучше, чтобы программа чтения с экрана полностью игнорировала это.</p><p> Но вот важный момент…</p><p> Если изображение не требует альтернативного текста, лучше всего добавить пустой атрибут alt. Это связано с тем, что некоторые программы чтения с экрана считывают имена файлов без атрибута alt, тогда как большинство пропускают имена файлов с пустыми.</p><p> Вот как это выглядит:</p><p> <code> <noscript><img class="lazy lazy-hidden" src = "spacer.gif" alt = ""></noscript><img class="lazyload lazy lazy-hidden" src = "spacer.gif" alt = ""><noscript><img src = "spacer.gif" alt = ""></noscript> </code></p><p> Подробнее читайте в этом руководстве от WebAIM.</p><p><h3><span class="ez-toc-section" id="i-92"> Как написать хороший альтернативный текст </span></h3></p><p> Альтернативный текст - это не ракетостроение.</p><p> Следуйте этим пяти лучшим практикам, и у вас все будет хорошо.</p><ul><li> <strong> Будьте лаконичны </strong>. Длинный замещающий текст раздражает тех, кто использует программы чтения с экрана. Используйте как можно меньше слов. (Используйте атрибут longdesc, если необходимо длинное описание.)</li><li> <strong> Будьте аккуратны. </strong> Сосредоточьтесь на описании изображения.</li><li> <strong> Избегайте переполнения ключевыми словами. </strong> Это не место для ключевых слов.</li><li> <strong> Не указывайте, что это изображение. </strong> Нет необходимости включать в описания «Изображение…» или «Изображение…». И Google, и программы чтения с экрана могут решить это сами.</li><li> <strong> Избегайте избыточности. </strong> Не повторяйте информацию, которая уже существует в контексте изображения. Например, если у вас есть фотография Стива Джобса, а текст прямо под изображением гласит «Стив Джобс», нет необходимости добавлять это описание в тег alt.Google должен понимать, что заголовок фактически является замещающим текстом.</li></ul><p> Не забудьте также добавить замещающий текст к кнопкам формы. В противном случае программы чтения с экрана могут их пропустить, и некоторые посетители не смогут взаимодействовать с вашим сайтом.</p><p><h3><span class="ez-toc-section" id="i-93"> Хорошие и плохие примеры замещающего текста </span></h3></p><p> Давайте на нескольких примерах убедимся, что мы понимаем, что работает, а что нет.</p><p></p><p> <strong> Плохо: </strong> <code> <noscript><img class="lazy lazy-hidden" src = «cheesecake.png» alt = «изображение чизкейка»></noscript><img class="lazyload lazy lazy-hidden" src = «cheesecake.png» alt = «изображение чизкейка»><noscript><img src = «cheesecake.png» alt = «изображение чизкейка»></noscript> </code> <br/> <strong> Хорошо </strong>: <code> <noscript><img class="lazy lazy-hidden" src = «cheesecake.png »alt =« чизкейк »></noscript><img class="lazyload lazy lazy-hidden" src = «cheesecake.png »alt =« чизкейк »><noscript><img src = «cheesecake.png »alt =« чизкейк »></noscript> </code> <br/> <strong> Хорошо </strong>: <code> <noscript><img class="lazy lazy-hidden" src =« cheesecake.png »alt =« клубничный чизкейк »></noscript><img class="lazyload lazy lazy-hidden" src =« cheesecake.png »alt =« клубничный чизкейк »><noscript><img src =« cheesecake.png »alt =« клубничный чизкейк »></noscript> </code> <br/> <strong> Лучшее </strong>: <code> <noscript><img class="lazy lazy-hidden" src =« cheesecake.png »alt =« клубничный чизкейк со сливками »></noscript><img class="lazyload lazy lazy-hidden" src =« cheesecake.png »alt =« клубничный чизкейк со сливками »><noscript><img src =« cheesecake.png »alt =« клубничный чизкейк со сливками »></noscript> </code></p><p></p><p> <strong> Плохо </strong>: <code> <noscript><img class="lazy lazy-hidden" src =« steve-jobs.png »alt =« Стив Джобс Apple iphone ipad mac »></noscript><img class="lazyload lazy lazy-hidden" src =« steve-jobs.png »alt =« Стив Джобс Apple iphone ipad mac »><noscript><img src =« steve-jobs.png »alt =« Стив Джобс Apple iphone ipad mac »></noscript> </code> <br/> <strong> Хорошо </strong>: <code> <noscript><img class="lazy lazy-hidden" src =« steve-jobs.png »alt =« steve jobs »></noscript><img class="lazyload lazy lazy-hidden" src =« steve-jobs.png »alt =« steve jobs »><noscript><img src =« steve-jobs.png »alt =« steve jobs »></noscript> </code> <br/> <strong> Хорошо </strong>: <code> <noscript><img class="lazy lazy-hidden" src =« steve-jobs.png »alt =« основатель Apple, Стив Джобс »></noscript><img class="lazyload lazy lazy-hidden" src =« steve-jobs.png »alt =« основатель Apple, Стив Джобс »><noscript><img src =« steve-jobs.png »alt =« основатель Apple, Стив Джобс »></noscript> </code> <br/> <strong> Best </strong>: <code> <noscript><img class="lazy lazy-hidden" src =« steve-jobs.png »alt =« Основатель Apple, Стив Джобс, держит iphone 4 »></noscript><img class="lazyload lazy lazy-hidden" src =« steve-jobs.png »alt =« Основатель Apple, Стив Джобс, держит iphone 4 »><noscript><img src =« steve-jobs.png »alt =« Основатель Apple, Стив Джобс, держит iphone 4 »></noscript> </code></p><p></p><p> <strong> Плохо </strong>: <code> <noscript><img class="lazy lazy-hidden" src = «amp.png» alt = «image4»></noscript><img class="lazyload lazy lazy-hidden" src = «amp.png» alt = «image4»><noscript><img src = «amp.png» alt = «image4»></noscript> </code> <br/> <strong> Хорошо </strong>: <code> <noscript><img class="lazy lazy-hidden" src = «amp.png» alt = «оранжевый усилитель»></noscript><img class="lazyload lazy lazy-hidden" src = «amp.png» alt = «оранжевый усилитель»><noscript><img src = «amp.png» alt = «оранжевый усилитель»></noscript> </code> <br/> <strong> Хорошо </strong>: <code> <noscript><img class="lazy lazy-hidden" src = «amp.png» alt = «оранжевый усилитель - 30 Вт»></noscript><img class="lazyload lazy lazy-hidden" src = «amp.png» alt = «оранжевый усилитель - 30 Вт»><noscript><img src = «amp.png» alt = «оранжевый усилитель - 30 Вт»></noscript> </code> <br/> <strong> Best </strong>: <code> <noscript><img class="lazy lazy-hidden" src = «amp.png »alt =« оранжевый AD30HTC - усилитель мощностью 30 Вт »></noscript><img class="lazyload lazy lazy-hidden" src = «amp.png »alt =« оранжевый AD30HTC - усилитель мощностью 30 Вт »><noscript><img src = «amp.png »alt =« оранжевый AD30HTC - усилитель мощностью 30 Вт »></noscript> </code></p><p> Обратите внимание на включение номера модели в последнем примере. Это хорошая практика, особенно для изображений на страницах товаров электронной коммерции.</p><p><h3><span class="ez-toc-section" id="_alt-8"> Как найти и исправить проблемы с атрибутами alt </span></h3></p><p> Многие инструменты могут сканировать ваш сайт и находить недостающие атрибуты alt, включая аудит сайта Ahrefs.</p><p> Но отсутствие замещающего текста не всегда является проблемой, потому что не для всех изображений требуется замещающий текст.</p><p> Например, обратите внимание на эти недостающие атрибуты alt:</p><p> Судя по именам файлов, они не нуждаются в замещающем тексте. Они декоративные, а это значит, что мы хотим, чтобы программа чтения с экрана проходила прямо над ними.</p><p> Итак, вместо того, чтобы сканировать свой сайт и зацикливаться на каждом недостающем атрибуте alt (на большинстве сайтов отсутствует довольно много атрибутов), лучше проверить и улучшить теги alt для страниц, которые уже получают трафик.</p><p> Для этого есть две причины:</p><ol><li> <strong> У них есть читатели для слабовидящих.</strong> 2,4% граждан США имеют инвалидность по зрению. Это примерно один из каждых 42 человек. Это означает, что в среднем, если вашу страницу посещают 10 000 посетителей в месяц, 240 из них не могут правильно использовать ваш контент.</li><li> <strong> Они могли бы получить больше трафика. </strong> Альтернативный текст может повысить рейтинг изображений в Картинках Google, что приведет к увеличению трафика. Даже всего лишь 1% -ное увеличение страницы с 10 000 посещений в месяц - это еще 100 посетителей.</li></ol><p> Вот процесс:</p><h4><span class="ez-toc-section" id="_1-2"> Шаг № 1.Найдите наиболее посещаемые страницы в обычном поиске </span></h4><p> Проверьте Google Analytics, Google Search Console или отчет «Самые популярные страницы» в Site Explorer Ahrefs.</p><h4><span class="ez-toc-section" id="_2_alt"> Шаг 2. Проверьте свои атрибуты alt </span></h4><p> Установите бесплатное расширение Chrome Alt Text Tester, загрузите страницу с наибольшим объемом трафика, затем активируйте расширение.</p><p> Вы должны видеть замещающий текст при наведении курсора на изображение.</p><p> Если атрибут alt отсутствует, вы увидите предупреждение.</p><p> Проверьте альтернативный текст для нескольких изображений на странице.Вы скоро почувствуете, оптимизированы ли они хорошо, плохо или нет.</p><p> Например, прокрутка этой публикации займет всего несколько секунд, чтобы убедиться, что все изображения хорошо оптимизированы…</p><p>… в то время как то же самое не относится к этой странице в The Mirror:</p><h4><span class="ez-toc-section" id="_3-2"> Шаг № 3. Повторите для других страниц </span></h4><p> Повторите этот процесс для наиболее посещаемых страниц вашего веб-сайта. Это должно дать вам представление о том, правильна ли ваша оптимизация альтернативного текста или требует доработки.</p><p> Поскольку большинство веб-сайтов направляют большую часть своего трафика на несколько страниц, это не займет много времени.<div class='yarpp-related yarpp-related-none'><p>No related posts.</p></div></div></article></div><div class="author_box"><div class="row clearfix"><div class="col-md-3 col-sm-3 col-xs-12"><div class="author_thumb"> <img alt='' src="//pcvector.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='https://secure.gravatar.com/avatar/28885a98486f3753fb07ad1bbcbbbd1d?s=300&#038;d=mm&#038;r=g' srcset="" data-srcset='https://secure.gravatar.com/avatar/28885a98486f3753fb07ad1bbcbbbd1d?s=600&#038;d=mm&#038;r=g 2x' class='lazy lazy-hidden avatar avatar-300 photo' height='300' width='300' fetchpriority='high' decoding='async'/><noscript><img alt='' src='https://secure.gravatar.com/avatar/28885a98486f3753fb07ad1bbcbbbd1d?s=300&#038;d=mm&#038;r=g' srcset='https://secure.gravatar.com/avatar/28885a98486f3753fb07ad1bbcbbbd1d?s=600&#038;d=mm&#038;r=g 2x' class='avatar avatar-300 photo' height='300' width='300' fetchpriority='high' decoding='async'/></noscript></div></div><div class="col-md-9 col-sm-9 col-xs-12"><div class="author_details"><div class="author_name"><h3>alexxlab</h3></div><div class="author_desc"></div></div></div></div></div><nav class="navigation post-navigation" aria-label="Записи"><h2 class="screen-reader-text">Навигация по записям</h2><div class="nav-links"><div class="nav-previous"><a href="https://pcvector.ru/raznoe/oranzhevaya-tekstura-tkan-d0-be-d1-80-d0-b0-d0-bd-d0-b6-d0-b5-d0-b2-d0-b0-d1-8f-d1-82-d0-b5-d0-ba-d1-81-d1-82-d1-83-d1-80-d0-b0-d1-82-d0-ba-d0-b0-d0-bd-d0-b8-stokovye-kartinki-besplatnye-royalti-f.html" rel="prev">Пред.</a></div><div class="nav-next"><a href="https://pcvector.ru/fotoshop/geometricheskie-figury-dlya-fotoshopa-cs6-risovanie-figur-s-pomoshhyu-instrumentov-gruppy-figura-v-photoshop.html" rel="next">След.</a></div></div></nav><section class="cm_related_post_container"><div class="section_inner"><div class="row clearfix"><div class="col-md-6 col-sm-6 col-xs-12"><div class="card"><div class="post_thumb imghover"></div><div class="card_content"><div class="entry_cats"><ul class="post-categories"><li><a href="https://pcvector.ru/category/raznoe" rel="category tag">Разное</a></li></ul></div><div class="post_title"><h2><a href="https://pcvector.ru/raznoe/sinemagrafiya-na-iphone-sinemagrafiya-v-instagram-parazajt.html">Синемаграфия на iphone: Синемаграфия в Instagram / Паразайт</a></h2></div><div class="meta"><ul class="post_meta"><li class="post_author"> <span class="meta-icon"><i class="feather icon-user"> </i></span> <a href="https://pcvector.ru/author"></a></li><li class="posted_date"> <span class="meta-icon"><i class="feather icon-calendar"> </i></span> <a href="https://pcvector.ru/raznoe/sinemagrafiya-na-iphone-sinemagrafiya-v-instagram-parazajt.html" rel="bookmark"><time class="entry-date published" datetime="2021-11-29T19:17:46+03:00">29.11.2021</time></a></li><li class="comments"> <span class="meta-icon"><i class="feather icon-message-square"></i></span><a href="https://pcvector.ru/raznoe/sinemagrafiya-na-iphone-sinemagrafiya-v-instagram-parazajt.html">0</a></li></ul></div></div></div></div><div class="col-md-6 col-sm-6 col-xs-12"><div class="card"><div class="post_thumb imghover"></div><div class="card_content"><div class="entry_cats"><ul class="post-categories"><li><a href="https://pcvector.ru/category/raznoe" rel="category tag">Разное</a></li></ul></div><div class="post_title"><h2><a href="https://pcvector.ru/raznoe/razmery-css-kak-zadat-shirinu-html-straniczy.html">Размеры css: Как задать ширину html страницы?</a></h2></div><div class="meta"><ul class="post_meta"><li class="post_author"> <span class="meta-icon"><i class="feather icon-user"> </i></span> <a href="https://pcvector.ru/author"></a></li><li class="posted_date"> <span class="meta-icon"><i class="feather icon-calendar"> </i></span> <a href="https://pcvector.ru/raznoe/razmery-css-kak-zadat-shirinu-html-straniczy.html" rel="bookmark"><time class="entry-date published" datetime="2021-11-28T19:17:46+03:00">28.11.2021</time></a></li><li class="comments"> <span class="meta-icon"><i class="feather icon-message-square"></i></span><a href="https://pcvector.ru/raznoe/razmery-css-kak-zadat-shirinu-html-straniczy.html">0</a></li></ul></div></div></div></div><div class="row clearfix visible-sm visible-md visible-lg"></div><div class="col-md-6 col-sm-6 col-xs-12"><div class="card"><div class="post_thumb imghover"></div><div class="card_content"><div class="entry_cats"><ul class="post-categories"><li><a href="https://pcvector.ru/category/raznoe" rel="category tag">Разное</a></li></ul></div><div class="post_title"><h2><a href="https://pcvector.ru/raznoe/broshyury-primery-3300-broshyury-shablony-dlya-besplatnoj-zagruzki-na-pngtree.html">Брошюры примеры: 3300+ брошюры Шаблоны для бесплатной загрузки на Pngtree</a></h2></div><div class="meta"><ul class="post_meta"><li class="post_author"> <span class="meta-icon"><i class="feather icon-user"> </i></span> <a href="https://pcvector.ru/author"></a></li><li class="posted_date"> <span class="meta-icon"><i class="feather icon-calendar"> </i></span> <a href="https://pcvector.ru/raznoe/broshyury-primery-3300-broshyury-shablony-dlya-besplatnoj-zagruzki-na-pngtree.html" rel="bookmark"><time class="entry-date published" datetime="2021-11-27T19:17:46+03:00">27.11.2021</time></a></li><li class="comments"> <span class="meta-icon"><i class="feather icon-message-square"></i></span><a href="https://pcvector.ru/raznoe/broshyury-primery-3300-broshyury-shablony-dlya-besplatnoj-zagruzki-na-pngtree.html">0</a></li></ul></div></div></div></div><div class="col-md-6 col-sm-6 col-xs-12"><div class="card"><div class="post_thumb imghover"></div><div class="card_content"><div class="entry_cats"><ul class="post-categories"><li><a href="https://pcvector.ru/category/raznoe" rel="category tag">Разное</a></li></ul></div><div class="post_title"><h2><a href="https://pcvector.ru/raznoe/podbor-shriftovoj-pary-404-oshibka-404.html">Подбор шрифтовой пары: 404-Ошибка: 404</a></h2></div><div class="meta"><ul class="post_meta"><li class="post_author"> <span class="meta-icon"><i class="feather icon-user"> </i></span> <a href="https://pcvector.ru/author"></a></li><li class="posted_date"> <span class="meta-icon"><i class="feather icon-calendar"> </i></span> <a href="https://pcvector.ru/raznoe/podbor-shriftovoj-pary-404-oshibka-404.html" rel="bookmark"><time class="entry-date published" datetime="2021-11-26T19:17:46+03:00">26.11.2021</time></a></li><li class="comments"> <span class="meta-icon"><i class="feather icon-message-square"></i></span><a href="https://pcvector.ru/raznoe/podbor-shriftovoj-pary-404-oshibka-404.html">0</a></li></ul></div></div></div></div><div class="row clearfix visible-sm visible-md visible-lg"></div><div class="col-md-6 col-sm-6 col-xs-12"><div class="card"><div class="post_thumb imghover"></div><div class="card_content"><div class="entry_cats"><ul class="post-categories"><li><a href="https://pcvector.ru/category/raznoe" rel="category tag">Разное</a></li></ul></div><div class="post_title"><h2><a href="https://pcvector.ru/raznoe/kak-v-instagramm-sdelat-lichnyj-blog-kak-sdelat-lichnyj-blog-v-instagrame-na-telefone-cherez-fejsbuk.html">Как в инстаграмм сделать личный блог: Как сделать личный блог в Инстаграме: на телефоне, через Фейсбук</a></h2></div><div class="meta"><ul class="post_meta"><li class="post_author"> <span class="meta-icon"><i class="feather icon-user"> </i></span> <a href="https://pcvector.ru/author"></a></li><li class="posted_date"> <span class="meta-icon"><i class="feather icon-calendar"> </i></span> <a href="https://pcvector.ru/raznoe/kak-v-instagramm-sdelat-lichnyj-blog-kak-sdelat-lichnyj-blog-v-instagrame-na-telefone-cherez-fejsbuk.html" rel="bookmark"><time class="entry-date published" datetime="2021-11-25T19:17:46+03:00">25.11.2021</time></a></li><li class="comments"> <span class="meta-icon"><i class="feather icon-message-square"></i></span><a href="https://pcvector.ru/raznoe/kak-v-instagramm-sdelat-lichnyj-blog-kak-sdelat-lichnyj-blog-v-instagrame-na-telefone-cherez-fejsbuk.html">0</a></li></ul></div></div></div></div><div class="col-md-6 col-sm-6 col-xs-12"><div class="card"><div class="post_thumb imghover"></div><div class="card_content"><div class="entry_cats"><ul class="post-categories"><li><a href="https://pcvector.ru/category/raznoe" rel="category tag">Разное</a></li></ul></div><div class="post_title"><h2><a href="https://pcvector.ru/raznoe/bukvy-v-stile-gotika-garnirovannyj-goticheskij-shrift-stilya-pomechaet-bukvami-a-illyustracziya-vektora.html">Буквы в стиле готика: Гарнированный готический шрифт стиля, помечает буквами A Иллюстрация вектора</a></h2></div><div class="meta"><ul class="post_meta"><li class="post_author"> <span class="meta-icon"><i class="feather icon-user"> </i></span> <a href="https://pcvector.ru/author"></a></li><li class="posted_date"> <span class="meta-icon"><i class="feather icon-calendar"> </i></span> <a href="https://pcvector.ru/raznoe/bukvy-v-stile-gotika-garnirovannyj-goticheskij-shrift-stilya-pomechaet-bukvami-a-illyustracziya-vektora.html" rel="bookmark"><time class="entry-date published" datetime="2021-11-23T19:17:46+03:00">23.11.2021</time></a></li><li class="comments"> <span class="meta-icon"><i class="feather icon-message-square"></i></span><a href="https://pcvector.ru/raznoe/bukvy-v-stile-gotika-garnirovannyj-goticheskij-shrift-stilya-pomechaet-bukvami-a-illyustracziya-vektora.html">0</a></li></ul></div></div></div></div></div></div></section><div id="comments" class="comments-area"><div id="respond" class="comment-respond"><h3 id="reply-title" class="comment-reply-title">Добавить комментарий <small><a rel="nofollow" id="cancel-comment-reply-link" href="/raznoe/chto-takoe-atribut-alt-chto-takoe-atributy-alt-i-title-dlya-kartinok-i-kak-ih-pravilno-sostavlyat.html#respond" style="display:none;">Отменить ответ</a></small></h3><form action="https://pcvector.ru/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate><p class="comment-notes"><span id="email-notes">Ваш адрес email не будет опубликован.</span> <span class="required-field-message">Обязательные поля помечены <span class="required">*</span></span></p><p class="comment-form-comment"><label for="comment">Комментарий <span class="required">*</span></label><textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required></textarea></p><p class="comment-form-author"><label for="author">Имя <span class="required">*</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" autocomplete="name" required /></p><p class="comment-form-email"><label for="email">Email <span class="required">*</span></label> <input id="email" name="email" type="email" value="" size="30" maxlength="100" aria-describedby="email-notes" autocomplete="email" required /></p><p class="comment-form-url"><label for="url">Сайт</label> <input id="url" name="url" type="url" value="" size="30" maxlength="200" autocomplete="url" /></p><p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Отправить комментарий" /> <input type='hidden' name='comment_post_ID' value='12534' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /></p></form></div></div></div><div class="col-md-4 col-sm-12 col-xs-12 sticky_portion"><aside id="secondary" class="sidebar-widget-area"><div id="search-2" class="widget widget_search"><form role="search" method="get" id="search-form" class="clearfix" action="https://pcvector.ru/"><input type="search" name="s" placeholder="Поиск..." value"" ><input type="submit" id="submit" value="Поиск"></form></div><div id="archives-3" class="widget widget_archive"><div class="widget-title"><h2>Архивы</h2></div><ul><li><a href='https://pcvector.ru/2021/11'>Ноябрь 2021</a></li><li><a href='https://pcvector.ru/2021/10'>Октябрь 2021</a></li><li><a href='https://pcvector.ru/2021/09'>Сентябрь 2021</a></li><li><a href='https://pcvector.ru/2021/08'>Август 2021</a></li><li><a href='https://pcvector.ru/2021/07'>Июль 2021</a></li><li><a href='https://pcvector.ru/2021/06'>Июнь 2021</a></li><li><a href='https://pcvector.ru/2021/05'>Май 2021</a></li><li><a href='https://pcvector.ru/2021/04'>Апрель 2021</a></li><li><a href='https://pcvector.ru/2021/03'>Март 2021</a></li><li><a href='https://pcvector.ru/2021/02'>Февраль 2021</a></li><li><a href='https://pcvector.ru/2021/01'>Январь 2021</a></li><li><a href='https://pcvector.ru/2020/12'>Декабрь 2020</a></li><li><a href='https://pcvector.ru/2020/11'>Ноябрь 2020</a></li><li><a href='https://pcvector.ru/2020/10'>Октябрь 2020</a></li><li><a href='https://pcvector.ru/2020/09'>Сентябрь 2020</a></li><li><a href='https://pcvector.ru/2020/08'>Август 2020</a></li><li><a href='https://pcvector.ru/2020/07'>Июль 2020</a></li><li><a href='https://pcvector.ru/2020/06'>Июнь 2020</a></li><li><a href='https://pcvector.ru/2020/05'>Май 2020</a></li><li><a href='https://pcvector.ru/2020/04'>Апрель 2020</a></li><li><a href='https://pcvector.ru/2020/03'>Март 2020</a></li><li><a href='https://pcvector.ru/2020/02'>Февраль 2020</a></li><li><a href='https://pcvector.ru/2020/01'>Январь 2020</a></li><li><a href='https://pcvector.ru/2019/12'>Декабрь 2019</a></li><li><a href='https://pcvector.ru/2019/11'>Ноябрь 2019</a></li><li><a href='https://pcvector.ru/2019/10'>Октябрь 2019</a></li><li><a href='https://pcvector.ru/2019/09'>Сентябрь 2019</a></li><li><a href='https://pcvector.ru/2019/08'>Август 2019</a></li><li><a href='https://pcvector.ru/2019/07'>Июль 2019</a></li><li><a href='https://pcvector.ru/2019/06'>Июнь 2019</a></li><li><a href='https://pcvector.ru/2019/05'>Май 2019</a></li><li><a href='https://pcvector.ru/2019/04'>Апрель 2019</a></li><li><a href='https://pcvector.ru/2019/03'>Март 2019</a></li><li><a href='https://pcvector.ru/2019/02'>Февраль 2019</a></li><li><a href='https://pcvector.ru/2019/01'>Январь 2019</a></li><li><a href='https://pcvector.ru/2018/12'>Декабрь 2018</a></li><li><a href='https://pcvector.ru/2018/11'>Ноябрь 2018</a></li><li><a href='https://pcvector.ru/2018/10'>Октябрь 2018</a></li><li><a href='https://pcvector.ru/2018/09'>Сентябрь 2018</a></li><li><a href='https://pcvector.ru/2018/08'>Август 2018</a></li><li><a href='https://pcvector.ru/2018/07'>Июль 2018</a></li><li><a href='https://pcvector.ru/2018/06'>Июнь 2018</a></li><li><a href='https://pcvector.ru/2018/05'>Май 2018</a></li><li><a href='https://pcvector.ru/2018/04'>Апрель 2018</a></li><li><a href='https://pcvector.ru/2018/03'>Март 2018</a></li><li><a href='https://pcvector.ru/2018/02'>Февраль 2018</a></li><li><a href='https://pcvector.ru/2018/01'>Январь 2018</a></li><li><a href='https://pcvector.ru/1988/02'>Февраль 1988</a></li><li><a href='https://pcvector.ru/1988/01'>Январь 1988</a></li><li><a href='https://pcvector.ru/1987/12'>Декабрь 1987</a></li><li><a href='https://pcvector.ru/1987/11'>Ноябрь 1987</a></li><li><a href='https://pcvector.ru/1987/10'>Октябрь 1987</a></li><li><a href='https://pcvector.ru/1987/09'>Сентябрь 1987</a></li><li><a href='https://pcvector.ru/1987/08'>Август 1987</a></li><li><a href='https://pcvector.ru/1987/07'>Июль 1987</a></li><li><a href='https://pcvector.ru/1987/06'>Июнь 1987</a></li><li><a href='https://pcvector.ru/1987/05'>Май 1987</a></li><li><a href='https://pcvector.ru/1987/04'>Апрель 1987</a></li><li><a href='https://pcvector.ru/1987/03'>Март 1987</a></li><li><a href='https://pcvector.ru/1987/02'>Февраль 1987</a></li><li><a href='https://pcvector.ru/1987/01'>Январь 1987</a></li><li><a href='https://pcvector.ru/1986/12'>Декабрь 1986</a></li><li><a href='https://pcvector.ru/1986/11'>Ноябрь 1986</a></li><li><a href='https://pcvector.ru/1986/10'>Октябрь 1986</a></li><li><a href='https://pcvector.ru/1986/09'>Сентябрь 1986</a></li><li><a href='https://pcvector.ru/1986/08'>Август 1986</a></li><li><a href='https://pcvector.ru/1986/07'>Июль 1986</a></li><li><a href='https://pcvector.ru/1986/06'>Июнь 1986</a></li><li><a href='https://pcvector.ru/1986/05'>Май 1986</a></li><li><a href='https://pcvector.ru/1986/04'>Апрель 1986</a></li><li><a href='https://pcvector.ru/1986/03'>Март 1986</a></li><li><a href='https://pcvector.ru/1986/02'>Февраль 1986</a></li><li><a href='https://pcvector.ru/1986/01'>Январь 1986</a></li><li><a href='https://pcvector.ru/1985/12'>Декабрь 1985</a></li><li><a href='https://pcvector.ru/1985/11'>Ноябрь 1985</a></li><li><a href='https://pcvector.ru/1985/10'>Октябрь 1985</a></li><li><a href='https://pcvector.ru/1985/09'>Сентябрь 1985</a></li><li><a href='https://pcvector.ru/1985/08'>Август 1985</a></li><li><a href='https://pcvector.ru/1985/07'>Июль 1985</a></li><li><a href='https://pcvector.ru/1985/06'>Июнь 1985</a></li><li><a href='https://pcvector.ru/1985/05'>Май 1985</a></li><li><a href='https://pcvector.ru/1985/04'>Апрель 1985</a></li><li><a href='https://pcvector.ru/1985/03'>Март 1985</a></li><li><a href='https://pcvector.ru/1985/02'>Февраль 1985</a></li><li><a href='https://pcvector.ru/1985/01'>Январь 1985</a></li><li><a href='https://pcvector.ru/1984/12'>Декабрь 1984</a></li><li><a href='https://pcvector.ru/1984/11'>Ноябрь 1984</a></li><li><a href='https://pcvector.ru/1984/10'>Октябрь 1984</a></li><li><a href='https://pcvector.ru/1984/09'>Сентябрь 1984</a></li><li><a href='https://pcvector.ru/1984/08'>Август 1984</a></li><li><a href='https://pcvector.ru/1984/07'>Июль 1984</a></li><li><a href='https://pcvector.ru/1984/06'>Июнь 1984</a></li><li><a href='https://pcvector.ru/1984/05'>Май 1984</a></li><li><a href='https://pcvector.ru/1984/04'>Апрель 1984</a></li><li><a href='https://pcvector.ru/1984/03'>Март 1984</a></li><li><a href='https://pcvector.ru/1982/06'>Июнь 1982</a></li><li><a href='https://pcvector.ru/1982/05'>Май 1982</a></li><li><a href='https://pcvector.ru/1982/04'>Апрель 1982</a></li><li><a href='https://pcvector.ru/1982/03'>Март 1982</a></li><li><a href='https://pcvector.ru/1982/02'>Февраль 1982</a></li><li><a href='https://pcvector.ru/1982/01'>Январь 1982</a></li><li><a href='https://pcvector.ru/1981/12'>Декабрь 1981</a></li><li><a href='https://pcvector.ru/1981/11'>Ноябрь 1981</a></li><li><a href='https://pcvector.ru/1981/10'>Октябрь 1981</a></li><li><a href='https://pcvector.ru/1981/09'>Сентябрь 1981</a></li><li><a href='https://pcvector.ru/1981/08'>Август 1981</a></li><li><a href='https://pcvector.ru/1981/07'>Июль 1981</a></li><li><a href='https://pcvector.ru/1981/06'>Июнь 1981</a></li><li><a href='https://pcvector.ru/1981/05'>Май 1981</a></li><li><a href='https://pcvector.ru/1981/04'>Апрель 1981</a></li><li><a href='https://pcvector.ru/1981/03'>Март 1981</a></li><li><a href='https://pcvector.ru/1981/02'>Февраль 1981</a></li><li><a href='https://pcvector.ru/1981/01'>Январь 1981</a></li><li><a href='https://pcvector.ru/1980/12'>Декабрь 1980</a></li><li><a href='https://pcvector.ru/1980/11'>Ноябрь 1980</a></li><li><a href='https://pcvector.ru/1980/10'>Октябрь 1980</a></li><li><a href='https://pcvector.ru/1980/09'>Сентябрь 1980</a></li><li><a href='https://pcvector.ru/1980/08'>Август 1980</a></li><li><a href='https://pcvector.ru/1980/07'>Июль 1980</a></li><li><a href='https://pcvector.ru/1980/06'>Июнь 1980</a></li><li><a href='https://pcvector.ru/1980/05'>Май 1980</a></li><li><a href='https://pcvector.ru/1980/04'>Апрель 1980</a></li><li><a href='https://pcvector.ru/1980/03'>Март 1980</a></li><li><a href='https://pcvector.ru/1980/02'>Февраль 1980</a></li><li><a href='https://pcvector.ru/1980/01'>Январь 1980</a></li><li><a href='https://pcvector.ru/1979/12'>Декабрь 1979</a></li><li><a href='https://pcvector.ru/1979/11'>Ноябрь 1979</a></li><li><a href='https://pcvector.ru/1979/10'>Октябрь 1979</a></li><li><a href='https://pcvector.ru/1979/09'>Сентябрь 1979</a></li><li><a href='https://pcvector.ru/1979/08'>Август 1979</a></li><li><a href='https://pcvector.ru/1979/07'>Июль 1979</a></li><li><a href='https://pcvector.ru/1979/06'>Июнь 1979</a></li><li><a href='https://pcvector.ru/1979/05'>Май 1979</a></li><li><a href='https://pcvector.ru/1979/04'>Апрель 1979</a></li><li><a href='https://pcvector.ru/1979/03'>Март 1979</a></li><li><a href='https://pcvector.ru/1979/02'>Февраль 1979</a></li><li><a href='https://pcvector.ru/1979/01'>Январь 1979</a></li><li><a href='https://pcvector.ru/1978/12'>Декабрь 1978</a></li><li><a href='https://pcvector.ru/1978/11'>Ноябрь 1978</a></li><li><a href='https://pcvector.ru/1978/10'>Октябрь 1978</a></li><li><a href='https://pcvector.ru/1978/09'>Сентябрь 1978</a></li><li><a href='https://pcvector.ru/1978/08'>Август 1978</a></li><li><a href='https://pcvector.ru/1978/07'>Июль 1978</a></li><li><a href='https://pcvector.ru/1978/06'>Июнь 1978</a></li><li><a href='https://pcvector.ru/1978/05'>Май 1978</a></li><li><a href='https://pcvector.ru/1978/04'>Апрель 1978</a></li><li><a href='https://pcvector.ru/1978/03'>Март 1978</a></li><li><a href='https://pcvector.ru/1978/02'>Февраль 1978</a></li><li><a href='https://pcvector.ru/1978/01'>Январь 1978</a></li><li><a href='https://pcvector.ru/1977/12'>Декабрь 1977</a></li><li><a href='https://pcvector.ru/1977/11'>Ноябрь 1977</a></li><li><a href='https://pcvector.ru/1977/10'>Октябрь 1977</a></li><li><a href='https://pcvector.ru/1977/09'>Сентябрь 1977</a></li><li><a href='https://pcvector.ru/1977/08'>Август 1977</a></li><li><a href='https://pcvector.ru/1977/07'>Июль 1977</a></li><li><a href='https://pcvector.ru/1977/06'>Июнь 1977</a></li><li><a href='https://pcvector.ru/1977/05'>Май 1977</a></li><li><a href='https://pcvector.ru/1977/04'>Апрель 1977</a></li><li><a href='https://pcvector.ru/1977/03'>Март 1977</a></li><li><a href='https://pcvector.ru/1977/02'>Февраль 1977</a></li><li><a href='https://pcvector.ru/1977/01'>Январь 1977</a></li><li><a href='https://pcvector.ru/1976/12'>Декабрь 1976</a></li><li><a href='https://pcvector.ru/1976/11'>Ноябрь 1976</a></li><li><a href='https://pcvector.ru/1976/10'>Октябрь 1976</a></li><li><a href='https://pcvector.ru/1976/09'>Сентябрь 1976</a></li><li><a href='https://pcvector.ru/1976/08'>Август 1976</a></li><li><a href='https://pcvector.ru/1976/07'>Июль 1976</a></li><li><a href='https://pcvector.ru/1976/06'>Июнь 1976</a></li><li><a href='https://pcvector.ru/1976/05'>Май 1976</a></li><li><a href='https://pcvector.ru/1976/04'>Апрель 1976</a></li><li><a href='https://pcvector.ru/1976/03'>Март 1976</a></li><li><a href='https://pcvector.ru/1976/02'>Февраль 1976</a></li><li><a href='https://pcvector.ru/1976/01'>Январь 1976</a></li><li><a href='https://pcvector.ru/1975/12'>Декабрь 1975</a></li><li><a href='https://pcvector.ru/1975/11'>Ноябрь 1975</a></li><li><a href='https://pcvector.ru/1975/10'>Октябрь 1975</a></li><li><a href='https://pcvector.ru/1975/09'>Сентябрь 1975</a></li><li><a href='https://pcvector.ru/1975/08'>Август 1975</a></li><li><a href='https://pcvector.ru/1975/07'>Июль 1975</a></li><li><a href='https://pcvector.ru/1975/06'>Июнь 1975</a></li><li><a href='https://pcvector.ru/1975/05'>Май 1975</a></li><li><a href='https://pcvector.ru/1975/04'>Апрель 1975</a></li><li><a href='https://pcvector.ru/1975/03'>Март 1975</a></li><li><a href='https://pcvector.ru/1975/02'>Февраль 1975</a></li><li><a href='https://pcvector.ru/1975/01'>Январь 1975</a></li><li><a href='https://pcvector.ru/1974/12'>Декабрь 1974</a></li><li><a href='https://pcvector.ru/1974/11'>Ноябрь 1974</a></li><li><a href='https://pcvector.ru/1974/10'>Октябрь 1974</a></li><li><a href='https://pcvector.ru/1974/09'>Сентябрь 1974</a></li><li><a href='https://pcvector.ru/1974/08'>Август 1974</a></li><li><a href='https://pcvector.ru/1974/07'>Июль 1974</a></li><li><a href='https://pcvector.ru/1974/06'>Июнь 1974</a></li><li><a href='https://pcvector.ru/1974/05'>Май 1974</a></li><li><a href='https://pcvector.ru/1974/04'>Апрель 1974</a></li><li><a href='https://pcvector.ru/1974/03'>Март 1974</a></li><li><a href='https://pcvector.ru/1974/02'>Февраль 1974</a></li><li><a href='https://pcvector.ru/1974/01'>Январь 1974</a></li><li><a href='https://pcvector.ru/1973/12'>Декабрь 1973</a></li><li><a href='https://pcvector.ru/1973/11'>Ноябрь 1973</a></li><li><a href='https://pcvector.ru/1973/10'>Октябрь 1973</a></li><li><a href='https://pcvector.ru/1973/09'>Сентябрь 1973</a></li><li><a href='https://pcvector.ru/1973/08'>Август 1973</a></li><li><a href='https://pcvector.ru/1973/07'>Июль 1973</a></li><li><a href='https://pcvector.ru/1973/06'>Июнь 1973</a></li><li><a href='https://pcvector.ru/1973/05'>Май 1973</a></li><li><a href='https://pcvector.ru/1973/04'>Апрель 1973</a></li><li><a href='https://pcvector.ru/1973/03'>Март 1973</a></li><li><a href='https://pcvector.ru/1973/02'>Февраль 1973</a></li><li><a href='https://pcvector.ru/1973/01'>Январь 1973</a></li><li><a href='https://pcvector.ru/1972/12'>Декабрь 1972</a></li><li><a href='https://pcvector.ru/1972/11'>Ноябрь 1972</a></li><li><a href='https://pcvector.ru/1972/10'>Октябрь 1972</a></li><li><a href='https://pcvector.ru/1972/09'>Сентябрь 1972</a></li><li><a href='https://pcvector.ru/1972/08'>Август 1972</a></li><li><a href='https://pcvector.ru/1972/07'>Июль 1972</a></li><li><a href='https://pcvector.ru/1972/06'>Июнь 1972</a></li><li><a href='https://pcvector.ru/1972/05'>Май 1972</a></li><li><a href='https://pcvector.ru/1972/04'>Апрель 1972</a></li><li><a href='https://pcvector.ru/1972/03'>Март 1972</a></li><li><a href='https://pcvector.ru/1972/02'>Февраль 1972</a></li><li><a href='https://pcvector.ru/1972/01'>Январь 1972</a></li><li><a href='https://pcvector.ru/1971/12'>Декабрь 1971</a></li><li><a href='https://pcvector.ru/1971/11'>Ноябрь 1971</a></li><li><a href='https://pcvector.ru/1971/10'>Октябрь 1971</a></li><li><a href='https://pcvector.ru/1971/09'>Сентябрь 1971</a></li><li><a href='https://pcvector.ru/1971/08'>Август 1971</a></li><li><a href='https://pcvector.ru/1971/07'>Июль 1971</a></li><li><a href='https://pcvector.ru/1971/06'>Июнь 1971</a></li><li><a href='https://pcvector.ru/1971/05'>Май 1971</a></li><li><a href='https://pcvector.ru/1971/04'>Апрель 1971</a></li><li><a href='https://pcvector.ru/1971/03'>Март 1971</a></li><li><a href='https://pcvector.ru/1971/02'>Февраль 1971</a></li><li><a href='https://pcvector.ru/1971/01'>Январь 1971</a></li><li><a href='https://pcvector.ru/1970/12'>Декабрь 1970</a></li><li><a href='https://pcvector.ru/1970/11'>Ноябрь 1970</a></li><li><a href='https://pcvector.ru/1970/10'>Октябрь 1970</a></li><li><a href='https://pcvector.ru/1970/09'>Сентябрь 1970</a></li><li><a href='https://pcvector.ru/1970/08'>Август 1970</a></li><li><a href='https://pcvector.ru/1970/07'>Июль 1970</a></li><li><a href='https://pcvector.ru/1970/06'>Июнь 1970</a></li><li><a href='https://pcvector.ru/1970/05'>Май 1970</a></li><li><a href='https://pcvector.ru/1970/04'>Апрель 1970</a></li><li><a href='https://pcvector.ru/1970/03'>Март 1970</a></li><li><a href='https://pcvector.ru/1970/02'>Февраль 1970</a></li><li><a href='https://pcvector.ru/1970/01'>Январь 1970</a></li></ul></div><div id="categories-3" class="widget widget_categories"><div class="widget-title"><h2>Рубрики</h2></div><ul><li class="cat-item cat-item-9"><a href="https://pcvector.ru/category/vdohnovenie">Вдохновение</a></li><li class="cat-item cat-item-3"><a href="https://pcvector.ru/category/dizajn">Дизайн</a></li><li class="cat-item cat-item-6"><a href="https://pcvector.ru/category/illyustrator">Иллюстратор</a></li><li class="cat-item cat-item-8"><a href="https://pcvector.ru/category/plaginy">Плагины</a></li><li class="cat-item cat-item-5"><a href="https://pcvector.ru/category/raznoe">Разное</a></li><li class="cat-item cat-item-1"><a href="https://pcvector.ru/category/sovety">Советы</a></li><li class="cat-item cat-item-7"><a href="https://pcvector.ru/category/uroki">Уроки</a></li><li class="cat-item cat-item-4"><a href="https://pcvector.ru/category/fotoshop">Фотошоп</a></li></ul></div></aside></div></div></div></div></main></div></div></div><footer class="footer"><div class="footer_inner"><div class="cm-container"><div class="row footer-widget-container"></div><div class="copyright_section"><div class="row"><div class="col-md-7 col-sm-6 col-xs-12"><div class="copyrights"><p>Primelens.ru © 2019</p></div></div><div class="col-md-5 col-sm-6 col-xs-12"><div class="footer_nav"></div></div></div></div></div></div></footer></div> <noscript><style>.lazyload{display:none}</style></noscript><script data-noptimize="1">window.lazySizesConfig=window.lazySizesConfig||{};window.lazySizesConfig.loadMode=1;</script><script async data-noptimize="1" src='https://pcvector.ru/wp-content/plugins/autoptimize/classes/external/js/lazysizes.min.js'></script> <script defer src="https://pcvector.ru/wp-content/cache/autoptimize/js/autoptimize_136a327254d95e0f67a6ee6ef5e06526.js"></script></body></html><script src="/cdn-cgi/scripts/7d0fa10a/cloudflare-static/rocket-loader.min.js" data-cf-settings="8c10c79076e12c630d7a76bb-|49" defer></script>