Аудит от независимых экспертов

поможет сделать ваш сайт понятным для всех


 

 
 
 

Правильно используем изображения на сайте и учимся у профессионалов

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

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

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

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

В случае с шапкой сайта или любой другой графикой большого размера лучше использовать название, которое отображает предназначение этого графического элемента. Например: my-company-logo.jpg

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

Правильное наименование изображений позволит вам не просто находить их, но также привлечет значимый ссылочный сок.


Альтернативный текст изображения (Alt)
После того как вы загрузили изображение, не забудьте обязательно вписать атрибут альтернативного текста (alt).

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

Давайте посмотрим пример с включенными изображениями:



А вот то, что вы увидите, если изображения будут отключены:


При использовании alt-текста убедитесь, что он сообщает посетителям и поисковым системам, о чем это изображении. Используйте правильные ключевые слова. Старайтесь делать так, чтобы у КАЖДОГО изображения был уникальный альтернативный текст!

С точки зрения эстетики пишите каждое описание с большой буквы.

Атрибут заголовка изображения (title)
Зачастую недооцененная, но важная стратегия SEO-оптимизации заключается в применении к изображениям атрибута title.

Этот текст отображается при наведении на изображение курсора мыши:


Эта информация помогает пользователям И поисковым системам дифференцировать ваши изображения.

Используйте разные заголовки изображений, и старайтесь, чтобы они отличались от alt-текста.


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

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

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



Подписи к изображениям делать не обязательно, но вы можете использовать их тогда, когда к изображению требуется объяснение.

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

Изображения-ссылки
Как с точки зрения юзабилити, так и со стороны SEO-оптимизации есть некоторые соображения относительно того, чтобы использовать изображения в качестве ссылок.

Первое и самое важное, что стоит отметить, это «баг» в Wordpress, который он инициарует при загрузке изображения и вставки его в контент.


Wordpress по стандарту вставляет изображение в контент и подкрепляет его ссылкой, ведущей на ещё одну такую же страницу с таким же изображением. Для чего это нужно, я не понимаю!

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

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

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

Когда вы загружаете и вставляете изображение, не забывайте нажимать «NONE» рядом с URL ссылки (Link URL). Конечно же, эту функцию можно использовать когда вы загружаете большое изображение, для которого требуется отдельная страница.


В таком случае убедитесь, что вы не забыли включить подпись под изображением, которое РАССКАЗЫВАЕТ пользователю о том, что кликнув по изображению, он сможет увидеть его в полном размере.

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


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

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

 
Голосов: 4
Баллы рейтинга: 18

Сергей Немеров пишет:
18.04.2013 09:37
Респектос! Статья очень хороша!
Надежда Дроздова пишет:
20.05.2013 02:01
А мне не очень понравилось. Информативно и грамотно, но немного сумбурно и нелогично. Мне кажется, что абзацы о вордпрессе были здесь лишними. И очень жаль, что все примеры были англоязычными. А в остальном очень полезно-обязательно воспользуюсь советами.