Тоді вам потрібен цей атрибут. Атрибут alt для картинок - як його заповнити і для чого він потрібен. Як практично прописати атрибути до зображення

Привіт, друзі.

Сьогодні наступний матеріал по роботі з зображеннями.

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

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

Стаття буде не дуже велика, але корисна.

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

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

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

Весь процес оптимізації я поділяю на 3 етапи:

1. Створення унікального зображення;
2. Підготовка остаточного зображення для розміщення на сайті, яка не буде вантажити блог. На даному етапі ми зменшуємо розмір зображення, щоб сторінки завантажувалися швидко;
3. Правильна оптимізація атрибутів title і alt зображення.

Сюди ще можна додати правильна назва вихідного файлу, перед завантаженням на сайт. Про це поговоримо нижче.

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

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

Ну а тепер розглянемо процес оптимізації зображень на практиці. Як я вже говорив вище, розглянемо заповнення всіх даних - title і alt картинок.

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

Як правильно заповнювати title і alt зображень?

Спочатку скажу пару слів про ці атрибути. Навіщо вони потрібні?

Основне завдання - дати пошуковим системам зрозуміти, про що те чи інше зображення. Також ці параметри дозволяють потрапити зображень в пошук по картинкам по певних запитах, які ми і пропишемо в даних атрибутах.

Тепер розглянемо, як же потрібно заповнювати їх.

На цей рахунок існує просто величезна кількість думок. У мене сформувалося своє бачення, виходячи з вивчення різних курсів і доповідей людей, які знаються на сайтів.

Спочатку розберемо, що це за атрибути.

• Title - у всіх випадках це тег заголовка чого-небудь (заголовка запису, зображень і так далі);
• Alt - атрибут тега img itemprop = "image", який описує зображення. Ще називається "альтернативний текст".

Атрибут alt є дуже важливим для зображень. Його потрібно заповнювати в 100% порядку. На заповнивши же Title, нічого погано не відбудеться, але для кращого ефекту також необхідно на нього звертати увагу.

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

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

Бачимо, що ці атрибути знаходяться в коді у 2й рядку. Їм задані певні значення, а точніше ті фрази або слова, які описують вміст картинки. Саме вміст картинки, а не ключові слова і ще щось.

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

Єдине правило, якого я дотримуюся і рекомендую використовувати його і вам - прописувати в даних атрибутах дуже короткий опис того, що зображено на картинці.

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

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

Title і alt повинні бути однакові?

І знову купа думок. Хтось каже, що має бути відмінність, а хтось - краще ефект, коли однакові. Я ж більше схиляюся вірити якимось фактам. Для цього я взяв пару дуже успішних ресурсів і подивився, як прописуються дані атрибути у них.

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

Тому, такий висновок - атрибути title і alt можна робити однаковими.

Але, це не 100% догма. Можете зробити їх трохи відмінними, але щоб сенс не губився від цього. І тайтл і альт повинні описувати зображення. До того ж title може взагалі бути відсутнім (помилки в цьому немає) і містити іншу інформацію крім опису самої картинки. Більш докладно про грамотному заповненні альта і тайтла я. За попередньою посиланням я копнув глибше в питанні заповнення даних тегів. Дуже раджу простудіювати матеріал.

Як практично прописати атрибути до зображення

Якщо ви використовуєте який-небудь движок, то в ньому передбачена така функція. Найімовірніше, що у вас сайт на WordPress. У ньому все робиться дуже просто.

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

Заповнюємо всі і і не забуваємо оновити файл, що зміни вступили в силу. Так робимо з кожним зображенням.

Якщо ж у вас сайт не керується ніякої платформою, тобто проста html сторінка, то доведеться додавати руками.

Я рекомендую зробити наступним чином. Природно, вам буде потрібно вихідний код сайту, де ви можете побачити код зображення. Вам потрібен відкриває тег

Щоб сильно не ламати голову, дам той же код, що і раніше. Візьміть його, як болванку собі.

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

Не забуваємо, що заповнюємо ці дані, виходячи з вмісту картинки. Описуємо саме зображення!

З цим питанням розібралися. Тут все гранично ясно.

Коротенько висновок такий: "Title і alt заповнюємо однаковими і прописуємо в них опис самого зображення, тобто того, що зображено на картинці".

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

Інші важливі моменти

Є ще 3 речі, які я не розглянув вище:

• назва файлу зображення;
• зменшення ваги зображень;
• унікальність картинок для сайту.

Зараз я розгляну тільки 1й момент, так як під інші 2 я виділив повноцінні об'ємні матеріали.

Про назву файлу мало хто пише в інтернеті. Але тут також є свої нюанси. Як потрібно називати сам файл, перед завантаженням його на сайт?

Як завжди, думки розділяються. Хтось пише, що потрібно вживати ключові слова. Хтось, що необхідно називати описом картинки, тобто так само, як title і alt.

А деякі завантажують файли з будь-якими назвами. Зробили скріншот за допомогою якоїсь програми. Йому було присвоєно ім'я поточною датою, таким його і завантажили.

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

У приклад покажу зображення з попередній статті мого блогу про створення форми підписки на оновлення сайту. Візьму наступну картинку.

Код зображення має вигляд.

Зараз важко уявити сайти без зображень, тим більше інтернет-магазини і каталоги товарів. Адже це відмінний спосіб привернути увагу відвідувачів, показати товар «обличчям» і спонукати потенційних клієнтів до здійснення цільових дій: купівлі товару або замовлення послуги. Детальніше про те, для чого ще потрібні картинки і на яких сторінках вони повинні бути, можете прочитати в нашій статті «Підбір та оптимізація зображень для сайту».

Використання картинок зробить сайт більш привабливим і допоможе утримати відвідувачів на ньому, але що більш важливо, з пошуку по картинках в Яндексі або Google до вас на сайт може прийти додатковий трафік (при коректному використанні атрибутів Alt і Title тега ).

Що таке атрибут Alt для картинок

Атрибут Alt для картинок- це текст, що описує зображення в html-тегу . Він стає видимим в разі неможливості завантаження зображення. На місці незавантаженої картинки буде показаний текст (при заповненому атрибуті Alt).

Давайте порівняємо. Так буде виглядати незавантажене зображення без заповненого атрибуту Alt:

А ось так буде виглядати картинка з текстом «Пральна машина Славдом WS30T / ET» в атрибуті Alt тега :

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

Як правильно скласти атрибут Alt для картинок

1. Оптимальна кількість слів - 3-5, але довжина тексту тега не більше 75-80 символів. Ми рекомендуємо використовувати коротку і стислу, але змістовну інформацію.
2. Обов'язкова умова - використання ключових запитів.
3. Ключові слова краще вживати в називному відмінку, щоб полегшити пошук.
4. Уникайте спаму: ми не рекомендуємо перераховувати велика кількість ключів через кому, як і в інших тегах.
5. Необхідно, щоб Alt ставився до тексту сторінки і описував те, що зображено на картинці.

Атрибут Title для зображень

Крім атрибута Alt слід також прописувати текст в атрибуті Title. Даний параметр задає допоміжну інформацію про зображення, коли користувач наводить курсор на зображення:

В html-коді заповнений атрибут Title для картинок виглядає так:

Правильно складений атрибут Title навіть допомагає поліпшити поведінкові чинники.

Як правильно складати Title для картинок

1. Атрибут Title повинен відповідати зображенню. Не слід писати в ньому те, що не має до картинки ніякого відношення.
2. Краще використовувати невеликий по довжині Title для зручності користувачів - ніхто не захоче читати кілометрову підказку до картинки.
3. Бажано наявність ключових слів. Не варто вживати такі слова, як «фото», «картинка» і т.д., адже і так зрозуміло, що це таке.

Приклад правильного заповнення атрибутів Alt і Title для тега

Розглянемо на прикладі, як можна прописати текст в атрибутах Alt і Title для картинки. Для цього візьмемо зображення з сайту будівельної компанії.

При складанні Alt необхідно зробити акцент на те, що ви продаєте / пропонуєте. Для картинки з нашого прикладу буде краще скласти альт «Будівництво будинку з колоди», а не просто «будинок» або «будівництво».

Атрибут Title для даного зображення можна трохи видозмінити і скласти так: «Будівництво дерев'яного будинку».

Труднощі при заповненні Alt і Title

Правильно заповнені атрибути Alt і Title до картинок допоможуть в пошуковій оптимізації сайту. Але не варто забувати і про інші аспекти оптимізації картинок, такі як «вага», якість і назва зображень. Якщо у вас немає часу на складання атрибутів Alt і Title, ми можемо допомогти вам і виконати цю роботу за вас.

>> Оптимізація картинок | Атрибути ALT і TITLE для опису зображень

Як правильно оптимізувати картинки для сайту.

Вітаю Вас, шановний читачу мого сайту!

У даній статті, я хочу Вам розповісти про те, для чого використовуються картинки на сайтах, яку роль вони відіграють для SEO-оптимізації. Розглянемо важливість використання атрибутів html коду alt і title, наведу приклади використання оптимізованих і не оптимізованих зображень, дізнаєтеся в якій якості потрібно використовувати картинки, і як це позначається на роботі сайту.

Плюси і мінуси використання картинок на сайті:

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

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

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

І якщо Ви хочете щоб Ваші картинки були незабутні і красиві потрібно використовувати їх по можливості в хорошій якості.

Ще один позитивний момент використання зображень на сайті - можливість використання оптимізації картинокпід ключовий запит певної сторінки сайту з метою поліпшення просування даної сторінки по продвигаемому ключовому запиту.

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

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

А виною цьому безліч причин; недбале ставлення до своєї роботи, використання неякісних і в жахливому стані зображень, використання їх не за темою, наявність занадто великої кількості зображень, які надаю велику вагу сторінці, і вона вантажиться дуже довго (в тому числі і фон сайту), відсутня оптимізація зображень під ключові слова. Ось основні недоліки використання всілякої графіки на сайті.

Але цих мінусів можна уникнути, знаючи як їх зробити позитивними. Все це ми розберемо далі в цій статті. Так що дочитайте її до кінця.

Атрибути alt і title у SEO-оптимізації зображень:

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

АтрибутALT: Даний атрибут входить в мову html. Призначення його полягає в описі якогось об'єкта з метою дати додаткову інформацію про даний об'єкт (в нашому випадку зображень). Як даний атрибут працює? Працює він дуже просто: Ви берете потрібну картинку, яка знаходиться у Вас на жорсткому диску або носії (флешка) і вставляєте на потрібну сторінку сайту в потрібне місце.

Потім Ви берете, знаходите код даної картинки і прописуєте туди таке значення alt = "(! LANG: Опис даної картинки з використанням ключових слів" . Но описание не нужно делать слишком большим (максимально пару предложений) и тулить туда много ключевых слов, так как поисковые системы этого не любят, что в итоге может сказаться на Вашем сайте.!}

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

Атрибут TITLE:даний атрибут titleтакож входить в мову html. Призначення його таке ж, як і атрибут alt, але з тією різницею, що даний опис буде показуватися користувачеві сайту при наведенні на картинку курсором. Даний атрибут не бере участі в просуванні сайту, але він дозволяє збільшувати поведінковий фактор, який також впливає на позицію сайту в пошуковій системі. Пишеться воно так title = "(! LANG: опис картинки" . Поэтому !} оптимізація зображеньвідіграє теж велику роль при просуванні сайту в пошукових системах.

Зразок SEO-оптимізованої картинки з використанням атрибутів alt і title:

Зараз Ви побачите зразок оптимізованої картинки з використанням двох вище перерахованих атрибутів.

C атрибутом title (Наведіть на картинку курсором) title = "(! LANG: Кот гімнаст" > !}

З атрибутом alt (без картинки) Обрацец коду даної картинки:

Без атрибуту alt (без картинки) Зразок коду даної картинки:

В якій якості потрібно використовувати картинки і зображення на сайті.

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

Також що я помітив, переглядаючи безліч сайтів так це те, що крім великих за розміром (кілобайти) картинок на сайті використовують великий розмір фону в якості картинки. Якщо вже Ви і надумали використовувати в якості фону зображення, то краще його вибрати однотонним і маленьким так воно буде складав і у Вас буде цілісна картинка.

Також, при використанні якісних зображень, потрібно враховувати і розмір дискового простору на Вашому хостингу і швидкість роботи сервера. Чим вона нижче, тим повільніше буде завантажуватися Ваш сайт. Тому перед тим як використовувати зображення в хорошій якості для сайту потрібно знати, де їх застосувати і в якій кількості.

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

До речі якщо Ви не знаєте, як зменшити якість картинки то скористайтеся програмою Фотошоп. Для цього заходите в меню "Файл" і там вибираєте пункт "Зберегти для Web і пристроїв".

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

Інші сторінки сайту:

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

Взагалі щоб розуміти, як він прописується, потрібно знати основи html, мати хоча б якесь уявлення про те, як текст і зображення додаються на веб-сторінки. Зокрема, фото- це одинарний тег img, у якого є всього один обов'язковий атрибут - src. Це шлях до файлу.

Очевидно, що якщо ввести його некоректно, нічого ви на екрані не побачите. Коротше, для виведення картинки вам всього лише потрібно в потрібному місці html-коду писати це:

< img src = "Шлях до зображення">

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

Чому альтернативний? Тому що він буде виведений на екран тільки в разі відключення графіки в браузері користувача. В такому випадку повинна ж бути якась та альтернатива? У всякому разі, якщо ви вставите фотографію Ейфелевої вежі до статті, то це здорово, але якщо раптом знайдеться людина, яка вимкнув показ картинок в своєму браузері, він просто нічого не побачить в цьому місці. Там буде просто хрестик (або іконка), який вказує на те, що в цьому місці має бути зображення. Наприклад, на цьому зображенні можна побачити карту світу:

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

Вплив alt в SEO

Ох, скільки суперечок на СЕО-форумах я бачив про те, чи впливає заповнення атрибуту на поліпшення ранжирування сайту і його окремих статей в пошуку. Можна з упевненістю сказати, що сьогодні все залишилося як і раніше. Хтось вважає, що заповнення alt допомагає в пошуковій оптмізаціі, хтось - що абсолютно ніяк це не впливає.

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

Знаєте, заповнення alt я б порівняв з кросбраузерності версткою (якщо хто розуміє, про що мова). Це коли сайт адаптується під всі популярні браузери. Якщо у найважливіших картинок на вашому сайті ви будете заповнювати цей атрибут, ви зробите свій проект хоча б на трохи, але краще. Також ви зробите свій проект трохи доступніше для людей.

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

Як заповнювати alt?

А ось це найважливіше, на мій погляд. Якщо ви читали мої минулі статті по СЕО, то напевно вже там не раз чули, що пошукові системи люблять природність. Відповідно, ідеальним заповненням атрибута буде максимально точне і короткий опис картинки. Як правило, 30-100 символів досить. При цьому максимальна довжина повинна бути приблизно 250 символів. Але навіщо вам так докладно описувати зображення?

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

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

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

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

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

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

Отже, давайте підсумуємо основне по заповнення alt:

Потрібно максимально просто і коротко описати картинку

Якщо ви і вставляєте ключову фразу, робіть це всього 1 раз і так, щоб виглядало природно

Для інших картинок заповнення alt по вашому особистому бажанню

Знову ж таки, не варто думати, що це якийсь керівництво до дії. Це всього лише рекомендації. Кожен веб-майстер робить по-своєму. Хтось взагалі ніколи не заповнює alt ні в однієї картинки, хтось робить як тут рекомендовано, а хтось спамить ключами.

З цих трьох варіантів оптимальними є перший і другий. Тобто тут є 2 рішення: або взагалі ніколи не чіпати alt, або заповнювати його максимально природно.

Заповнювати alt чи ні? Залежить від сайту

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

Відповідно, для кожного товару в інтернет-магазині розумно прописати alt. Давайте якраз розберемо на прикладі, як зробити це грамотно. Припустимо, у нас є товар - ноутбук ASUS G560 (не шукайте в пошуку, назва я вигадав). Природно, є фото цього ноутбука. Як прописати для неї альтернативний текст? Ось варіанти:

"Фотографія", 1, "ииавпв" та інше - це все варіанти, які ніяк не годяться. За такого опису абсолютно незрозуміло, про який товар мова. Текст "фотографія" або "картинка" (так часто підписують фото) взагалі найзабавніший, адже люди і так розуміють, що це не відео. Це все одно що на слона повісити табличку, де написати, що він слон.

"Крутий червоний ноутбук для ігор" - це непоганий опис, якщо ноутбук дійсно є ігровим. Але якщо ви цілитеся на трафік з картинок, то такий опис не є найоптимальнішим, оскільки подібну фразу я в пошуку набирає 0 людей. Люди частіше набирають назви конкретних моделей або хоча б виробника.

"Ноутбук" - опис, яке можна охарактеризувати так: краще, ніж нічого. Але теж не оптимально, так як немає конкретики. Чи не будете ж ви кожен товар підписувати так? Опис повинен бути унікальним для кожного окремого ноутбука.

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

"Ноутбук ASUS G560, купити в Москві з доставкою, відгуки" - схоже на спам, правда? Це найгірший варіант з усіх.

підсумок

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

Розглянемо таке питання, для чого потрібно використовувати зображення на сайті, і яку роль вони займають в SEO-оптимізації ресурсу. Крім цього, ми розглянемо використання таких складових HTML як атрибут title і alt для картинок, і в чому їх важливість. Наведемо приклади оптимізованих картинок і не оптимізованих, розглянемо, в якій якості використовуються зображення, і яким чином це відбивається на роботі web-ресурсу.

Плюси і мінуси застосування зображень на web-проект:

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

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

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

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

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

2.Мінуси.

При використанні зображень, фотографій, картинок на сайтах, мінуси зустрічається в основному у новачків, тому що застосування графічних елементів на web-проект може злякати читача.
причини:

Заливка неякісних в жахливому стані картинок;
Використання фотографій взагалі не по темі;
Присутність надто великого числа картинок, що надає зайву вагу сторінці і подовжує її завантаження (навіть фон шаблону);
Відсутність оптимізації, тобто зображення атрибути alt і title не мають і «не заточені» під певні ключові запити.

Роль атрибутів title і alt в SEO-оптимізації картинок

Як ми вже згадували вище, використання зображень допомагає сайту в його розкрутці та просуванні в пошукових системах. Крім того, це дає додатковий приплив цільових відвідувачів з тих же пошукових систем. А для цього, вам просто необхідно використовувати пару простих, але в той же час важливих атрибута - це атрибут titleі атрибут altдля будь-яких зображень, картинок, фотографій та іншої графіки. Суть цих атрибутів полягає в тому, що б з їх допомогою вичавити той максимум, який посприяє в просуванні ресурсу в пошукових системах. Оскільки, атрибутів тільки два, відповідно і ролей, які вони виконують теж дві, і вони відрізняються один від одного.

Незважаючи на те, що це простий метод підняти позиції web-проекту в пошукових системах, більшість web-майстрів в повному обсязі їх не використовують, а то і взагалі їх ігнорують. Деякі взагалі їх плутають, і не усвідомлюють яка між ними різниця. Також буває, що дані атрибути називають тегами, а адже це атрибути тега img (від слова «image»), але ні як не окремі теги, запам'ятайте це!

Сам же HTML-тег «img» використовують для відображення на сторінці сайту картинок (зображень, фото) в графічному форматі PNG, JPEG або GIF. Якщо потрібно, то ту ж картинку можна зробити посиланням, для цього потрібно укласти тег «img» в контейнер .

1. Атрибут ALT.

Цей атрибут входить в HTML-мову. Його призначення полягає в тому, щоб описати який-небудь об'єкт з метою подачі додаткової інформації про цей об'єкт (в нашому випадку картинок). Тобто атрибут alt для картинок передає її опис для браузерів при відключеною графіку. Якщо ви не пропишете цей атрибут, то відвідувач побачить порожню іконку замість бажаної картинки, якщо ж прописати атрибут alt, то показується його текст. Цей атрибут, до речі, найсильніше впливає на ранжування картинок ботами пошукових систем.
Як цей атрибут працює? Та дуже просто: берете обрану картинку, яку ви вже скачали собі на комп'ютер і заливаєте на необхідну сторінку вашого сайту в потрібному місці. Потім знаходите HTML-код цієї картинки і прописуєте в ньому таке значення: alt = "Описуєте коротко картинку і вписуєте ключові слова". Опис потрібно зробити якомога коротким (максимум парочка пропозицій) і вписувати в нього багато ключових слів також не потрібно, оскільки, пошукові системи до цього ставляться негативно, і це може негативно відбитися на вашому проекті.

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

2. Атрибут TITLE

Цей атрибут title той же входить в HTML-мову. Його призначення в принципі таке ж, як і атрибута alt, але різниця в тому, що ваше опис буде бачити відвідувач, якщо наведе курсор на обрану картинку. Цей атрибут не впливає на розкрутку і просування сайту, але він може вплинути на поведінковий фактор, який впливає на ранжування web-проекту. Пишемо його таким чином: title = "Описуєте картинку". От і все. Додамо, що оптимізація зображення, атрибути його, все це грає істотну роль в розкручуванні сайтів в пошукових системах.
Далі наведемо приклади SEO-оптимізованих картинок із застосуванням атрибутів title і alt

Ви бачите зразки оптимізованих картинок з даними атрибутами:

Заповнення атрибутів title і alt користувачеві значно сприятиме постійний CMS WordPress. При заливці зображення на сайт з'являється спеціальний завантажувач і спеціальне віконце для оптимізації:

Тема (не плутати з title) заповнюється автоматично, а ось атрибут alt доведеться заповнити самостійно. Далі, безпосередньо після вставки картинки на сайт, її потрібно відредагувати. Клацніть по ній в візуальному редакторі, і ви потрапите в віконце редактора:

Як бачите, атрибут alt можна прописати і тут, але він вже заповнений (це ще важливо для картинки, яку ви будете використовувати в якості мініатюри). Ось саме тут і заповнюєте атрибут title, Прописуючи в ньому ключові запити, ідентичні тим, що ви вказуєте в плагіні: All In SEO Pack. Після цього, зберігаєте і все - ваша картинка оптимізована.

В якій якості необхідно використовувати картинки на сайті

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

Ще можна помітити на багатьох web-проектах такий нюанс, крім застосування великого по кілобайтам (розміром) зображення, атрибути title і alt тут, природно, не використовують, але застосовують також величезний розмір фону сайту. Якщо і ви хочете використовувати картинку як фон сайту, то радимо вибрати його маленьким і однотонним, оскільки воно буде згладжуватися, і ви отримаєте цільну картинку.

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

Так само, для зменшення ваги картинки можна використовувати програму Фотошоп. У програмі заходите в меню «Файл» → «Зберегти для web і пристроїв» - ось і все.

Покращуйте оптимізацію вашого проекту, разом з грамотною у вас буде хороший!