Как оптимизировать картинки для блога?

Недавно мы обсуждали, как важен для блога качественный графический контент. В комментах к статье было несколько вопросов, ответы на которые стоят отдельной публикации. Сегодня мы поговорим об оптимизации картинок, а именно, об атрибутах alt и title.

Продвижение по картинкам – большая тема. Всегда ли оно возможно и нужно? Как максимально подружить свои иллюстрации с поисковиками? Что писать в тегах?

Важность атрибутов alt и title

Сначала давайте определимся, о чем вообще идет речь. Вот, как выглядит html-код изображения, добавленного на блог или сайт:

<img src=“http://site.ru/…/kartinka.jpg” alt=“” />

Использованные теги и атрибуты:

• <img /> — указывает, собственно, что перед нами картинка;
• scr=“…” – атрибут, в котором указывается адрес залитой картинки;

Неважно, ведем ли мы блог на WordPress или на Blogspot – мы используем возможности редактора для подгрузки изображений. Поэтому, теоретически, можем и не лазить в html-код – редактор сам пропишет эти минимальные параметры. Поисковый робот увидит, что тут у нас картинка и… собственно говоря, все. Он не узнает, что на ней, не будет ранжировать никоим образом.

• title=“…” – атрибут, который не является обязательным. Но он нужен, во-первых, потому что это красиво – читатель наводит курсор на вашу картинку и видит всплывающую надпись. Текст, который будет показан, мы и пишем в кавычках. Во-вторых, поисковики отметят ключевые слова, использованные в описании.
• alt=“…” – атрибут, который признан обязательным великой и могучей организацией W3C (Консорциум Всемирной Паутины). Дело в том, что слова, записанные в кавычках, будут выводиться вместо картинки там, где отображение графики невозможно. А это – прямое удобство для пользователя, который не должен быть дискриминирован по признаку мощности своего компа. В общем, даже если мы не прописываем ничего для этого атрибута, он, скорее всего, будет добавлен редактором (требования W3С обязательны к исполнению).

Что и как писать в атрибутах alt и title?

— Первый вопрос: писать ли вообще что-то?

Нередко я не хочу афишировать картинку для поисковиков, например. Если она не очень уникальна. Тогда я не прописываю для нее alt. Многие советчики по продвижению блогов меня осудят. Но рассказываю, как на духу – есть за мной этот грех) Title прописываю всегда, т.к. мне очень нравится эффект всплывания надписи.

Но будем ориентироваться на примерных блоггеров, которые используют все доступные методы продвижения. Они обязательно прописывают текст для обоих атрибутов. Кстати, мне задали вопрос: не нужно ли писать текст для alt и title латиницей? – Отвечаю коротко: НЕТ!

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

— Теперь о том, как максимально интересно для поисковиков заполнить текст для атрибутов alt и title.

Выбирайте для них фразы, которые:

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

<p><img src=“http://site.ru/…/kartinka.jpg” title=“вот так нужно оптимизировать картинки” alt=“оптимизация картинок” />Я долго не могла взять в толк, насколько важно оптимизировать картинки, которые иллюстируют блог. Но теперь, знаю об этом гораздо больше!</p>

Какие еще атрибуты есть у тега img?

Нередко для картинок прописывается стиль. Выглядит это так:

<img class=“your_style” src=“http://site.ru/…/kartinka.jpg” title=“вот так нужно оптимизировать картинки” alt=“оптимизация картинок” />

Тут тоже не лишне вспомнить о стандартах W3C, которые требуют создавать отдельные таблицы стилей. А в коде содержимого (контента) только ссылаться на этот внешний источник. Такой ссылкой и является атрибут class=»название_стиля». Тут может быть прописано положение картинки, относительно текста, наличие рамок, эффектов и т.д.

Для изображения могут быть даны размеры, которые отображаются в атрибутах width=»300″ (ширина) и height=»400″ (высота). Абсолютные числа – это точный размер в пикселях. Если изменить значения – изменится и размер картинки. Можно задавать значения в процентах. Они будут задавать размер, относительно величины картинки, загруженной на сервер.

Вот, как выглядит код картинки, снабженный всеми атрибутами, описанными выше:

<img class=“your_style” src=“http://site.ru/…/kartinka.jpg” title=“вот так нужно оптимизировать картинки” alt=“оптимизация картинок” width=“300” height=“400” />

Если изображение само является гиперссылкой, то его код будет заключен в тег <a>:

<a href=“http://site.ru”><img class=“your_style” src=“http://site.ru/…/kartinka.jpg” title=“вот так нужно оптимизировать картинки” alt=“оптимизация картинок” width=“300” height=“400” /></a>

Это далеко не все, что стоит знать о картинках, которые мы загружаем на блог. Но на сегодня – достаточно информации. Если я что-то забыла написать именно о тегах и атрибутах – дополните меня в комментах.