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

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

Недавно мы обсуждали, как важен для блога качественный графический контент. В комментах к статье было несколько вопросов, ответы на которые стоят отдельной публикации. Сегодня мы поговорим об оптимизации картинок, а именно, об атрибутах 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>


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

Оставайтесь на связи! Блоготей пришлет вам новые статьи на почту!
Введите свой E-MAIL:

     Katyaru 29.05.2012


    
Читайте БлоготеЙ! на Google+
Читайте БлоготеЙ! на Фейсбуке

К записи "Как оптимизировать картинки для блога?" оставлено 19 коммент.

  1. Ай, как здорово! Спасибо огромное, буду вникать со свежей головой и постепенно!.. ))) Вероятно, придется у тебя тут палатку разбить… )))

    [Ответить]

    katyaru отвечает:

    И это только начало того, что я собираюсь рассказать про картинки! (зловещий смех)

    [Ответить]

  2. Насчёт латиницы… я сталкиваюсь со случаями, когда у людей нет русского шрифта или клавы, или лень шрифты переключать, и они пишут латиницей. Так что иногда оставляю один из атрибутов в таком виде: pirog smetannik. И в поиске часто проскакивает набранное латиницей.

    [Ответить]

    katyaru отвечает:

    Ну так я об чем и говорю: в каком виде собираетесь продвигать запрос — в том и пишите. Важное, кстати, замечание, спс!

    [Ответить]

  3. ссылкой картинку делала, а вот где все остальное прописывать, пока не научилась… думать надо

    [Ответить]

    katyaru отвечает:

    Вот прямо в коде картинки и прописывать, прям так и писать alt=»ключевая фраза» и т.д.

    [Ответить]

  4. Господи, как все сложно. Я только заголовок картинки пишу. А как он называется, не знаю.

    [Ответить]

    katyaru отвечает:

    Если он показыватся при наведении курсора на картинку — это «тайтл» или title. Для поискового ранжирования важен атрибут alt или «альт».

    [Ответить]

  5. Они и сами картинку иногда в поиск по теме статьи засовывают. Но по правилам, конечно, больше шансов.

    [Ответить]

    katyaru отвечает:

    Ну, мне однажды просто так ТИЦ 10 дали))) Но быстро отняли)))

    [Ответить]

  6. а я прописывала все почти с самого начала, правда в alt и title пишу одно и тоже надо будет разнообразить это дело, но есть пару фоток которые мне привели уже по несколько чекловек с поиска

    [Ответить]

    katyaru отвечает:

    Ваш блог, Анжелика, должен вообще продвигаться по фоткам, как локомотив! Желаю в этом большого успеха. Блогов с уникальным фото-контентом — мало!

    [Ответить]

  7. Никогда не уделяла должного внимания этому вопросу, а зря… Буду исправляться)

    [Ответить]

  8. Огромное спасибо!!!

    [Ответить]

    katyaru отвечает:

    Это еще не все) Продолжение следует!

    [Ответить]

  9. […] предыдущей статье мы обсудили, как сделать иллюстрации в блоге более привлекательным… для поисковых систем. Для этого нужно прописывать в […]

  10. […] уже обсудили вес иллюстраций в блоге и способы оптимизации картинок. Но остается еще один важный момент – контент на блоге […]

  11. […] видим знакомый атрибут title, который нам встречался и в коде для оптимизации изображений. Атрибут target=”_blank” указывает, что ссылка будет […]

  12. […] часто обсуждаем картинки для блога – они, мол, должны быть максимально большими и […]


девять + 9 =

Палю тему!
Гугл в помощь
Надо подписаться!

Введите свой E-MAIL:

Delivered by FeedBurner

Дружите с Блоготеем в соцсетях


Смотрите все ВИДЕО Блоготея на YouTube


Blogotey | 


Спутник Блоготея в Tumblr

Наверх.