SEO оптимизаций и их поисковое продвижение

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

Категории

Статья также доступна на украинском (перейти к просмотру).

Оглавление:

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

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

Основные принципы оптимизации изображений под SEO

Качество и разрешение картинки

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

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

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

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

Адаптивность и оптимизация скорости загрузки изображений

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

изображение с отдельными параметрами.

Скорость загрузки самой крупной видимой части страницы (Lagest Contenful Paint) является одним из основных показателей факторов ранжирования Core Web Vitals по мнению Google.

Подробнее об этом факторе смотрите здесь.

Релевантность

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

Как правильно писать атрибут alt?

Alt - это альтернативное описание картинки, которые не видит пользователь, если картинка на экране отображается.

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

Ранжируя изображение поисковая система Гугл определяет, что записано в атрибуте alt, а также распознает образ изображения и сопоставляет их.

Поэтому картинка и ее описание должны соответствовать друг другу.

Не устраивайте из АЛЬТа нагромождение из ключевых слов.

Применяйте карту сайта Sitemap для изображений.

Правильное описание картинки также важно и для голосового поиска.

Основные рекомендации по описанию атрибута ALT:

Текст должен быть релевантным;
Оптимальная длина - до 125 символов;
Четко ответить на запрос пользователя с применением ключевых слов. Это может быть как лаконичное описание товара, услуги, так и ответ на информационный запрос;
Соблюдайте правила орфографии и пунктуации;
Не начинайте описание со слов “картинка” или “изображение”.

Пример:

Традиционная картинка

Что такое атрибут ALT

Картинка в виде ссылки

</a>

Когда картинке не нужен атрибут ALT:

Иконки на кнопках;
Декоративные картинки, например боковые панели, фон страницы;
Аватарки;
Превью картинки.

Как правильно описывать заголовок картинки TITLE?

Атрибут TITLE - сообщает вспомогательную информацию о картинке.

Пример описания картинки TITLE

Пользователь увидит ТАЙТЛ, если наведет курсор на картинку.

Правило его заполнения аналогичны правилам заполнения атрибута ALT.

Однако:

ТАЙТЛ и АЛЬТ не должны дублировать друг друга;
Заполняя атрибут ТАЙТЛ и используя ключевые слова помните, что они влияют на заспамленность текста. Поэтому заполняйте ТАЙТЛ во вторую очередь после АЛЬТА с учетом того, как они влияют на спам.

Форматы картинок

Рассмотрим самые популярные форматы для изображений:

JPEG - самый популярный формат, объем изображения сжимается. Он удобен для размещения на сайте, но не поддерживает прозрачность. Обычно используется для размещения фотографий на сайте;

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

BMP - обеспечивает высокое качество изображения, но не позволяет сжать файл;

GIF - по “народному” картинки в таком формате называют “гифками”. Используется для анимированных изображений. И они занимают большой объем.

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

В настоящее время такой формат поддерживается следующими браузерами:

Google Chrome начиная с 9 версии;
Opera с версии 11.10;
Firefox с версии 65;
Android с версии 4.0.

Поэтому рекомендуется использовать асинхронную загрузку.

На данный момент широкого распространения на просторах постсоветского интернета не имеет.

SVG - Scalable Vector Graphics (масштабируемая векторная графика).Такой формат подходит для логотипов, мелких иконок, значков и мало цветных схем.

AVIF - один из самых новых форматов, начал использоваться с зимы 2019 года. Является супер сжатым форматом, что позволяет значительно увеличить скорость загрузки картинок.

Однако не все браузеры его пока поддерживают.

Подробнее о способах внедрения этого формата смотрите здесь.

Как улучшить и ускорить индексацию изображений

Создайте отдельную sitemap.xml для изображений.

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

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

Подробнее смотрите на сайте Центра Google Поиска здесь;

Создайте информативные атрибуты alt и title.

Подробнее о том, как это делать читайте ниже;

Избегайте картинок сомнительного характера.

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

URL-адрес должен быть логичным и ЧПУшным.

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

Размещайте изображения на собственном хостинге

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

Рекомендуем хранить картинки на одном хостинге с основным контентом или использовать коммерческий CDN.

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

Подробнее о том, что такое CDN смотрите в нашем разделе FAQ здесь.

Оптимизируйте размер картинок под различные устройства

Смартфоны прочно вошли в нашу жизнь. На многих ресурсах большинство посетителей - пользователи смартфонов.

Однако, многие продолжают заходить и с Desktop компьютеров.

Естественно, что разрешения экранов у различных устройств разное, а значит, что ширина браузеров тоже будет разной.

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

Для этого используйте медиа запросы CSS (медиа выражения CSS).

Подробнее о них и их применении смотрите в информационной статье здесь.

Пример оптимизации загрузки картинок с помощью медиа стилей в файле CSS:

 @media (max-width: 1920px) 
{
      .wrapper {
        width: 310px;
        height: 310px;
        border: 5px solid #616161;
      }
      .exmp2 {
        background-image: url(/images/example.png);
        background-repeat: no-repeat;
        background-position: -40px 0px;
        background-size: cover;
      }
 /*Данное правило предназначено для дисплеев/браузеров с шириной более 1920 px . Если ширина экрана будет другой, то стили, которые будут заданы в фигурных скобках будут игнорироваться. Картинка будет загружаться другая, с другой шириной*/

Асинхронная загрузка изображений

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

Пример асинхронной загрузки изображений с заглушкой

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

Такой метод имеет смысл для страниц со множеством картинок.

Такая техника называется Lazy load.

Для внедрения метода существуют специальные плагины, например для CMS Wordpress.

Настройка асинхронной загрузки изображений вручную

Отложенную загрузку картинок можно настроить и без плагинов.

Для этого в HTML код страницы необходимо добавить следующее.

<img class="lazyload"
     src="placeholder.jpg"
     data-src="image.jpg"
     alt="image description">

Разберем синтаксис:

lazyload - класс, который необходимо добавить в тег img;
placeholder.jpg - изображение-заглушка, аналогичное по размерам с загружаемой картинкой;
image.jpg - загружаемая оригинальная картинка;
alt="image description"> - АЛЬТ картинки, ее описание.

Эта инструкция работает через JavaScript.

К этому коду рекомендуем добавлять и тег <noscript>Название картинки</noscript>.

На тот случай, если браузер не поддерживает JavaScript.

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

Подробнее об их использовании смотрите по ссылке https://placeholder.com/.

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

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

Iloveimg.com

Функции сервиса iloveimg.com

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

Photoshop - многофункциональный графический редактор, В особом представлении не нуждается
Lightshot (screenshot tool).

Приложение к браузеру Google Chrome позволяет делать и редактировать скриншоты экранов. Благодаря этому можно получить свои уникальные изображения.

Serpstat

Serpstat и оптимизация изображений - скриншот

Для полноценного аудита необходима платная подписка или промокод.

Сервис укажет на приоритетность и критичность ошибок в мультимедиа, картинки, размер которых рекомендуется уменьшить, а также картинки, с отсутствием атрибута ALT.

Адреса самих картинок, можно узнать, и УРЛ страницы, где они находятся.

SERanking

SERanking и оптимизация изображений - скриншот

Платный сервис.

Аналогично показывает отсутствие ALT и превышение рекомендованных размеров.

SiteAnalyzer и Screaming Frog

Бесплатный и условно бесплатный ресурс. Показывает отсутствие ALT и TITLE, превышение рекомендованных размеров. Адрес этих картинок, и УРЛы страниц, где они находятся.

Что же нам даст грамотная оптимизация картинок на продвигаемом сайте?

Удержание пользователя на сайте и привлечение новых;
Снижение показателя отказов;
Увеличение органического трафика;
Повышение ранжирования в поисковой выдаче.

Выводы

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

Приведем кратко основные принципы оптимизации:

Изображение должно быть релевантным основному контенту;
Название файла должно быть понятным и соответствовать содержимому картинки и теме страницы. Например, seo_trendi_2022.jpeg;
При размещении картинки в УРЛе соблюдайте вложенность и ЧПУ;
Старайтесь, чтобы картинки были оригинальными, старайтесь не использовать чужие изображения;
Обязательно прописывайте ALT и желательно TITLE. Однако не забывайте, что при подсчете заспамленности их, содержимое тоже учитывается Названия должны быть понятны для пользователя;
Используйте различные форматы изображений. Взависимости от типа и палитры изображения;
Создайте отдельный Sitemap.xml для изображений;
Применяйте микроразметку Schema.org;
Позаботьтесь о постах для социальных сетей с упоминаниями Ваших статей. В этом помогут OpenGraph и Twitter Cards;
Размещайте картинки на том же хостинге, что и весь сайт. Желательно с предоставлением CDN;
Для различных дисплеев (устройств) загружайте картинки и браузеры различной ширины. Для этого подойдут медиа запросы CSS;
Для оптимизации скорости загрузки применяйте асинхронную загрузку;
Помните, что продвижение по картинкам, это только часть продвижения, поэтому требуется все делать комплексно.

При написании статьи использовались материалы Анастасии Осипенко, Сергея Ломакина, Joshua Hardwick.

Подписывайтесь на наш телеграмм - канал t.me/freehostua, чтобы быть в курсе новых полезных материалов. Смотрите наш Youtube канал на youtube.com/freehostua.

Мы что-то упустили, в чем-то ошиблись?

Сообщите об этом в комментариях и мы обязательно это обсудим.

Дата: 02.02.2022

Автор: Яременко Владислав под редакцией Евгения Шермана

#seo

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