Як додати атрибут alt до зображень

1. Навіщо потрібен атрибут alt
2. Як перевірити зображення на наявність атрибута alt
3. Як знайти потрібний фрагмент вихідного коду і додати атрибут 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айтбар (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

В параметрах пошуку слід вибрати пошук всіх файлів, в коді яких зустрічається згадка шуканого елемента. У нашому випадку - ім'я файлу зображення.

Знайдений потрібний файл

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

Отже, відкриваємо файл і шукаємо потрібний код. Можна використовувати пошук CTRL + F.

Додавання атрибута alt

Знайшли, і вставляємо потрібний атрибут alt. Отже, з усіма зображеннями, у яких він відсутній.

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

Ось так друзі і додаються атрибути alt до зображень. Як наочний приклад подивіться відеоурок. І пам'ятайте, що всі ці доробки шаблону краще робити на дочірньої темі.

І звичайно, почитайте статтю про оптимізацію зображень в цілому. Дізнаєтеся, що зображення багатьох шаблонів не тільки не мають тегів alt, але зовсім не оптимізовані.

А у мене на цьому сьогодні все. Чекаю на ваші коментарі. Всіх успіхів і гарного настрою! До зустрічі в нових відео та статтях.

З повагою, Максим Зайці .