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

Понимание SEO для изображений

Google и Yandex приоритизирует большие, высококачественные изображения, которые соответствуют запросу пользователя на основе заголовка и мета-тега title и alt теге.

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

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

Реализация адаптивных изображений

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

• Создание нескольких размеров изображений: Создайте разные версии ваших изображений с различными ширинами. Например, у вас могут быть изображения размером 225px, 300px, 350px и 640px.
• Использование атрибута srcset: Атрибут srcset позволяет указать разные файлы изображений для различных ширин экрана. Это гарантирует, что браузер загружает наиболее подходящий размер изображения для устройства пользователя.
• Определение атрибута sizes: Атрибут sizes сообщает браузеру, насколько широким будет изображение при различных ширинах окна просмотра. Это помогает браузеру выбрать лучшее изображение из srcset.

Вот пример того, как это можно реализовать в вашем HTML:

<img
    srcset="/wp-content/uploads/w-225.jpg 225w,
            /wp-content/uploads/w-300.jpg 300w,
            /wp-content/uploads/w-350.jpg 350w,
            /wp-content/uploads/w-640.jpg 640w"

    sizes="(max-width: 400px) 100vw,
            (max-width: 700px) 50vw,
            (max-width: 900px) 33vw,
            225px"

    src="/wp-content/uploads/women-dress.jpg"
    title="заголовок страницы"
    alt="описание страницы"
    loading="lazy"
>

Объяснение кода

srcset: Указывает разные файлы изображений и их соответствующие ширины.

sizes: Определяет ширину изображения для различных размеров окна просмотра. Например:

• Если ширина окна просмотра меньше 400px, изображение займет 100% ширины окна просмотра.
• Если ширина окна просмотра находится между 400px и 700px, изображение займет 50% ширины окна просмотра.
• Если ширина окна просмотра находится между 700px и 900px, изображение займет 33% ширины окна просмотра.
• Если ширина окна просмотра больше 900px, изображение будет шириной 225px.

src: указывает полноразмерное изображение для поискового бота Google.

title: предоставляет заголовок для SEO изображения.

alt: предоставляет описание изображения, что критически важно для SEO.

loading="lazy": Обеспечивает загрузку изображения только тогда, когда оно вот-вот войдет в область просмотра, что еще больше улучшает скорость загрузки страниц.

Модификация тегов изображения поста для улучшения SEO

Добавьте следующий код в function.php вашего сайта для автоматизации SEO изображений ваших постов и код заполнит тег title и alt для изображения поста согласно заголовка и описания страницы автоматически:

function custom_post_thumbnail_attributes($html, $post_id, $post_thumbnail_id, $size, $attr) {
    // Проверяем, находимся ли мы на странице одиночного поста и тип поста "post"
    if (is_single() && get_post_type($post_id) === 'post') {
        // Получаем заголовок страницы
        $title = get_the_title($post_id);

        // Получаем краткое описание (excerpt)
        $excerpt = get_the_excerpt($post_id);

        // Добавляем атрибуты title и alt к изображению
        $html = preg_replace('/<img(.*?)>/', '<img$1 title="' . esc_attr($title) . '" alt="' . esc_attr($excerpt) . '">', $html);
    }

    return $html;
}
add_filter('post_thumbnail_html', 'custom_post_thumbnail_attributes', 10, 5);

Заключение

Реализуя адаптивные изображения на вашем сайте WordPress, вы можете значительно увеличить ваш SEO-трафик с поиска по изображениям Google и Яндекс, не жертвуя скоростью загрузки страниц. Этот подход гарантирует, что сайт получит пользовательский опыт и улучшится видимость вашего сайта в результатах поиска.

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

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

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