Правильный HTML код картинки или оптимизация изображения сайта | HTML & SEO

HTML код картинки

Изображение на языке HTML имеет вид:

<img src="URL" />

Генератор HTML-кода изображения:

Зачем нужна SEO оптимизация изображения для поисковиков?

Поисковый робот не может понять что изображено на фотографии. Оптимизируя картинки (подробные рекомендации Гугла, Яндекса) мы даём сигнал поисковой системе, что наш рисунок нужно показывать по таким-то фразам [что такое ключевые слова].

С некоторых пор, у человека нет нужды переходить на сайт, так как и в Яндекс.Картинках, и в Google.Картинках фото представлены в полный рост, а не миниатюрами. Фактически это плагиат поисковыми гигантами изображений вебмастера. А значит были и случаи судебного разбирательства, когда Google выплачивал определённые суммы, и закрытие от индексации изображений в robots.txt или с помощью HTTP заголовока.

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

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

Параметр scr

src - адрес файла рисунка. Наиболее популярны форматы JPEG, PNG и GIF.

Желательно, чтобы URL (пример, http://4.bp.blogspot.com/-eJraU5lCufs/UFa8PpMUv8I/AAAAAAAADLQ/Y5SGHBd91-Q/s1600/smail-bolshoi-palets-vverh.gif):

  1. был осмысленным,
  2. написан латинскими буквами, если домен вида shpargalkablog.ru; или кириллическими при шпаргалкаблог.рф,
  3. строчными символами,
  4. в качестве разделителя слов использовалось тире, а не пробелы.
Для реализации вышесказанного, сначала изображение сохраняем на компьютер, присваиваем нужное название, а затем добавляем на блог/сайт.

Атрибут alt

alt - альтернативный текст фотографии, видимый в браузере, если не отобразится изображение. В данном тексте желательно использовать ключевые слова, но не все подряд, а именно те, которые относятся к картинке. Длину делать желательно не более 16 слов в Google [эксперимент Devaka] или 280 символов для Яндекса [эксперимент Devaka].

Советую ко всем рисункам прописывать этот параметр, поскольку в Спецификации HTML он обозначен как "необходимый".

<img src="адрес" alt="текст" />
Пример: Смайлик большой палец вверх

Атрибут title

title применяется, если нужно показать всплывающую подсказку при наведении курсора мыши на фотографию. В отличии от alt, title не уделяется столь большого значения для тега <img/>, а, следовательно, его использование не обязательно [см. более подробные исследования].

<img src="адрес" alt="текст" title="текст1" />
Пример (наведите на смайла курсор мышки): Смайлик большой палец вверх

Атрибут width×height

Для ускорения загрузки страницы, желательно указывать:

  1. width - ширина изображения,
  2. height - высота изображения.

Они должны совпадать с реальными размерами файла. Иначе говоря, если меняете размер фото, то нужно менять и размер файла картинки [тут эта мысль раскрыта более доходчиво].

<img src="адрес" alt="текст" width="значение" height="значение" />

Для резиновых сайтов предложено несколько техник. Я ограничилась пока таким незамысловатым кодом (он далёк от идеала):

@media (max-width: 59em) {
  img {max-width: 100%; height: auto;}
}

То есть пока максимальная ширина экрана не достигла 59em нужно использовать данные, прописанные в теге img. При ширине экрана меньше 59em рисунок становится резиновым.

Как убрать рамку вокруг картинки в IE

По умолчанию рамка вокруг изображения в Internet Explorer отображается в случае, когда фото является ссылкой. Чтобы её убрать, нужно прописать стиль CSS:

<style>
a img { border: none; }
</style>

Как расположить картинку по центру блока

<img src="http://4.bp.blogspot.com/-eJraU5lCufs/UFa8PpMUv8I/AAAAAAAADLQ/Y5SGHBd91-Q/s1600/smail-bolshoi-palets-vverh.gif" alt="Смайлик большой палец вверх" height="104" width="147" title="Отлично!" style="display: block; margin: 0 auto;"/>
Смайлик большой палец вверх

Как расположить картинку на одном уровне с текстом (по центру строки)

То есть не так Смайлик большой палец вверх. Свойственно для маленьких смайликов.

<img src="http://4.bp.blogspot.com/-eJraU5lCufs/UFa8PpMUv8I/AAAAAAAADLQ/Y5SGHBd91-Q/s1600/smail-bolshoi-palets-vverh.gif" alt="Смайлик большой палец вверх" height="104" width="147" title="Отлично!"/>

А так Смайлик большой палец вверх, что выглядит более эстетично.

<img src="http://4.bp.blogspot.com/-eJraU5lCufs/UFa8PpMUv8I/AAAAAAAADLQ/Y5SGHBd91-Q/s1600/smail-bolshoi-palets-vverh.gif" alt="Смайлик большой палец вверх" height="104" width="147" title="Отлично!" style="vertical-align: middle;"/>
Смайлик большой палец вверх
<img src="http://4.bp.blogspot.com/-eJraU5lCufs/UFa8PpMUv8I/AAAAAAAADLQ/Y5SGHBd91-Q/s1600/smail-bolshoi-palets-vverh.gif" alt="Смайлик большой палец вверх" height="104" width="147" title="Отлично!" style="float: right; margin: 0 5px;"/> Остальное содержание.

Как сделать чтобы картинка обтекала текст слева

Смайлик большой палец вверх
<img src="http://4.bp.blogspot.com/-eJraU5lCufs/UFa8PpMUv8I/AAAAAAAADLQ/Y5SGHBd91-Q/s1600/smail-bolshoi-palets-vverh.gif" alt="Смайлик большой палец вверх" height="104" width="147" title="Отлично!" style="float: left; margin: 0 5px;"/> Остальное содержание.
в f t
наверх ↑

10 комментариев:

Павел Чистяков
В Blogger-е, кстати, все добавляемые картинки оборачиваются в таблицу, что уж слишком старомодно, согласитесь. Всё жду, когда у разработчиков wysiwyg-редактора дойдут руки обновить его.
NMitra
Да, действительно странно. Они делали так для создания рамок, окружающих изображение и описание. Я попыталась развить тему http://shpargalkablog.ru/2010/08/podpis-kartinki-html.html Но всё же с классами приходится колдовать да и не во всех браузерах можно найти поддержку. В Хроме как всегда косяк с картинками вышел. Так что я тоже отложила.. ))
Павел Чистяков
Эм, а о каком хромовском косяке идёт речь?
NMitra
При width: min-content; не учитывается ширина картинки.
Анонимный
Добрый вечер!
В блоге www.onbags.ru картинки сделаны как ссылки, при нажатии на которые (к примеру прав. кл. мыши) вокруг картинки с некоторым отступом от ее края появляется рамка фокуса (пунктирная тонкая такая), так вот если отключить все margin в стилях, то внизу картинки отступ все равно остается. Помогите разобраться, уже все перепробовали... (Использую FireFox 35). Спасибо! Максим.
NMitra
Добрый вечер,

.PopularPosts img {
padding-top: 0;
}
.PopularPosts img {
padding-right: 0;
}
Анонимный
А как сделать, чтобы уже под картинкой был следующий текст?
NMitra
Вы имеете ввиду так http://shpargalkablog.ru/2010/08/podpis-kartinki-html.html ?
Анонимный
Как сделать так, чтобы при написании сообщений блога на Blogger фото было слева, а текст располагался справа?
NMitra
Добавьте картинку в статью, а потом нажмите на нее. Появится меню, там что-то такое было (Выровнять по левому краю): http://shpargalkablog.ru/2012/11/nastroit-blogger.html
Я делаю через вкладку HTML и меняю код как мне будет удобно (см выше)