Пройти тест«Узнайте, как увеличить продажи через интернет-каналы »Вам доступен бонус

icon map.png г. Москва, БЦ "Кожевники", ул. Дербеневская 20

icon_time.png Часы работы: Пн.-Пт: с 10-00 до 19:00

 

Как правильно подобрать и оптимизировать картинки для сайта

Изображения на сайте помогают значительно оживить общий контент на странице, сделать его интересным и вовлекающим. Они влияют на конверсию для интернет-магазина, при выборе услуг на том или ином ресурсе, на решение сходить в кино или на выставку. Но многие забывают, что картинки способствуют SEO-продвижению и быстрому привлечению трафика.
24.03.2020 Автор: Чудаев Алексей Время на чтение: 11 мин.

Содержание



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

    Данная статья будет посвящена тому, как правильно работать с картинками и фотографиями на сайте. Ведь сейчас важно, как никогда, использовать самые разные варианты продвижения и сервисы Яндекс. Картинки (Google Images) также являются одним из инструментов данного продвижения. Как сделать так, чтобы по запросам Вас находили в Интернете? Как получать много трафика и продаж? Поговорим об этом в нашей сегодняшней статье.

    Качество изображений


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

    Самое важное:

    • Релевантность картинки тематике статьи
    • Качество изображения (отсутствие запрещенного контента, размытия, выраженных пикселей и прочего)
    • Близость к тексту
    • Отсутствие лишних тегов в коде для вставки изображения

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


    Оптимизация картинок для поискового SEO-продвижения


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

    Поисковые машины определяют принадлежность картинки или изображения по двум параметрам:

    Мета-тег ALT

    В HTML-коде прописывается в следующем виде: <img src="Путь к картинке" alt="Альтернативное описание изображения" />

    Служит для идентификации изображения ботами поисковых систем. Обычно, в тег Alt прописывается главное ключевое слово, по которому ищут контент.

    Требования к тегу Alt:

    • Должен быть содержательным и описывать содержимое картинки
    • Состоять из 3–5 слов, но не больше 250 символов
    • Содержать ключевой запрос
    • Не содержать спам

    Мета-тег Title

    Данный тег отвечает за подсказку для пользователя сайта. Когда на картинку наводится курсор, высвечивается подсказка с названием этой картинки <img title="Текст, который будет выводиться при наведении" src="Путь к картинке" />.

    Требования к тегу Title:

    • Должен отвечать интенту страницы или конкретного абзаца
    • Состоять из 3–5 слов, но не больше 250 символов
    • Не должен быть слишком большим, так как всплывающее описание может перекрывать часть важного контента и попросту быть неудобным.
    • По возможности содержать ключевой запрос;
    • Не должен быть спамным.

    Размеры и форматы изображений


    По данным портала HTTPARCHIVE по статистике, до 65% всех сайтов содержат в себе изображения со средним весом 1,5Мб. Чтобы Вы понимали, 1,5 Мб – это 1 500 Кб и речь только об одной картинке, а на среднем корпоративном сайте их может быть сотни. Про интернет-магазины и говорить нечего – там десятки тысяч товарных позиций с анонсами и товарными изображениями.

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

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

    Есть еще и такие современные форматы, как WebP и JPEG-XR, но мы не делаем на них акцент в силу их новизны и того, что не все браузеры могут их корректно отображать.

    Рекомендуем для сайта придерживаться размера картинок не более 150 Кб и формата JPEG, таким образом вы обеспечите своему сайту быструю загрузку и низкую потерю аудитории и конверсий. 

    Уникальность картинок и авторское право


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

    Такие изображения требуется защищать авторским правом и наложением водяного знака. Есть очень много плагинов для WordPress, которые могут реализовать данную задачу. У Битрикса тоже есть аналогичные решения.


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

    Если у вас все же не хватает времени и ресурсов на подготовку уникального контента, стоковые картинки преобразите под себя при помощи сервиса Канва.ком. Здесь вы сам себе дизайнер и фотошопер.

    Сжатие картинок


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

    Обеспечить сжатие картинок можно несколькими способами:

    • Установка плагина

    Речь идет о решении, когда на сайт уже загружен визуальный контент и Вам с этим работать. Устанавливается плагин, активируете его и все ок, дальше система все сделает самостоятельно. Подобрать плагин для Wordpress можно здесь.

    • Самостоятельное сжатие сервисами

    Compressor - сжимает изображения с уменьшением объема до 90% и при этом сохранить высокое разрешение. Он работает с JPEG, PNG, GIF и SVG-файлами. Ограничение по размеру — 10 Mb.

    Tinypng.com - можно загружать до 20 изображений, размер каждого из которых не может превышать 5 Mb.

    Punypng.com - ограничение по размеру — 500 KB, по количеству файлов — 20 штук. Возможно сжатие JPG, GIF и PNG-файлов.

    Compressnow.com - можете самостоятельно задать степень сжатия. Обратите внимание, что при включенном AdBlock сервис не работает

    • Photoshop

    Открываем картинку в фотошопе и меняем размер, а также ужимаем качество изображения до оптимального (60-80%). Вес картинки также изменится и ее можно будет загружать на сайт.

    • Сжатие изображений на сервере

    На большинстве хостинг-провайдеров можно настроить сжатие JPEG в Gzip. Для Nginx и Apache доступен модуль PageSpeed для сжатия данных на уровне сервера


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





    Название картинок и хранение на сервере

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

    Замените названия картинок вида DSC108224534.jpg на более понятные и человекоподобные – chainik_tefal_DRE0928474. Поисковые системы гораздо лояльнее отнесутся к латинице, чем непонятному набору символов.

    Яндекс отлично учитывает транслитерацию, а вот Google негативно воспринимает кириллицу, поэтому рекомендуем называть все файлы картинок на латинице. К тому же надо учитывать, что некоторые CMS-системы могут некорректно обрабатывать кириллические конструкции и выдавать еще больший ад в названиях файлов.

    Адаптивность изображений

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


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


    Оптимизация запросов к серверу


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

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


    CDN (Content Delivery Network) — это географически распределённая сетевая инфраструктура, обеспечивающая быструю доставку контента пользователям веб-сервисов и сайтов. Входящие в состав CDN cерверы географически располагаются таким образом, чтобы сделать время ответа для пользователей сайта/сервиса минимальным. Источник: Habr


    Социальные микроразметки


    Хорошо оформленный контент должен быть и в деталях безупречным. Когда URL страницы расшаривается в социальных сетях, важно учитывать подгружается ли картинка к сообщению в Фейсбук, Вконтакте или других социальных сетях. За это отвечает Open Graph – придуманная социальной сетью Facebook букварная система отображения контента и уже используемая во всем мире, как стандарт.

    Карта сайта для изображений


    Обычно это актуально для больших порталов, например интернет-магазинов. Там, где много картинок, создается отдельная карта сайта, что особенно нравится поисковой системе Google. Не забывайте прописывать путь этой карты в отдельной директиве Роботс.

    Выводы по оптимизации картинок

    1. Используйте качественные и уникальные изображения
    2. Оптимизируйте изображения под требования поисковой оптимизации
    3. Не допускайте загрузку PNG-изображений на сайт, а также картинок с большим весом более 150 кБ.
    4. Загружайте изображения в формате JPEG, логотипы в формате SVG
    5. Добивайтесь адаптивности всех изображений
    6. Используйте с умом возможности сервера, включайте сжатие и CDN
    7. Каждая картинка должна иметь уникальное название на латинице, желательно с вхождением ключевого запроса
    8. Картинка на сайте должна быть полезной, близкой к тексту или абзацу, релевантной
    9. Используйте микроразметку Open Graph и Shema
    10. Используйте отдельную карту сайта для картинок, если их очень много









      CMS

    Закажите Авторский SEO аудит сайта

    Подпишитесь на нашу рассылку и будьте в курсе всех SEO лайфхаков





    Читайте также

    Продвижение сайта статьями
    2020-03-10
    ~ 15 мин
    89
    Продвижение сайта статьями

    Как продвинуть сайт при помощи статей? Как писать статьи на своем сайте? Как и где разместить тексты на других сайтах?

    Стоимость продвижения сайта
    2018-10-03
    ~ 15 мин
    435
    Формирование цены на SEO-продвижение

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

    ROI: рентабельность контекстной рекламы. Как считать и оценивать в маркетинге?
    2020-08-17
    ~ 15 мин
    38
    ROI: рентабельность контекстной рекламы. Как считать и оценивать в маркетинге?

    ROI – это метрика, которую придумали финансисты для оценки потенциала инвестиций. 

    Большой лонгрид о внутренней оптимизации сайта
    2020-03-02
    ~ 15 мин
    98
    Большой лонгрид о внутренней оптимизации сайта

    Внутренняя оптимизация сайта предполагает комплексную работу со многими настройками и параметрами Вашего интернет-ресурса: работа с кодом, работа с мета-тегами, улучшение юзабилити

    оптимизация раскрутка продвижение по трафику
    2020-10-25
    ~ 15 мин
    134
    SEO-оптимизация и продвижение по трафику

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

    Социальные сигналы, как значимый фактор поискового продвижения
    2020-04-30
    ~ 15 мин
    63
    Социальные сигналы, как значимый фактор поискового продвижения

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