Урок 7.10 – Оптимизация изображений, атрибуты alt и title

Урок 7.10 – Оптимизация изображений, атрибуты alt и title

Урок 7.10 – Оптимизация изображений. Атрибут alt и title

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

В HTML-код изображение вставляется так:

<img src = «ссылка на файл с картинкой» alt = «пояснение что на картинке» />

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

  • Картинка должна быть четкой, то есть хорошего качества.
  • Изображение не должно быть большим по объему в мБ, иначе снизится скорость загрузки страницы.
  • Изображение не должно выходить за пределы экрана, или прилегать к тексту вплотную.
  • Атрибут alt должен быть обязательно задан. В значении атрибута alt нужно прописать пояснение, что изображено на картинке, и в это пояснение органично вписать продвигаемые фразы.
  • Изображение должно корректно отображаться на всех устройствах, десктопах, планшетах, телефонах.
  • Ссылка на файл с картинкой не должна быть битой.
  • Для увеличения скорости загрузки страницы можно использовать ленивую загрузку изображений. Ленивая загрузка – это когда при загрузке подгружаются только те изображения которые находятся в видимой части страницы, остальные изображения подгружаются по мере прокрутки страницы вниз.
  • Если страница содержит много полноразмерных картинок, то можно сделать небольшое по размеру превью этих изображений и оформить все это в виде галереи, где по клику будут открываться большие изображения. Это позволит не загружать большие изображения при открытии страницы и увеличит скорость загрузки страницы в целом.

Галерея изображений в HTML-коде может выглядеть так:

<ul>

<li><a href = «ссылка на большое изображение» title = «текст при наведении на ссылку» > <img src = «ссылка на превью картинки»  alt = «текст отображаемый если превью не удалось загрузить» /> </a></li>

<li><a href = «ссылка на большое изображение» title = «текст при наведении на ссылку» > <img src = «ссылка на превью картинки»  alt = «текст отображаемый если превью не удалось загрузить» /> </a></li>

</ul>

Атрибут alt у картинки

Данный атрибут отображается в тексте страницы в случае, когда невозможно загрузить изображение. В атрибуте alt прописывают основной смысл картинки, органично включаю в описание продвигаемые фразы. Пустой атрибут alt является незначительной SEO-ошибкой.

Заполненный атрибут альт может улучшить ранжирование страницы, плюс изображение добавится в Яндекс картинки и  будет участвовать в поиске по значению атрибута alt.

Атрибут title у ссылки

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

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

Напишите искомую фразу и нажмите Enter

Shopping Cart

Расчет стоимости продвижения

    Нажимая кнопку "Заказать", я даю согласие на обработку персональных данных


    Индивидуальное предложение

      Нажимая кнопку "Заказать", я даю согласие на обработку персональных данных


      Заказ обратного звонка

        Нажимая на кнопку Заказать звонок Вы даете свое согласие на обработку персональных данных


        Заказать создание и продвижение сайта

          Нажимая на кнопку Заказать Вы даете свое согласие на обработку персональных данных


          Тариф Mini

            Нажимая на кнопку Заказать Вы даете свое согласие на обработку персональных данных


            Тариф Standart

              Нажимая на кнопку Заказать Вы даете свое согласие на обработку персональных данных


              Тариф Premium

                Нажимая на кнопку Заказать Вы даете свое согласие на обработку персональных данных


                Бесплатная консультация

                  Нажимая на кнопку Заказать консультацию Вы даете свое согласие на обработку персональных данных


                  Бесплатный аудит сайта

                    Нажимая на кнопку Заказать аудит Вы даете свое согласие на обработку персональных данных


                    Скидка 30% на первый месяц продвижения

                      Нажимая кнопку "Заказать продвижение", я даю согласие на обработку персональных данных


                      Скидка 50% на первый счет

                        Нажимая на кнопку Получить скидку Вы даете свое согласие на обработку персональных данных

                        Скидка 20% при предоплате за год

                          Нажимая на кнопку Получить скидку Вы даете свое согласие на обработку персональных данных

                          Скидка 10%

                            Нажимая на кнопку Получить скидку Вы даете свое согласие на обработку персональных данных

                            Скидка 10% на 1 счет

                              Нажимая на кнопку Получить скидку Вы даете свое согласие на обработку персональных данных