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

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

Многое можно сказать о веб-производительности и изображениях.Цель этого поста — дать обзор ключевых аспектов оптимизации изображений, которые помогут вам в поиске SEO, от быстрых побед до чуть более сложных методов.

Почему поиск изображений имеет значение

Хотя официальных цифр нет, Google заявляет, что каждый день сотни миллионов людей используют Google Images для визуального обнаружения и изучения контента в Интернете. По словам Моза , поиск изображений будет представлять 27% всех запросов, сгенерированных в топ-10 американских поисковых систем:

Около года назад Google обновил кнопку «Просмотр изображения» с Поиска изображений на «Посетить [страницу]». В результате платформы аналитики начали регистрировать увеличение числа сессий, вызванных поиском изображений, и увеличилась видимость контента для страниц хоста ( вместо случайных файлов изображений без контекста). Помимо поддержки контента и улучшения взаимодействия с пользователем, изображения снова являются важным источником трафика и не должны игнорироваться.

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

Одной из самых простых и часто упускаемых возможностей оптимизации являются сами имена файлов изображений . Они должны использовать несколько тщательно отобранных ключевых слов — в идеале, ключевые слова, по которым изображение может ранжироваться, — при этом пропуская стоп-слова (a, the, in, of и т. Д.) И разделяя ключевые слова дефисами (например, IMG-458752.jpg, станет бруклинским. -bridge-night.jpg).

Изображение альт и название атрибутов (о <IMG> HTML тег) являются следующие простейшие настройки , которые не только помогают изображения ранг выше в результатах поиска, но и строить уместность на страницы и улучшить пользовательский опыт, в конечном итоге все факторы ранжирования. В случае ссылок на изображения эти атрибуты также предоставляют поисковым системам контекст , касающийся целевой страницы, что еще больше повышает ее рейтинг. В отличие от имен файлов, пишите эти атрибуты грамматически последовательным и лаконичным образом: атрибуты alt громко воспроизводятся программным обеспечением для обеспечения доступности, а средства чтения с экрана и атрибуты заголовков появляются, когда посетители наводят курсор на изображения, поэтому не добавляйте туда ключевые слова и не меняйте их!

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

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

Выбор правильных форматов изображений, размеров и размеров

Размер файла изображения может непропорционально влиять на время загрузки страницы, поэтому важно сделать это правильно. JPEG-файлы обычно более оптимизированы для SEO, чем PNG-файлы , особенно если вам не нужен прозрачный фон, поскольку они предлагают лучшие уровни сжатия. Логотипы и другая компьютерная графика высокого разрешения обычно также могут использовать векторный формат файла SVG (убедитесь, что ваш сервер также кэширует, минимизирует и сжимает этот формат). Формат GIF должен быть зарезервирован для простых анимаций, не требующих широкой цветовой гаммы (они ограничены 256 цветами). Для больших и длинных анимированных изображений может быть лучше использовать настоящий видеоформат вместо этого, так как он учитывает видеокарты и схемы сайта.

Важнее всего фактический размер файла (в килобайтах) самих изображений: всегда старайтесь сохранять их до 100 КБ или меньше, когда это возможно. Если больший размер файла должен использоваться выше сгиба (например, для изображений героя или баннера), это может помочь сохранить изображения в видепрогрессивных файлов JPG, где изображения могут начать постепенно отображаться по мере загрузки (сначала расплывчатая версия полного изображения). появляется и постепенно обостряется по мере загрузки большего количества байтов). Итак, начните с выбора лучшего формата для ваших нужд, а затем выберите лучшие настройки для них!

Хотя инструменты аудита Google Lighthouse и PageSpeed ​​Insightsрекомендуют даже более специфические форматы сжатия (форматы Next-Gen, такие как JPEG 2000, JPEG XR и WebP ), они еще не обязательно совместимы со всеми браузерами; однако некоторые поставщики CDN предлагают преобразование WebP, когда посетители используют соответствующие браузеры.

Что касается размеров (высота и ширина изображения), убедитесь, что изображения не шире, чем самые популярные наибольшие разрешения экрана рабочего стола (ширина которых обычно составляет не более 2560 пикселей. В противном случае браузеры будут излишне уменьшать их размер), и чтобы ваш CSS создавал изображения отзывчивый(изображения автоматически подстраиваются под размер экрана или окна). В зависимости от визуальных потребностей вашего веб-сайта это может означать сохранение разных версий одного и того же изображения в различных измерениях, чтобы динамически обслуживать только наиболее оптимизированное изображение на основе экрана пользователя (мобильный, планшетный ПК, окно рабочего стола с расширенными или измененными размерами и т. Д.).Это можно сделать автоматически с помощью плагинов или с помощью элементов <picture> и / или <srcset>.

Несколько популярных инструментов сжатия изображений:

  • GIMP : кроссплатформенный, загружаемый редактор изображений
  • TinyPNG : использует умные методы сжатия с потерями, чтобы уменьшить размер файлов PNG и JPG
  • Smush : плагин для сжатия и оптимизации изображений для WordPress
  • MinifyWeb : бесплатный сервис для сжатия веб-файлов онлайн:

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

Правильный хостинг и кеширование изображений

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

В прошлом мы использовали «спрайты изображений» (несколько изображений сохранялись как одно и полагались на CSS для отображения) и размещали изображения на поддомене без файлов cookie, чтобы ускорить процесс поиска и загрузки изображений (обычно называемых шардинг домена ). Однако сегодня, когда HTTP / 2 теперь допускает несколько одновременных запросов к серверу, это уже не критично. В зависимости от вашей настройки, может быть быстрее разместить изображения на том же хосте, что и ваши HTML-файлы.

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

Дополнительные преимущества размещения изображений на вашем домене или поддомене включают управление кэшем, брендинг и контроль перенаправлений. Есть несколько преимуществ (если таковые имеются) в размещении исключительно изображений на сторонних сайтах, если только он не находится в сети доставки контента (CDN), которая может ускорить время загрузки, предоставляя изображения ближе к местоположению пользователя. При использовании CDN не забудьте связать свой собственный поддомен (CNAME DNS) с конечной точкой CDN (другими словами, один из ваших пользовательских поддоменов указывает на сервер вашего поставщика CDN, чтобы fd5dfs4sdf69.cdnprovider.com стал images.yourdomain.com ).Это значительно упрощает процесс смены провайдера CDN, поскольку вам не нужно обновлять и перенаправлять URL-адреса изображений, а также обеспечивает очевидные преимущества для брендинга.

В любом случае, убедитесь, что HTTP / 2 включен для ваших поддоменов или сторонних CDN.

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

Примеры директив управления кешем с использованием mod_headers (слева) или mod_expires (справа) файла .htaccess

Правильная загрузка изображений на ваших страницах

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

Даже несмотря на то, что новейший сетевой протокол HTTP / 2 улучшил процесс загрузки нескольких изображений одновременно, отложенная загрузка изображений в несколько раз (особенно больших) в некоторых случаях может обеспечить существенное повышение производительности (в частности, тяжелые статьи или изображения с длинными носителями). галереи например). Ленивая погрузочная техника позволяет страницам , чтобы закончить загрузку , хотя многие закадровых изображения будут только начать загрузку , как только посетитель прокручивает страницу. Хотя этот метод может повысить скорость страницы, он может отрицательно повлиять на индексирование изображения, если оно не реализовано правильно .

Примечание: если вы реализуете бесконечную прокрутку, убедитесь, что поддерживает постраничную загрузку, потенциально используя дополнительные теги <no script> для изображений и т. Д.

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

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

В веб-браузере щелкните правой кнопкой мыши изображение, выберите «Проверка» и наведите указатель мыши на элемент img, чтобы увидеть исходное (или «естественное») измерение изображения вместе с уменьшенной версией браузера. В идеале они должны быть как можно ближе.

Используйте обычный тег изображения для индексации: также важно отметить, что если вы хотите, чтобы ваши изображения были проиндексированы и ранжированы в Google Images, вы должны использовать обычный тег HTML <img src>; Google исторически не индексирует ресурсы, загружаемые в качестве фоновых изображений с помощью CSS. Также убедитесь, что ваши правила robots.txt не препятствуют сканированию ваших изображений.

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

Владельцы сайтов, разработчики и веб-мастера обычно могут просто отсортировать свои папки с изображениями FTP по размеру, чтобы быстро выявить худших нарушителей. Аудит сторонних сайтов с помощью сканеров, таких как Screaming Frog, с помощью вкладки «Изображения » и сортировки по размеру:

Выберите URL-адрес изображения и перейдите на вкладку «Inlinks» ниже, чтобы просмотреть страницу встраивания и убедиться, что эти большие изображения загружаются с отложенной загрузкой и / или могут использовать лучшее сжатие

Инструменты аудита Google Lighthouse и PageSpeed ​​Insights могут дополнительно сообщать о сжатии изображений и настройках кэша при ручном постраничном аудите (обратите внимание, что есть способы пакетной обработки URL-адресов, используя также интерфейс командной строки):

Отчеты об эффективности поиска изображений

Отчетность по поиску изображений с помощью Google Analytics, как правило, была непростой. За прошедшие годы Google несколько раз обновлял трафик изображений (переключаясь с реферального на обычный, с google.com/imgres на images.google.com и т. Д.), Чтобы в последнее время признать, что это самый простой способ сообщить о результатах поиска изображений на вашем сайте. находится в консоли поиска Google.

Чтобы просмотреть эффективность изображений в Google, войдите в проверенное свойство консоли поиска, затем перейдите к отчету обэффективности , установите тип поиска «Изображение» и нажмите «Применить»:

Фильтрация изображений в консоли поиска

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

Полезно знать об отчетах по изображениям в Консоли поиска:

  • Вы не увидите фактические имена файлов изображений, отображаемые в SERP, но страницы, на которые они встроены (страницы хоста ); это означает, что инструмент не различает разные изображения на одной странице
  • Для позиций количество результатов, отображаемых в строке и на странице, частично зависит от ширины экрана, поэтому позиция описывает только очень приблизительно то, как далеко внизу появилось изображение (позиции подсчитываются слева направо и сверху вниз)
  • Если изображение отображается в обычных веб-поисковой выдаче (а не на вкладке «Изображения»), его клики, показы и позиции будут сообщаться отдельно в обычных веб-результатах.
  • Только клики, которые приводят пользователей к открытию страницы с изображениями, учитываются как таковые; с другой стороны, показы записывают все (миниатюра или расширенное изображение), но учитываются только один раз для каждого URL-адреса хоста (несколько изображений, отображаемых в результатах поиска с одного и того же URL-адреса, будут записывать только одну страницу-показ)

Распознавание изображений и новые функции поиска изображений

Благодаря возможностям обратного поиска изображений Google ,Google Lens и новым продуктам искусственного интеллекта и машинного обучения, таким как Vision AI (которые вы можете проверить здесь , загрузив картинку), становится ясно, что Google делает успехи в понимании того, что находится внутри изображений, как с точки зрения объекты и текст, и было бы целесообразно, чтобы в скором времени изображения сыграли большую роль для SEO.

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

Богатые результаты, улучшающие результаты поиска изображений Google

Google, как и маркетологи, понимает потенциал поиска изображений как вдохновляющий и визуальный инструмент обнаружения, который можно в дальнейшем монетизировать и использовать для трафика, как показал интерес к Amazon Spark и Pinterest (который только что стал достоянием общественности).

Заключение

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