banner banner banner
Создание сайта от А до Я. Книга 3
Создание сайта от А до Я. Книга 3
Оценить:
 Рейтинг: 0

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


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

Уже неплохо!

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

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

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

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

<a href=«место размещения оригинала»> <img src=«место размещения превью»> </a>

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

<img src=«адрес изображения» alt=«альтернативная подпись изображения» />

<p> Подробное описание картинки </p>

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

<figure> <img src=«адрес изображения» alt=«альтернативная подпись изображения» />

<figcaption> Подробное описание картинки </figcaption> </figure>

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

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

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

<img src=«место расположения картинки» alt=«Описание картинки»>

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

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

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

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

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

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

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

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

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

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

Название файла должно быть кратким и описывать содержимое картинки.

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

Объем текста для Alt должен составлять 3—10 слов, для Title допустимо более развёрнутое описание, но увлекаться здесь тоже не нужно – всплывающая подсказка из нескольких строк не всегда бывает уместна и может лишь испортить впечатление.

Для уже загруженных картинок редактирование атрибута Alt доступно по щелчку кнопки мыши по изображению (иконка «Изменить» с изображением карандаша). В этом же окне («Параметры изображения») можно обнаружить и доступную для изменения строку Title, для этого необходимо развернуть пункт меню «Дополнительные настройки».

Оптимизация размера и веса изображения

Внимание! Некоторые плагины, которые мы установили, имеют функцию оптимизации изображений.

Сжатие картинки в Paint.

Открываем изображение в Paint и на вкладке «Главная» имеется пункт «Изменить размер».

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

Изменяя параметры размеров по горизонтали и вертикали, вы регулируете ширину и высоту изображения соответственно. Выбрать необходимые параметры, жмете на кнопку «Ок», а затем сохраняете итоговый файл на компьютер.

Сжатие картинки в IrfanView

– Изображение/Изменить размер – выставить новый размер.

– Сохранить как – выставить параметры и качество.

Делайте оптимизацию картинок к каждой статье, и дополнительные посетители на Ваш сайт гарантированно придут с поиска по картинкам.

Это основные моменты SEO оптимизации статьи. Не ленитесь делать SEO оптимизацию сайта (статей, рубрик, записей и картинок) ведь от этого зависит продвижение Вашего сайта в поисковых системах, количество посетителей и соответственно доход от сайта.

Сжатие картинки

Заходим на сайт https://tinyjpg.com/ (https://tinyjpg.com/) вставляем нашу картинку и получаем сжатый примерно в два раза вариант.

Здесь же можно провести анализ сайта на возможность его оптимизации путём сжатия картинок. Открываем панель ANALYZER, вводим адрес сайта без http:// и получаем результат

Формат и вес изображения

В качестве изображений с богатой палитрой лучше всего использовать популярный формат JPG. Для растровых картинок и для инфографики лучше всего использовать формат PNG. Для анимаций можно использовать формат GIF. Размер картинки не должен превышать ширину рабочего поля, а её «вес» должен быть адекватным и не превышать 100—250 кб. В противном случае картинка будет заметно замедлять загрузку сайта.

Настройка фонового изображения

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

Фоновое изображение – это картинка-подложка, фон дополнительной области, отображаемой за границами основного каркаса сайта. Для некоторых тем используется фон белого цвета, вы можете поменять его, выбрав пункт панели управления Внешний вид/Фон. Во-первых, вы можете изменить цвет фона, для этого используйте поле Цвет в блоке Настройки отображения. Нажмите ссылку Выбрать цвет и в открывшейся палитре подберите подходящий оттенок. При этом в поле Просмотреть появится предварительный вид нового фонового изображения.