Как добавить атрибут alt к изображениям

Здравствуйте, уважаемые друзья. Сегодня, по просьбе одного из моих подписчиков, расскажу про тег (атрибут) ALT, который должен присутствовать в параметрах каждого изображения на сайте.

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

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

Зачем нужен атрибут alt

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

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

alt="значение"

Как проверить изображения на наличие атрибута alt

Самый простой и доступный каждому способ – это проверить исходный код страницы (валидация кода) на ошибки.

Для этого нужно открыть сервис проверки кода W3C и ввести url страницы.

Валидатор кода

После проверки исходного кода, указанной странице, на экране откроется отчёт о наличии и сведения об ошибках (если такие есть). И если на странице, хотя бы у одного изображения отсутствует тег alt, вы увидите вот такую ошибку:

Отчёт об ошибках

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

А вот ещё один способ, который позволит узнать об ошибках в исходном коде вашего сайта. Но, для использования этого инструмента нужно зарегистрироваться в кабинете веб-мастера Bing. И в этом самом кабинете есть инструмент «Средства анализа SEO».

Средство анализа SEO

Где вы также вводите адрес страницы сайта для анализа и получаете отчёт. И если где-то отсутствует тег alt, вы это увидите.

Отчёт об ошибках в средствах Bing

Можно также посмотреть исходный код страницы, увидеть, где именно нужно искать. Для этого нужно перейти в закладку «Код страницы» и найти, где допущена ошибка. Сделать это легко, нужный код будет выделен жёлтым цветом.

Код страницы с ошибкой

Как найти нужный фрагмент исходного кода и добавить атрибут alt

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

— на имя файла изображения,

— на название класса, блока в котором размещено изображение,

— на ссылки,

— на соседние элементы.

Все эти элементы помогут в дальнейшем с поиском файла, а в нём и нужного фрагмента исходного кода.

В качестве примера, посмотрите на размещённый выше скриншот. Код, который нам нужен, ничем не примечателен. Да, мы знаем, что это баннер на новую бесплатную книгу Азамата. Более того, мы знаем, что баннер расположен в сайтбаре. Но представим, что я не обратил на это внимание. Так что можно узнать из этого кода?

Прежде всего, мы знаем имя файла изображения. И неважно, что расположено изображение на другом сайте. Также мы видим, блок ДИВ с классом <div class=»textwidget»>. И то, что этот блок находится внутри списка, элемент которого имеет идентификатор id=»text-10″.

И уже по классу «textwidget» становится понятно, что нужный нам код расположен в Виджетах. А раз так, то искать все эти элементы, на которые мы обратили внимание – бесполезно. Так как в большинстве тем WordPress виджеты в сайтбаре формируются динамически. А значит, в коде файла, отвечающего за cайтбар (

Следовательно, идём в административную панель WordPress – «Внешний вид» — «Виджеты» и ищем нужный виджет.

Код в виджете

И вот здесь к параметрам изображения добавляем атрибут alt.

До
<img src="http://azamat-partners.ru/wp-content/uploads/2015/01/250x250.gif" 
width="250" border="0"/>
После
<img src="http://azamat-partners.ru/wp-content/uploads/2015/01/250x250.gif" 
width="250" border="0" alt="Инфомаркетинг 20/80"/>

Вот и всё готово.

Но, с виджетом всё понятно, тут любой справится. А как быть с конкретными элементами дизайна?

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

Ошибки элементов дизайна

В качестве примера рассмотрим кнопки социальных сетей.

Открываем вкладку «Код страницы» и анализируем код. Ищем элементы, за которые можно зацепиться, по которым можно найти нужный файл и код.

Искомые элементы

Далее начинаем искать. Обычно для таких поисков я использую свой любимый Total Commander. Через ftp-соединение подключаюсь к своему блогу, открываю папку с темой и запускаю поиск ALT+F7.

Поиск в Total Commander

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

Найден нужный файл

Далее, лучше сделать резервную копию файл (скопируйте отдельно на компьютер) и можно приступать к редактированию. В Total Commander достаточно выбрать файл и нажать клавишу F4. Или можно скопировать файл на компьютер и открыть его через Notepad++. Ну, или на крайней случай, через Блокнот.

Итак, открываем файл и ищем нужный код. Можно использовать поиск CTRL+F.

Добавление атрибута alt

Нашли, и вставляем нужный атрибут alt. Итак, со всеми изображениями, у которых он отсутствует.

После того как изменения внесены, сохраняете файл и снова проверяете инструментами анализа.

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

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

А у меня на этом сегодня всё. Жду ваших комментариев. Всех успехов и хорошего настроения! До встречи в новых видео и статьях.

С уважением, Максим Зайце.

1zaicev.ru

Атрибут alt для картинок

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

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

Очевидно, что если ввести его некорректно, ничего вы на экране не увидите. Короче, для вывода картинки вам всего-то нужно в нужном месте html-кода писать это:

<img src = «путь к изображению»>

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

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

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

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

Влияние alt в SEO

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

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

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

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

Как заполнять alt?

А вот это самое важное, на мой взгляд. Если вы читали мои прошлые статьи по СЕО, то наверняка уже там не раз слышали, что поисковики любят естественность. Соответственно, идеальным заполнением атрибута будет максимально точное и короткое описание картинки. Как правило, 30-100 символов достаточно. При этом максимальная длина должна быть примерно 250 символов. Но зачем вам так подробно описывать изображение?

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

Тут нужно понимать, что поисковики стали умнее. Если вы вставили какую-то левую картинку и в наглую прописали туда ключ, положительного результата ждать не стоит. Я не говорю, что поисковик вас накажет, но эффекта как такового не будет.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

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

Как же быть? Если вы и вставляете какую-то ключевую фразу в alt, добавляйте ее только в описание одной картинки на статью. Также не стоит любой ценой пытаться добавить фразу в ее точном вхождении. Запрос может быть вставлен с разбавлением.

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

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

Итак, давайте подытожим основное по заполнение alt:

Нужно максимально просто и коротко описать картинку

Если вы и вставляете ключевую фразу, делайте это всего 1 раз и так, чтобы выглядело естественно

Для остальных картинок заполнение alt по вашему личному желанию

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

Из этих трех вариантов оптимальными являются первый и второй. То есть тут есть 2 решения: либо вообще никогда не трогать alt, либо заполнять его максимально естественно.

Заполнять alt или нет? Зависит от сайта

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

Соответственно, для каждого товара в интернет-магазине разумно прописать alt. Давайте как раз разберем на примере, как сделать это грамотно. Допустим, у нас есть товар – ноутбук ASUS G560 (не ищите в поиске, название я выдумал). Естественно, есть фото этого ноутбука. Как прописать для нее альтернативный текст? Вот варианты:

“Фотография”, 1, “ыыавпв” и прочее – это все варианты, которые никак не годятся. По такому описанию абсолютно непонятно, о каком товаре речь. Текст “фотография” или “картинка” (так часто подписывают фото) вообще самый забавный, ведь люди и так понимают, что это не видео. Это все равно что на слона повесить табличку, где написать, что он слон.

“Крутой красный ноутбук для игр” – это неплохое описание, если ноутбук действительно является игровым. Но если вы целитесь на трафик с картинок, то такое описание не является самым оптимальным, так как подобную фразу я в поиске набирает 0 человек. Люди чаще набирают названия конкретных моделей или хотя бы производителя.

“Ноутбук” – описание, которое можно охарактеризовать так: лучше, чем ничего. Но тоже не оптимально, так как нет конкретики. Не будете же вы каждый товар подписывать так? Описание должно быть уникальным для каждого отдельного ноутбука.

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

“Ноутбук ASUS G560, купить в Москве с доставкой, отзывы” – похоже на спам, правда? Это самый плохой вариант из всех.

Итог

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Хотите узнать, что необходимо для создания сайта?

Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!

webformyself.com

что такое alt-текст и почему он так важен

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

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

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

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

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

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

Что такое alt-текст?

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

3 ошибки при создании atl-текстов

1. Просто набор ключевых слов
2. Номер, дата или другая техническая информация
3. Не учитывает контекст

Как писать эффективные альтернативные тексты

Заключение

Что такое alt-текст?

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

Вот, как выглядит данный атрибут для поисковиков:

Независимо от того, тратите вы время на SEO или нет, оптимизация альтернативного текста изображений — это ваш шанс сделать пользовательский опыт еще более комфортным для посетителей.

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

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

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

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

3 ошибки при создании atl-текстов

1. Просто набор ключевых слов

Это пример не самого удачного альтернативного текста: 

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

Приведенный выше альтернативный текст сильно затрудняет для Googlе понимание того, как изображение соотносится с остальной частью страницы или статьи, в которой оно размещено, делая невозможным ранжирование изображения для релевантных низкочастотных запросов (longtail keywords), которые, как правило, вводятся наиболее заинтересованными в поиске пользователями.

Правильнее было бы снабдить изображение таким текстом:

«Сделать landing page за 25 минут бесплатно и с гарантией результата»

2. Номер, дата или другая техническая информация  

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

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

Вот еще один пример: 

На этом сайте все изображения имеют один и тот же alt-текст.

3. Не учитывает контекст

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

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

Для статьи о дизайне лендингов:

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

Для страницы, посвященной фрилансерским услугам по созданию лендингов:

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

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

<area alt="текст">

<area alt="текст" />

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Тег AREA, атрибут alt</title>
</head>
<body>
 <p><img src="images/europe.png" alt="Европа" 
   usemap="#Map">
 <map name="Map">
  <area shape="poly" coords="34,83,42,90,52,87,64,85,71,81,79,87,84,95,
  75,110,61,120,42,116,37,110,25,94,32,82" href="is.html" alt="Исландия">
  <area shape="poly" coords="168,262,173,254,180,254,207,272,201,290,206,309,
  197,318,182,316,182,323,165,320,152,317,154,292,138,276,168,263" 
  href="fr.html" alt="Франция">
  <area shape="poly" coords="250,223,264,217,274,222,295,221,298,235,301,257,
  290,269,274,268,247,254,243,241,243,241" href="pl.html" alt="Польша">
 </map></p>
</body>
</html>