Атрибут Alt

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

Но есть много обстоятельств, когда пользователи отнюдь не могут этого исполнить:

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

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

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

Содержание

Советы для рисунков

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

При сохранении рисунков в сети используют следующие форматы: gif, jpeg, png, bmp, svg и webp. Когда вы создаете изображение, пользуйтесь именем файла, которое бы его описывало, а никак не стандартное, вроде DSC221069.jpg. О чём речь? Например, у вас на картинке изображено то, как человек ловит рыбу летом. Вы можете назвать этот файл letnyay-rybalka.jpg. Вы подумаете, что эффекта от этого мало, но он есть.
Обычно сборщики индексируют изображения всех величин, но если выполнить размер изображения максимально маленьким, то это положительно скажется на времени загрузки страницы и улучшит опыт пользователя. Действительно, обратите внимание на этот момент, чтобы не столкнуться с трудностями. Какие они могут быть? Перегруженная «тяжелыми» изображениями страница может очень долго грузиться. Следовательно, это вряд ли понравится посетителям, они предпочтут просто покинуть ваш сайт и больше на него не возвращаться.
Укажите ширину и высоту изображения. Это позволит браузеру испытывать габариты изображения перед его загрузкой и для него будет сохранено место. С таким манёвром больше ничто не заставит браузер пропускать элементы на странице во время загрузки.
Если у вас есть текст, важный в расписании значимости для веб-сайта или SEO, никак не вставляйте его в изображение, убедитесь, что его не запрещается прочесть, как текст, и что он часть обычного содержания страницы.
Помните о том, что рисунков на странице не должно быть слишком много, особенно если они не в тему. После каждого абзаца вставлять изображение, если оно там не обязательно, не стоит, иначе есть риск перегрузить страницы.

Советы по Alt-тексту

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

Alt-текст рисунков должен быть описательным и в идеале состоять из десятка слов или меньше. Писать целый рассказ к той или иной картинке не стоит, так как это негативно скажется на эффекте от данного атрибута.
Следует постараться включить ключевые слова в атрибут Alt, но отнюдь не наполнять ими текст. Например, если у вас какая-то картинка к статье с ключом «как настроить роутер», в качестве Alt вы можете использовать фразу «как правильно настроить роутер самостоятельно». Ничего сложного, как видите, в этом нет. Главное, чтобы описание хоть как-то отображало содержание изображения.
Скажем, если веб-сайт имеет множество рисунков мужских часов, убедитесь, что у каждого изображения свой уникальный Alt-текст. Постарайтесь включить модель часов или цвет. Если изображение создано для навигационных целей, пусть это отразится в Alt-тексте. Предположим, изображение для кнопки «Связаться с нами» должно вмещать тот же атрибут alt – «Связаться с нами».
Некоторые люди совершают промах, печатая «Вспять домой» в теге Alt-текста для логотипа компании с ссылкой, какая ведет на основную страницу. Постоянно лучше владеть описательным Alt-текстом, нежели чем ссылкой.
HTML теги рисунков так же могут иметь атрибут надписи и это часто путается с Alt-текстом. Атрибут надписи может прочитать только человек, в то время как Alt-текст также могут прочитать и сборщики, которые занимаются индексированием страниц.

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

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

Использование нулевого Alt-текста

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

Выглядит это так: imgsrc=»//1000rabota.ru/images/transparent.gif» alt=»»

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

Зачем нужны картинки на сайте

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

Вот аргументы в пользу того, чтобы публиковать картинки:

Позволяют улучшить текст и облегчить его восприятие. Например, когда человек просто читает статью, он усваивает её на 50%. Если вы предлагаете какие-то полезные картинки, это позволяет зрительно улавливать важные моменты. На фоне того, что человеку проще читать статью, он сделает это до конца. Как итог, улучшатся поведенческие факторы. Вместе с этим вы завоюете более приятные позиции в поисковой выдаче.
Дополнительный трафик. Конечно, кто-то подумает, что люди не пользуются картинками в браузере, но это ошибка. Некоторая доля людей открывают эту вкладку и смотрят изображения, а уже найдя что-то подходящее, переходят на страницу, где оно изображено. Таким образом, вы получаете дополнительных посетителей. Трафика будет не много, от общей массы всего несколько процентов, но и они не будут лишними.
Делают сайт более живым и интересным. Когда вы публикуете статьи с изображениями, вы добиваетесь хороших результатов, так как всё становится в один момент намного ярче и интереснее. Если у вас есть виджеты, которые отображают лучшие публикации или свежие статьи, наверняка там в качестве анонса выносятся какие-то первые изображения. Без картинок сайт был бы скучным и серым.

Как можете заметить, нельзя недооценивать Alt атрибуты. Грамотно используя их, вы можете добиваться хорошего эффекта.