Как правильно разместить картинки на сайте

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

Главное правило, которого я придерживаюсь, размещая картинки и любой другой контент на сайте, — совмещение полезного с приятным. Расшифрую немного: я стараюсь, чтобы картинки и тексты радовали глаз читателя, их было удобно рассматривать или читать, и в то же время приносили пользу и максимально воспринимались поисковыми системами. Уклон в какую-то одну сторону нарушает гармонию.

1. Даем картинке правильное название

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

2. Загружаем картинку на сайт

Я, как копирайтер и веб-райтер, первичным все-таки считаю текст, поэтому его я размещаю первым. Форматирую, ставлю ссылки и полностью готовлю к публикации. Затем перехожу к картинкам. Первую картинку я всегда размещаю в самом начале поста: ставлю курсор перед первой буквой и вызываю окошко «Добавить изображение», где и происходит заливка картинки.

3. Правильно заполняем атрибуты

Атрибуты это те поля, которые описывают картинку и которые нам предлагает заполнить редактор WordPress, при добавлении картинки. Многие легкомысленно или опасливо пропускают их и очень зря! Помогите поисковикам и своим читателям понять, что на картинке.

Некоторые рекомендации по заполнению атрибутов:

— в заголовке (title) я обычно сохраняю название картинки, но пишу его кириллицей: оно будет отображаться на сайте при подведении к изображению курсора и появится как подпись к картинке в галерее Lightbox Plus (если у вас установлен это плагин);

текст (альтернативный текст) – перефразированный заголовок, но тоже с ключевой фразой, этот текст отображается в том случае, если по каким-то причинам не показана сама картинка (отключен в браузере и т.д.),

— поле подпись можно заполнять или оставить свободным, при заполнении текст появится на сайте под картинкой, поэтому это уже больше вопрос внешнего вида (я не заполняю),

— поле описание обязательно к заполнению – кратко опишите, что на картинке, не забывая о ключевых фразах поста,

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

4. Ссылка

Правильность заполнения этого поля вызывает наибольшее количество споров среди оптимизаторов. Кто-то настаивает на том, что должна быть ссылка на картинку, кто-то предлагает ставить ссылку на пост. Я не буду теоретизировать, скажу, как я делаю: оставляю ссылку на картинку, хотя бы для того, чтобы в случае необходимости картинку можно было включить в галерею.

5. Параметры форматирования

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

А теперь закрепим все сказанное серией картинок: 

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

Если вам интересна тема правильного размещения контента на сайте, посмотрите подборку статей блога о контент-менеджменте.

А если остались какие-то вопросы на эту тему, пишите в комментариях. Чем смогу, помогу.

Еще по теме:

2 комментария

  1. Ольга Декабрь 22, 2014 4:44 пп  Ответить

    Алина, спасибо за статью! Все четко, ясно и понятно. :wink:

Добавить комментарий

:wink: :twisted: :roll: :oops: :mrgreen: :lol: :idea: :evil: :cry: :arrow: :?: :-| :-x :-o :-P :-D :-? :) :( :!: 8-O 8)