Не так важно, пишите ли вы новую статью для своего блога или работаете над страницами продуктов, вы скорее всего, захотите добавить в них изображения.
А так ли это на самом деле полезно?
Сразу скажем, что ДА. Это отлично для SEO - картинки оживляют страницу и способствуют улучшению показателей.
Но как найти действительно подходящее изображение? Каким оно должно быть?
Читайте далее - мы ответим на эти и другие вопросы по теме.
Изображения - ключ к успеху
Изображения (при их правильном использовании, конечно) помогают лучше понимать статью.
Ну или получить более полное представление о товаре или услуге.
Пословица «лучше один раз увидеть, чем сто раз услышать» хоть и не применима к SEO в целом, но на 100% верна, когда речь идет о написании информационных статей или постов в социальных сетях.
Есть одна очень простая и действенная практика: добавляйте изображения к каждой статье или странице, чтобы сделать их привлекательнее и более запоминающимися. Поскольку поисковой ландшафт быстро меняется и уже не опирается только на текст, добавление визуала в любом случае пойдет на пользу SEO.
В условиях семимильного развития искусственного интеллекта и технологий оптимизаций изображений (и видео в том числе) визуальный формат облегчает поисковым системам и людям жизнь. Так, при переходе на страницу Google Images можно заметить, что сейчас она снабжена различными фильтрами и метаданными.
Это свидетельствует о том, что Google все лучше понимает, что находится на изображении и как оно вписывается в общий контекст.
Как найти «правильное» изображение
Всегда лучше использовать оригинальные изображения, чем стоковые. Так, на странице «О нас» должны быть фотографии вашей реальной команды, а не какие-то случайные люди.
Что касательно статей, то они должны содержать изображения, соответствующие теме. Если добавлять случайную фотографию лишь чтобы чуть лучше ранжироваться, то это заведомо неправильный подход.
Кроме того, старайтесь размещать изображение рядом с соответствующим текстом, чтобы получалась своего рода иллюстрация. Здесь все просто: картинка со связанным текстом лучше ранжируется по ключевому слову.
Мы еще вернемся к этому чуть позже.
А какие есть альтернативы?
Нет возможности добавить оригинальные изображения? Тогда попробуйте Flickr: Creative Commons и Unsplash. Но не забывайте проверять лицензию и указывать фотографа.
Но если твердо решили обойтись стоками, выбирайте те, которые выглядят наиболее правдоподобно.
Кстати, неплохой альтернативой фотографиям являются иллюстрации, графики и диаграммы.
А еще GIF-файлы.
Однако несмотря на популярность последних, в их отношении следует соблюдать умеренность. Они могут сделать контент сложнее для восприятия, поскольку анимация перетягивает внимание на себя. Гифки также замедляют работу страницы.
Подготовка изображений
После того как вы нашли подходящий контент, будь то фотография, иллюстрация или диаграмма, вашим следующим шагом будет его оптимизация для сайта.
Выберите имя
Google поймет содержание картинки намного быстрее и точнее, если использовать ключевую фразу в названии файла. Если вы, скажем, пишете статью о Нотр-Даме и используете изображение c восходом солнца над ним, то имя файла должно быть notre-dame-paris-sunrise.jpg.
Ну или что-то подобное. Но уж точно не набор случайных символов.
Выберите формат
Не существует единственно правильного формата. Все зависит от того, как вы хотите использовать изображение. Вкратце, мы рекомендуем следующее:
- Для больших фотографий или иллюстраций выбирайте JPEG. Он обеспечит хорошую цветопередачу и четкость при относительно небольшом размере.
- Используйте PNG, если необходимо сохранить прозрачность фона.
- Используйте WebP, чтобы сохранить хорошее качество при меньшем размере файла.
- Для логотипов и значков присмотритесь к SVG. С помощью CSS или JavaScript, кстати, можно изменять их размер - без потери качества.
Если знаете, что значительная часть вашей аудитории использует определенные браузеры или устройства, проверьте, поддерживают ли они выбранный вами формат. Это можно сделать на canIuse.com или аналогичных сервисах.
Оптимизируйте
Время загрузки имеет огромное значение для удобства пользователей и SEO.
И картинки существенно влияют на время загрузки - особенно когда речь идет об огромных изображениях. Многие часто ошибочно грузят файлы с разрешением что-то вроде 2500×1500 пикселей, чтобы на сайте это потом выглядело как 250×150 пикселей.
Это огромная ошибка.
Даже если изначально большое изображение будет отображаться в гораздо меньшем размере, вам все равно придется грузить его полностью. Что тогда делать? Например, можно ужать размер с помощью сторонних утилит. Плагины WordPress предоставляют загруженную картинку в разных размерах, чтобы вы могли выбрать наиболее подходящий для себя вариант.
Используйте srcset
Картинки должны иметь атрибут srcset, который позволяет использовать разные изображения в зависимости от ширины экрана, что особенно полезно для мобильных устройств.
Уменьшите размер
Да, как мы уже говорили чуть выше: WordPress сам сжимает загружаемые изображения. Но, к сожалению, часто этого оказывается недостаточно.
Чтобы еще сильнее уменьшить размер, можно удалить EXIF. Это метаданные. Они легко убираются с помощью ImageOptim или сайтов по типу Squoosh, JPEGmini, jpeg.io или даже Kraken.io.
После оптимизации можно протестировать страницу с помощью Google PageSpeed Insights, WebPageTest.org или Pingdom.
Улучшение LCP в Core Web Vitals
Указание ширины и высоты изображений в CSS может значительно улучшить восприятие и производительность. Задавая четкие размеры изображений, можно оптимизировать макет и предотвратить смещение содержимого во время загрузки изображений.
Эта особенно важно для улучшения основных веб-показателей - в том числе и Largest Contentful Paint (LCP).
При определении свойств ширины и высоты изображений в CSS браузер может выделить необходимое пространство еще до окончательной загрузки картинки. Это позволяет точнее отрисовать содержимое и избегать неожиданных смещений макета.
И да, это также способствует ускоренному рендерингу - страница будет работать плавнее и быстрее.
Чтобы задать ширину и высоту можно использовать либо встроенные стили, либо внешние таблицы.
Вот пример:
img {
width: 500px; /* Ширина */
height: 300px; /* Высота */
}
Вместо фиксированных значений для пикселей используются проценты или vw, vh - чтобы сделать картинку отзывчивой и адаптивной к разным дисплеям.
Отметим, что указание размеров в CSS не отражает реальный размер файла. Чтобы оптимизировать его для ускорения загрузки рекомендуется сжимать и изменять картинки перед загрузкой на сайт.
Задавая ширину и высоту в CSS, вы повышаете общую производительность сайта, его визуальную стабильность и удобство пользования. Сочетайте эту практику с подбором правильных форматов и сжатием для достижения максимального эффекта.
Добавление изображения в статью
Несмотря на то, что Google совершенствуется в распознавании изображений, целиком и полностью полагаться на него пока не стоит. Предоставьте как можно больше контекста для изображения.
О том, как это сделать, мы расскажем ниже.
Когда изображение готово, не стоит просто бросать его в статью где попало. Как уже говорили выше, крайне желательно добавить его рядом с релевантным текстом - это понравится и людям и поисковым машинам.
Подписи
Подпись - это текст, сопровождающий изображение. Почему они важны для SEO? Потому что значительно упрощают восприятие статьи. Еще в 1997 году Якоб Нильсен писал:
«Элементы, улучшающие восприятие, - это заголовки, крупный шрифт, жирный, выделенный текст, маркированные списки, графики, подписи, тематические предложения и оглавления».
Нужно ли добавлять подписи к каждому изображению? Нет. Только там, где это реально имеет смысл.
Alt-текст
Alt-текст - это полноценная замена изображению, но только в текстовом виде. Это описание происходящего на картинке.
Alt-тексты служат для повышения доступности. Кроме того, в них также можно включать и ключевые фразы, что положительно скажется на SEO.
Но не следует заполнять ключевыми словами alt-текст каждого изображения. Самое главное - описать, что изображено на картинке, чтобы поисковые системы и люди могли это понять.
И да, если картинка используется исключительно в декоративных целях, то она не нуждается в alt-тексте.
Title
В некоторых браузерах при наведении курсора на картинку текст отображается в виде всплывающей подсказки. Честно сказать, это достаточно спорный подход. Все больше людей отказывается от их использования.
Почему?
Давайте послушаем мнение Mozilla на этот счет:
«Title имеет ряд проблем с доступностью. В основном связанных с тем, что большинство браузеров не показывает его, если вы не наведите курсор мыши (то есть пользователи без нее никак не смогут получить доступ к контенту)»
Структурированные данные
Добавление структурированных данных может помочь поисковым системам отображать изображения в Google Картинках (ну или в аналогичном месте любого другого поисковика). И хотя структурированные данные не способствуют ранжированию, они помогают добиться более насыщенного листинга.
Google предлагает проставлять всем изображениям атрибут image, чтобы у тех был шанс попасть в Картинки.
OpenGraph и перенос изображений в социальные сети
Если добавить тег изображения в раздел <head> HTML-страницы, как показано ниже:
<meta property="og:image" content="https://example.com/link-to-image.jpg" />.
То это позволит включить изображения в ваш ресурс в социальных сетях. (OpenGraph также используется для платформ по типу Pinterest).
Если все сделали правильно, но картинка не отображается, попробуйте очистить кэш.
Файлы sitemap для изображений
Sitemap-файлы для изображений просто предоставляют Google больше информации. С их помощью можно указать Google на то, что вы хотели бы ранжировать.
CDN для оптимизации
CDN - один из наиболее популярных способов оптимизации сайта. Некоторые компании, предоставляющие CDN, также имеют специальные CDN для изображений. Их цель заключается в том, чтобы оптимизировать изображения и как можно быстрее показывать их посетителям.
Более того, эта инфраструктура позволяет вам самостоятельно определить, что и как должно загружаться. Например, можно преобразовать все PNG в WEBP «слету», поскольку вторые, например, загружаются значительно быстрее.
CDN изображений имеет множество опций для тонкой настройки этого процесса, но часто есть настройки по умолчанию, которые, вероятно, лучше всего подходят для большинства сайтов.
Существует множество CDN: Sirv, Cloudinary и Imagekit. Кроме того, платформы по типу Cloudflare позволяют самостоятельно определять размеры и форматирование.
SEO для изображений - это совокупность нескольких элементов. Поскольку Google с каждым днем все лучше распознает элементы на них, имеет смысл убедиться, что картинка способствует адекватному восприятию со стороны пользователя.
Помните об этих 12 моментах при добавлении изображения в статью:
- Используйте релевантное изображение, соответствующее тексту.
- Выберите хорошее имя файла.
- Убедитесь, что размеры самой картинки соответствуют ее размеру на сайте.
- По возможности используйте srcset.
- Уменьшайте размер для ускорения загрузки.
- Укажите ширину и высоту.
- Добавьте подпись, если уместно.
- Используйте alt-текст изображения. Но не используйте title.
- Добавляйте структурированные данные.
- Добавляйтетег OpenGraph.
- Используйте изображения в XML sitemap.
- Не пренебрегайте CDN.
Источник: https://yoast.com/image-seo/