Все, чему мы научились в последних двух статьях, пойдет прахом, если мы не реализуем правильную стратегию SEO для изображений. SEO изображений играет важную роль в вашей общей SEO-стратегии и имеет решающее значение для сайтов, которые делятся учебниками. Подумайте, сколько трафика вы бы потеряли, если бы ваши изображения были неправильно названы, не имели тегов ‘alt’ или, что еще хуже, размещались на разных серверах.
Ошибки SEO изображений WordPress
Мы рассмотрим основные ошибки, когда дело доходит до SEO изображений – и порекомендуем соответствующие контрмеры.
Вы не используете релевантные изображения
Представьте, что вы и ваши приятели всерьез обсуждаете, каким видом транспорта воспользоваться в предстоящей поездке. И междугородний автобус, и самолет кажутся хорошими вариантами, но вы застряли в споре между бюджетом и временем. Есть две команды, возглавляемые Рональдом и Джереми. Рональд хочет успеть на самолет, чтобы не пришлось переносить пятничные встречи. С другой стороны, Джереми, будучи поклонником Матери-Земли, не против изменить график встреч, чтобы насладиться живописными красотами, открывающимися во время поездки на автобусе по межгосударственному маршруту. Конечно, каждый член туристической группы выбирает свою сторону – те, кто не хочет десятичасового путешествия на автобусе, поддерживают Рональда. Другая команда, которая хочет полюбоваться красотой матушки-природы, считает, что ехать на автобусе совершенно необходимо. Обе стороны стараются изо всех сил убедить друг друга принять их сторону.
На фоне, казалось бы, одной из самых важных дискуссий в их жизни, Рон совершил ошибку, произнеся следующие слова: Рон: Ребята, меня устраивает любой вид транспорта. Кто должен посидеть с моим котом на выходных? Джереми: Что? Ты можешь оставить его у Эмили! Подождите, почему мы вообще это обсуждаем? Да, разве вы не видите, что у нас важный разговор? Парень из команды Роланда: Да ладно, чувак! Какого черта, Рон! Разве ты не видишь, что у нас тут кризис? РОН (немного испугавшись): Ладно, ладно, я оставлю Сару с Эмили. Боже. КОЛЛЕКТИВ: Черт возьми, Рон! Ты всегда так делаешь… И дебаты возобновляются. Ты же не хочешь быть Роном сейчас? То же самое с релевантностью. Изображения стоят тысячи слов. Но если вы не будете осторожны, вы можете потерять внимание человека на другой мысли. Одно из первых правил добавления изображения в сообщение – это улучшение способа передачи идеи. Изображения предназначены для передачи ценности. Именно поэтому учебники WPExplorer наполнены скриншотами, а списки тем сосредоточены на демонстрации лучших моментов/демонстраций каждой темы. Эта ценность может быть (а) информативной по своей природе, (б) нести визуальное или эмоциональное воздействие или (в) представлять собой смесь того и другого. Лучшие изображения чаще всего представляют собой сочетание этих трех характеристик.
Пример посадочной страницы Github – иллюстрация разработчика за рабочим столом. Тем не менее, нет смысла использовать изображение ради того, чтобы добавить его. Такие действия часто оказываются контрпродуктивными. С другой стороны, правильное изображение может принести многократную пользу вашим конверсиям. На скриншоте выше – одна из многих целевых страниц Github. Давайте рассмотрим изображение. Во-первых, вы заметите, что это изображение на самом деле является векторной иллюстрацией. Иллюстрация преодолевает любые расовые/этнические барьеры. Кроме того, синий цвет, гармонирующий с общей цветовой гаммой страницы, сводит на нет любое подсознательное профилирование. Отличный пример правильного использования изображения в сочетании с замечательной копией и CTA – отличная целевая страница.
Вы не концентрируетесь на имени файла изображения
Я понимаю, что создание качественных руководств – это тяжелая работа. Каждый шаг должен быть четко задокументирован, но не настолько описателен, чтобы ваши читатели восприняли это как оскорбление их интеллекта. Когда вы работаете над учебником из 1800 слов и приводите более десятка скриншотов, очень легко поддаться на уговоры и использовать такие названия, как скриншот-1, скриншот-17 и т. д. Но на самом деле это очень вредит вашему SEO.
Подумайте об этом – если кто-то будет искать что-то отдаленно связанное с изображением, показанным выше, будет ли он использовать ‘screenshot-1’ или ‘image-1’, или он скорее будет искать “how to turn off permalinks in WordPress”. Если вы хотите выложиться на 100% в SEO, то добавьте атрибут TITLE к изображениям. Значением этого тега TITLE может быть имя файла вашего изображения.
Вы не определяете ALT-теги
Теги ALT означают альтернативный текст изображения. Он должен использоваться на каждом изображении, независимо от размера, приоритета или чего-то подобного. Проще говоря, теги ALT – это описание вашего изображения. Что представляет собой ваше изображение в буквальном смысле? Теги ALT используются поисковыми системами для просмотра изображения. Если изображение не может быть отображено, вместо него используется тег ALT. Теги ALT также используются устройствами чтения с экрана для людей, потерявших зрение. Например, тег ALT или описательный текст нашего предыдущего снимка экрана может быть таким:
Скриншот приборной панели WordPress, показывающий настройки permalinks, с установленной опцией по умолчанию.
Написание подробных тегов ALT может быть настоящим мучением, но усилия окупаются. К сожалению, я не смог найти недавнего исследования, которое показало бы рост органического трафика благодаря оптимизации ALT-тегов. Большинство из них – это комментарии на форумах. Если вам попадутся такие исследования, поделитесь с нами!
Вы набиваете ключевыми словами свои теги TITLE и ALT
Набивка ключевых слов – это, по сути, добавление всех ваших популярных ключевых слов только для того, чтобы получить немного SEO-сока на последней миле. Однако в действительности это все равно, что использовать некачественное масло в хорошо смазанном автомобиле. Google с каждым днем становится все умнее, а это значит, что он понимает, когда вы пытаетесь его запутать. Результат? Ваши SEO-показатели снижаются. Типичный пример ALT-тега, заполненного ключевыми словами, выглядит следующим образом:
Скриншот приборной панели WordPress, показывающий настройки permalinks, с опцией по умолчанию, отмеченной BEST FREE AND PREMIUM WORDPRESS THEMES WPEXPLORER
Мой совет? Не выбирайте короткие пути. Вы упорно трудились над определением своих ALT-тегов – плоды вашего труда последуют за ними.
Вы не используете подписи к изображениям
Особенность тегов ALT и TITLE в том, что они не видны читателю/посетителю. Поисковые системы любят их, но человек, читающий вашу статью, не станет наводить курсор на изображение, чтобы увидеть альтернативный текст, и уж тем более не станет открывать изображение в новой вкладке, чтобы увидеть имя файла. (Конечно, если бы я сохранял изображение, красивое, описательное имя файла определенно сделало бы мой день!) Мы выяснили, что теги ALT и TITILE, независимо от того, насколько они важны для SEO, на самом деле не играют большой роли в восприятии изображения посетителем. Именно здесь на помощь приходят подписи. Согласно исследованию Kissmetrics, было установлено, что подписи к изображениям читаются на 300% чаще, чем основной текст. Это гораздо больше глаз, чем ожидалось.
Отзывчивый дизайн. Это пример подписи к изображению! Если ваши подписи привлекают внимание, то велика вероятность того, что читатель дочитает до конца и прочитает то, что вы хотите сказать. Подумайте об этом следующим образом:
- Тег TITLE – лаконичное имя файла изображения
- Тег ALT – это описательная запись содержимого изображения
- Подпись предназначена для читателя. Это сочетание тегов TITLE и ALT, призванное улучшить впечатления посетителя от чтения.
Вы не представили файл Sitemap изображений
Веб-сайт – это, по сути, набор взаимосвязанных HTML-страниц. Карта сайта – это документ, содержащий информацию о том, как структурированы все страницы вашего сайта. Как правило, они не содержат информации об изображениях на вашем сайте. Именно здесь на помощь приходят карты сайта изображений. Udinra All Image Sitemap – идеальный плагин для этой работы. Плагин поддерживает плагины слайдеров изображений, такие как NextGen Gallery и Envira Gallery; плагины электронной коммерции, такие как WooCommerce, Easy Digital Downloads, и плагины конструктора страниц, такие как Visual Composer, Site Origin и др.
Оптимизация производительности изображения
Общая производительность сайта является важнейшим фактором SEO. Когда дело доходит до оптимизации производительности, ничто не идеально – всегда есть место для улучшения. Возьмем недавний пример, когда Google сократил размер своего логотипа с 14 000 байт до 305 байт и все еще продолжает развиваться. Ниже приведены несколько советов по оптимизации изображений, которыми мы делились в наших предыдущих постах.
Вы не оптимизируете свои изображения
- Одним из лучших способов оптимизации изображений является использование таких инструментов, как TinyPNG, для уменьшения и оптимизации размера файла.
- Также необходимо определить максимальный размер для всех изображений и изменить размер всех изображений, превышающих максимальный размер.
- Но прежде чем приступить к вышеперечисленным действиям, вам необходимо изучить правильный формат сохранения изображения.
Я предполагаю, что у вас уже все готово. Если нет, пожалуйста, просмотрите наш первый пост – это все, о чем мы говорим!
Вы не используете отзывчивые изображения
Мы все пользуемся отзывчивыми веб-сайтами. В наше время абсолютно необходимо иметь сайт, удобный для мобильных устройств. В противном случае вы потенциально теряете клиентов, не говоря уже о SEO-показателях. (Да, Google действительно наказывает вас, если ваш сайт не дружелюбен к мобильным устройствам). Теперь давайте обсудим отзывчивые изображения. В WordPress 4.4 свойство отзывчивых изображений включено по умолчанию. Когда вы загружаете изображение, WordPress создает несколько его версий для разных размеров экрана. Благодаря новой поддержке отзывчивых изображений WordPress включает все доступные размеры изображения в атрибут srcset. Это позволяет веб-браузеру выбрать один из вариантов и загрузить наиболее подходящий размер изображения в зависимости от размера экрана устройства. Браузер игнорирует остальные размеры, что позволяет экономить полосу пропускания и ускоряет загрузку страницы. Если по какой-то причине вы не обновили WordPress до версии 4.4, вы можете использовать плагин RICG Responsive Images, чтобы получить тот же набор функций. Если вы используете последнюю версию WordPress, этот плагин вам не нужен.
Вы не используете бесплатную CDN
Второй способ повышения производительности – использование бесплатной CDN, такой как Photon из очень популярного модуля Jetpack. Мы любим Jetpack по многим причинам, и Photon – одна из них. Если вам интересно, что такое Photon, то это бесплатная служба CDN для изображений от WordPress. Модуль Photon в Jetpack берет все изображения с вашего сайта и хранит их в глобальной сети распространения контента WordPress.com. Изображения выгружаются с вашего сервера, загружаются быстрее, и вы экономите на стоимости полосы пропускания. Что еще вам нужно?
Вы не ленитесь загружать изображения
Вонючий кот, ленивый кот, чем тебя кормят? При включенной ленивой загрузке изображения загружаются, когда они появляются в области просмотра. Допустим, вы читаете статью из 2000 слов о лучших решениях для подкастинга на WordPress. Вам не нужно просматривать все изображения, пока вы не дойдете до конца статьи. Включение ленивой загрузки значительно сокращает время загрузки и экономит пропускную способность сайта как для вас, так и для посетителей. Плагин BJ Lazy Load – это ваш ответ. С более чем 50 000 активных установок, вы не можете ошибиться. Скачайте и активируйте плагин, и пусть волшебство начнется одним щелчком мыши. Однако, с другой стороны, есть некоторые потенциальные подводные камни, когда речь идет о ленивой загрузке изображений. Если вы не будете осторожны, то рискуете навредить своим SEO-показателям. Будьте уверены, если вы используете рекомендованные плагины, то все будет в порядке. Кроме того, если вы используете другие плагины для ленивого входа, попробуйте Fetch as Google для сайтов, чтобы убедиться, что все ваше содержимое может быть правильно просмотрено поисковыми системами.
Несколько советов по использованию изображений
Следующие советы не следует рассматривать как ошибки, а скорее как общие рекомендации, которые могут улучшить качество вашего контента.
Откажитесь от стандартных стоковых фотографий
Что первое приходит вам на ум, когда вы видите это изображение? Нет ничего более отталкивающего, чем изображение улыбающегося вам сотрудника службы поддержки на странице “Контакты”. Или очевидная стоковая фотография моделей на странице “О нас” или, что еще хуже, “Присоединяйтесь к нам”. Все настолько привыкли к ним, что почти мгновенно узнают их. Если вы хотите, чтобы потенциальный клиент или покупатель связался с вами – либо сделайте отличное фото команды поддержки, либо будьте проще – сделайте полезную контактную форму. Но не используйте (ради Бога) стоковые изображения на страницах “О нас”, “Присоединяйтесь к нам” или “Свяжитесь с нами”. Сегодня они наверняка принесут больше вреда, чем пользы.
Используйте GIF-файлы, когда это возможно
С ростом популярности GIF, начиная с 4chan и 9GAG и заканчивая всеми основными социальными сетями (да, я смотрю прямо на ваши Facebook и Twitter) и клавиатурами, поддерживающими их; невозможно отрицать тот факт, что GIF здесь, чтобы остаться. Если вы рассматриваете возможность использования GIF в своих сообщениях (и уже смирились с этим фактом), GIPHY – отличное место для поиска хороших GIF-изображений!
Используйте лицензии осторожно – #CC0
Говорят, что никогда нельзя быть слишком осторожным. Нет, я не призываю вас начать строить свой постапокалиптический бункер. Но когда речь заходит о лицензировании изображений, лучше всего выбирать изображения CC0, которые можно свободно скачивать и использовать. Если у вас есть хороший маркетинговый бюджет, купите подписку на Shutterstock и загрузите несколько великолепных фотографий без роялти для вашего блога и информационных бюллетеней.
Заключение
Завершая цикл статей, давайте рассмотрим, что мы узнали до сих пор:
- Используйте правильный формат изображения
- Советы по загрузке стоковых фотографий в посты блога
- Оптимизация изображений – размер, качество и сохранение для веб
- Управление изображениями при изменении URL сайта WordPress
- Импорт внешних изображений в WordPress
- Предотвращение горячих ссылок на изображения в WordPress
- Распространенные ошибки в SEO изображений WordPress
- Ленивая загрузка изображений
- Ситемы изображений в WordPress
- Отзывчивые изображения в WordPress
