Работа с графикой сайта должна входить в число компетенций грамотного SEO-специалиста. Ведь основная цель существования сайта — привлекать трафик, а значит нужно уметь разбираться и в дизайне, и в юзабилити, и быть немного программистом если это потребуется.
В этой статье хочу поговорить о правильной работе с изображениями веб-сайта в плане эффективного SEO-продвижения.
Содержание
Картинки должны присутствовать
Начнем с того, что картинки на странице сайта вообще должны быть. Большинство людей смотрят на контент веб-страниц однобоко и не придают графической составляющей значения, а то и вовсе считают картинки визуальным мусором.
С текстом-то все понятно: он дает ответ на вопрос пользователя, он содержит в себе ключевые слова. Однако графика значима для веб-сайта не меньше, чем текстовое наполнение. И вот почему.
✔ Контент, содержащий картинки, ранжируется выше. Анализ поисковой выдачи Google показывает, что страницы содержащие хотя бы одно изображение ранжируются выше, чем страницы без изображений.
✔ Картинки — это зацепки для внимания. Большинство посетителей веб-страницы не читают размещенный на ней контент «от» и «до». Вместо этого они «сканируют» страницу глазами в поисках фрагмента, который чем-то привлечет внимание. В качестве ловушки для внимания выступают выделяющиеся на фоне монотонной портянки текста элементы: списки, подзаголовки, цитаты, хайлайты, изображения.
✔ Картинки повышают качество и информативность страницы. Приписываемое Конфуцию высказывание гласит, что миром правят знаки и символы, а не слово и закон. Усвояемость информации из изображений и инфографики намного выше, чем из текста. Естественно, при условии что изображения подобраны релевантные, а не по принципу «лишь бы были».
✔ Картинки повышают доверие пользователя. Использование качественных и уникальных фотография существенно повышает доверие пользователя к контенту на странице:
- Реальные фотографии в обзоре товара дают понимание, что автор обзора действительно держал этот товар в руках и опробовал его в работе, а не скомпилировал свое мнение на основе пресс-релизов и новостей;
- Реальные фотографии на сайте организации позволяют понять, что это реально существующая компания, а не фирма-однодневка;
- Реальные фотографии в товарной карточке вместо типовой графики от производителя товара позволяют посетителю убедиться в существовании магазина и наличии товара в его ассортименте. Кроме того, это качественно выделяет магазин из общей массы: 9 из 10 конкурентов не станут заморачиваться заполнением товарных карточек уникальным и качественным контентом.
✔ Картинки помогают дополнительно оптимизировать страницу под ключевые слова. Для этого используется атрибут alt, о котором будет подробно написано чуть ниже.
Картинки: полезные и бесполезные
При подборе картинок для сайта нужно руководствоваться критериями релевантности и уникальности.
Релевантная картинка является иллюстрацией к текстовому наполнению страницы и органично его дополняет. К разряду релевантных изображений также можно отнести различные схемы, диаграммы и инфографику, позволяющие представлять большие объемы информации в наглядном и легком для восприятия виде.
Нерелевантная картинка представляет собой некое абстрактное изображение, непонятно как соотносящееся с основным контентом страницы. Эталонный пример бесполезной картинки приведен выше: думаю, все не раз видели взятую с фотостока фотографию этих улыбающихся офисных сотрудников на различных сайтах. Что иллюстрирует это изображение? Что владелец сайта пытается показать посетителю, помещая на страницу фото каких-то «левых» людей?
Нерелевантные изображения не способствуют повышению общего качества контента страницы. Добавлять их можно только от безысходности.
Уникальные картинки лучше дополняют содержимое страницы, а следовательно — сильнее повышают ее качество. Кроме того, уникальные картинки намного лучше ранжируются в поиске по картинкам. И во многих случаях уникальные картинки вызывают большее доверие у посетителей.
Поэтому если есть возможность отснять для сайта уникальные фотографии или заказать собственную инфографику — нужно обязательно ей воспользоваться.
Оптимизация размера изображений
Распространенная ошибка: изображения загружаются на сайт в максимально доступном разрешении, а затем масштабируются до нужного размера в коде страницы. Это вынуждает пользователя тратить больше трафика и увеличивает время загрузки страницы.
Мы живем в мире, в котором уже более 50% пользователей Интернета заходят в него с мобильных устройств, а поисковые системы перешли на mobile-first алгоритмы ранжирования. И скорость загрузки сайта является важным фактором ранжирования для всех сайтов без исключения. Для коммерческих сайтов этот фактор и вовсе критический.
Поэтому перед загрузкой изображений на сайт нужно пережимать их в графическом редакторе до того разрешения, в котором они будут отображаться на сайте. Это не приведет к ухудшению качества, но позволит значительно уменьшить общий вес страницы и положительно повлияет на скорость ее загрузки. В некоторых случаях экономия трафика после оптимизации размера изображений может доходить до нескольких мегабайт, а время загрузки уменьшаться в разы.
Оптимизация размера файла
Дополнительную экономию в размере веса страниц можно получить, сжав их с использованием более правильных алгоритмов компрессии. Визуально качество картинки от этого практически не страдает: нужно обладать очень хорошим зрением и пользоваться профессиональными и хорошо откалиброванными мониторами чтобы заметить разницу до и после сжатия.
Обычному пользователю невооруженным глазом эта разница не будет видна, но оптимизация позволяет в среднем уменьшить объем графического файла на 40-70% по сравнению с эталоном.
Я рекомендую пользоваться десктопным приложением JPEGmini (для полноценной работы нужна покупка Pro-версии) или бесплатным веб-сервисом Optimizilla. JPEGmini удобен, когда нужно быстро обработать большой объем графики, но Optimizilla использует лучшие алгоритмы компрессии.
Атрибут alt
Атрибут alt предназначен для вывода альтернативного текста вместо изображения. Если картинка на сайте по каким-то причинам не грузится, то пользователю отображается рамка от нее и текст из атрибута alt. Таким образом при проблемах с загрузкой изображений не сильно страдает информативность страницы. Кроме того, текст из атрибута alt может использоваться при посещении веб-страницы слабовидящими людьми.
Но применительно к поисковой оптимизации для нас важно вовсе не это. Важно то, что анализ текста из атрибута alt, наряду с технологией компьютерного зрения (Computer Vision), является одним из основных способов распознавания смыслового наполнения картинки роботом поисковой системы.
Общеизвестно, что атрибут alt играет роль в ранжировании при поиске по картинкам. Но влияет ли этот атрибут на позиции самой страницы сайта в поисковой выдаче — на этот счет мнения специалистов расходятся.
Сам я считаю, что заполнение атрибута alt:
- Позволяет лишний раз добавить релевантные ключи в «тело» страницы без текстового переспама
- Помогает роботу оценить смысловое наполнение страницы в целом и ее релевантность тем или иным поисковым запросам
Поэтому заполнять alt рекомендую в любых случаях, даже если нас не интересует ранжирование в выдаче по картинкам. Трудозатраты на прописывание атрибута невелики и лучше один раз сделать и забыть, чем не сделать и сомневаться «а не влияет ли оно негативно на ранжирование».
Заполнение атрибута alt
❌ Плохо: атрибут alt к картинкам на странице не прописан вообще
✅ Достаточно хорошо: в атрибут alt для всех картинок вписан один ключ, отражающий содержимое страницы в целом
✅ Очень хорошо: в атрибут alt для каждой картинки вписан уникальный ключ, описывающий эту картинку в контексте страницы в целом
По моему мнению, второй вариант оптимален в плане соотношения трудозатрат к ожидаемому результату. Если контент страницы позволяет без труда подобрать уникальные описания к изображениям — можно сделать так. Но целенаправленно тратить время и силы на это не стоит.
В HTML-коде синтаксис изображения с прописанным «альтом» выглядит следующим образом:
<img src="/картинка.jpg" alt="Текст атрибута alt вписывается сюда">В зависимости от движка атрибут прописывается либо в админке на этапе загрузки изображений, либо при редактировании страниц в режиме HTML-кода.
На что можно не обращать внимания
- Имя файла. Не стоит доходить до крайностей и вписывать ключи в название файла с картинкой — оно совершенно точно не оказывает никакого влияния на SEO
- Атрибут Title. В отличие от мета-тега Title для страниц, атрибут Title для изображений не оказывает влияния на поисковое ранжирование. Можно не заполнять его вообще или копировать в него содержимое атрибута alt
Подводя итоги
- Страница с картинками выглядит более качественно, чем страница без картинок, как в глазах поисковой системы, так и в глазах живого пользователя
- Отсутствие картинок < Нерелевантные картинки < Релевантные неуникальные картинки < Релевантные уникальные картинки
- Уменьшайте разрешение картинок до того размера, в котором они будут отображаться на сайте
- Оптимизируйте файлы с изображениями перед загрузкой на сайт, это дает ощутимую экономию в весе страницы
- Прописывайте атрибуты alt для изображений
