SEO-оптимизация картинок. Что, зачем, и как

Под «оптимизацией» страниц сайта обычно подразумевается особая подготовка мета-тегов и текста. Особенно текста. Вы нанимаете копирайтера, выдаете ему список ключевых слов, расписываете ТЗ с кучей параметров, потом два-три дня все это дело правите, чтобы подходило под все требования…

Это правильно – текст на странице должен быть особенным. И нужные слова включать, и длины быть подходящей, и чтобы читать интересно было. Но за всем этим часто забывают об еще одном, не менее важном факторе оптимизации сайта – о seo-оптимизации картинок.

Да, картинки на сайте тоже нужно готовить к продвижению. Зачем это делать, на что обратить внимание, и как – читайте дальше.

Что такое seo-оптимизация изображений?

Интернет — это визуальная среда. И хороший сайт просто не может существовать без картинок. А если вы хотите хорошо продвинуть сайт, то не стоит забывать и об оптимизации изображений.

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

Теперь обо всем по порядку.

Для начала нужно немного теории и статистики.

У каждой страницы на сайте есть свой вес. И согласно последним данным, среднестатистический вес одной страницы увеличился на 240%, если сравнивать показатели за 2010 и за 2016 года. И 64% всего содержимого в сети – это изображения.

Источник изображения —  httparchive.org

Да, скорость интернета сегодня такая, что в принципе на вес картинок мало кто обращает внимание. А ведь именно они, картинки, утяжеляют страницы вашего сайта. С компьютера – да, не так важно. Но что касается мобильных устройств – тут огромные по весу картинки недопустимы. Если сайт будет долго грузиться, это негативно повлияет на его ранжирование.

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

Для уменьшения веса используют сжатие. Но сжатая картинка теряет визуальную привлекательность — становится тусклой, размытой. Такая картинка неинтересна пользователям. Потому при сжатии нужно находить золотую середину, чтобы малый вес не вредил общему качеству картинки. В конце концов, ваш сайт должен удержать пользователя, который пришел с выдачи. Плохие картинки могут плохо влиять на поведенческие факторы, которые тоже имеют свой вес для SEO.

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

Теперь обо всем подробнее.

Самые популярные форматы изображений

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

Итак, какие есть форматы изображений, и как их правильно использовать?

.bmp – очень мало используются в интернете, оно и понятно – такие файлы весят ооооочень много, и при этом качество их оставляет желать лучшего: рваные, неровные рисунки, словно 24-битных играх.

.jpg(jpeg) – а этот формат, наоборот, самый распространенный в сети. Вся прелесть его в том, что этот формат легко сжимается, с помощью чего можно уменьшить вес картинки. Но важно не потерять в качестве. Чем меньше картинка – тем меньше ее вес, но и качество тоже страдает.

Хочу отметить, что .jpg – это идеальный формат для фотографий, изображений продуктов, пейзажей и тому подобного.

.png – это формат, у которого меньше цветов, чем у предыдущего, но он и не сжимается практически. Весят эти картинки много, если задействовано много цветов. Чем меньше цветов – тем меньше вес. Прелесть формата в том, что картинки легко масштабируются, потому его используют для логотипов, графиков, значков. Если же вы захотите сделать красочное фото в этом формате – оно будет весить как слон.

.svg – это особый векторный формат изображений, который относительно новый, но в уже завоевал свое место. Потому что он и масштабируется хорошо, не теряя в качестве, и весит мало.

.gif – самый первый формат изображений в Интернете, который включает в себя 246 цветов. Сейчас снова популярен, потому что передает движение, анимацию. Весит по-разному, в зависимости от длины ролика. Если изображение не движется – лучше использовать .jpg, он весит меньше, и цветов больше. Картинка выходит более сочная.

Итог этой всей информации один: если вы хотите продвигать сайт, чтобы он хорошо грузился и отлично выглядел, то логотипы, иконки делайте в формате .svg  или .png, а картинки для статей, товаров — .jpg.

Оптимальный размер изображений для веба

Почему .jpg? Потому что его можно сжимать, так, чтобы картинка нормально выглядела и относительно мало весила.

Какой размер картинок использовать? Старайтесь использовать изображения, размер которых не меньше чем 800×600 пикселей. Проверено на собственном опыте, что картинки такого размера хорошо выглядят на всех устройствах, при этом не имеют много веса.

Как оптимизировать картинки для SEO?

Теперь о самом «мясе» — как провести оптимизацию картинок для сайта?

Я бы разделил поисковую оптимизацию картинок на два важных этапа: общую оптимизацию и оптимизацию для продвижения.

Что включает в себя общая оптимизация изображений для сайта?

1. Выберите правильный формат изображения – об этом я уже написал выше. Если фото — .jpg, если логотип – векторный формат. Если вы ошибетесь с форматом – получите тяжеловесного монстра, а не сайт.
2. Измените размер изображения так, чтобы оно хорошо отображалось. Для этого можно использовать программы (о них ниже) или встроенные средства вашей CMS (об этом тоже пойдет речь дальше).
3. Если нужно, обрежьте изображение, чтобы оставить самую главную часть, и уменьшить вес картинки.
4. Примените сжатие, если это необходимо.

Оптимизация изображений для продвижения означает следующее.

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

Самые основные значения, которые нужно прописать – это title, и alt. Особенно alt. Если первым можно пренебречь, то этим – ни в коем случае.

Alt — это самое важное поле для описания изображения. Он считывается поисковыми системами, и выводится в том случае, когда изображение не загружается. В этом мета-теге вам нужно кратко описать, что изображено на картинке, и включить ключевое слово. Но будьте аккуратны – если на странице много картинок (больше 5), не переспамьте страницу ключевиками!

Title – это заголовок, выводится при наведении курсора мышки на изображение. Заполняйте при желании.

Теперь от теории переходим к практике.

Популярные программы для сжатия изображений

Самая популярная программа для оптимизации картинок – это Photoshop. Да, в ней можно не только рожки к фотографии конкурента пририсовывать. Ее богатый функционал позволяет:

— обрезать картинку;

— сжать картинку;

— и даже перегнать ее из одного формата в другой.

Если по какой-то причине вы не можете установить эту программу на свой компьютер, вы можете воспользоваться Photoshop Online.

Еще одна программа для сжатия зображений – Gimp. Позволяет оптимизировать для нужд seo картинки с помощью опции «Экспортировать как». Вы можете выбрать формат выходного файла, параметры качества и просмотреть результат. А затем сохранить, если качество устраивает.

Но это – ручные методы оптимизация размера картинок для сайта. Можно пойти другим способом, и использовать средства своей CMS.

Как задать размеры и прописать мета-теги  для картинок (на примере WordPress)

Покажу вам, как это делается, на примере самой простой в использовании CMS, на которой сегодня работает половина всех сайтов в Интернете – WordPress.

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

Шаг 1. Вставляем картинку на страницу – жмем в редакторе кнопку «Добавить медиафайл».

Шаг 2. Выбираем на компьютере и загружаем файл в админку. Справа у вас появится меню «Параметры файла».

Шаг 3. Заполняем поля: заголовок, подпись, описание. Заголовок выведется потом под картинкой. Это по желанию. Но обязательно заполните поле «Атрибут alt». Впишите сюда описание картинки, включив ключевое слово для страницы.

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

Шаг 5. Вставляем картинку и проверяем результат на странице.

Если вы хотите внести изменения в уже залитую картинку, то вам нужно:

1.Выделить изображение.

2. Нажать кнопку «Изменить»
3. В появившемся меню вы можете задать атрибуты Alt и Title, если забыли сделать это раньше.

Поиск по картинкам – стоит ли на это надеяться?

Другими словами, есть ли смысл оптимизировать картинки с надеждой, что к вам придет клиент именно из поиска по картинкам?

Тут я напишу свою коронную фразу – с каждым сайтом есть свои нюансы.

Допустим, если человек ищет в картинках котиков – понятно, ему на вашем сайте не хочется ничего покупать. Он ищет на данный момент обои для рабочего стола.

Но если он вбивает в поиск по картинкам «двухъярусная кровать», то, скорее всего, он хочет посмотреть модели этих кроватей не просто так. Он хочет либо купить, либо заказать ее мастеру, и ищет подходящую модель такой кровати. И велика вероятность, что такой человек может зайти на ваш сайт. И если ему подойдет ваше предложение – даже заказать у вас эту самую кровать.

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

Выводы

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

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