Визуальная составляющая сайта – важнейший атрибут его позитивного ранжирования в поисковиках. Причин тому несколько:

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

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

Главные моменты оптимизации фото для сайта

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

Читать еще: Особенности SEO оптимизации корпоративных сайтов

Варианты оптимизации фото для сайта

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

1. Многие изображения изначально имеют совершенно неудобоваримое для поисковых роботов название. Что-то вроде DSC3491.JPG. Название необходимо поменять на актуальное. Тут поможет транслитерация. Например, «shokolad_keks». Дело не только в том, что поисковики часто воспринимают кириллицу как признак СПАМа или просто некорректно «видят» русские буквы. Плюс, ещё и в CMS гораздо удобнее работать транслитерацией. Название картинки должно в точности соответствовать тому, что на ней изображено. В идеале в названии необходимо прописать «ключевик». Наиболее актуально это для интернет-магазинов. При помощи онлайн-сервисов (типа https://a.pr-cy.ru) можно посмотреть аналитику сайта. Касательно интернет-магазина здесь интересны наиболее частые поисковые запросы пользователей. Допустим, люди ищут «брелоки из минералов» – данное словосочетание в разных вариациях. Значит, такое словосочетание по-разному нужно вставлять в названия картинок. Любое изображение несложно доработать в on-lineсервисах вроде Canva или Crello. Например, сделать прозрачную рамку. Фотография, часто используемая на других web-ресурсах, заиграет от этого новыми красками. Для хорошей работы интернет-магазина немаловажно обозначить для контент-менеджера правила переименования изображений.


2. Оптимизация изображений для сайта неразрывно связана с типами используемых форматов. «Любимчиками» у поисковиков являются форматы JPEG, PNG и GIF. JPEG удобен тем, что дает очень неплохое качество при совсем скромных габаритах (измеряется килобайтами). Что опять-таки актуально для интернет-маркетов. Также данный формат идеален для крупных, полновесных изображений. PNG удобен, когда следует сохранять прозрачность фона. Формат GIF классифицируется как изображение, но по сути это закольцованный кусочек видео. Этот формат незаменим, когда нужно показать какой-то процесс без возможности вставить полноценный видеоролик. Менее известный формат SVG, обычно, применяют к логотипам и иконкам, но также он не менее актуален в работе с Java Script и с CSS (эти языки для формата SVG позволяют ограниченно изменять размер при этом не теряя качество изображения). Формат WebP также отличается тем, что дает хорошее качество при малых размерах изображения. Форматы можно менять, допустим, перевести в WebP. Сделать это можно при помощи сервиса Squoosh.

3. Оптимизация фото для сайта наверняка потребует определенных манипуляций с его размерами. Конечно, файл можно попросту сжать. В данном случае это не тот тип файла, когда необходимо сжатие без потерь. Изображение способно остаться достаточно большим, четким и насыщенным, а размер уменьшится с мегабайтов до килобайтов. Уменьшить изображение можно многочисленными способами. Самый простой – встроенный редактор Paint. Также существует множество онлайн сервисов: JpegMini (сжатие до 80%), Compressor (до 90%, но один файл не может весить более 10 Мб), Compressorjpeg (удобен, когда нужно обработать большое количество картинок, поскольку способен работать сразу с 20 файлами одновременно), TinyPNG/JPG (работают с указанными форматами, сжатие более 70%, одновременная работа с 20 файлами, а вес каждого файла до 5 Мб). После всех сжатий обязательно рекомендуется проверить скорость загрузки страницы на Google page Speed insights. Она должна заметно увеличиться. Следует помнить, что высокая скорость загрузки есть важнейший фактор ИКС.

Читать еще: Оптимизация скорости загрузки сайта

4. Оптимизация фото для сайта подразумевает и создание превью для картинки. Дело в том, что это способ сохранить высокое разрешение, большой вес картинки при сохранении той же скорости загрузки сайта. И соответственно, без ухудшения ранжирования web-ресурса. Превью означает, что при загрузке страницы на экране появляется миниатюрное изображение/ фотография, а при клике открывается полноценное изображение. То есть система не подгружает в кэш всё изображение, а только его превью. Отсюда и сохранение высокой скорости загрузки. Чтобы сделать превью, сначала нужно в любом из редакторов сильно (во много раз) уменьшить картинку. Например, с 2000*2000 до 150*150. И сохранить этот мини-вариант (при сохранении крупного оригинала). Затем с помощью Word создать пустой HTML-file (Файл – Создать – Веб-страница). Обе картинки (маленькая и большая) могут быть сохранены на компьютере, а могут быть в облачном хранилище. Это определяет соответствующие ссылки на них. Затем нужно заполнить пустой файл HTML так, чтобы маленькая картинка стала гиперссылкой на большую.

Пример:

Здесь "a href="/../html_for_photo/000000.html" – это ссылка на большое изображение, "src="../photo/small/000000.png" – адрес расположения уменьшенного варианта. Тег <img> отображает в интернете один из трёх основных формата. Помещение тега <img> в контейнер <а> как раз и делает маленькую картинку ссылкой на большое изображение. Атрибут target="_blank" нужен, чтобы ссылка открывалась в новом окне.

В HTML с помощью атрибута srcset в теге <img> можно указать несколько вариантов одного изображения в зависимости от размеров. Это нужно для того, чтобы страница сайта с этим изображением имела одинаково хорошую скорость загрузки на любых устройствах: и стационарных компьютерах, и мобильных гаджетах.

Пример:

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

Пример:

Теперь при попадании курсора на конкретное фото будет появляться плавающая надпись «Уникальная кухня тропического острова». Пояснения к фотографиям помогают в оптимизации фото для сайта.

Чтобы поисковики проиндексировали все изображения на web-ресурсе, рекомендуется создать Sitemap-файл. Необходимость обусловлена тем, что без этой карты изображения, которые были загружены, например, с помощью Java Script, невидимы для поисковиков. Для этого в Word нужно: Файл – Создать – XML-документ.

В созданном файле следует прописать (пример):

Если же работа с веб ресурсом производится на WordPress, то всё еще проще. Ведь в этой системе управления содержимым уже есть встроенный плагин Google xml sitemap for images, автоматически создающий Sitemap-file абсолютно для всех визуальных элементов. И не следует забывать про микроразметку с помощью schema.org. Оптимизация изображений для сайта будет качественнее с применением микроразметки. Так можно сообщить поисковым системам, что именно за контент присутствует на странице (а почти любые уточнения для поисковиков повышают их дружественность).

SEO оптимизация с Friendly Marketing

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

Материал подготовлен командой Friendly Marketing.
Специалистами в области дружелюбных маркетинговых коммуникаций.
+7 (495) 003-32-78
Этот адрес электронной почты защищён от спам-ботов. У вас должен быть включен JavaScript для просмотра.