Зображення і Посилання - Атрибути ALT і TITLE

1. Атрибути ALT і TITLE тега IMG
2. Рекомендації від Google по оптимізації зображень

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

Нижче ви можете подивитися на приклади використання атрибутів title і alt для зображення і посилання.

HTML код для посилання:

<A HREF = "http://www.yoursite.com" title = "заголовок вашої сторінки" alt = "заголовок вашої сторінки"> заголовок вашої сторінки </ a>

На вигаданому прикладі розглянемо, як реально застосовуються ат - трибуто title і alt для посилання на, скажімо, e-book, пропоновану для скачування зі сторінки сайту "Основи іпотечного кредитування":

<a href = "/ downloads / skachat-besplatno.html" target = "_ blank" title = "Любо - свідоме читач знайде тут інформацію про те, як формується процентна ставка по кредиту, дізнається різницю між плаваючою і фіксованою відсотками, отримає уявлення про тому, як розрахувати суму кредиту, яку він, як позичальник, може дозволити собі зайняти і багато чого іншого. " alt = "Як вибрати іпотечний кредит, найбільш повно відповідає ВАШИМ цілям і можливостям"> Як вибрати іпотечний кредит, найбільш повно відповідає ВАШИМ цілям і можливостям </a>

HTML код для зображення:

<IMG SCR = "/ images / seo / alt-and-title-attributes.gif" title = "Атрибути ALT і TITLE тега IMG" alt = "Атрибути ALT і TITLE тега IMG" />

Атрибути ALT і TITLE тега IMG

Незважаючи на те, що використання при оптимізації зображень атрибути в title і alt - це простий спосіб підняти позиції сайту в пошукових системах, багато веб-майстри не в повній мірі застосовують їх, а то і зовсім ігнорують. Деякі їх плутають і не розуміють, яка різниця між title і alt. Слід зазначити, що часто title і alt помилково називають тегами, хоча це атрибути тега img (від слова "image"), а не окремі теги.

HTML тег img застосовують для відображення на сторінках сайту зображень (картинок) в графічному форматі GIF, JPEG або PNG. При необхідності, картинку можна зробити гіпер-посиланням, уклавши тег img в контейнер <a>. Атрибут alt передає опис зображення для браузерів при відключеною графіку. Якщо даний атрибут НЕ буде прописаний, то користувачі побачать порожню ікону замість зображення, а якщо alt прописаний, то буде показано його текстовий зміст. Атрибут alt найсильніше впливає на ранжування зображень пошуковими системами.
Атрибут title надає додаткову інформацію про зображення і не є обов'язковим, хоча SEO - експерти рекомендують його застосовувати для кращого просування по зображеннях. Текст, внесений в атрибут title, показується при наведенні курсору мишки на картинку, а згідно з генеральною концепції пошукових систем - все, що бачить користувач - враховується при ранжируванні. Перевірити дане твердження ви можете, на зображенні, розташованої на початку цієї сторінки.
Роботи пошукових систем не вміє розпізнавати текст, нанесений на графічні зображення, тому ключова фраза, написана на зображенні великими буквами, ніяк не вплинуть на її пошукове просування. Більший ефект принесе нанесення доменного імені вашого сайту - це не тільки сприяє його популяризації, але і захистить картинку від копіювання.

Пошукові системи враховують не весь текст, укладений в атрибут alt: Google, наприклад, показує тільки перші 15-17 слів, а Яндекс трохи більше - до 28 слів. У будь-якому випадку, цієї кількості слів цілком достатньо, щоб скласти зрозумілу контекст.

Пошукові системи акцентують основну увагу на тексті, що відноситься до зображення. Особливо до того, що написано безпосередньо під ним, сприймаючи цей текст як назва зображення. Тому, назва повинна повністю копіювати вміст відповідного атрибута alt і його слід розміщувати в тому ж абзаці <p>, комірці таблиці <td> або тезі <div>, що і картинка.

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

Рекомендації від Google по оптимізації зображень

ОПТИМІЗАЦІЯ ЗОБРАЖЕНЬ

Інформацію про зображеннях передає атрибут "alt"

Зображення часто здаються одним з найпростіших елементів сайту, але їх використання також можна оптимізувати. Кожному зображенню відповідає ім'я файлу і атрибут "alt". Обидва ці елементи корисні. Атрибут "alt" дозволяє ввести текст, який буде відображатися, якщо зображення з якої-небудь причини неможливо показати (1).

Навіщо використовується цей атрибут? Якщо користувач переглядає ваш сайт через браузер з відключеними картинками або використовує програму читання тексту з екрану, alt-текст буде служити описом зображення.

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

Ну і, нарешті, грамотне опис зображення в тезі alt разом з інформативним ім'ям файлу допомагають системам пошуку картинок, таким як Пошук Картинок Google, проіндексі- ровать зображення з вашого сайту.

Файли слід зберігати в окремих директоріях, і зберігати їх в загальнодоступних форматах

Замість того, щоб зберігати файли зображень з різних тек і субдіректоріі на домені, слід зібрати їх все в одну папку (наприклад, moyastranaotkrytok.ru/images/). Це спрощує шлях до графічних файлів.

Використовуйте широко підтримувані типи файлів. Більшість браузерів підтримують графіку в форматі JPEG, GIF, PNG, і BMP. Також непогано якщо розширення файлу збігається з його типом.

Практичні поради

Пишіть інформативні анкор. Анкорний текст повинен містити хоча б коротку інформацію про сторінку по посиланню. Не радимо:

• використовувати в якості анкорного тексту загальні слова на кшталт "сторінка", "стаття", або "клікніть тут";
• використовувати анкорний текст, який не має ніякого відношення до матеріалу за посиланням;
• використовувати URL сторінки в якості анкорного тексту (хоча можливі виключення, наприклад, якщо потрібно прорекламувати нову адресу сайту).

Прагніть до стислості. Ваша мета - короткий і інформативний текст, зазвичай одна точна фраза. Не радимо:

• писати довгий анкорний текст, наприклад ціле речення чи параграф.

Виділяйте посилання. Зробіть анкорний текст посилань візуально відмінним від звичайного тексту вашого сайту. Користувача вводять в оману малопомітні посилання або посилання, на які він може натиснути випадково. Не радимо:

• використовувати для посилань стиль CSS, візуально не відрізняється від звичайного тексту сторінки.

Не забувайте про анкорний текст для внутрішніх посилань. Можливо, ви приділяєте увагу перш за все посиланнях, що вказує на інші веб-сайти, але внутрішні посилання не менш важливі, так як вони допомагають Google краще сканувати ваш сайт. Не радимо:

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

Хочете першими знайомитися з новими матеріалами, опублікованими на сайті?

Підпишіться на розсилку новин, і ви завжди будете в курсі того, що відбувається.

Це просто, зручно і безкоштовно!

Буду вдячний, якщо ви розповісте про неї друзям і знайомим, натиснувши на кнопки тих соціальних мереж, де ви зареєстровані.

наверх Попередня сторінка