Изображения привлекают внимание. Правильные изображения на вашем веб-сайте могут привлечь интерес клиентов, стимулировать повторные посещения и увеличить шансы на успешную конверсию продаж. Но они также могут служить второстепенной цели, выступая в качестве ссылок на критически важный контент, интересную информацию или даже внешние ресурсы.

Но как превратить картинку в ссылку? В этой части мы рассмотрим возможные причины взаимосвязи изображения / ссылки, передовой опыт при связывании изображения и предложим пошаговое руководство по превращению изображения в ссылку с помощью HTML.

Зачем превращать картинку в ссылку?

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

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

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

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

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

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

Как превратить картинку в ссылку с помощью HTML

Если вы решили превратить картинку в ссылку, возникает очевидный следующий вопрос: как?

Вот наше пошаговое руководство по превращению изображения в ссылку с помощью HTML:

Шаг 1: Выберите свое изображение.

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

Шаг 2: Оптимизируйте размер и масштаб.

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

Шаг 3. Загрузите изображение и получите URL.

Затем вам нужно загрузить свое изображение на своего провайдера веб-хостинга. Это может быть платформа CMS или служба хостинга веб-сайтов, но независимо от того, как размещено ваше изображение, оно должно быть загружено в Интернет, чтобы вы могли получить URL-адрес его местоположения – место, где ваш HTML-код будет «искать» ваше изображение для отображения. это правильно.

Шаг 4. Укажите целевой URL.

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

Шаг 5: Создайте свой код HMTL.

Пришло время создать свой HTML-код. Вот основная структура:

<a href="LandingPageURL">
<img src="ImageURL" alt="text describing the image">
</a>

Теги «a» и «/ a» указывают на наличие ссылки, а тег «img» ссылается на ваше конкретное изображение. В приведенном выше примере целевой URL заменяет текст LandingPageURL в кавычках, а URL-адрес местоположения заменяет текст ImageURL.

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

Шаг 6: Вставьте свой код по мере необходимости.

Вооружившись настроенным кодом HTML, теперь вы можете вставить изображение по ссылке на любую страницу, к которой у вас есть доступ администратора и которая поддерживает HTML. Если вы выполнили все шаги правильно, конечным результатом должно быть интерактивное изображение, которое перенаправляет пользователей на определенный целевой URL.

Sight Unseen: лучшие практики связывания изображений

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

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

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

Будь проще

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

Предложить резервную копию

Ссылки первого поколения были очевидными, непривлекательными и легко заметными благодаря яркому синему цвету и жирному подчеркиванию. Парадокс? Несмотря на существенные улучшения в HTML и других языках разметки, которые делают возможными гораздо более тонкие и упрощенные ссылки, многие пользователи вынуждены немедленно распознавать традиционный формат ссылок. Результат? Стоит предложить знакомую текстовую резервную копию любой ссылки на изображение, которую пользователи сразу поймут.

Ограничьте свои ссылки

Слишком много ссылок на любой странице сайта – катастрофа, и это вдвойне для изображений. Не для каждого изображения нужна собственная ссылка, потому что не каждый фрагмент контента на вашем сайте должен ссылаться на другие страницы или ресурсы. В этом случае цель является приоритетом: прежде чем превращать любое изображение в ссылку, задайте простой вопрос: почему? Если нет веской причины, не вносите изменений.

Регулярно просматривайте

Последний, но тем не менее важный? Регулярно просматривайте свои ссылки, чтобы убедиться, что они по-прежнему актуальны. Например, если линейки продуктов или цены меняются, старые ссылки могут быть устаревшими и отправлять пользователей на страницы, которые больше не актуальны, или возвращать ошибку 404. Регулярная проверка помогает гарантировать, что ссылки всегда активны и применимы.

Нет недостающих ссылок

Добавление ссылок на ваши изображения – отличный способ улучшить доступ пользователей и гарантировать, что они могут найти то, что им нужно, когда им это нужно, на вашем веб-сайте. Предупреждение? Убедитесь, что ваши ссылки согласованы, кратки и регулярно обновляются, чтобы отражать текущий контент.

Источник записи: https://blog.hubspot.com