Во время наполнения сайта контентом и его оптимизации, как правило, картинкам уделяется недостаточно внимания. И зря — картинки могут приводить трафик (благодаря поиску по картинкам) и повышают релевантность контента. Поэтому важна SEO оптимизация изображений на сайте.
С точки зрения пользователя, текст разбавленный картинками, проще воспринимается. Есть виды контента, где без картинок просто не обойтись: например, инструкции, статьи формата «как сделать».
Чтобы получать больше трафика благодаря картинкам, их нужно правильно оптимизировать. Как это сделать – читайте в нашей статье.
Читайте также: SEO-оптимизация страниц сайта
Как правильно сделать оптимизацию картинок на сайте
Картинки на сайте должны быстро загружаться (мало весить), быть привлекательными, качественными, и дополнять контент.
SEO оптимизация изображений для сайта состоит из следующих пунктов.
Формат картинки
Существует несколько форматов изображений, которые используются в сети и индексируются поисковыми системами. Самые популярные из них — JPEG, GIF, PNG и SVG.
Фокус в том, что выбрав неправильный формат, вы можете получить тяжеловесного монстра, или размытое пятно, которое испортит весь вид сайта.
JPEG — самый распространенный формат картинок в интернете; но и один из самых тяжелых. Используется в основном для фотографий. Сжатие такого изображения приводит к потере качества.
GIF – самый старый формат в сети. Насчитывает 256 цветов. Сегодня в основном применяется для анимированных изображений. Чем больше кадров у анимированной картинки, тем больше она «весит».
PNG – формат, который используется для графики (логотипов, кнопок и прочего). Его особенность в том, что он легко масштабируется. Еще один «фокус» — чем больше цветов в картинке, тем больше весит файл. Потому использовать его для фотографий не стоит — лучше всего для изображений, которые включают 3-8 цветов, или для изображений с прозрачным фоном.
SVG – относительно новый формат для векторных изображений. Картинка остается качественной, как бы вы ее не уменьшали или увеличивали, и при этом быстро загружается. Этот формат индексируется Google. Яндекс же индексирует только первые три.
Вес и размер
Большая картинка — значит, качественная. Но в то же время такой изображение будет тормозить загрузку веб-документа. А если таких картинок на странице несколько, то загрузка страницы будет занимать неоправданно много времени. Нужно соблюдать золотую середину.
Для интернет-магазинов оптимальный вес картинки – до 70 кб.
Чтобы изображение не весило много, и не теряло в качестве, можете сделать следующее:
- создавать картинку сразу нужного размера – так она не потеряет в качестве (если вам нужно сделать коллаж для превью, задайте нужный размер в фоторедакторе — например, 800*600 пикселей. В результате вы получите четкую картинку, которую не нужно будет уменьшать или увеличивать);
- сжать изображение с помощью специальных инструментов (о них речь пойдет ниже);
- вставить на страницу уменьшенное превью изображения, а картинку в полном размере открывать в новом окне. Фокус тут в том, что чем больше размер картинки, тем выше она будет ранжироваться в Google. И при этом большое по весу изображение не будет замедлять загрузку страницы;
- прописать в CSS размер изображения: ширину и высоту. Так браузер быстрее считает контент страницы.
Качество
В погоне за маленьким размером картинки не нужно забывать о ее качестве. Вам необходимо соблюсти непростой баланс между размером изображения и его привлекательностью, четкостью. Размытая картинка вряд ли понравится вашим пользователям.
Также поисковик сочтет некачественной ту картинку, которая расположена в неподходящем контексте, или не соответствует своему описанию/названию.
Это интересно: Как сделать SEO-оптимизацию видео на YouTube
Расположение
Изображение в статье должно не просто стоять для красоты. Если оно дополняет написанное, ценность статьи возрастает в разы, и поисковики будут ее ранжировать выше.
Также для поиска важно, где именно расположена картинка. Лучше всего размещать ее в середине текста, окружать подходящим контекстом.
И вот почему: поисковый робот пока еще не настолько умен, чтобы понять, что нарисовано на картинке. Он понимает это, опираясь на текст, который находится вокруг изображения. Если мы обрамим картинку текстом, тем самым мы объясним поиску, что на ней изображено, и сделаем ее более релевантной содержимому страницы (с точки зрения поискового паука).
Еще один вариант окружить картинку текстом – это оставить подпись под картинкой.
Кроме пользы для поиска, такие подписи полезны и для пользователей. Согласно KissMetrics, пользователи читают подписи под изображениями в среднем на 300% чаще, чем основной текст. Снабдите подпись под картинкой ключевыми словами, и вы убьете двух зайцев сразу.
Название файла
Поисковая система считывает не только контент на вашей странице, но и названия файлов (в том числе изображений). Поэтому лучше всего прописывать названия файлов понятным языком, включая ключевые слова. Название должно описывать, что изображено на картинке.
Например, это фото:
Если вы скинули фотографию с камеры, она может называться IMG10.JPG. Ни вам, ни поисковой машине такое название ни о чем не скажет.
Можно назвать файл «dog», «white_dog», «dog_on_the_sofa» и т.д. Такое название файла четко сообщает о том, что изображено на фото.
Помните о том, что название картинок должны быть написаны латиницей и без пробелов. Пробелы можно заменить нижним подчеркиванием или дефисом.
В интернет-магазинах фото товара лучше подписывать максимально подробно, со всеми характеристиками, используя релевантные ключевые слова. Не просто «laptop_samsung”, а «laptop_samsung_r530_grey». Как видите, в названии есть конкретная марка ноутбука и его цвет.
Метатег Alt
Наверное, одно из самых главных дел в оптимизации картинок – это заполнение метатега Alt. Это альтернативный текст, который отображается на месте иллюстрации, если та по какой-то причине не отобразилась в браузере.
Также этот тег считывают скринридеры, чтобы пояснить содержимое изображения людям со слабым зрением. Этот же текст сканируют поисковые роботы, чтобы понять, что на картинке.
По своей сути Alt – это краткое описание содержимого изображения. Рекомендуется вписывать ключевые слова, чтобы поиск счел эту картинку релевантной запросу пользователя.
Длина Alt – до 125 символов. Это значит, что вам не нужно ограничиваться одним словом. Наоборот, лучше использовать более длинные словосочетания, которые опишут картинку точнее.
Если у вас интернет-магазин, и у товаров есть серийные номера, укажите их в атрибуте Alt тоже.
Будьте аккуратны в том случае, если у вас на странице несколько изображений. Не нужно всем им приписывать одинаковый Alt или с одинаковыми ключевыми словами, иначе поисковые системы накажут вас за переоптимизацию страницы.
Также не нужно стараться засунуть в Alt все ключевые слова для страницы, по типу «корм для кошек корм для собак игрушки для животных лекарства».
Заполнять тег Alt нужно на русском языке. Если ваш сайт на WordPress, прописать этот атрибут можно сразу же, когда добавляете картинку на страницу:
Метатег Title
Этот тег – всплывающая подсказка, которая появляется при наведении курсора мышки на изображение (если, конечно же, он заполнен).
С помощью этого тега можно сообщить поисковой системе (и пользователям) дополнительные данные об изображении. Не обойтись без него и тогда, когда картинка является ссылкой.
Главное, что нужно помнить при заполнении этого тега – он не должен дублировать Alt.
Статья в тему: Как правильно заполнять метатеги на сайте
Уникальность
Как и с текстами, для поисковых систем важна уникальность картинок на вашем сайте. Они любят оригинальный, не ворованный и не скопированный у других контент.
Что Яндекс, что Google способны вычислить, откуда сворована картинка.
Конечно же, проще всего обеспечить уникальность своих изображений, делая фото или рисуя иллюстрации самому. И во многих случаях это действительно возможно и является идеальным выходом из ситуации.
Если же контентом на сайте занимаетесь не лично вы, у вас есть возможность проверить, не сворована ли картинка. Воспользуйтесь поиском по картинкам от Google:
В похожих изображениях вы увидите аналоги. Если полностью похожих на вашу картинок нет, значит, она уникальна.
В Яндексе уникальность проверяется таким же способом.
Что поможет в работе по оптимизации изображений
Мы плавно перешли к вопросу – где взять картинки для сайта и с помощью чего можно их сжать для использования на сайте.
Сохраните в копилку список ресурсов.
Где взять картинки для сайта
Делать фотографии самостоятельно. Самый простой, дешевый но трудоемкий способ получить уникальные изображения. Если у вас есть хороший фотоаппарат (а то и телефон подойдет), и у вас, например, блог – почему бы и не делать фото самому? В таком случае оно точно будет уникальным.
Поиск Google. Самый простой вариант добыть картинки – воспользоваться поиском по картинкам. Но тут нужно быть осторожным – большинство картинок защищены авторским правом.
Но вы можете задать простые настройки и получить картинки, которые можно свободно использовать:
Укажите, какая лицензия вам подходит. Например, вам нужны картинки с лицензией на использование в некоммерческих целях. Поиск предложит вам картинки, которые можно будет взять в качестве иллюстраций к статьям.
Бесплатные фотостоки. В сети есть множество ресурсов, где можно скачать картинки полностью бесплатно. Причем изображения в хорошем качестве и на любые темы. Предлагаем краткий список таких фотостоков:
- Pixabay.com
- Pexels.com
- FreeImages.com
- 123RF (платный, но для зарегистрированных пользователей открыт раздел с бесплатными картинками)
- Wylio.com
- MorgueFile.com (к некоторым картинкам нужно указывать автора).
Смотрите также: Сервисы проверки позиций сайта
Сервисы по сжатию изображений
Для сжатия изображений можно использовать старый-добрый Photoshop, или же воспользоваться онлайн-сервисами из нашего списка:
- PIXLR – онлайн-сервис и приложение для смартфона, которое позволит редактировать изображения прямо на ходу;
- Аватан;
- PicMonkey;
- Tinypng;
- GIMP — бесплатное программное обеспечение для Windows, Mac или Linux.
Оптимизируйте картинки на своей сайте, и получайте больше трафика с поисковых систем.
Высоких вам позиций!
