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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1. WordPress

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

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

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

2. Joomla

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

3. Opencart

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

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

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

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

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

ifish2.ru

Атрибут alt | htmlbook.ru

Спецификация

Описание

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

Синтаксис

<input type="image" alt="Текст">

<input type="image" alt="Текст" /> 

Значения

Любая подходящая текстовая строка. Ее обязательно надо брать в двойные или одинарные кавычки.

Значение по умолчанию

Нет.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег INPUT, атрибут alt</title>
 </head>
 <body>

  <form method="post" action="handler.php">
   <p>...</p>
   <p><input src="images/imgbutton.gif" type="image" 
   alt="Отправить форму на сервер"></p>
  </form>

 </body>
</html>

htmlbook.ru

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

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

Когда не нужно

Hidde de Vries недавно написал статью «не всегда нужен альтернативный текст»:

«Но когда после иконки идет текст, например, «log out», сама иконка становится декоративной, и ей альтернативный текст уже не нужен:»

<button type=»button»><img src=»close.svg» alt=»» /> Close</button>

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

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

«В этом случае атрибут alt можно оставить пустым, в противном случае скрин ридер объявит «button — close close».»

Я бы думал об идеальном решении, так как эта иконка полностью декоративна. Было бы идеально применить ее через CSS, но суть в следующем: если приходится использовать изображение, то атрибут alt здесь наносит вреда больше чем пользы.

Можно ли получить это бесплатно?

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

Демо Sarah использует для этого Computer Vision API.

А что с figcaption?

Не хочется говорить, но я не очень хорошо прописывал описания для изображений в блог-постах прямо здесь на CSS-Tricks. Это проблема, которую нужно исправлять, изменив процесс. Часто мы добавляем текст к изображениям через тег figcaption. И очень часто этот текст по содержанию похож на альтернативный. Там описывается, что происходит на изображении.

Я спрашивал по этому поводу, и Zell Liew сказал мне, что делает то же самое:

«У меня тот же вопрос. Большинство моих figcaption описывают изображение, чтобы ридеры понимали, о чем изображение.»

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

Я также говорил с Eric Bailey, у него была интересная идея.

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

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

<figure> <img src=»screenshot.png» alt=»Screenshot of Chrome displaying a split view. On the left is a page full of image thumbnails comparing pre and post-optimization filesize. On the right is Chrome developer tools showing paint rasterize duration for the images. With a 6x CPU slowdown, the longest Paint Raster took 0.27ms, AKA 0.00027 seconds.»> <figcaption aria-hidden=»true»> With a 6x CPU slowdown, the longest Paint Raster took 0.27ms, AKA 0.00027 seconds. </figcaption> </figure>

«Это:

Сохраняет стиль фигуры

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

Делает описание близким к контенту и передает ссылку SR пользователям

Передает сильное послание визуальным ридерам, не дублируя текст для SR пользователей

Использует aria свойство, спроектированное для использования вне форм»

Хотел бы подчеркнуть, что он считал это просто идеей. Она не была тщательно проверена большим сообществом по доступности. Если кто-то из сообщества читает эту статью, что вы думаете?

Демо Eric использовало более подробный alt текст, чем figcaption. Похоже, что шаблон подошел бы, даже если бы они были одинаковыми.

Небольшое напоминание: у Twitter есть alt текст

Но эту функцию нужно активировать.

Автор: Chris Coyier

Источник: https://css-tricks.com/

Редакция: Команда webformyself.

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

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

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

webformyself.com