Оптимизация изображений для сайта

Когда речь заходит о SEO-оптимизации, многие сразу думают о текстовом контенте, однако оптимизация изображений также необходима для того, чтобы занять высокие позиции в ТОПе поисковой выдачи. Уникальные и качественные изображения могут стать ключом к успеху. В этой статье мы рассмотрим основные аспекты оптимизации изображений, которые следует учитывать.

Используйте уникальные картинки

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

Алгоритмы могут обнаруживать дубликаты фото и определять их источники. Поэтому перед добавлением на ваш сайт еще одной стоковой фотографии следует тщательно обдумать этот шаг.

Оригинальность изображения можно проверить через бесплатный сервис TinyEye.

Туда можно загрузить картинку или указать ссылку, и сервис выполнит проверку.

Если изображение уже было использовано на других веб-сайтах, то TinyEye предоставит список этих сайтов.

Также можно проверить, индексируется ли изображение поисковыми системами. Например, загрузив фотографию на "Яндекс.Картинки". Если она не обнаружена в индексе, вы получите соответствующее уведомление.

Как сделать картинку уникальной для поисковиков

• Для придания уникальности изображению сегодня требуется более тщательный подход: не просто зеркальное отображение, но также поворот, обрезка лишних углов и применение цветовых фильтров. Такой подход может значительно повысить уникальность картинки и избавить от необходимости разработки новых вариантов рекламы.
• Небольшое снижение качества изображения на 10–20% позволит сократить размер файла вдвое, что приведет к признанию уникальности роботом.
• Включите в фоторедакторе рамку и текст (при необходимости, измените шрифт). Если текста слишком много и требуется сократить его до 20%, можно частично размыть информацию, чтобы она оставалась на изображении, проходя проверку модераторами рекламных площадок.
• Добавьте небольшое размытие: примените 1–5% эффекта размытия, используя изображения большего размера. Это усложнит анализ искусственного интеллекта, сохраняя читаемость при отображении на экране.
• Увеличение контрастности, использование фильтров или эмодзи поверх изображения — еще один способ придать креативу уникальность.
• Поменяйте формат изображения с jpg на png с помощью любого фоторедактора.
• Преобразуйте статичное изображение в видео, сдвигая пару пикселей на первых и последних секундах. Для этого можно использовать бесплатные редакторы, такие как Crello и Pixaloop.
• Создание коллажа из нескольких изображений с добавлением текста и эмодзи — еще один способ создания уникального контента. Однако необходимо убедиться, что все изображения содержат изменения, чтобы избежать обнаружения плагиата поисковиками.

• Для придания уникальности изображению сегодня требуется более тщательный подход: не просто зеркальное отображение, но также поворот, обрезка лишних углов и применение цветовых фильтров. Такой подход может значительно повысить уникальность картинки и избавить от необходимости разработки новых вариантов рекламы.
• Небольшое снижение качества изображения на 10–20% позволит сократить размер файла вдвое, что приведет к признанию креатива уникальным роботом.
• Включите в фоторедакторе рамку и текст (при необходимости, измените шрифт). Если текста слишком много и требуется сократить его до 20%, можно частично размыть информацию, чтобы она оставалась на изображении, проходя проверку модераторами рекламных площадок.
• Добавьте небольшое размытие: примените 1–5% эффекта размытия, используя изображения большего размера. Это усложнит анализ искусственного интеллекта, сохраняя читаемость при отображении на экране.
• Увеличение контрастности, использование фильтров или эмодзи поверх изображения — еще один способ придать креативу уникальность.
• Поменяйте формат изображения с jpg на png с помощью любого фоторедактора.
• Преобразуйте статичное изображение в видео, сдвигая пару пикселей на первых и последних секундах. Для этого можно использовать бесплатные редакторы, такие как Crello и Pixaloop.
• Создание коллажа из нескольких изображений с добавлением текста и эмодзи — еще один способ создания уникального контента. Однако необходимо убедиться, что все изображения содержат изменения, чтобы избежать обнаружения плагиата поисковиками.

Размещайте качественные и релевантные изображения

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

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

Используйте только качественные картинки: размытые, неопределенные или неправильно обрезанные фотографии могут негативно сказаться на восприятии пользователем сайта и его продукции. Яркие и качественные изображения привлекают внимание пользователей, делают контент более привлекательным.

Формат картинок

Не существует универсального или идеального формата изображений. Все зависит от типа изображения и его предполагаемого использования. В наибольшей степени применяются форматы JPEG, PNG и GIF, так как они поддерживаются всеми браузерами и поисковыми системами, хотя SVG и WebP также встречаются.

Вот несколько рекомендаций:

• Для интернет-магазинов оптимальным выбором является формат JPEG. Он обеспечивает хорошее качество при минимальном размере файла. JPEG также рекомендуется для больших фотографий или иллюстраций.
• Используйте формат PNG, если требуется сохранить прозрачность фона, поскольку другие форматы не поддерживают эту функцию. Иногда PNG превосходит JPEG по размеру файла.
• Для логотипов и иконок наилучшим выбором будет векторный формат SVG. С помощью CSS или JavaScript можно легко управлять изображениями в формате SVG, например, изменять их размер без потери качества.

Оптимизируйте размер изображений

Размеры изображений имеют важное значение для скорости загрузки страницы, а эта скорость, в свою очередь, влияет на рейтинг страницы в поисковой выдаче. Использование большого количества изображений на странице может существенно замедлить ее загрузку. Существует множество инструментов и методов для сжатия фотографий без ущерба качеству.

Прописывайте необходимые размеры. Если вы этого не сделаете, то браузер будет автоматически выбирать подходящие, что займет время. Кроме того, элементы страницы могут сдвигаться, что может привести к неудобствам для пользователей до полной загрузки страницы. Это явление известно как смещение макета, и Google учитывает его при оценке релевантности страницы.

Адаптируйте изображения

Важно, чтобы изображения отображались корректно на всех типах устройств, начиная от смартфонов и заканчивая дисплеями с высоким разрешением типа retina. Для этого размер изображений должен соответствовать разрешению экрана, с которого их просматривают пользователи.

Например, если вы загрузили фотографию с разрешением 800 х 400 пикселей:

• Один пользователь посещает сайт с мобильного устройства, и изображение отображается нормально.
• Другой пользователь использует iMac, и на таком экране изображение может потерять качество.

Чтобы решить эту проблему, можно загрузить несколько версий изображения с разными размерами и показывать соответствующую версию в зависимости от разрешения экрана.

Для этого можно использовать атрибут srcset в элементе . Он позволяет указать несколько вариантов одного изображения для разных размеров экранов.

Пример HTML-кода:

Название файлов

Поисковые роботы Яндекса и Google обращают внимание на название файла.

Важно использовать латинские буквы и дефисы вместо пробелов. Следует избегать названий вроде kiohfhhl123.jpg, а вместо этого использовать слова, например, hudi-nike.jpg.

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

Заполните атрибуты title и alt

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

Атрибут title предоставляет дополнительную информацию о картинке, которая отображается при наведении курсора на изображение. Это позволяет пользователю получить представление о содержании изображения.

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

Добавление альтернативного описания картинки имеет несколько преимуществ:

• Облегчает понимание содержания изображения в случае его недоступности.
• Полезно для оптимизации поискового ранжирования, поскольку использование ключевых слов в атрибутах alt помогает поисковым роботам понять содержание изображения и предлагать его в результатах поиска.
• Может служить в качестве анкора для внутренних ссылок, если изображение является ссылкой на другую страницу сайта.

Некоторые простые рекомендации для использования атрибутов alt:

• Заполняйте атрибут alt для каждого изображения, особенно если оно относится к товарам.
• Держите описание кратким и простым.
• Если доступны номера моделей или серийные номера, используйте их в атрибутах alt.
• Включайте в alt только ключевые слова, относящиеся к содержанию изображения.

Микроразметка Schema.org — для лучшего отображения в поиске

Микроразметка Schema представляет собой набор HTML-тегов, которые сообщают поисковой системе о наличии определенных элементов на веб-странице. При помощи микроразметки можно указать такие данные, как адрес компании, номер телефона и другие. Это улучшает возможности системы в отображении соответствующей информации в результатах поиска.

Что касается изображений, существуют два типа страниц, на которых особенно полезно применять структурированные данные: страницы продуктов и страницы рецептов. Для этого существуют специальные теги изображений, которые, при корректном использовании, Google использует для вывода расширенных результатов.

Пометить изображения на страницах можно вручную, используя специальные плагины или инструменты, такие как "Мастер разметки структурированных данных" от Google. В последнем случае достаточно выбрать тип страницы, над которой вы работаете, и вставить ссылку.

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

Микроразметка Open Graph и Twitter Card для отображения в социальных сетях

Микроразметки Open Graph и Twitter Cards используются для настройки внешнего вида поста в социальных сетях при репосте материалов с вашего сайта.

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

При делении статьи в социальных сетях пользователи увидят:

• привлекательный внешний вид поста;
• подходящую картинку с правильными размерами;
• ссылку с правильным заголовком и описанием.

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

Заключение

Список обязательных шагов по оптимизации изображений:

• Используйте только соответствующие изображения, которые дополняют основной контент страницы или лучше объясняют информацию, чем текст.
• Предпочтительно использовать оригинальные изображения или изображения с открытой лицензией, чтобы избежать возможных штрафов за нарушение авторских прав.
• Понятно и однозначно называйте файлы изображений.
• Выбирайте оптимальный формат изображения, обычно JPEG подходит для большинства случаев.
• Если это возможно, сжимайте изображения без значительной потери качества.
• Загружайте изображения в тех размерах, в которых они будут отображаться на веб-сайте.
• Для различных типов экранов создавайте разные версии одного и того же изображения.
• Обязательно добавляйте атрибуты title и alt для каждого изображения.
• Включите список изображений в файл Sitemap.
• Подписывайте изображения, если это улучшает пользовательский опыт.
• Обеспечьте привлекательный внешний вид постов в социальных сетях с использованием OpenGraph и Twitter Cards.
• Используйте структурированные данные Schema.org для медиаконтента.