Посібник із написання тегів зображень Alt

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

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

Що таке альтернативний текст?

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

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

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

Чому не завантажуються зображення?

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

1. У користувача слабкий сигнал Wi-Fi або модем
2. У вашому тексті непрацююче посилання на зображення
3. Розмір зображення занадто великий для їхньої системи
4. Використано невірне ім'я файлу
5. Користувач використовує зчитувач з екрану

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

4 причини, чому так важливий альтернативний текст

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

1. Ви не застрягли на порожньому місці. Текст з'явиться, коли зображення не завантажиться.
2. Альт-текст покращує доступність і дозволяє користувачам з вадами зору почути опис зображення. Це важлива частина SEO-дружнього веб-дизайну.
3. Це хороше SEO оскільки це допомагає пошуковим системам ранжувати вашу веб-сторінку, а також розуміти, який зв'язок зображення має з вашим контентом.
4. При використанні вашого зображення в якості посилання, текст набуває вигляду якірний текст.

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

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

Щоб підвищити рейтинг ваших зображень у Google, вам слід дотримуватися чотирьох порад, наведених нижче:

1. Використовуйте змістовний альтернативний текст
2. Переконайтеся, що зображення знаходяться на тих сторінках, які містять відповідний контент
3. Обов'язково використовуйте якісні зображення
4. Використовуйте хороші імена файлів, які мають сенс

Як додати alt-теги на веб-сторінки?

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

Для користувачів Hubspot потрібно натиснути на зображення, а потім на піктограму редагування, щоб перейти на спливаюче вікно. Після того, як воно з'явиться, ви додаєте свій текст у поле альтернативного тексту, як правило, внизу екрану, і текст автоматично вставляється у ваш HTML-код.

WordPress seems even easier to edit your images. Again you have to click on the image який відкриє вкладку блоку на бічній панелі поруч із зображенням. Перейдіть до поля з написом alt text і додайте свій текст. Натисніть "Оновити" і все готово.

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

3 причини, чому ваш альтернативний текст може не досягти мети

1. Ключові слова - це не завжди добре

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

Коли ви робите це, ви ускладнюєте пошуковим системам розуміння того, як це зображення пов'язане з рештою вашого контенту. Це нерозуміння може зашкодити вашому потенційному рейтингу, коли ви використовуєте довгі ключові слова.

Також, у випадку з Google, ви можете понести штраф Які ніхто не хоче отримувати.

2. Деталізація не завжди є достатньо конкретною

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

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

Кращим альтернативним текстом було б щось на кшталт Віллі Мейса з "Гігантів Сан-Франциско", який б'є по м'ячу в "Кендлстік Парку".

3. Конкретизації заважає брак деталей

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

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

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

Текст alt повинен бути конкретним, максимально детально пов'язаним з контекстом зображення. Чим більше деталей, тим краще буде ваш alt-тег для SEO зображень.

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

Alt Tag Найкращі практики та поради

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

Коли ви пишете для оптимізації тегу alt, вам слід розглянути можливість використання наступних порад щодо найкращих практик використання тегу alt:

1. Будьте конкретними та описовими- Не просто пишіть про загальний предмет. Витягніть із зображення якомога більше деталей, які будуть одночасно і конкретними, і описовими. Ви хочете бути максимально конкретними, але не перестаратися. Щоб перевірити свій текст, закінчіть речення, прочитайте його, а потім спробуйте візуалізувати зображення без допомоги самого зображення. Подивіться, чи отримаєте ви чітке уявлення про те, про що йдеться на зображенні.
   
2. Не пишіть книги- Вам потрібно зробити альтернативний текст якомога коротшим. Не потрібно писати довгий абзац або опис довжиною в книгу. Ваша цільова довжина повинна бути від 100 до 125 символів, не більше. Деякі програми для читання з екрану не можуть читати більше 125 символів
   
3. Уникайте повторень- Не потрібно бути надмірним і не потрібно включати слова, які не є необхідними. Деякі з таких непотрібних слів - це "фотографія" або "зображення" тощо. Слідкуйте за тим, щоб ваш текст був правильним і не повторював те, що всі вже знають. Слова, які вже маються на увазі, не потрібно включати в текст.
   
4. Використовуйте ключові слова природно- Використовувати ключові слова - це нормально, просто не заповнюйте ними свій текст. Обов'язково враховуйте цільові ключові слова і те, як вони будуть поєднуватися з вмістом вашої веб-сторінки та зображенням. Стає легше бути природним, коли фото відповідає змісту веб-сторінки
   
5. Правильно використовуйте ключові слова- Іншими словами, не переповнюйте текст ключовими словами. Ви можете нашкодити своєму ранжируванню і SEO-стратегії, якщо переповните alt-текст більшою кількістю ключових слів, ніж потрібно. використовуйте їх в потрібний час і в потрібній кількості.
   
6. Уникайте використання зображень замість тексту- Мета тексту - допомогти людям, які читають з екрану, зрозуміти зображення. Вони не зрозуміють зображення, якщо ви використовуєте зображення замість тексту або з текстом всередині зображення. текст є текстом і залишається таким.
   
7. Дотримуйтесь своєї мети- Ця мета полягає в тому, щоб описати зображення найкращим чином, щоб ті, хто не може бачити зображення, могли зрозуміти, що на ньому зображено. Пишіть свої alt-теги з думкою про реальних людей, а не лише про SEO-стратегії чи пошукові системи.
   
8. Уникайте використання лапок- Не виключено, що додаткові лапки можуть призвести до порушення роботи функції HTML. Система вже використовує власні необроблені лапки для позначення початку і кінця вашого тексту.
   
9. Зображення діють як кнопки- Коли вони це зроблять, ви повинні мати альтернативний текст, який пояснює призначення цього зображення. Альтернативний текст може бути таким простим, як "подати заявку", "пошук" або "подати заявку зараз".

10. Зробіть тест - Щоб переконатися, що ви все зробили правильно в альтернативному тексті, протестуйте його. Ви хочете переконатися, що все працює так, як заплановано.

Вміст для альтернативного тегу

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

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

Можна залишити його порожнім, якщо зображення не використовується і ви хочете вставити лише порожнє місце. Крім того, ви можете обмежитися 2 словами, якщо зображення вимагає стислості. Порожній тег alt виглядає так: alt = ""

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

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

Нижче наведені ті позитивні риси, якими повинен володіти ваш альтернативний текст:

1. Завжди пишіть природно, незалежно від того, використовуєте ви ключові слова чи ні
2. Не перенасичуйте текст ключовими словами, але використовуйте їх з розумом
3. Переконайтеся, що текст описує зміст і візуальні аспекти на фото
4. У тексті необхідно описати призначення зображення і чому воно розміщене на веб-сторінці
5. Текст повинен додавати цінності веб-сторінці. Це робиться для зручності користувачів і в цілях пошукових систем
6. Текст повинен створювати переваги для веб-сторінки та її доступності
7. Всі теги повинні містити пошукові терміни та ключові слова, які допоможуть пошуковим системам ранжувати вашу веб-сторінку або сайт

Чи є ліниве завантаження ідеальним для альтернативних текстів

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

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

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

Чи однакові alt-теги і теги заголовка?

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

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

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

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

Навіть Провідник доводилося налаштовувати на читання тексту цього тегу. Однак longdesc більше не підтримується при реалізації сайтів на HTML5. Він може бути пропущений при пошуковій оптимізації.

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

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

Додавання альтернативного тексту на веб-сторінки

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

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

Ключ до кращого ранжування вашого веб-сайту - переконатися, що у ваших зображеннях встановлені найрейтинговіші alt-теги.

Висновок

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

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

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

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