Источник - Доступный маркетинг
Если фотографии и иллюстрации использовать с умом, то будет польза как для пользователей, так и для SEO. Оптимизировав изображения правильно, вы получите качественный трафик из Google Image и Яндекс Картинок.
Использование релевантных изображений
Для поисковых роботов релевантность картинок — один из важнейших факторов. Поэтому любая иллюстрация должна соответствовать тематике статьи. Яркие иллюстрации отлично влияют на поведенческие факторы.
Когда вы повествуете пользователю об услуге или товаре, то логичнее всего размещать качественные фотографии.
Рекомендуется делать мини-инфографику, в которой вы будете показывать статистическую информацию.
Изображения абстрактных тем обычно оптимизировать сложно. Выход из ситуации — перестать ставить растиражированные снимки с фотостоков. Например, к таким относится приведенная ниже картинка.
Пользуйтесь оригинальными изображениями
Изображения не нужно копировать с других сайтов. Это очень важно для SEO. Проверить иллюстрацию на уникальность можно через сервис TinyEye.
0 будет означать, что картинка уникальна.
Вы увидите список ресурсов, если изображение уже где-то использовано:
Также можно посмотреть, есть ли снимок в индексе поисковых роботов. Для этого его достаточно загрузить в Яндекс Картинки. Если поисковик ничего не отыщет, то вы увидите такой результат:
При наличии иллюстрации поисковик покажет это:
Забудьте о изображениях, защищенных авторским правом
У каждого изображения есть свой хозяин. Если он найдет копию, то легко испортит вам жизнь. Поэтому для коммерческих целей нужно использовать только личные иллюстрации. Подойдут также картинки с открытой лицензией. Чтобы их найти, достаточно воспользоваться Google.
Зайдите в Картинки и забейте нужный запрос. После перейдите в “Инструменты”, после чего отправьтесь в раздел “Право на использование”. Оттуда переходите в “С лицензией на использование”.
Если вы используете иллюстрации с фотостоков, то их получится улучшить. Картинку достаточно обработать. Например, этот снимок:
…быстро становится другим в блоге о кулинарии.
Для оформления достаточно пользоваться Crello либо Canva.
Важны понятные названия
Кроме атрибутов alt и title, поисковые системы смотрят на названия загружаемых файлов. Допустим, на фотографии изображен кекс. Тогда правильно будет так: keks.jpg. Неправильно: DCS46234.jpg.
Прописывайте файлы транслитом. Правильно будет так:
Вот так делать не нужно:
Оптимизируйте фотографии для интернет-магазинов
К примеру, вы занимаетесь продажей кроссовок Nike в своем интернет-магазине. Сделайте расширенное название файла и не забудьте поставить ключ.
Подберите правильный формат картинки
Соблюдайте баланс между размером и качеством изображения. Помните, что идеального формата нет. Все зависит от того, как вы будете использовать картинку.
Изображения нужно сжимать в меру
Уменьшить вес иллюстрации можно в Фотошопе. Допустим, такая картинка в формате PNG весит 2,18 Мб.
Сохраните её в JPEG, снизьте до 80% общее качество, уменьшите размер до 1500х1500 пикселей. Файл будет весит 250 Кб.
Кроме Фотошопа, есть и другие сервисы для сжатия картинок.
Например:
- JpegMini;
- Compressor;
- ImageOptimizer.
Можно повысить скорость загрузки благодаря превью.
Грузите иллюстрации точно по размеру
Размер меняется в Фотошопе.
Укажите, сколько вам нужно пикселей.
Лишний вес убирается так:
В новостных карточках снимки отображены в уменьшенном виде. В коде они меньшего размера.
На новостной странице картинка полноразмерная и в большом разрешении.
Пользуйтесь адаптивными изображениями
Размер изображения обязан соответствовать размеру экрана гаджета. Рекомендуется пользоваться атрибутом srcset. Благодаря ему в <img> получится указать пару версий одной иллюстрации. Код выглядит так:
Лайфхакер реализовал это таким образом:
Заполните alt и title
Это особенно важно на тех страницах, которые полностью состоят из изображений. В Title прописана информация о картинке:
Правильный код выглядит так:
Если страница не загружается, то пользователь увидит текст, указанный в атрибуте:
Google для вебмастеров сделал справку для правильного заполнения атрибута Alt:
Создайте для изображений файл Sitemap
Благодаря этому поисковики найдут иллюстрации, которые они могли случайно пропустить. Пример кода:
Подробно об этом можно почитать у Яндекса и Google.
Добавляйте к изображениям подписи
Это выглядит так:
При сканировании страницы пользователи обращают внимание на подписи.Их читают на 300% больше, чем сам текст.
Пример уточняющей подписи:
Для картинок с подписью есть специальный класс:
Пользуйтесь микроразметкой Twitter Card либо Open Graph
Микроразметка помогает настраивать внешний вид публикации в соцсетях.
Разметка Open Graph выглядит в Facebook так:
Без разметки это выглядит так:
Код Open Graph:
Twitter Card подходит для Твиттера:
Код Twitter Card:
Структурируйте данные Schema.org
Благодаря этой разметке вы покажите роботам, какой контент есть на странице.
В картинках Google иллюстрации отображаются со значком “Продукт”:
Код выглядит так:
Размещайте картинки на собственном хостинге
Все картинки лучше размещать на своем веб-сайте. Сети доставки контента помогают увеличить скорость загрузки страницы, но при этом и ссылка будет вести на их сервер, а не на ваш сайт.
