В Google лучше ранжируются страницы с хорошим (уникальным, структурированным, экспертным) текстовым и визуально понятным контентом. Грамотно оптимизированные картинки помогают привлечь на сайт дополнительный трафик.
Сегодня мы расскажем, какие приемы помогут правильно оптимизировать изображения и обеспечат дополнительные условия для успешного SEO-продвижения сайта.
Также рекомендуем прочитать нашу тематическую статью ”Инструменты привлечения трафика на сайт: синдикация контента”.
Image by UX Store from Unsplash
Подписывайтесь на нас в Facebook, Telegram, Twitter или Instagram, чтобы ничего не пропустить!
Соответствие картинки тексту
Релевантность
Стоит выбирать изображения, которые соответствуют содержанию текста, наглядно иллюстрируют, о чем этот текст, усиливают его посыл и смысл.
Качество
Пользователям не интересны размытые, нечеткие картинки. Поэтому важно использовать качественный визуальный контент, способный не просто привлечь внимание, но и удержать его.
Уникальность
- Не всегда есть возможность создать хороший визуал в Photoshop или Adobe Illustrator. Но можно скачать подходящее фото или изображение на бесплатном (или платном) сервисе. Рекомендуем знакомиться с TOP-10 бесплатных фотостоков по ссылке.
- Постоянно использовать стоковые картинки, которые можно найти в разделе “Самые популярные”, тоже не лучший вариант. Даже несмотря на тематическое соответствие и высокое разрешение этих изображений.
- Стоит выделить немного больше времени на поиск не примелькавшихся в Сети авторских фото, иллюстраций и т. д. Их поисковые машины воспринимают гораздо лучше часто повторяющихся картинок.
- И, конечно же, не нужно заниматься копипастом картинок с сайтов конкурентов: риск нарушения авторских прав еще никто не отменял.
Формат
Идеального универсального формата изображений не существует. Выбор зависит от того, какова цель использования того или иного визуала. К тому же у каждого формата свои характерные особенности сжатия.
Имя файла
Часто названия файлов выглядят примерно так — cMEaPREq2Rhg9.jpg. Если игнорировать значение высокого ранжирования в поиске, такое имя файла можно и не менять. Но выход в TOP практически всегда важен. А раз так, то стоит переименовывать картинки в соответствии с их содержанием.
Если в названии не одно слово, а несколько, между ними надо поставить дефис «-». Внимание: спамить ключами не нужно!
Пример хорошего названия картинки для статьи про то, как правильно выбрать надёжный хостинг — choose-hosting.jpg
Размер изображений
Например, в настройках сайта у вас по умолчанию выставлен размер картинки 400х300px. Если загрузить тяжёлый файл существенно бОльшего размера, качество иллюстрации от этого лучше не станет, и на странице будет видна картинка 400х300px.
Но чтобы ее отобразить, сайт каждый раз должен будет подгружать массивный исходный файл. Это существенно снижает скорость загрузки страницы. Особенно в том случае, если на странице несколько таких изображений.
Как изменить размер без потери качества? Например, с помощью Adobe PhotoShop, стандартного фоторедактора Paint или любых других известных вам программ, позволяющих менять разрешение картинки.
Вес файла
Скорость загрузки — важный фактор качественного ранжирования сайтов. Тяжёлые изображения существенно снижают показатели PageSpeed. Избежать этого поможет сжатие картинок.
Для этой цели можно использовать любые специальные программы и онлайн-сервисы: TinyPNG, JpegMini, I love image, Optimizilla, EzGIF (для гифок) и др. О том, как загружать GIF-файлы в WordPress, читайте здесь.
Использовать их несложно: нужно загрузить картинку и изменить её исходные параметры на необходимые. В PhotoShop это можно делать, используя функцию Save for Web.
Главное условие эффективного сжатия — сбалансированное соотношение качества и веса изображения. Нужно добиться того, чтобы отредактированная иллюстрация не слишком отличалась от исходника.
Атрибуты Alt и Title
Обязательный атрибут Alt
Это короткий текст-описание изображенного на картинке. Если иллюстрация по какой-то причине удалена, перемещена или браузер пользователя её не отображает, подсказкой для читателя будет текст Alt.
При работе с сайтом лучше заполнить этот атрибут для всех изображений, размещаемых на его страницах. Благодаря этому, поисковые роботы будут лучше распознавать и понимать содержимое изображений: это дополнительный фактор хорошего ранжирования.
В HTML-коде прописывается так:
Наличие атрибута Alt положительно сказывается на общей текстовой релевантности страницы Google. Поэтому очень важно использовать ключевые слова в описании.
Дополнительный атрибут Title
Title — своеобразный текстовый заголовок картинки (он не должен дублировать Alt). Эта настройка не так обязательна, как Alt, но косвенно на продвижение иллюстрации всё-таки влияет.
К тому же наличие Title может положительно отразиться на поведенческих параметрах сайта. Если пользователю сложно понять, что изображено на картинке, он может навести на неё курсор — и подсказка Title прояснит ситуацию.
В HTML-коде прописывается так:
Общие требования к Title и Alt:
- содержательный текст, описывающий изображение;
- длина — 3–5 слов (но более 250 символов);
- желательно, чтобы включал ключевой запрос;
- атрибут не должен быть спамным.
Где прописать Title и Alt
Если сайт сделан на WordPress, поля для заполнения Alt и Title нужно искать в настройках изображения.
Подписи к картинкам
Текст Alt и Title обычно отображается при каком-то специальном действии. А вот обычные подписи сопровождают картинку всегда. При распознавании картинок поисковые роботы учитывают и текст, размещенный вокруг них. Поэтому рекомендуется делать информативные, полезные для пользователя подписи с умеренным вхождением ключевых слов.
Адаптивные изображения
Это стандарт для современных сайтов, и Google настоятельно рекомендует использовать эту технологию. Визуальный контент должен корректно отображаться на экране любого размера — от дисплея смартфона до широкоформатного монитора.
Например, изображение 640x400px будет отлично смотреться на экране смартфона, а вот на большом жк-мониторе с диагональю 49″ — не лучшим образом.
Но если загрузить на сайт картинку в нескольких вариантах разрешения и предложить браузеру выбрать нужный файл в зависимости от размеров экрана, проблема будет решена. Сделать это поможет атрибут Srcset тега Img.
Важно! При расчёте необходимого качества изображения, надо учитывать соотношение пикселей девайса.
Чек-лист оптимизации картинок
- Размещайте на сайте релевантные, уникальные и качественные изображения
- Загружайте картинки подходящего формата и размера
- Оптимизируйте вес изображений
- Не забывайте указывать имя файла
- Активно используйте атрибуты Alt и Title
- Добавляйте подписи с ключевыми словами
- Настраивайте использование адаптивных изображений
Выводы
Изображения не просто иллюстрируют текстовый контент, но оказывают влияние на трафик. Использование картинок плохого качества, а также “тяжёлых”, которые долго загружаются, негативно сказывается на поведении пользователей.
А вот грамотно оптимизированные работают только в плюс: посетитель часто читает текст по диагонали, не вчитываясь, — и качественная картинка обязательно привлекает внимание.
Кроме того, такие изображения повышают возможность поиска вашего сайта и визуального контента, размещенного на нем, в базе Google Images. Поиск по картинкам — один из основных трендов SEO-продвижения. Игнорировать его не стоит, чтобы не потерять весомую часть трафика.
Также важно понимать, что сайт будет работать более эффективно благодаря надежному хостингу и удачному домену.