Оптимизация картинок сео – SEO оптимизация изображений — Как получать трафик за счет SEO оптимизации изображений |

alexxlab

Содержание

SEO оптимизация изображений — Как получать трафик за счет SEO оптимизации изображений |

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

Также изображения можно использовать для продвижения страницы сайта (используя схему с редиректом), подробности — далее.

Трафик на сайте влияет на конверсии и на позиции сайта в выдаче поисковой системы. Например, в расчете индекса качества для сайтов Яндекс определил трафик как один из главных параметров оценки сайта. Рекомендованное чтиво про индекс качества сайта на сайте MegaIndex по ссылке далее — Яндекс показал поисковым оптимизаторам Х.

Обычно проект по поисковой оптимизации сайта выглядит следующим образом:

  • Внедрили адаптивную верстку сайта;
  • Ускорили загрузку страниц;
  • Переработали заголовки;
  • Переработали мета-теги;
  • Добавили перелинковку используя совместимые товары для коммерческих сайтов или страницы «вы смотрели» для сайтов информационной тематики;
  • Улучшили представление контента: характеристики, фотографии;
  • Создали дополнительные эффективные лендинги;
  • Создали систему скидок для коммерческих типов сайтов, запустили e-mail рассылки для любых типов сайтов.

Но полный спектр комплекса мер по поисковой оптимизации значительно шире. Например, в поисковой оптимизации есть понятие SEO friendly images.

Рассмотрим тему оптимизации изображений в плане продвижения в поисковой выдачи и привлечения трафика.

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


Изображения могут быть дополнительным источником трафика для продвигаемого сайта.

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

Поисковая оптимизация изображений проводится для привлечения трафика на сайт из выдачи поиска по изображениям.

У поисковых систем Google и Яндекс есть специальные системы поиска по изображениям:


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

Google позиционирует поиск по изображениям как поиск, позволяющий находить в интернете информацию, представленную визуально, то есть как отдельную поисковую систему.

SEO продвижение картинок нужно для улучшения ранжирования в приведенных выше поисковых системах.

Поиск по изображениям развивается.

Например, в Google теперь выводятся расширенные подписи к изображениям.

поиск по изображениям

Также в поисковой выдаче появился еще один контекстный элемент. По определенным поисковым запросам в выдаче добавлена разметка с использованием значков, например значки — «рецепт», «видео», «товар».

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

Список структурированных данных, поддерживаемых поисковой системой Google:


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

Но при выполнении комплекса мероприятий по поисковой оптимизации изображений возникает ряд нюансов:

  • Заполнение каких именно атрибутов изображений влияет на ранжирование в поиске по картинкам;
  • Влияют ли анкорные ссылки на продвижение изображений;
  • Передаются ли заполненные атрибуты изображений как текстовые вхождения в анкор-лист документа.

Для ответа на вопросы экспертами был проведен эксперимент.

Как проводился эксперимент


Для проведения эксперимента, сначала ключевые фразы были добавлены в следующие зоны:
  • Имя файла изображение;
  • Alt описание изображения;
  • Title изображения;
  • Longdesc;
  • Name;
  • Окружающий текст;
  • Title страницы;
  • Внутренние анкоры на страницу;
  • Внутренние анкоры на изображение;
  • Внешние анкоры на страницу;
  • Внешние анкоры на изображение;
  • Свойства изображения;
  • Атрибуты на стороннем сайте.

Далее было проверено, находятся ли изображения через поисковые системы по внесенным ключевым фразам.

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

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

В зависимости от поисковой системы были получены разные результаты.

Выводы собраны в отчет и приведены далее.

Выводы


Вывод для системы поиска по изображениям от Google:

Поиск по картинкам Google

Выводы для системы поиска по изображениям от Яндекс:

Поиск по картинкам Яндекс

Выводы для поисковой системы Google:

Поиск Google

Выводы для поисковой системы Яндекс:

Поиск Яндекс

Основные выводы о поисковой оптимизации изображений для поисковой системы Google следующие:

  • В Google факторы для одного изображения становятся документными — влияют сразу на все изображения страницы;
  • Атрибут alt учитывается в основной выдаче как текст;
  • Учитывается имя изображения.

Основные выводы о поисковой оптимизации изображений для поисковой системы Яндекс следующие:
  • В Яндекс обнаружено всего 5 факторов: атрибуты на стороннем сайте, title страницы, title изображения, окружающий текст, alt изображение;
  • Атрибуты изображений никак не влияют на основную выдачу.

Больше рекомендаций по оптимизации изображения в следующем списке:
  • Для продвижения изображений, добавляйте на сайт большие изображения. Исходя из практики, большие изображения ранжируются лучше;
  • Правильно размещайте изображения в тексте страницы и подбирайте для изображений содержательные заголовки, названия файлов и подписи. Google извлекает информацию о теме изображения из контента на странице, включая заголовки картинок и подписи к ним. Размещайте изображения рядом с текстом, к которому они относятся. Соответственно, при продвижении картинок не используйте галереи;
  • Добавьте описания изображений в атрибуты alt. Определяя тему изображения, Google учитывает описания в атрибутах alt, а также результаты распознавания образов и контент страницы
    . Но не злоупотребляйте ключевыми словами, поскольку манипуляция производит неблагоприятное впечатление на пользователей и может быть воспринято поисковой системой как спам;
  • Используйте файлы Sitemap для изображений.

Содержание alt картинки должно состоять из ключевых слов.
Длина SEO альт текста для изображения должна быть от 3-4 слов, но не более 250 символов. Согласно тестам, текст за пределами 250 символов не учитывается.

Если на продвигаемом сайте есть визуальный контент, предназначенный для просмотра исключительно взрослыми, рекомендуется размещать подобные изображения отдельно, иначе из поисковой выдачи могут быть исключены все изображения. Например: google.com/disallow/image.jpg.

Большие изображения могут оказывать нагрузку на открытие страницы, снижать скорость загрузки, снижая позиции по мобильной выдаче. Но проблема легко решается при помощи оптимизации растровых изображений, использования системы адаптивности и тега picture. Пример кода:

<picture>
  <source media="(min-width: 800px)" srcset="head.jpg, head-2x.jpg 2x">
  <source media="(min-width: 450px)" srcset="head-small.jpg, head-small-2x.jpg 2x">
  <img src="head-fb.jpg" srcset="head-fb-2x.jpg 2x" alt="a head carved out of wood">
</picture>

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

Продвижение сайта за счет использования изображений


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

При создании контента авторы часто обращаются к поиску по изображениям.
Найденные изображения размещаются в контенте.

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

Размещенное по ссылке изображение также является ссылкой и передает статический вес. Также, в случае использования alt текста, передается и анкорный вес.
Соответственно, продвигая изображения в поиске по картинкам можно ожидать:

  • Прирост трафика;
  • Прирост статического веса;
  • Прирост анкорного веса.

Порядочные авторы размещают подпись к изображению, указывая и ссылку на сайт источник, откуда взято изображение. Ссылкой может быть и само изображение.

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

Например, можно находить ссылки-картинки.

Также можно узнать о зоне размещения ссылки:

  • Ссылка в основном контенте страницы;
  • Ссылки в комментариях.

Выгрузить все внешние ссылки можно используя онлайн сервис или API.

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

Пример запроса к API для сайта indexoid:

http://api.megaindex.com/backlinks?key={ключ}&domain=indexoid.com

Пример запроса к API для сайта wixfy с запросом внешних ссылок по анкору wix:
http://api.megaindex.com/backlinks?key={ключ}&domain=wixfy.com&anchor=wix

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

Ссылка на сервис — Внешние ссылки.

Пример:

Пример выгрузки данных о внешних ссылках изображениях

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

Достаточно для адреса изображения настроить 301-ый редирект.

С дисконтом вес от ссылок на изображение будет передан целевой странице.

Комментарии экспертов


Комментарии экспертов по теме оптимизации картинок далее.

михаил шакин

Михаил Шакин

1. Да, внутреннюю оптимизацию изображений провожу для каждого продвигаемого сайта в обязательном порядке. Это позволяет продвигаемым страницам быстрее загружаться.

Оптимизацию картинок делаю по двум направлениям — уменьшаю размер для ускорения скорости загрузки и делаю SEO оптимизацию (заполняю атрибут alt и title изображений, прописываю название картинки).

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

2. Для оптимизации изображений я пробовал самые разные решения. В итоге использую платный сервис optipic.io. Он позволяет оптимизировать все изображения на сайте в фоне. Можно сделать настройки, чтобы качество практически не ухудшалось.


дмитрий севальнев

Дмитрий Севальнев

1. Для клиентов на SEO проводится базовая оптимизация под вертикальный поиск изображений.
Сюда входит: атрибуты alt и title, окружающих текст изображений.

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

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

2. Фундаментальное продвижение в поиске по картинкам можно рассматривать как отдельную услуг.
Оптимизация для поиск по картинкам в Яндексе и Google — существенно отличаются.

Особое внимание следующим факторам:
— Индексации изображений. Часто наблюдаются сложности из-за использования галерей.
— Окружение картинки: от текста-описания, до тега Title самой станицы.
— Размеру картинки в пикселях.
— Атрибутам картинки: alt, title.

Если речь о конкурентных тематиках, то на первую роль выходит:
— Растиражированность изображения (часто используемые изображения — всегда ранжируются выше, а приоритет отдается источнику с максимальным размером).
— Вес изображения и его пропорции.
— Ссылки на страницу и картинку (но тут требуется быть осторожным, прямые текстовые ссылки могут сильно понизить картинку в поиске Google, тут есть свои хитрости =)


sendpulse константин макаров

Константин Розенштраус-Макаров

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

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


Диана Мельник
При проведении тех. аудита сайта, мы обязательно проверяем, оптимизированы ли изображения под поисковые системы. Грамотная и правильная оптимизация изображений может помочь повысить рейтинг сайта в поисковиках, оптимизировать скорость загрузки сайта. Кроме того, что нужно прописывать атрибут alt и title для каждого изображения, важно также не забывать о формате, размере, тексте около картинки, уникальности изображения; можно ставить внешние ссылки на изображения, добавить карту сайта для изображений и ещё много другого. Обращайтесь в нашу компанию и мы проведём комплексный аудит и оптимизацию вашего сайта.

Андрей Воропаев
1. Да конечно проводим, делаем. С учетом того что изображения могут быть очень «тяжелыми» для веба, а это влияет на скорость загрузки сильно, делать это нужно обязательно «маст хев»

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

Это все усложняет загрузку в разы что отображается в конце концов на удобстве использования, что влияет на ПФ-факторы и на позиции в конце-концов тоже

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

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

Оптимизация картинок нужна для качественного SEO-продвижения сайта. Но когда возникает речь об иллюстрациях, самый частый вопрос у предпринимателей — “Где их брать?”. А ещё — как находить картинки бесплатно и делать это легально. Сегодня же речь пойдет о технической стороне оформления картинок для сайта. Наталья Солодовник написала простой алгоритм подготовки изображений к загрузке на сайт, а также список сервисов, которые вам в этом помогут.

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

Оптимизация изображения для сайта: кому это вообще нужно?

Здесь есть сразу несколько аргументов, на которые стоит обратить внимание.

  • От правильного оформления (оптимизации названия файла и атрибутов) зависит, смогут ли изображения с вашего сайта появляться в выдаче поисковых систем по картинкам. И, как следствие, будет ли у вас бесплатный трафик и посетители на сайте из этого источника.
  • От правильного размера (веса) изображений зависит общий вес страницы и скорость её загрузки. Это оценят и пользователи (особенно те, кто заходит с мобильных устройств), и поисковые системы. Более “лёгкой” странице поисковики отдают более высокие позиции при прочих равных.
  • Наличие атрибута Alt у картинок помогает правильно воспринимать содержимое сайта людям с ограниченными возможностями, которые не видят сайт, а используют программы чтения с экрана.

Ещё “тяжёлые” картинки быстро съедают место на хостинге, где расположен ваш сайт. А значит, вам придётся докупать дисковое пространство либо сжимать картинки на сайте. А это всегда хлопотно, особенно если сайт активно и давно ведётся.

Трафик с картинок: как заслужить любовь поисковых систем

Умные поисковики сегодня умеют определять множество параметров. Оптимизация картинок для SEO-продвижения сайта включает в себя:

  • название файла,
  • наличие и содержание атрибута alt,
  • размер файла,
  • формат картинки.
Как назвать файл и что прописать в поле Alt, чтобы изображения с вашего сайта появились в Гугле или Яндекс.Картинках

Обратимся к рекомендациям от самого Гугла:

Источник: https://support.google.com/webmasters/answer/7451184?hl=ru

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

Не злоупотребляйте ключевыми словами. Наша задача — помочь поисковым системам понять, что изображено на картинке.

И вот пример, как это сделать оптимально:

https://support.google.com/webmasters/answer/114016?hl=ru

https://support.google.com/webmasters/answer/114016?hl=ru

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

Сам файл, как вы уже поняли, стоит также называть, ориентируясь на смысл картинки. Рекомендуется делать это в формате чпу. То есть русское название заменять транслитом — латинскими буквами, пробелы в фразах — коротким тире.

Так “домик в деревне” нужно превратить в “domik-v-derevne”, а сделать такую замену быстро поможет сервис translit.net, http://translit-online.ru/yandex.html или аналоги.

Вариант domik-v-derevne.jpg в качестве названия предпочтительнее, чем IMG00025.JPG. Но если у вас уже загружены картинки с неоптимизированными названиями файлов, то удалять, переименовывать файлы и заново загружать их, конечно, не нужно — это не стоит усилий. Учтите рекомендацию на будущее.

Скорость загрузки сайта и вес картинок

Следить за скоростью загрузки страниц и сжимать картинки для уменьшения их веса важнее всего тем, у кого много посетителей с мобильных устройств. А также тем, кто работает в конкурентных темах (а особенно интернет-магазинам и онлайн-сервисам). Ведь пользователи спешат в поисках решения. Если ваша страница загружается долго, то её содержимое могут закрыть, так и не увидев.

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

Скорость загрузки страниц можно проверить сервисом от Гугла, он сразу покажет, какие картинки нуждаются в оптимизации, какие изображения можно уменьшить.

Если же на сайте много фото (например, это блог о путешествиях или визитка фотографа) и страница остаётся большой даже со сжатыми картинками, то можно настроить плавную загрузку изображений при помощи плагина BJ Lazy Load (для сайтов с CMS WordPress). В этом случае картинки будут загружаться по мере появления на странице при прокрутке, а не все сразу.

Оптимизируем размер и вес картинок без потери качества: сервисы и лайфхаки

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

Обычно такие фото имеют размер не менее 5 Мегабайт, а их размер (ширина и высота) может достигать 7360х4912 пикселей. А ведь популярные размеры экранов — это 1024×768, 1152×864, 1280х960, оптимальные параметры фонового изображения для сайта всего 1680х900px, такой огромный формат как 7360х4912 просто не нужен.

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

Часто уменьшения размера в пикселях уже достаточно для того, чтобы снизить вес картинки до оптимального. Это можно сделать в любом графическом редакторе. К примеру, картинка для статьи на сайте azconsult.ru может быть шириной 650px или меньше.

Сервисы для сжатия картинок

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

Optimizilla — удобен тем, что позволяет загружать сразу до 20 файлов, регулировать процент сжатия и скачивать все файлы одним архивом.

Squoosh — имеет встроенный редактор, что позволяет сразу масштабировать картинку. Наглядно показывает снижение качества при сжатии. Кроме привычных форматов jpeg, jpg, bmp умеет сжимать png (это, к примеру, файлы скриншотов или снимков экрана, их часто забывают оптимизировать) и файлы иконок svg.

Что делать, если на сайте уже есть картинки слишком большого размера

Для сайтов на Вордпрессе можно установить полезный плагин Compress JPEG & PNG images от сервиса TinyPNG. Он поможет найти и сжать большие файлы сразу на вашем сайте. В бесплатной версии оптимизация картинок для SEO-продвижения сайта возможна, но до 500 файлов в месяц.

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

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

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

  • Уменьшить размер картинки (ширину и высоту в пикселях) под конкретную задачу на сайте.
  • Оптимизировать размер (вес в Кбайтах) — насколько это возможно без потери качества, оптимально загружать файлы не более 50 Кб.
  • Задать правильное имя файлу с картинкой перед загрузкой на сайт.
  • Прописать атрибуты alt (обязательно) и title (желательно), которые будут соответствовать тому, что изображено на картинке.
  • Добавить подпись к картинке (если она уместна по смыслу текста и в общем оформлении страницы).

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

Наталья Солодовник, интернет-маркетолог, разработчик сайтов и лендингов на WordPress, технический продюсер онлайн-проектов.

И ещё полезные онлайн-сервисы:

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.Выделить изображение.

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

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

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

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

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

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

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

Выводы

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

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

 

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

 

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

Иллюстрации, как и любой контент, обязаны приносить пользу по максимуму, а не только быть украшением страниц

 

SEO оптимизация графики

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

 

Зачем нужно оптимизировать изображения

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


Основные положительные моменты:

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

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

3. Яркие иллюстрации улучшают восприятие информации посетителем. Текстовое наполнение сайта не во всех случаях дает возможность раскрыть тему.

4. Для поисковых роботов иллюстрированное наполнение имеет больший приоритет, чем безликие текстовые файлы.

 

Какой должен быть размер изображений, опубликованных на сайте

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

Существует ряд правил, которые нужно соблюдать:

1. Если изображение слишком большое, то будет более верно разместить превьюшку (уменьшенное изображение) с возможностью перехода по дополнительной ссылке для просмотра полноразмерного изображения. Другими словами большие изображения логичней оформить пред просмотром, настроив ссылку на оригинал:

<a href="место размещения оригинала"><img src="место размещения превью"></a>


2. Что касается миниатюрного изображения, то картинки, расположенные на страницах ресурса, не должны быть совсем маленькими. Изображения меньше, чем 100-150 пикселей роботы поисковых систем оценивают в качестве элементов дизайна и не учитывают в выдаче.

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

 

Как правильно расположить картинку

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

Обтекание картинки текстомПример обтекания картинки текстом


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

 

Зачем нужна подпись к изображению

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


Ниже картинки с помощью тега «p» вставляют ее описание.

<img src="адрес изображения" alt="альтернативная подпись изображения" />
<p>Подробное описание картинки</p>


Если сайт поддерживает html5 можно использовать теги «figure» и «figcaption». 

<figure><img src="адрес изображения" alt="альтернативная подпись изображения" />
<figcaption>Подробное описание картинки</figcaption></figure>

В целях оптимизации используются атрибуты тега «img».

 

Атрибут «alt»

«alt» — отвечает за вывод описания изображения текстом на экран, когда браузер пользователя не может открыть картинку. Выглядит так:

<img src="место расположения картинки" alt="Описание картинки">


Текст, являющийся описанием картинки, помещенный внутрь атрибута «alt» так же влияет на оптимизацию изображений, помещенных на страницы.

Заключенное в нем описание делайте коротким, оно должно давать посетителю достоверные данные. Нужно обходиться 50-60 символами, большие тексты плохо воспринимаются поисковыми роботами.


Атрибут «title»

Текст помещенный в title выводится как подсказка в момент наведения курсора мыши на картинку. Обычно в нем помещают дополнительные данные об изображении.

«url» фотографии

Подпись файла картинки в наиболее возможной степени должна соответствовать информации, представленной на изображении. Так фотография, на которой виден серый дом может быть подписана «seryj-dom.jpg.». Человеко — понятный «url» несет в себе информацию для пользователей, а также поисковых систем. Подобная подпись эффективней, чем типа: «img214.jpg.», она намного понятней и оказывает влияние на SEO графической составляющей сайта.

Обтекание картинки текстом

Какие графические расширения можно использовать

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


«.gif» — он имеет широкое распространение, схемы выполненные в формате смотрятся лучше всего, поддерживает прозрачность. Алгоритм сжатия формата удобен для использования маленьких файлов — это важно, если требуется быстрая загрузка картинки. Хорошо подходит для создания анимированной графики.


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


«.png» — отличается от  «.gif» с его ограниченными 8-ю битами цветами в лучшую сторону, он осуществляет поддержку цвета до 24 бит. Удобен для схематических изображений, они выглядят значительно лучше, чем схемы формата JPEG.

 

Выводы

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

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

Вес сайта и уходящий трафик

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


Провести оптимизацию изображений, расположенных на сайте, не тяжело. Здесь важно не лениться и каждый раз, наполняя сайт свежей информацией, прописывать уникальные «alt», «title» и понятные «url» для всех изображений. Ряд несложных, но вовремя выполненных действий, иногда несет больше пользы, чем длительная и бесполезная работа.

Успехов в оформлении! Не бойтесь экспериментировать!

Вес сайта и уходящий трафик

Оригинальное изображение и чувство юмора в картинках — поднимут настроение посетителей вашего сайта и вам! А это актуально во все времена.

Дизайн — это план организации элементов для достижения определённой цели.  

Чарльз Имз

А если вы ищете

Вес сайта и уходящий трафик

 

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

Как поднять сайт на топовые позиции в поиске, используя органический трафик, подробно здесь: Как работает SEO продвижение сайта?

 

Включайся в web! Будь на максимуме!
команда beONmax

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

Сегодня SEO-оптимизация картинок и видео является очень важным аспектом продвижения в поиске. И вот несколько причин, почему это так.

  • Качественное визуальное наполнение способствует улучшению поведенческих факторов. Людям намного приятнее находиться на сайтах с хорошим внешним оформлением и стилем. Они проводят на нем больше времени, просматривают больше страниц, контента и даже совершают переходы на сторонние ресурсы.
  • Сайт становится более полезным, так как текстовая информация дополняется графикой и видеоконтентом. Видеоролик и вовсе может выступать самостоятельным альтернативным источником информации. Не все любят читать большие статьи, кому-то проще просмотреть ролик.
  • Сайт становится более «легким», что положительно сказывается на его скорости загрузки и производительности.
  • Появляется дополнительный источник трафика в виде выдачи «Яндекса» и Google по картинкам. Хорошо оптимизированные изображения способны попадать в топ по определенным запросам, принося владельцам ресурсов новых целевых посетителей.
  • Google каждую поисковую выдачу старается разбавить видеозаписями (обычно по 3 шт. в первой половине выдачи). SEO-оптимизация видео поспособствует попаданию именно вашего ролика на эти места.
  • Повышение релевантности контента. Если на одной площадке размещена только статья, а на второй – статья с изображениями, поисковики отдадут предпочтение именно второй. Следовательно, ее позиции в выдаче будут выше.

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

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

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

И «Яндекс», и Google следят за тем, чтобы картинки и видео добавлялись уместно. Их алгоритмы обучены сканировать не только содержимое медиафайла, но и текст вокруг него.

Оптимизация картинок

Итак, какие меры необходимо предпринять для оптимизации картинок:

  1. Написание атрибута Alt.

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

  2. Добавление атрибута Title для изображения.

    Title – это заголовок или название. Содержимое Title появляется при наведении курсора мыши в небольшом поле. Так же как и Alt, информирует поисковые системы о том, что изображено на фото.

  3. Человекопонятное имя файла.

    При сканировании поисковые роботы также смотрят на название файла. Дабы сделать картинку более дружелюбной для выдачи в ПС, измените название документа. Вместо непонятного «osdSd_12.jpg» укажите «optimizacia_saita.jpg». Желательно с добавлением ключевого слова или фразы.

  4. Сжатие файлов.

    Медиаконтент является самым «тяжелым» фрагментом сайта. Нередко из-за картинок слишком большого качества и разрешения загрузка страницы увеличивается в 2 раза, а то и больше.

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

    Абсолютно все изображения и даже некоторые элементы графики желательно сжимать с помощью специальных сервисов. Такие сайты, как imagecompressor.com, iloveimg.com и др., позволяют сжимать картинки без потери качества и в онлайн-режиме.

  5. Использование лайтбоксов.

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

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

  6. Уникальность.

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

Оптимизация видео

SEO-оптимизация видео, в свою очередь, состоит из следующих работ:

  1. Уменьшение веса исходного файла.

    Так же как и с фото, видео необходимо делать более «легкими», так как слишком тяжелые файлы снизят скорость загрузки ресурса. Такие программы, как Blazemp и HandBrake, позволяют сделать это без потери качества.

  2. Конвертация в поддерживаемые HTML5-форматы.

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

  3. В конце страниц (под основной статьей).

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

  4. Окружение текстом, картинками и добавление метаданных.

    Делается это для более простой индексации видеоматериала. Текст, картинки и метаданные должны быть релевантны запросу (содержать ключевые слова или фразы).

И об уникальности забывать не стоит.

Seо-оптимизация изображений, картинок, фото – мета-теги, улучшение скорости загрузки