атрибуты alt и title для изображений

Содержание

• Зачем нужно SEO-продвижение изображений
• 1. Соберите семантическое ядро
• 2. Найдите или создайте подходящее изображение
• 3. Проверьте вес и размер изображений
• 4. Изучите требования поисковых систем
• 5. Задавайте изображениям осмысленные названия
• 6. Учитывайте EXIFdata
• 7. Заполняйте ALT и TITLE картинок для SEO-оптимизации
• 8. Подпишите изображения
• 9. Подготовьте файлы Sitemap
• 10. Используйте семантическую разметку
• 11. Следите за расположением изображения
• Заключение

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

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

Зачем нужно SEO-продвижение изображений

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

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

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

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

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

1. Соберите семантическое ядро

Если вы уже какое-то время занимаетесь оптимизацией ресурса, то семантическое ядро наверняка у вас есть. Это список ключевых фраз, по которым планируется продвижение сайта. 

Ниже мы будем подробнее разбирать действия, которые относятся к SEO-оптимизации изображений: 

• заполнение тегов Alt и Title;
• добавление подписей к картинкам;
• составление данных для поисковиков;
• подбор имени файла.

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

LSI-фразы — это слова, косвенно связанные с основным поисковым запросом. Поисковые системы сканируют страницы на предмет наличия таких фраз. И на основании их наличия или отсутствия принимают решение о релевантности ресурса.

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

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

2. Найдите или создайте подходящее изображение

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

Лучшими вариантами для иллюстраций на сайте являются:

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

• Собственный дизайн. Даже если в штате вашей компании нет дизайнера, способного выполнить профессиональную работу, выход есть. Существует множество сервисов-конструкторов для создания элементарного дизайна и редактирования фотографий. Например, Fotor, Canva и так далее. Есть даже мемные конструкторы, в которых можно подставлять на популярные картинки собственный текст.

Конструктор от meme-arsenal

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

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

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

1. Кадрировать. Измените композицию картинки, но не забывайте про минимальный размер изображения, который в итоге нужно загрузить на сайт.
2. Применить фильтры или коррекцию яркости/контрастности/экспозиции. Не переусердствуйте с эффектами, все-таки вам нужно сохранить смысловую часть изображения.
3. Удалить или добавить отдельные элементы на изображение. Используйте Photoshop или онлайн-редакторы и скорректируйте с их помощью состав фото или картинки.

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

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

3. Проверьте вес и размер изображений

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

Так что «мельчить» при подборе фото и иллюстраций точно не стоит. Подбирайте изображения с шириной не менее 1200 пикселей и высотой от 800 пикселей. При этом сайт с изображениями не должен загружаться в браузере слишком медленно. Иначе пользователь покинет его, не дождавшись результата. Но это не единственный минус. Помимо людей, долгая загрузка ресурса не нравится и поисковым системам. Они понижают подобные страницы в поисковой выдаче.

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

Если по результатам проверки вы обнаружите, что размер изображения слишком велик, воспользуйтесь одним из онлайн-сервисов для сжатия картинок. Например, Сompressor, Iloveimg. Также для большинства популярных CMS-систем существуют плагины, помогающие работать со сжатием изображений прямо в административной панели сайта.

4. Изучите требования поисковых систем

У Яндекса есть инструмент для SEO-оптимизации сайта — «Вебмастер». А у Google подобный сервис называется «Google Search Console». Мы рекомендуем пользоваться обоими, если вы планируете продвижение в двух популярных поисковиках. 

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

Например, в данной инструкции Google рекомендует использовать новые форматы изображений — AVIF и WebP. Нет, JPEG/PNG/GIF по-прежнему актуальны. Но новый формат позволит пользователям потреблять меньше мобильного трафика. А вашему сайту — загружаться быстрее.

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

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

5. Задавайте изображениям осмысленные названия

Например, назовите фото кроссовок Найк не «DSC872613. jpg», а «nike-air-force-1». Так поисковику будет проще идентифицировать данное изображение. Вместо пробелов в названии используйте тире, это позволит системе распознать информацию.

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

6. Учитывайте EXIFdata

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

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

7. Заполняйте ALT и TITLE картинок для SEO-оптимизации

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

ALT

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

Рассмотрим, что писать в атрибуте ALT.

• ALT-текст для изображения должен быть кратким описанием иллюстрации.
• Используйте высокочастотные ключевики, которые релевантны конкретному изображению.
• Текст должен быть органичным, не используйте одновременно больше 2-х ключевых слов. Также избегайте очевидно «заспамленных» ключей. Например: «доставка», «стоимость», «купить» и так далее.

TITLE

Атрибут TITLE — это название фото или изображения. Заголовок не должен дублировать атрибут ALT.

Проанализируйте все имеющиеся на сайте метатеги при помощи СЕО-сервиса, который вы используете. Заполните пропущенные ALT и TITLE. Также создайте инструкцию по работе с ними для контент-менеджера.

8. Подпишите изображения

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

9. Подготовьте файлы Sitemap

Sitemap — карта на языке, который понимают поисковые системы. Она поможет алгоритмам быстрее распознать контент на сайте. Это положительно влияет и на скорость проверки ресурса, и на его индексацию. Для системы Google вы можете добавить отдельный файл Sitemap только для изображений. Также можно использовать уже имеющийся документ и добавить в него информацию.

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

К обязательным используемым тегам в обеих поисковых системах относятся:

• image:image — это вся информация о конкретной картинке;
• image:loc — URL-адрес картинки.

Полные правила Яндекса по работе с файлами Sitemap можно прочитать по ссылке. А инструкция от Google тут.

10. Используйте семантическую разметку

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

Применение разметки поможет пользователям идентифицировать ваш контент. Для интернет-магазинов это может стать ценным источником трафика. У Яндекс в разделе «Картинки» тоже есть фильтрация по товарам.

11. Следите за расположением изображения

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

Иллюстрация может относиться ко всему материалу. А может — к отдельному его абзацу. Поисковики умеют распознавать часть изображений. Но в большинстве случаев они пользуются для анализа текстом, который располагается вокруг. Так они судят о релевантности контента. Лучше располагать иллюстрацию таким образом, чтобы её содержимое совпадало с описываемой в тексте ситуацией.

Заключение

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

Например, микроразметка помогает сформировать понятный сниппет для отображения в поисковике. А оптимизация изображения работает схожим образом — она «переводит» картинку на понятный для системы язык. Таким образом, Яндекс и Google узнают, что именно оно содержит. Так что не пропускайте источник потенциального трафика и следуйте нашим инструкциям!

Частые вопросы

Зачем нужна SEO-оптимизация изображений?

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

Что сделать, чтобы изображение генерировало новый трафик из поисковика?

Следите за предупреждениями сервисов для SEO, которые относятся к скорости загрузки сайта. Изображения не должны на это влиять. Заполняйте метатеги с учетом собранного семантического ядра. Не забывайте про подписи к картинкам и названия самих файлов. Сделайте Sitemap, это поможет поисковым системам проиндексировать ваш сайт.

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

Самый лучший вариант — это те изображения, которые создали вы сами. Например, авторские фотографии, скриншоты или дизайн. Если у вас нет времени на создание собственного контента, скачайте его из фотобанков. Также вы можете позаимствовать контент в первоисточнике. Но тогда — обязательно укажите на своем сайте автора. А ещё, изображение не должно отрицательно влиять на скорость загрузки ресурса. Чтобы избежать медленной работы сайта, тщательно следите за отчетами SEO-сервисов и не загружайте слишком тяжелые изображения.

Следующая статья: « SEO копирайтинг: как писать SEO тексты

Содержание

• Зачем нужно SEO-продвижение изображений
• 1. Соберите семантическое ядро
• 2. Найдите или создайте подходящее изображение
• 3. Проверьте вес и размер изображений
• 4. Изучите требования поисковых систем
• 5. Задавайте изображениям осмысленные названия
• 6. Учитывайте EXIFdata
• 7. Заполняйте ALT и TITLE картинок для SEO-оптимизации
• 8. Подпишите изображения
• 9. Подготовьте файлы Sitemap
• 10. Используйте семантическую разметку
• 11. Следите за расположением изображения
• Заключение

Оцените статью:

Средняя оценка: 5.0 Количество оценок: 2

Понравилась статья? Поделитесь ей:

Подпишитесь на рассылку ROMI center: Получайте советы и лайфхаки, дайджесты интересных статей и новости об интернет-маркетинге и веб-аналитике:

Вы успешно подписались на рассылку. Адрес почты:

Читать также

Как увеличить продажи в несколько раз с помощью ROMI center?

Закажите презентацию с нашим экспертом. Он просканирует состояние вашего маркетинга, продаж и даст реальные рекомендации по её улучшению и повышению продаж с помощью решений от ROMI center.

Запланировать презентацию сервиса

Попробуйте наши сервисы:

• Импорт рекламных расходов и доходов с продаж в Google Analytics

  Настройте сквозную аналитику в Google Analytics и анализируйте эффективность рекламы, подключая Яндекс Директ, Facebook Ads, AmoCRM и другие источники данных за считанные минуты без программистов

  Попробовать бесплатно

• Импорт рекламных расходов и доходов с продаж в Яндекс Метрику

  Настройте сквозную аналитику в Яндекс. Метрику и анализируйте эффективность рекламы, подключая Facebook Ads, AmoCRM и другие источники данных за считанные минуты без программистов

  Попробовать бесплатно

• Система сквозной аналитики для вашего бизнеса от ROMI center

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

  Попробовать бесплатно

• Сквозная аналитика для Google Analytics позволит соединять рекламные каналы и доходы из CRM Получайте максимум от рекламы, объединяя десятки маркетинговых показателей в удобном и понятном отчете. Отслеживайте окупаемость каждого рекламного канала и перестаньте сливать бюджет.

  Подробнее → Попробовать бесплатно

• Сквозная аналитика для Яндекс. Метрики позволит соединять рекламные каналы и доходы из CRM Получайте максимум от рекламы, объединяя десятки маркетинговых показателей в удобном и понятном отчете. Отслеживайте окупаемость каждого рекламного канала и перестаньте сливать бюджет.

  Подробнее → Попробовать бесплатно

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

  Подробнее → Попробовать бесплатно

Правильная SEO-оптимизация изображений

Лишнего трафика на сайте не бывает, правда? Один из способов его получить – это SEO-оптимизация изображений. Хотя SEO-оптимизация сложнее банального добавления Alt-текста (альтернативного описания) к изображениям на вашем сайте, но с нашим пошаговым руководством вы без долгого изучения теории оптимизируете картинки как профессионал. Начинаем?

Содержание

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

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

Содержательная часть SEO-оптимизации изображений – влияет на выдачу в поиске по картинкам

Для оценки содержания картинок поисковые системы опираются на 3 инструмента: изучение текста возле изображений, анализ алгоритмами объектов на изображениях, а также чтение SEO-атрибутов изображений и названия файла.

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

Техническая часть SEO-оптимизации изображений – влияет на SEO-позиции всей страницы

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

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

Шаг 1. Разместите изображения в подходящих местах страницы

Качественные и уместные изображения – это не только аспект SEO-оптимизации изображений. Это суть самого контента на страницах вашего сайта.

Выбирайте те изображения, которые иллюстрируют содержание страницы или вносят настроение в дизайн. Для SEO-оптимизации изображений важно, чтобы текст возле изображений был связан с картинкой.

Шаг 2. Удостоверьтесь в оригинальности изображений для сайта

Поисковые системы отдают приоритет уникальным изображением. Если вы делаете свои фотографии или нанятый диджитал-художник создал иллюстрации – проблем с SEO не будет.

Чтобы проверить оригинальность ваших изображений, вам нужно воспользоваться сервисом Картинки Google. Далее выбрать “поиск по изображениям” и загрузить свою картинку. В результатах поиска вы увидите похожие изображения. Если найденных похожих изображений много – потенциала SEO у ваших картинок нет.

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

Самые простые способы изменения картинок – это:

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

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

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

Шаг 3. Присвойте SEO-атрибуты и название изображениям для сайта

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

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

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

• Длина не больше 100-150 символов. Само описание может быть и большим, но поисковики анализируют именно это первое количество символов.
• Точное отображение смысла картинки. Вы должны описать простыми словами, что именно изображено на картинке. Например, “Проект интерьера с персиковым цветом стен и белой мебелью”.
• Без повтора текста из заголовка страницы. В таком случае боты поисковых систем сочтут картинку бесполезной и проигнорируют.
• Уникальность каждого описания на странице. Поисковики расценят графический контент как разнообразный, а значит полезный.
• Без переспама ключевыми словами. Не стоит повторять главное тематическое слово страницы в описании картинки на сайте несколько раз. Например, “интерьер с персиковыми стенами, стильный интерьер, интерьер с белой мебелью”.

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

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

Название файла изображения. Название самого файла также несёт полезную информацию для поисковиков. Google рекомендует перед загрузкой картинок на сайт поменять названия файлов на читаемые и отображающие смысл содержания. Написан текст должен быть латиницей с дефисами вместо пробелов. Например, вместо “img02879791.jpg” можно использовать текст “interer-s-persikovymi-stenami.jpg”.

Рассмотрим на реальных примерах, как правильно присваивать названия и Alt-текст изображениям на сайте.

Название: zavarivanie-chaya-puer.

Alt-текст: Правильное заваривание зелёного чая пуэр в домашних условиях.

Название: posadka-pri-igre-na-gitare.

Alt-текст: Посадка при игре на классической гитаре с использованием подставки.

Название: tatu-cvetok-na-pleche.

Alt-текст: Тату в виде цветка на плече руки в стиле минимализм.

Вы могли заметить, что оптимальный формат названия – это простое название объекта изображения 3-5 словами.

Для Alt-текста лучше всего использовать такой порядок слов – название объекта + его уникальное качество + условия обстоятельств.

Шаг 4. Выберите оптимальный формат изображений для сайта

Формат изображений – это тип хранения данных в файле изображения. У каждого из форматов отдельный тип расширения файлов. Например, *.png, *.jpg, *.webp, *.svg. У разных форматов есть свои преимущества.

PNG-формат даёт лучшее качество картинки. Но размер такого типа изображений намного больше, чем у других типов файлов.

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

WebP-формат предлагает современные алгоритмы сжатия, с ними изображения могут быть экстремально маленького размера с допустимым качеством. Пока WebP поддерживается не всеми браузерами неидеально (в особенности формат WebP v2).

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

• PNG – если важно продемонстрировать контент в максимальном качестве. Например, на сайте фотографа или дизайнера интерьеров.
• JPG – если вам просто нужно показать контент в нормальном качестве. При этом совместимость с браузерами не пострадает.
• WebP – если хотите добиться максимальной скорости загрузки. Вам нужно дополнительно конвертировать изображения в этот формат, поскольку обычно контент, например, на стоках распространяется в форматах PNG и JPG. Для преобразования изображений других форматов в формат WebP используйте онлайн-конвертеры: Convertio или CloudConvert. 

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

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

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

Шаг 5. Подберите оптимальное разрешение

Разрешение – это количество точек по горизонтали и вертикали, которые формируют изображение.

Разрешение изображений по горизонтали 

Большинство трафика приходится на мобильные устройства. Для устройств на Android самое распространенное разрешение экрана по горизонтали  – 1080 пикселей. 1170 пикселей – для телефонов от Apple. Поэтому изображения с разрешением по горизонтали более 1200 пикселей для мобильных избыточны. Если делаете сайт преимущественно для мобильных ориентируйтесь на эту ширину как на максимальную. 

Разрешения по горизонтали в 2000 пикселей достаточно для просмотра контента на компьютере (даже если изображение занимает всю видимую область экрана). Такой размер продиктован самым распространенным разрешениям экрана компьютеров – Full HD с 1920 пикселями по горизонтали и 1080 пикселями по вертикали. 

Разрешение изображений по вертикали

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

За вычетом области элементов управления окна браузера и панели задач компьютера из 1080 пикселей разрешения Full HD и формируются эти ~1000 пикселей.

Правила выбора разрешения изображений

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

Например, у вас есть три ховер-карточки на сайте. Они занимают пол экрана по вертикали и всю область по горизонтали. Получается:

• разрешение изображений по горизонтали должно быть не более ~670 пикселей (всю область из 2000 пикселей разделить на три объекта).
• разрешение изображений по вертикали должно быть не более ~500 пикселей (половина всей области из 1000 пикселей).

Далее в зависимости от требуемого результата (красота сайта или скорость его загрузки) окончательно выберите разрешение.

100 % для самого лучшего качества изображений (в нашем случае это 670х500 пикселей).

85 % для баланса между скоростью и качеством (в нашем случае это 570х425 пикселей, то есть 670х500 * 85 %).

70 % для самой быстрой загрузки сайта (в нашем случае это 470х350 пикселей, то есть  670х500 * 70 %).

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

Расчёт выглядит следующим образом.

По горизонтали размер составляет 1200 пикселей. По вертикали 500 пикселей нужно умножить на соотношение старого и нового разрешения (1200/670 * 500 = 895 пикселей). Итоговый размер для максимального качества изображений при просмотре изображений на мобильном – 1200х895 пикселей.

Шаг 6. Оптимизируйте качество изображений

Размер изображения определяется не только форматом и разрешением, но и степенью его сжатия. Некоторые форматы изображений могут не использовать сжатие (например, PNG). В других оно обязательно присутствует (например, в JPG). 

В зависимости от типа сжатия выделяется сжатие без потерь (lossless) и с потерей качества (lossy):

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

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

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

Оценить сервисы оптимизации размера файлов для задач SEO-оптимизации изображений можете оценить сами:

Squoosh

Вам открыты широкие возможности, но для освоения конвертера нужно время. Вы сразу можете оценить разницу в исходном и конвертированном файле. Работать можно с одним изображением за раз. Поддерживается конвертация форматов и ресайз изображений. Есть поддержка WebP, PNG и JPEG.

TinyPNG

Сервис позволит оптимизировать файлы форматов WebP, PNG и JPEG. За раз можно сконвертировать до 20 изображений размером до 5 мегабайт каждый. Ограничений на количество конвертации файлов в день нет. Настроек оптимизации нет.

Compressor.io

Без платной подписки вы можете обрабатывать до 50 файлов в день. Есть поддержка форматов JPEG, PNG, SVG, GIF, WEBP. Есть выбор между lossy и lossless сжатием. Обрабатывать можно сразу несколько файлов(общим размером до 10 мегабайт).

Image Compressor

Вы можете оптимизировать файлы форматов JPEG, GIF и PNG. Обрабатывать можно несколько файлов за раз. Ограничений на обработку количество файлов в день. Настроек, кроме усечения цветовой палитры, нет. За раз загрузить для обработки можно до 20 файлов для обработки.

iLoveIMG

Мультифункциональный сервис для работы с изображениями. Все инструменты разделены на группы. Доступны оптимизация изображений, конвертация файлов других форматов в JPG, ресайз и обрезка изображений. За один раз можно произвести операции с 30 файлами общим размером до 200 мегабайт.

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

Работа с картой сайта и местом хранения изображений, присваивание правильных адресов (URL) для картинок и активирование ленивой загрузки (lazy load – загрузка контента по мере просмотра страниц) требует специальных знаний, а также взаимодействия с файлами структуры сайта.

Если вы создадите сайт на Weblium, вам не придётся беспокоиться о технической стороне создания сайта. Как в плане SEO, так и в плане работы всего сайта.

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

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

Автор

Александр Громов

Автор блога Weblium.

Другие статьи автора

350+ Сео картинки | Скачать бесплатные картинки на Unsplash

350+ Seo Pictures | Скачать Free Images на Unsplash

• ФотоФотографии 234
• Стопка фотографийКоллекции 1.9k
• Группа людейПользователи 3.4k

цифровой маркетинг

google

соц. средства массовой информации

маркетинг

веб-сайт

поисковая система

поисковая оптимизация

человек

компьютер

человек

экран

Логотип Unsplash

Unsplash+

В сотрудничестве с Getty Images

Unsplash+

Разблокировка

mathcalculatoroccupation

Merakist

маркетинг курс цифрового маркетинга

–––– –––– –––– – –––– – –––– –– – –– –––– – – –– ––– –– –––– – –.

Стивен Филлипс — Hostreviews.co.uk

datadigitalgrowth

NisonCo PR и SEO

анализоптимизацияпоисковая система

Мириам Джессиер

web marketinganalyticsstats

Myriam Jessier

google analyticsdata analysisонлайн-маркетинг

Unsplash logo

Unsplash+

В сотрудничестве с Getty Images

Unsplash+

900 10 Разблокировать

PlanningData Reviewhand

Myriam Jessier

canadamontrealqc

Carlos Muza

Hd компьютерные обоибизнесработа

NisonCo PR и SEO

социальные сетимаркетинг в социальных сетяхпоисковая оптимизация

Souvik Banerjee

technologydisplaymedia

Создатели кампании

Backgroundsgraphbusiness model

Unsplash logo

Unsplash+

В сотрудничестве с Getty Images

Unsplash +

Разблокировать

deskreviewstable

Firmbee. com

Google images & photoscoffee cupwork from главная

Мелани Дезиэль

белая доскааудиторияподписчики

Мириам Джессиер

loadtimepagespeedвремя загрузки

Эдхо Пратама

techwebHd обои для телефона

Стивен Доусон

Hd серые обои отчетдом федерации

Логотип Unsplash

Unsplash+

В сотрудничестве с Getty Images

900 10 Unsplash+

Разблокировать

Hd обои для ноутбукаклавиатура компьютера

Diggity Marketing

ссылка

mathcalculatoroccupation

datadigitalgrowth

web marketinganalyticsstats

планированиеобзор данныхрука

Hd обои для рабочего столабизнес работа клавиатура

–––– –––– –––– – –––– – – ––– –– – –– –––– – – –– ––– –– –––– – –.

маркетингцифровой маркетингкурс

анализоптимизацияпоисковая система

google analyticsанализ данныхонлайн-маркетинг

canadamontrealqc

социальные сетимаркетинг в социальных сетяхпоисковая оптимизация

фон веб-сайтаграф бизнес-модель

изображения и фотографии Googleкофе в стаканчиках из дома

loadtimepagespeedвремя загрузки

Hd серые обоиотчет дом федерации 9 0011

Похожие коллекции

SEO

70 фото · Куратор fred blago

Consultora SEO

83 фото · Куратор Mayte Saa

SEO Valerie

99 фото · Куратор Мэтью Тейлор доскааудиторияподписчики

Hd серые обоиотчетдом федерации

маркетингцифровой маркетингкурс

google analyticsанализ данныхонлайн-маркетинг

канадамонреалек

technologydisplaymedia

Google images & photoscoffee cupwork from home

techwebHD обои для телефона

ссылка buildingglass boardguest post

–––– –––– –––– ––––– ––––– –– – –– –––– – – –– ––– –– –––– – –.

данныецифровой рост

анализоптимизацияпоисковая система

планированиеобзор данныхручная

социальные сетимаркетинг в социальных сетяхпоисковая оптимизация

связанные коллекции

поисковая оптимизация

70 фото · Куратор fred blago

Consultora SEO

83 фото · Куратор Mayte Saa

SEO Валери

99 фото · Куратор Matthew Taylor

deskreviewstable

900 10 loadtimepagespeedвремя загрузки

HD обои для ноутбукаклавиатура компьютера

Обзор премиум-изображения на iStock | Скидка 20% на iStock

Unsplash logo

Сделайте что-нибудь потрясающее

7 шагов к более высокому рейтингу в поиске изображений

SEO или поисковая оптимизация может показаться сложной, но на фундаментальном уровне вы можете думать об этом следующим образом:

Все в Интернете является либо частью контента, либо ссылкой (между частями контента).

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

На странице А больше ссылок со страниц аналогичного качества, чем на странице Б; таким образом, он имеет больший рейтинг.

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

Что такое оптимизация изображений?

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

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

Хорошие новости: всего за несколько шагов вы можете оказать огромное влияние на SEO вашего изображения:

1. Используйте компрессор для уменьшения размера изображения
2. Подавать изображения в рекомендуемых форматах следующего поколения
3. Масштабируйте изображения для работы с вашим веб-сайтом
4. Создание оригинальных графических ресурсов, на которые можно ссылаться
5. Оптимизируйте заголовки изображений, подписи и альтернативный текст
6. Сделайте ваши изображения общедоступными
7. Попробуйте ленивую загрузку изображений

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

1. Используйте компрессор для уменьшения размеров изображений

Скорость сайта оказывает наибольшее влияние SEO-оптимизации изображений на общую способность страницы ранжироваться и получать трафик. Это огромно — скорость сайта влияет не только на способность пользователя переходить со страницы на страницу по пути конверсии; это также активный фактор ранжирования. Если ваши страницы работают медленно, Google не отнесется к ним благосклонно. Вот тут и приходит на помощь сжатие изображений.

Возможно, вы знакомы с PageSpeed ​​Insights или нет. Это очень удобно. Введите любой URL-адрес на своем веб-сайте, и Google предоставит вам всестороннюю оценку элементов, которые мешают скорости этой страницы. Проведите несколько таких тестов, и вы начнете замечать общую тему.

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

Просто разверните необходимую вкладку в отчетах PageSpeed ​​Insights, и вы увидите изображения, представляющие самых крупных нарушителей на вашей странице. Вы также увидите, сколько места вы сможете сэкономить, если сожмете их. Вы можете использовать такой инструмент, как TinyPNG, для быстрого сжатия изображений по одному, или, в зависимости от вашей CMS, вы можете использовать различные плагины/инструменты, специально предназначенные для вашего сайта (например, Smush для WordPress), для массового сжатия всех изображений на вашем сайте. .

2. Загружайте изображения в форматах следующего поколения

Еще одна распространенная рекомендация, которую вы увидите в отчете PageSpeed ​​Insights? «Подавайте изображения в форматах нового поколения».

Мы говорим о форматах JPEG 2000, JPG XR и WebP. Если вы никогда не слышали ни об одном из них, не думайте, что вы не в курсе — они не так распространены, как JPG или PNG. Но в то время как JPG и PNG по-прежнему являются доминирующими форматами изображений, форматы следующего поколения, такие как JPEG 2000, действительно превосходят их.

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

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

3. Масштабируйте изображения для работы с вашим веб-сайтом

Надлежащий размер изображения (здесь речь идет о размерах, а не о размере файла) зависит от вашей CMS, а также от формата страницы, на которой вы загружаем изображение. Ознакомьтесь с рекомендациями по размерам для вашей CMS (например, Shopify рекомендует использовать 2048 x 2048 пикселей для квадратных фотографий товаров) до загрузки ваших изображений. Изображение, которое выглядит так, как будто оно хорошо сочетается с вашим контентом…

… возможно, ваша CMS автоматически изменила размер, чтобы он соответствовал размеру. Это изменение размера корректирует размер для отображения — это уменьшит размер файла на 90 260, а не на 90 261. И вообще говоря, изображений с большим количеством пикселей будут иметь больший размер файла. Это означает, что самый надежный способ убедиться, что вы используете правильные размеры изображений, — это определить оптимальный размер изображения для вашего сайта, а затем обрезать изображения перед их загрузкой. Если это звучит как трудный процесс — ну, это может быть, если вы получаете изображения со всего Интернета. Но если вы загружаете стоковые изображения или отдаете изображения продуктов на аутсорсинг дизайнеру, вам стоит найти стандартный размер, подходящий для вашего конкретного сайта.

4. Создайте исходный контент изображения

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

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

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

5. Свободно используйте заголовки, подписи и замещающий текст

Когда Google определяет, какое изображение следует вернуть по запросу изображения, он имеет доступ к ограниченному объему информации. Во всяком случае, меньше информации, чем у него есть, когда он индексирует целые страницы. Для SEO изображений это означает, что вы должны предоставить Google всю возможную информацию о вашем изображении в отведенном вам пространстве. Это можно сделать в трех основных местах:

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

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

• Заголовки: заголовки изображений необходимы в сочетании с замещающим текстом. Но они являются факторами ранжирования , поскольку Google использует их при определении порядка предоставления изображений при поиске изображений.
• Подписи: Вот что Google говорит о подписях: «Google извлекает информацию о теме изображения из содержимого страницы, включая подписи и названия изображений». Таким образом, размещение вашего изображения рядом с
  релевантным текстом поможет Google определить, что это за изображение. Использование подписей — это пуленепробиваемый способ убедиться, что ваше изображение описано адекватно и в контексте.

6. Обеспечьте удобный обмен в социальных сетях

Давайте поговорим о тегах Open Graph и/или Twitter Cards. Это теги в HTML-коде вашей страницы, которые обеспечивают правильное отображение изображений и описательных фрагментов, когда кто-то делится этой страницей в Facebook или Twitter. Естественно, это очень важно, если вы хотите, чтобы ваши изображения набирали популярность в социальных сетях и привлекали трафик и сильные социальные сигналы обратно на ваш сайт.

Вы можете искать эти элементы в исходном коде, если не уверены, есть ли они там.

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

Использование тегов Open Graph снова зависит от вашей CMS. Например, если вы используете BigCommerce, вы найдете открытые графические поля во всех ваших списках продуктов на задней панели (неудобно, вы не найдете их на своей домашней странице).

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

7. Попробуйте ленивую загрузку

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

Google и поддерживает ленивую загрузку в своем собственном PageSpeed ​​Insights. Вы можете столкнуться с этой рекомендацией, когда проводите анализ скорости страницы на своем сайте.

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

Оптимизация изображений: не экономьте!

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