SEO изображений: имя файла, альтернативный текст, формат и размер
Как настроить имя файла, альтернативный текст, формат и размер, чтобы изображение находилось в Google Картинках и не замедляло страницу.
Команда rabbitclipПубликация: 4 мин чтения
Коротко
SEO изображений означает правильную настройку пяти отдельных параметров, чтобы изображение находилось в Google Картинках и не замедляло страницу: имя файла, альтернативный текст, вес файла, формат и размер. Руководство Google Search Central отмечает, что изображения надежно находятся, когда они размещены через обычный тег img или тег picture; изображения, добавленные только как фон в CSS, не индексируются.
На большинстве сайтов имя файла изображения остается случайным кодом, присвоенным камерой, а альтернативный текст либо пуст, либо представляет собой фразу, забитую ключевыми словами. Оба подхода неверны; правильный вариант находится где-то посередине.
Почему имя файла имеет значение?
Имя файла представляет собой первый сигнал, который Google получает о том, что изображено на картинке. IMG_4821.jpg не несет никакой информации, тогда как zimnyaya-rabochaya-kurtka-sinyaya.jpg прямо говорит, что показано на изображении.
Правило простое: строчные буквы, дефисы между словами, простые латинские символы вместо кириллицы или диакритики. Одно и то же изображение, используемое на нескольких страницах, может сохранять одно имя файла; настоящее различие делается в альтернативном тексте.
Как писать альтернативный текст?
Альтернативный текст, это описание, которое заменяет изображение, если оно не загрузилось или используется программа чтения с экрана. Google указывает, что атрибут alt служит для описания изображения и важен и для доступности, и для поиска.
Хороший альтернативный текст рассказывает тому, кто не видит изображение, что на нем показано, например синяя зимняя рабочая куртка, вид спереди. Честно описать изображение работает лучше, чем втискивать в него ключевое слово; оставить его пустым обходится и потерей доступности, и потерей шанса появиться в поиске по картинкам.
- Хорошо: красный кожаный диван в гостиной, вид сбоку.
- Слабо: диван.
- Перебор: диван софа гостиная мебель декор дома модели диванов.
Какой формат выбрать: JPEG, PNG, WebP, AVIF?
Материал web.dev о форматах изображений объясняет, что каждый формат по-своему балансирует сжатие, и что современные форматы, такие как WebP и AVIF, обычно сохраняют то же визуальное качество при меньшем весе файла. Фотографические изображения обычно подходят для WebP или AVIF, логотипы и иконки, которым нужна прозрачность, для PNG, простая графика для SVG.
Одного выбора формата недостаточно; автоматическая выдача нужного формата в зависимости от браузера через тег picture позволяет одновременно поддерживать и старые, и новые браузеры. На сайте интернет-магазина этот выбор напрямую влияет на скорость загрузки изображений товаров.
Почему размер и вес файла определяют скорость?
Загрузка изображения шириной 4000 пикселей, если оно будет отображаться только при 400 пикселях, вынуждает браузер скачивать и уменьшать намного больше данных, чем нужно. Это задерживает момент, когда основной контент страницы становится видимым.
Адаптивные изображения решают эту проблему, подготавливая несколько размеров одного и того же изображения и позволяя браузеру выбирать подходящий под экран. На сайте сети спа-салонов такое изменение размера фотографий филиалов заметно сократило время загрузки на мобильных устройствах; точный процент не измерялся, но направление было очевидным.
Для чего нужна карта сайта для изображений?
Карта сайта для изображений, это файл, который отдельно сообщает Google адреса изображений на сайте. Google Search Central отмечает, что URL изображений в карте сайта для изображений не обязаны находиться на том же домене, что и сам сайт, поэтому таким способом можно сообщать и об изображениях, размещенных на CDN.
Этот шаг не обязателен для каждого сайта, но он ускоряет индексирование изображений для интернет-магазина, который размещает их на отдельном домене или CDN.
Пять шагов перед загрузкой нового изображения
Фиксированный порядок действий, который стоит применять перед добавлением изображения на сайт.
- Обрезать изображение до самого большого размера, в котором оно реально будет отображаться; не загружать исходные размеры камеры.
- Сохранить файл в формате WebP или AVIF, оставив PNG для случаев, где действительно нужна прозрачность.
- Переименовать файл в строчных буквах с дефисами, описав, что изображение показывает на самом деле.
- Написать альтернативный текст, честно описывающий изображение, без искусственного добавления ключевого слова.
- После публикации страницы проверить в инструментах разработчика браузера, что изображение загружается в правильном размере.
Большая часть SEO изображений это не вопрос дизайна, а вопрос дисциплины: настоящее имя файла, честный альтернативный текст, правильный формат и правильный размер. Примененные вместе, эти пять пунктов повышают и шанс появиться в Google Картинках, и реальную скорость страницы. Короткий ознакомительный звонок с rabbitclip достаточен, чтобы увидеть, на каком уровне находится настройка изображений сайта по этим пяти пунктам.
Частые вопросы
Что произойдет, если альтернативный текст оставить пустым?
Изображение теряет большую часть шанса появиться в результатах поиска по картинкам, а посетители, использующие программу чтения с экрана, не смогут понять, что на нем показано.
Работает ли WebP во всех браузерах?
Он работает в подавляющем большинстве современных браузеров; если через тег picture предложен резервный формат вроде JPEG или PNG, старые браузеры также показывают изображение без проблем.
Можно ли использовать кириллицу или диакритику в имени файла?
Этого лучше избегать; символы вне простого набора ASCII могут вызывать проблемы на некоторых серверах и в браузерах, поэтому простые латинские буквы остаются более надежным выбором.
Нужна ли карта сайта для изображений каждому сайту?
Нет; сайтам, размещающим изображения на основном домене, она обычно не нужна, она полезнее для сайтов, использующих отдельный домен или CDN.
