Здравствуйте, уважаемые друзья. Сегодня, по просьбе одного из моих подписчиков, расскажу про тег (атрибут) ALT, который должен присутствовать в параметрах каждого изображения на сайте.
Отсутствие атрибута alt внешне никак не проявляется на самом изображении. Но, внутренне, в исходном коде – отсутствие тега alt является ошибкой. И поисковые роботы считают каждую такую ошибку. И такие, казалось бы, мелочи тормозят поисковое продвижение любого сайта.
И если, размещая изображения в статье, вы можете сразу указать желаемый альтернативный текст, то вот с изображениями (элементами) дизайна будет сложней. Бывает так, что именно у этих элементов дизайна отсутствует тег alt. И многие новички даже не знают о наличии этих ошибок у них на сайтах.
Зачем нужен атрибут alt
Всё дело в механизме загрузки страницы сайта браузером. Когда загружается страница, вначале загружается текст из атрибута alt, а уже после идёт смена текста на изображение. Если в браузере отключена загрузка изображений, то на месте изображения будет альтернативный текст (из атрибута alt).
Поисковые роботы видят страницу только в качестве исходного кода, и наличие тега alt говорит им о содержимом картинки. Кстати, даже наличие тега alt без текста уже будет принято поисковиком за признак хорошего тона. То есть наличие самого атрибута обязательно, а его значение необязательно.
alt="значение"
Как проверить изображения на наличие атрибута alt
Самый простой и доступный каждому способ – это проверить исходный код страницы (валидация кода) на ошибки.
Для этого нужно открыть сервис проверки кода W3C и ввести url страницы.
После проверки исходного кода, указанной странице, на экране откроется отчёт о наличии и сведения об ошибках (если такие есть). И если на странице, хотя бы у одного изображения отсутствует тег alt, вы увидите вот такую ошибку:
Примечание: если ошибок много, советую использовать поиск CTRL+F для быстрого поиска нужной информации.
А вот ещё один способ, который позволит узнать об ошибках в исходном коде вашего сайта. Но, для использования этого инструмента нужно зарегистрироваться в кабинете веб-мастера Bing. И в этом самом кабинете есть инструмент «Средства анализа SEO».
Где вы также вводите адрес страницы сайта для анализа и получаете отчёт. И если где-то отсутствует тег alt, вы это увидите.
Можно также посмотреть исходный код страницы, увидеть, где именно нужно искать. Для этого нужно перейти в закладку «Код страницы» и найти, где допущена ошибка. Сделать это легко, нужный код будет выделен жёлтым цветом.
Как найти нужный фрагмент исходного кода и добавить атрибут alt
Прежде всего, нужно внимательно посмотреть на данные, которые вы получили из средств анализа. Обратить внимание:
— на имя файла изображения,
— на название класса, блока в котором размещено изображение,
— на ссылки,
— на соседние элементы.
Все эти элементы помогут в дальнейшем с поиском файла, а в нём и нужного фрагмента исходного кода.
В качестве примера, посмотрите на размещённый выше скриншот. Код, который нам нужен, ничем не примечателен. Да, мы знаем, что это баннер на новую бесплатную книгу Азамата. Более того, мы знаем, что баннер расположен в сайтбаре. Но представим, что я не обратил на это внимание. Так что можно узнать из этого кода?
Прежде всего, мы знаем имя файла изображения. И неважно, что расположено изображение на другом сайте. Также мы видим, блок ДИВ с классом <div class=»textwidget»>. И то, что этот блок находится внутри списка, элемент которого имеет идентификатор id=»text-10″.
И уже по классу «textwidget» становится понятно, что нужный нам код расположен в Виджетах. А раз так, то искать все эти элементы, на которые мы обратили внимание – бесполезно. Так как в большинстве тем WordPress виджеты в сайтбаре формируются динамически. А значит, в коде файла, отвечающего за cайтбар (sidebar.php) будет преимущественно php код. Который никак не укажет на конкретный виджет.
Следовательно, идём в административную панель WordPress – «Внешний вид» — «Виджеты» и ищем нужный виджет.
И вот здесь к параметрам изображения добавляем атрибут alt.
До <img src="http://azamat-partners.ru/wp-content/uploads/2015/01/250x250.gif" width="250" height="250" border="0"/> После <img src="http://azamat-partners.ru/wp-content/uploads/2015/01/250x250.gif" width="250" height="250" border="0" alt="Инфомаркетинг 20/80"/>
Вот и всё готово.
Но, с виджетом всё понятно, тут любой справится. А как быть с конкретными элементами дизайна?
Для примера покажу шаблон, который я использую сейчас, только в его исходном варианте. То есть на этапе его установки уже было 21 ошибка (отсутствие атрибута alt).
В качестве примера рассмотрим кнопки социальных сетей.
Открываем вкладку «Код страницы» и анализируем код. Ищем элементы, за которые можно зацепиться, по которым можно найти нужный файл и код.
Далее начинаем искать. Обычно для таких поисков я использую свой любимый Total Commander. Через ftp-соединение подключаюсь к своему блогу, открываю папку с темой и запускаю поиск ALT+F7.
В параметрах поиска следует выбрать поиск всех файлов, в коде которых встречается упоминание искомого элемента. В нашем случае – имя файла изображения.
Далее, лучше сделать резервную копию файл (скопируйте отдельно на компьютер) и можно приступать к редактированию. В Total Commander достаточно выбрать файл и нажать клавишу F4. Или можно скопировать файл на компьютер и открыть его через Notepad++. Ну, или на крайней случай, через Блокнот.
Итак, открываем файл и ищем нужный код. Можно использовать поиск CTRL+F.
Нашли, и вставляем нужный атрибут alt. Итак, со всеми изображениями, у которых он отсутствует.
После того как изменения внесены, сохраняете файл и снова проверяете инструментами анализа.
Вот так друзья и добавляются атрибуты alt к изображениям. В качестве наглядного примера посмотрите видеоурок. И помните, что все эти доработки шаблона лучше делать на дочерней теме.
И конечно, почитайте статью про оптимизацию изображений в целом. Узнаете, что изображения многих шаблонов не только не имеют тегов alt, но вовсе не оптимизированы.
А у меня на этом сегодня всё. Жду ваших комментариев. Всех успехов и хорошего настроения! До встречи в новых видео и статьях.
С уважением, Максим Зайце.
Спасибо, Максим за подробный урок. Теперь все встало на свои места, вот в картинках темы и была загвоздка. Правда, я пользуюсь файлзиллой, но, по аналогии, разобрался, как и с ее помощью найти элемент кода среди множества файлов темы wordpress. Код подправил в шаблоне, теперь валидатор пока что всем доволен. еще раз спасибо и успехов!
Артём, отлично! Очень, рад что смог помочь. Будут вопросы, обращайтесь. Удачи вам!
Максим, вот я кстати постоянно прописываю «ключи» в картинках. У меня, например, есть картинка, которую я взял из интернета, она находится на первых местах в поисковой выдаче по СЧ запросу.
Сделал вывод: картинки блогу необходимы, даже если они не уник.
Да, наличие картинок необходимо, а наличие картинок правильно оформленных — обязательно!
А я почему-то думал, что alt-ы нужны только для картинок в постах. Спасибо надоумили! Пойду работать…
Пожалуйста, Сергей. Удачной работы!
Скажите, если в статье от 4-до 7 картинок. Ко всем прописывать атрибут alt? ПС не засчитает за спам?
Здравствуйте, Сергей. Атрибут alt обязателен для каждого изображения на сайте. Пусть он даже будет пустым, но он должен быть. Поисковики наоборот будут только рады, ведь они узнают о содержимом изображения именно по атрибуту alt.
Максим, про незаполненные alt на своем сайте узнала от bing. Но я столкнулась с одной проблемой: bing (и другие средства анализа сео оптимизации страниц) «ругаются» на пустой alt от элементов дизайна. То есть у меня прописано альт =» «, но программа все равно выдает ошибки, хотя во всех рекомендациях сказано, что альт элементов дизайна можно оставить пустым. Проблема в чем: не могу же я присваивать одинаковый альт для всех одинаковых элементов дизайна? Ведь роботами это может восприняться, как спам?
Лариса, бинг, вроде не ошибку выдаёт а предупреждение. А предупреждение это не критично. А вообще элементы дизайна лучше объединить в CSS спрайты и присвоить атрибут alt. Так одним усилием достигается две цели, оптимизация загрузки и подпись всех элементов дизайна одним атрибутом alt.
Ясно, спасибо. Только это для меня еще заоблачные дали… Ну что же? Буду читать информацию и постепенно экспериментировать…
Главное брать и делать. Потихоньку всё получится. Удачи!
Здравствуйте Максим! Валидатор ругается, что нет атрибута alt у картинок слайдера. C помощьюTotal Commander найти где они подключаются не удалось. После этого задал не название картинок, а название папки, где лежат только картинки, используемые в слайдере,Total Commander показал что есть только один файл. Открыл этот файл в нем нашел вот этот код: $featuredposts_custom_slides[] = array(‘img’ => get_template_directory_uri() . ‘/images/default-slides/’ . $custom_slide_key . ‘.jpg’, ‘link’ => $custom_slide_val[‘link’], ‘title’ => $custom_slide_val[‘title’], ‘content’ => $custom_slide_val[‘content’]);. Название папки где лежат картинки — /default-slides/. Возможно ли, что нельзя задать alt для конкретной картинки и может ли чем — то помочь код, который я привел выше?
Здравствуйте, Александр. По одному этому коду могу сказать, что сюда можно прикрутить атрибут alt, но это не значит что он будет работать. Нужно смотреть на общую картину. И проверять другие переменные. Есть большая вероятность, что для изображений в слайдере атрибут не добавить.
Спасибо, Максим! Очень полезная информация. С таким разнообразием не сразу разберусь на своем сайте. Буду постепенно удалять свои ошибки и почаще заглядывать к вам.
Светлана, здравствуйте. Конечно заходите в гости, всегда рад своим читателям.