Оптимизация изображений на сайте
|
Содержание |
Об авторе: Павел Швальгин В интернет-маркетинге с 2009 года |
Успешное продвижение в поисковиках в Яндекс и Google – это не только хороший текст и техническая оптимизация, но работа с изображениями. Как показывает практика, картинки помогают лучше понять смысл, разбивают контент на логические блоки и считаются отличным помощником, если на сайте требуются иллюстрации и схемы.
Фотоконтент часто включают на первые страницы, они «заманивают» пользователей, которые становятся подписчиками или клиентами компании. Наличие изображений важно и для SEO: каждый опытный специалист знает, что грамотное оформление страницы непременно принесет хороший результат, поэтому непременно делает упор на включение картинок в контент.
Требования к изображениям
Практика показывает, что количество, размеры и характер картинок влияет на позиции сайта в выдаче. Дело в том, что поисковые системы Яндекс и Google воспринимают их иначе, проводя ранжирование как элементов, дополняющих текст. Следовательно, площадка с наличием фотоконтента воспринимается как более полезная для пользователя и, следовательно – поднимается выше.
Сколько изображений должно быть на странице?
Чтобы продвижение было успешным, нужно, чтобы картинки читались с разных устройств – компьютеров, планшетов, ноутбуков, телефонов.
Считается, что оптимально разместить на странице до 12 изображений:
• первые 4 – это три превью вместе с оригиналом для мобильных устройств;
• затем проводится дублирование этих элементов с соотношением сторон 16:9;
• последние 4 – повторный дубляж с соотношением сторон 4:3.
Рекомендуем также настроить микроразметку ImageObject и/или разместить указатели на эти изображения в виде ссылок через атрибут тега link.
Разрешение
А это – «палка о двух концах». Дело в том, что для SEO важно разрешение изображений, поскольку поисковики считают такие картинки более качественными. Но элементы в высоком разрешении «весят» больше, поэтому дольше загружаются и сильно нагружают страницу – а это уже негативно оценивается поисковиками. Здесь важна умеренность, нужно учитывать и количество картинок. Можно ограничиться небольшим их количеством, но добавить в хорошем качестве.
Существует определенное «золотое правило» для 12 картинок, касаемо разрешения:
• нижняя граница по высоте – не менее 1080 px;
• для превью 640 px в ширину;
• обычно выбирают такой вариант: фото 1920 px в ширину и три превью для мобильных устройств – 640, 920 и 1220 px.
Уникальность
Поисковые системы проверяют загруженные изображения на оригинальность. Конечно, владельцу интернет магазина держать в штате фотографа накладно и не актуально, остается только брать иллюстрации из интернета. Как показывают наблюдения, с точки зрения SEO хоть и важна уникальность, но использование дублей в карточках товаров не возбраняется. Главное – не забывать наполнять страницу качественным контентом, следить за юзабилити и за другим оформлением сайта.
Здесь можно дать следующие полезные советы:
1. Для карточек товаров достаточно стандартных картинок, скачанных с других площадок. Главное, чтобы на них не было ссылок на сайты-источники;
2. Если размещается информационная статья, лучше сделать фото. Приветствуется изображения экспериментов или различные пояснения. На таких площадках поисковики воспринимают их как уникальные, несущие полезный и познавательный контент.
Оптимизируем изображения
Допустим, Вы сгенерировали изображение нейросетью или скачали файл с фотостока, проверив лицензию, что исключает нарушение авторских прав – что делать дальше? Для хорошей оптимизации нужно соблюсти баланс между быстрой загрузкой картинки, высоким ее качеством и информативностью. Сделать все это возможно в несколько этапов – поговорим об этом подробнее.
Формат
От него зависит, насколько хорошо можно сжать фото или иллюстрацию, чтобы сохранить ее качество. При правильном подходе удается достичь высокой скорости загрузки. Если в изображении используются стрелки, схемы и логотипы, лучше всего использовать векторные форматы, из которых наиболее популярен SVG. А вот для иллюстраций или фото лучше использовать что-то другое.
Наиболее распространенные форматы:
• JPEG;
• PNG;
• GIF;
• WebP;
• AVIF.
Последние два появились недавно и стремительно набирают популярность – они удобны для форматирования, поскольку сохраняют качество изображений при небольшом весе, могут работать с прозрачным фоном и с анимацией. Могут стоять по умолчанию в некоторых браузерах, что весьма удобно. Конкретный формат для SEO подбирают в зависимости от требований, которые предъявляются к оформлению страницы.
Адаптация
Эта процедура включает несколько действий – здесь важно найти компромисс между весом изображения и его качеством:
1. Уменьшение размера – этот вариант выбирают для картинок, которые будут размещаться на сайте и увеличивать их не будет необходимости. Сжать файл можно программами guetzli, pngquant или mozjpeg;
2. Работа с палитрой – можно сохранить качество, просто уменьшив цветовую палитру. Внешних изменений обычно не видно, за исключением того, что будет меньше ярких оттенков;
3. Конвертация GIF-файлов в видео – выбирают для длинных анимаций. В этом случае размер уменьшится, что улучшит оптимизацию страницы. Обычно выбирают стандартный формат MP4;
4. Удаляем лишние метаданные – после того, как файл обработан, остается его XML-разметка с метаданными. Ее можно удалить, поскольку она не требуется для дальнейших задач. У фото срезают информацию о дате съемки, геоданных и фотокамере.
Ленивая загрузка
При правильной настройке изображения загружаются не сразу, а по мере надобности, когда пользователь кликает на превью или прокручивает страницу до картинки. При этом, поисковик индексирует не заглушку, а саму качественную иллюстрацию. Так называемую отложенную загрузку Lazy load выставляют так, что она сигнализирует браузеру о загрузке картинки, выставленную в параметрах.
Точная настройка согласно рабочим требованиям может быть выполнена только опытным и квалифицированным вебмастером.
Атрибут ALT
При добавлении картинки важно прописывать атрибут ALT – он представляет собой точное описание того, что изображено на ней. Например: «автомобиль», «ребенок и кошка», «яблоко на блюдце».
Даже если убрать картинку, по атрибуту alt роботы всегда поймут, что было на изображении раньше. Название должно гармонично вписываться в текст, что важно для обработки контента.
Требования к атрибуту ALT – он должен:
• быть связан по смыслу с основным текстом;
• не содержать повторов слов;
• четко описывать содержание изображения;
• не повторять основные ключи и заголовок страницы;
• иметь длину не более 100 символов.
Атрибут TITLE
Это название изображения, которое выводится при наведении курсора. TITLE обычно прописывают максимально коротко, например, «штукатурка декоративная», «собака Мопс», «самодельная прицеп-дача». Главное, чтобы читатель смог быстро понять, что точно изображено перед ним, получив пояснения. На SEO данный атрибут не влияет, но является полезным для пользователей.
Выводы
Итак, хорошие изображения – весомый плюс к оптимизации ресурса, картинки должны быть тематичными, простыми, понятными и полезными для пользователя. Для поисковых систем важно оптимальное соотношение высокого качества и быстроты загрузки, где ключевая роль принадлежит обработке.
Другие статьи в данном разделе:
