Агентство
интернет-маркетинга

 

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

24.07.2014

29 554

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

СЕО оптимизация изображений

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

Размер изображения

Чем больше картинка - тем лучше. Если поисковая система найдет несколько дублей одного изображения, она выберет картинку большего размера. Это не значит, что надо вставлять на страницу огромные изображения. Большая картинка в полном разрешении может открываться отдельной страницей по ссылке. На самой же странице достаточно разместить превью изображения. Миниатюра изображения не должна быть слишком миниатюрной (а масло слишком масленым). Изображения меньше 100-150 пикселей поисковики могут расценить как элемент дизайна и не пустить в выдачу. Для крупных изображений лучше всего делать превью со ссылкой на оригинальное изображение в большом разрешении:
<a href="адрес оригинального изображения"><img src="адрес миниатюры изображения" /></a>
Одновременно с этим не стоит превращать крупное изображение в миниатюру, сжимая размер картинки при помощи стилей. Кроме того, что изображение может исказиться, картинка будет полностью прогружаться, замедляя общую скорость загрузки страницы. А если таких пережатых миниатюр на странице будет много? Вопрос риторический. Более того, поисковые системы распознают соотношение стилей с параметрами размера самого изображения и при больших расхождениях могут расценить такое техническое решение как некорректное, а после анализа сайта на скорость загрузки страниц - и вовсе решить, что данное изображение вредит странице.

Расположение изображения

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

Подпись под картинкой

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

Атрибут изображения alt тега img

Атрибут изображения alt - альтернативное текстовое описания изображения. Данный атрибут информирует посетителя сайта о содержимом изображения текстовым сообщением, в том случае, если в браузере пользователя отключено отображение картинок или при загрузке изображения произошла ошибка. Это выглядит примерно так:
<img src="адрес изображения" alt="Описание изображения" />
Атрибут alt для изображения

Изображение является ссылкой на оригинальную картинку.

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

Атрибут изображения title тега img

Атрибут title отображается как всплывающая подсказка и дает еще одну возможность для СЕО оптимизации изображений. Если в случае с атрибутом alt описывается содержимое картинки, то в случае с атрибутом title, можно сообщить дополнительную информацию о изображении. Атрибут title хорошо знаком по тегу <a>, где ему и надлежит быть в случае, если изображение является ссылкой. Для изображений, наличие атрибута title необязательно. Содержимое тега должно отличаться от содержимого атрибута alt.

ЧПУ названия файла изображения

Еще один существенный способ обозначить содержимое картинки и еще больше оптимизировать изображение для поиска - сделать так, чтобы название файла с изображением соответствовало содержимому картинки. Например, если на картинке изображен белый кот, то так и надо написать - belyj-kot.jpg. Так сразу становится понятно, что (скорее всего) внутри файла. ЧПУ (человекопонятный урл) формат гораздо лучше информирует как человека, так и поискового робота, чем pic_7642.jpg. Понятные названия очень позитивно влияют на SEO оптимизацию изображений.

Формат изображения

Чем меньше будет размер картинки в килобайтах, тем быстрее она будет загружаться на странице. Самыми популярными форматами изображений для web являются - .jpg, .png, .gif. Эти форматы изображений в разной степени оптимизированы и позволяют получить хорошее соотношение размера картинки и веса файла для каждого типа изображений (иконки, рисунки, фотографии). Правильно выбирайте формат изображения. Плохо оптимизированная картинка может лишить пользователей желания просматривать сайт. Особенно это касается посадочных страниц, где большое значение имеет привлекательная картинка. Если картинка будет слишкой много весить, сайт-лендинг будет долго загружаться. Если слишком мало, то изображение, скорее всего будет низкого качества, что может оттолкнуть пользователя и понизить конверсию.

Итог: СЕО оптимизированная картинка

В результате мы получаем примерно следующую конструкцию SEO оптимизированного изображения:
<img src="/belyj-kot.jpg" alt="Белый кот Васька" title="Васька - большой красивый белый кот с ужасным характером" />Мой белый кот Васька
или
<a href="/belyj-kot.jpg" title="Васька - большой красивый белый кот с ужасным характером"><img src="/mini-belyj-kot.jpg" alt="Белый кот Васька" /></a>Мой белый кот Васька
В оптимизации картинок для поиска нет ничего сложного. Главное - не лениться и прописывать уникальный alt, title и ЧПУ название файла картинки. Такми образом, можно внести на страницу очень много дополнительного текстового контента, который поможет сделать страницы сайта более релевантными. Ну и конечно же не забываем про трафик, который дают СЕО оптимизированные изображения, если они попадают в Яндекс.Картинки и Google Картинки. Оптимизируйте  картинки. Используйте контент эффективно. Задавайте вопросы, делитесь своим мнением, ставьте лайки, делайте репост. Добавляйте страницу в избранное, и подписывайтесь на блог.  
Готовы пообщаться?Готовы пообщаться?Готовы пообщаться?

Комментарии

  1. Николай Денисенко

    Отличная статья много узнал про seo оптимизацию картинок на сайте =). У меня вопрос: Может негативно повлиять использование двух одинаковых, но разного размера, изображений на странице?

    1. moderator

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

      1. Наталия

        Здравствуйте, один вопрос для меня непонятен — для оригинальной картинки (при клике на превью) размер не должен превышать допустимый размер ширины экрана? Например если превью картинки шириной 500пкс, а оригинальная в 2000пкс, и картинка открывается до определенных размеров, или для хорошей прогрузки страниц важнее всего именно картинка превью?

  2. Сергей Иванов

    Здравствуйте, подскажите нужно ли писать имя файла латиницей (для чпу файла) или можно оставить русскими буквами?

      1. Вячеслав

        Почему именно латиницей? Почему плохо назвать файл изображения «белый-кот.jpg» , почему нужно именно «belyj-kot.jpg».

        Также вы говорите что:

        «ЧПУ (человекопонятный урл) формат гораздо лучше информирует как человека, так и поискового робота, чем pic_7642.jpg. Понятные названия очень позитивно влияют на SEO оптимизацию изображений.»

        Согласен с тем, что для человека понятней. А вот для робота не уверен, если сравнивать с «pic_7642.jpg» и «belyj-kot.jpg». Как название файла изображения может влиять на SEO, учитывая что атрибут alt заполнен правильно.
        Есть пруф, который это подтверждает? Заявление представителей поисковых систем, либо какой-то эксперимент?

  3. Александра

    Здравствуйте!
    А если картинки размещены с помощью стиля style=»background-image:
    Как быть с оптимизацией в данном случае?
    Спасибо.

  4. Дмитрий

    Влияет ли на индексацию изображений параметры, которые генерирует система управления сайтом (знак вопроса на конце) в имени расширения — например .jpg?

  5. Дарья

    Если картинка встраивается на сайт посредством ссылки на фото в альбоме ВК, то поисковый робот определяет её как заимствованный контент и снижает рейтинг сайта в выдаче? Или это не влияет?

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Кейсы