Визуальная составляющая сайта – важнейший атрибут его позитивного ранжирования в поисковиках. Причин тому несколько:
Визуальная составляющая сайта является важным фактором, поднимающим его ИКС (индекс качества сайта), а это приводит к увеличению трафика и ко всё более дружественному отношению поисковиков. Грамотное размещение фотографий, картинок, графических изображений на web-ресурсе есть часть его SEO оптимизации. Правильнее сказать, что оптимизация фото для сайта является ключевым компонентом общей SEO оптимизации. Оптимизация изображений для сайта состоит из ряда мероприятий, направленных на правильный подбор и обработку картинок.
Но прежде всего нужно отметить несколько условий, которым в принципе должна соответствовать любая фотография, любое изображение на web-ресурсе:
Читать еще: Особенности SEO оптимизации корпоративных сайтов
Теперь стоит рассказать о более конкретных действиях, которые включает в себя оптимизация фото для сайта:
Читать еще: Оптимизация скорости загрузки сайта
Пример:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>ТегIMG</title>
</head>
<body>
<p><a href="/../html_for_photo/000000.html" target="_blank">
<img src="/../photo/small/000000.png"></a>
текстовая информация о картинке...</p>
</body>
</html>
Здесь "a href="/../html_for_photo/000000.html" – это ссылка на большое изображение, "src="../photo/small/000000.png" – адрес расположения уменьшенного варианта. Тег <img> отображает в интернете один из трёх основных формата. Помещение тега <img> в контейнер <а> как раз и делает маленькую картинку ссылкой на большое изображение. Атрибут target="_blank" нужен, чтобы ссылка открывалась в новом окне.
В HTML с помощью атрибута srcset в теге <img> можно указать несколько вариантов одного изображения в зависимости от размеров. Это нужно для того, чтобы страница сайта с этим изображением имела одинаково хорошую скорость загрузки на любых устройствах: и стационарных компьютерах, и мобильных гаджетах.
Пример:
<img srcset="/wolt-320w.png 320w,/
wolt-480w.png
480w,wolt-800w.png 800w"
sizes="(max-width: 320px) 180px,
(max-width: 480px) 340px,
800px"
src="/wolt-800w.png" alt="адаптивная страница">
Здесь же уместно обозначить атрибут alt, который предназначен для текстового описания картинки. Если вместе с ним заполнить title, то при наведении курсора на картинку будет возникать текстовая информация об изображении.
Пример:
<img alt="Фото оригинальной кухни тропического острова" class="inline-image" src="https://designmyhome.ru/sites/default/files/styles/large/public/inline/images/13/unikal'naya kuhnya tropicheskogo ostrova.jpg" title="Уникальная кухня тропического острова">.
Теперь при попадании курсора на конкретное фото будет появляться плавающая надпись «Уникальная кухня тропического острова». Пояснения к фотографиям помогают в оптимизации фото для сайта.
Чтобы поисковики проиндексировали все изображения на web-ресурсе, рекомендуется создать Sitemap-файл. Необходимость обусловлена тем, что без этой карты изображения, которые были загружены, например, с помощью Java Script, невидимы для поисковиков. Для этого в Word нужно: Файл – Создать – XML-документ.
В созданном файле следует прописать (пример):
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
xmlns:image="https://www.yandex.ru/schemas/sitemap-image/1.1">
<url>
<loc>http://visual.com/look.html</loc>
<image:image>
<image:loc>http://visual.com/photo.png</image:loc>
<image:geo_location>Алтай</image:geo_location>
</image:image>
</url>
</urlset>.
Если же работа с веб ресурсом производится на WordPress, то всё еще проще. Ведь в этой системе управления содержимым уже есть встроенный плагин Google xml sitemap for images, автоматически создающий Sitemap-file абсолютно для всех визуальных элементов. И не следует забывать про микроразметку с помощью schema.org. Оптимизация изображений для сайта будет качественнее с применением микроразметки. Так можно сообщить поисковым системам, что именно за контент присутствует на странице (а почти любые уточнения для поисковиков повышают их дружественность).
SEO оптимизация с Friendly Marketing
Оптимизация визуальной составляющей сайта – дело, во многом, индивидуальное. Кто-то полагает, что незначительное торможение страниц с лихвой окупят привлекательные большие изображения. Кто-то делает акцент на превью. Мастерство приходит с практикой.
Материал подготовлен командой Friendly Marketing.
Специалистами в области дружелюбных маркетинговых коммуникаций.
+7 (495) 003-32-78
Этот адрес электронной почты защищён от спам-ботов. У вас должен быть включен JavaScript для просмотра.