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

Наложить красивый текст на фото можно с помощью следующих приложений.

– Pics Art; 144 мб рус

– Aviary; 39 мб рус

– InShot; 97мб рус бесплатно

– Camly 125 мб рус бесплатно (+много крутых наклеек);

– PicSee 126 мб рус бесплатно (текст в фигурных рамочках);

– https://ofont.ru/category/0 более 5000 русских шрифтов

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

Уже неплохо!

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

Внимание! Картинки берите не просто в Интернете, а на бесплатных фотостоках – https://unsplash.com/, https://pixabay.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» несёт в себе информацию для пользователей, а также поисковых систем

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