Создание сайта от А до Я. Книга 3

Уже неплохо!

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

SEO оптимизация изображений для сайта

Внимание! Картинки берите не просто в Интернете, а на бесплатных фотостоках – https://unsplash.com/ (https://unsplash.com/), https://pixabay.com/ (https://pixabay.com/) и https://www.pexels.com/ (https://www.pexels.com/)

1.

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

 

2.Ниже картинки с помощью тега «p» вставляют её описание.

Подробное описание картинки 

Если сайт поддерживает html5 можно использовать теги «figure» и «figcaption».

В целях оптимизации используются атрибуты тега «img».

3. Атрибут «alt»

«alt» – отвечает за вывод описания изображения текстом на экран, когда браузер пользователя не может открыть картинку. Выглядит так:

Текст, являющийся описанием картинки, помещённый внутрь атрибута «alt» так же влияет на оптимизацию изображений, помещённых на страницы.

Нужно обходиться 50—60 символами, большие тексты плохо воспринимаются поисковыми роботами.

4.Атрибут «title»

Текст помещённый в title выводится как подсказка в момент наведения курсора мыши на картинку. Обычно в нем помещают дополнительные данные об изображении.

При установке изображения в её атрибутах обязательно надо прописать Titl – Заголовок и Alt – «альтернативный текст» или если картинка одна, то попросту ключевые фразы, соответствующие контенту страницы.

5.

«url» фотографии

Здесь нужно проставить адрес страницы, на которой находится картинка.

Человеко- понятный «url» несёт в себе информацию для пользователей, а также поисковых систем

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

Внимание! Часто допускается атрибуты title и alt делать одинаковыми до 10 слов.