Копирайтинг от автора № 1 по версии Fl.ru и Freelance.ru

Alt и title у картинок: в чем разница и зачем они нужны

Alt (альтернативный текст изображения) — атрибут тега изображения, краткое описание картинки в HTML-коде страницы. Когда фото пропадает, браузер выводит содержимое alt вместо картинки. Поисковый робот читает описание и по нему определяет, показывать ли изображение в поиске по картинкам.

Правильный СЕО альт-текст для изображения укладывается в 3−5 слов, точно передает суть снимка и обходится без переспама ключами. На Tilda заполнить атрибут получится через настройки блока с картинкой.

Приветствую! Я копирайтер Вячеслав Савицкий

Пишу тексты для поисковой оптимизации (SEO, Search Engine Optimization) с 2008 года. Владельцы сайтов вкладывают силы в контент, дизайн, скорость загрузки, а атрибут alt у картинок оставляют пустым. Мой сайт smextenej.ru работает на Tilda, поэтому покажу заполнение на живом примере.

Атрибут alt и его задача на веб-странице

Каждая картинка на сайте хранит в HTML-коде несколько служебных параметров. Замещающий текст alt среди них предназначен для поискового робота. Он видит файл .jpg или .png, но «рассмотреть» содержимое так, как человек, пока не умеет. По alt-тексту для изображения поисковик определяет, какому запросу соответствует картинка и стоит ли выводить ее в результаты.

Файл с именем img_3847.jpg для робота остается набором символов, а СЕО альт-текст «белый виноград в стакане 300 г» дает конкретику. Для интернет-магазина описание в alt работает сразу в 2 направлениях.

Робот индексирует фото товара и показывает в «Картинках». На текстовом блоге или портфолио alt тоже полезен, хотя трафик из поиска по изображениям там обычно меньше.

Alt и title у картинки выполняют 2 разные задачи

Рядом с каждой картинкой в HTML-коде прописывают служебные параметры с разными функциями. Один передает поисковику описание картинки, второй выводит подсказку при наведении курсора.

Атрибут	Назначение	Когда виден пользователю
alt	Описание содержимого для робота и экранных читалок	Когда картинка пропала или отключена
title	Дополнительная подсказка	При наведении курсора на изображение

SEO alt-текст сообщает роботу, что изображено на фото. В атрибуте title стоит указывать уточняющий контекст, дополняющий описание в alt. Если оба параметра содержат одни и те же слова, робот видит дубль.

4 правила эффективного SEO альт-текста для картинок

Заполнять замещающий текст несложно, если держать в голове несколько принципов.

Краткость. Оптимальная длина alt составляет от 3 до 5 слов, до 125 символов по рекомендации Google и до 250 по общей практике.
Точность. Описывать нужно именно то, что изображено на фото. «Фото» в alt для робота равно пустому полю, а «белый виноград в стеклянном стакане 300 г» дает полную картину.
Естественность. Перечисление ключевых фраз через запятую ведет к переспаму, достаточно одной-двух фраз, совпадающих с темой страницы. Подробнее о работе с ключевыми словами рассказываю в статье «Заголовок и ключевые слова в SEO-тексте».
Отдельный текст для каждого ракурса. Если на странице 5 фото одного товара с разных сторон, alt стоит варьировать, например «виноград вид сверху», «виноград гроздь крупный план», «виноград на весах».

Влияние alt на позиции сайта в Яндексе и Google

Среди владельцев интернет-проектов распространено убеждение, что достаточно заполнить замещающий текст у всех картинок и страница взлетит в топ, но на практике картина тоньше. Результаты поиска делятся на 2 типа, обычную текстовую выдачу и выдачу по изображениям. СЕО альт-текст для изображения заметнее всего влияет на второй тип, где робот по описанию в alt относит фото к запросу и выводит в разделе «Картинки».

В основных результатах поисковиков прямое влияние alt менее заметно, чем в разделе «Картинки». Большая часть переходов из поиска по изображениям относится к визуальным нишам: товары, рецепты, дизайн интерьеров, архитектура. Сайты с заполненным alt-атрибутом получают ощутимую долю дополнительного трафика из этого раздела.

Для текстового блога или портфолио заполненный SEO alt-текст остается вторичным фактором, зато для интернет-магазина или фотогалереи поиск по изображениям превращается в полноценный канал переходов.

Как прописать SEO alt-текст на Tilda за 3 шага

Сайт smextenej.ru работает на платформе с 2018 года, и заполнять описания картинок здесь удобнее, чем на многих CMS.

Откройте нужную страницу в редакторе Tilda, наведите курсор на блок с картинкой и кликните на иконку изображения.
В открывшемся окне перейдите во вкладку «SEO Settings», где расположены поля ALT и Title.
В поле ALT впишите краткое описание фото из 3−5 слов, совпадающих с тематикой страницы. В поле Title добавьте уточнение контекста.

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

Результаты моего исследования по alt в Яндексе и Google

Яндекс в справке по индексации изображений прямо просит заполнять описания картинок, уточняя, что атрибут влияет на показ фото в «Картинках», а связь с позицией страницы в текстовом поиске справка не подтверждает.

Google в документации (раздел «Рекомендации по оптимизации изображений») подчеркивает роль alt и при ранжировании основных результатов, и в поиске по изображениям.

На практике СЕО alt-текст — честный способ добрать трафик из поиска по картинкам. Для магазинов и галерей с большим количеством фотографий канал приносит ощутимые переходы.

5 ошибок в alt-тексте с риском попасть под санкции

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

Пустой alt. Робот встречает картинку, видит незаполненное поле и проходит мимо, а страница теряет трафик из поиска по изображениям.
Общие слова вроде «фото» или «картинка». Такой замещающий текст для поисковика равен пустой строке.
Переспам ключами. Строка «виноград белый купить дешево Москва Санкт-Петербург доставка» в альт-тексте воспринимается роботом и читателем как бессвязный набор слов.
Один alt на серию фото. Когда 8 снимков товара содержат идентичное описание, поисковик индексирует первое изображение и игнорирует остальные.
Дублирование alt и title. Оба параметра выполняют разную функцию, и одинаковое содержимое лишает второй атрибут смысла.

Как проверить СЕО альт-тексты на готовом сайте

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

Отключите показ картинок в браузере (Chrome → Настройки → Конфиденциальность → Настройки сайтов → Изображения → Блокировать). На месте каждого фото появится замещающий текст alt.
Наведите курсор на картинку. Если всплывает подсказка, title заполнен. Для просмотра alt откройте HTML-код через Ctrl+Shift+C в Chrome и кликните на изображение. В панели разработчика отобразится тег img со всеми атрибутами.

Атрибут alt остается незаслуженно забытой настройкой на большинстве сайтов. Заполнять его — дело 5 минут на каждую картинку, а эффект копится годами, особенно когда сайт продает визуальный товар.

Если хотите, чтобы весь проект работал на трафик, готов помочь с seo-оптимизацией текста и подсказать по каждому изображению. Пишите мне в Телеграм @Smextenej, обсудим задачу и определим объем работ.

Собрал все важное об альт-текстах в ответах на вопросы

Что такое alt-текст изображения?

Alt, атрибут тега img, содержит краткое описание картинки для поискового робота и экранных читалок. По сути, заполненный alt и есть СЕО альт-текст для изображения в чистом виде. Когда фото на странице пропадает, браузер выводит содержимое alt вместо картинки.
Чем alt отличается от title?

Alt описывает содержимое фото для поисковика и отображается, когда картинка пропала. Title работает как подсказка при наведении курсора. Для поисковой оптимизации важнее alt, поскольку роботы используют именно его при индексации.
Сколько слов должно быть в alt-тексте?

Оптимальная длина составляет от 3 до 5 слов в пределах 125 символов по рекомендации Google. Слишком короткий alt из одного слова дает роботу мало контекста, а конструкции длиннее 10 слов выглядят перегруженными.

Alt и title у картинок: в чем разни﻿ца и зачем они нужны