Ср, 3/05/17 – 1:15 | One Comment

Чтобы преуспеть на рынке web-дизайна и разработки или в качестве фрилансера, нужно иметь впечатляющее портфолио. Создатели сайта-портфолио сталкиваются с задачами более сложными чем …

Читать статью »
CSS верстка

О красивом оформлении страниц с css3 и html5

Дизайн

О создании веб-дизайна с примерами сайтов

Wordpress

Самое современное для сайта на Wordpress

Шаблоны сайтов

Обзоры шаблонов: лучшие темы для сайта

Свой сайт

Как создать, оформить, сделать сайт лучше

Главная » Оптимизация

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

5 января 2013 Нет комментариев

seo оптимизация изображений

Внутренняя поисковая оптимизация это наиболее понятный аспект SEO. Если же вы ищете наиболее простые и доступные способы оптимизации контента на веб-странице, то одним из них будет SEO оптимизация изображений. Обычно большинство страниц уже содержат фотографии, иллюстрации или иконки. Нескольких простых действий над ними могут положительно повлиять на ранжирование в поисковых системах и, как минимум, разнообразить трафик.

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

Наибольшая проблема в том, что поисковые системы не видят графический контент. Конечно, они способны понять что это изображение и даже распознать на основе пикселей — но не имеют доступа к содержимому картинки.

Допустим, Google обнаружил данное фото (Ford GT40).

Форд GT40 цвета Gulf

Поисковые системы знают, что это изображение потому, что мы использовали  HTML тег <img>. Какую-то информацию о нем они смогут получить из URL (если это ЧПУ) и окружающего текста — если только это релевантное теме статьи изображение. Человек видит и понимает что это спортивная машина, но поисковики нет. Однако, для них информативными будут атрибут ALT и хорошо составленное имя файла.

Alt атрибут

Alt атрибут содержит альтернативное текстовое описание, которое будет выводится в случае недоступности изображения (возможного сбоя, плохого коннекта). Помимо пользователей, тег Alt нужен поисковым системам для индексации картинок. Но Яндекс и Google относятся к ALT тегу по разному:

  • Атрибут тега ALT используется Яндексом для индексации изображений, однако поисковик не включает содержащийся в нем текст в основной индекс
  • Гугл (в отличии от яндекса) – содержание атрибута ALT воспринимает как основной текст страницы, т.е. оно может влиять на выдачу при релевантном поисковом запросе. Фразы альтернативного описания могут попасть в сниппет Google

Из Alt и окружающего текста поисковики получают необходимую им информацию об изображении и поэтому:

В теге Alt нужно использовать осмысленные ключевые фразы

Переоптимизацией будет считаться умышленное злоупотреблении длинными НЧ фразами (под Long-Tail запросы). Также нужно помнить:

Когда у вас слишком много картинок с ключевой фразой в атрибуте тега ALT, а в теле поста недостает текста — поисковые системы примут это за спам

Некоторые SEO-плагины не допускают этого и при написании статьи просто проинформируют о переоптимизации.

Если вы посмотрите на код предыдущего изображения то заметите, что Alt уже имеет описание.

<img src="fordgt40.jpg" alt="Форд GT40 цвета Gulf" />

Таким образом мы предоствляем поисковым системам следующюю информацию:

  • Это Ford GT40
  • Автомобиль цвета Gulf

Теперь, если кто-то сделал запрос: GT40 Gulf Colors или похожий на него — у изображения есть шансы быть замеченным. Как видите заполнить alt атрибут несложно, нужен только доступ к изображению в HTML редакторе:

Оптимизация изображения: заполнение атрибутов Alt и TitleЗаполнение атрибутов Alt и Title при загрузке изображений в WordPress.

Имя файла изображения

Хотите продолжить оптимизацию изображения для сайта? Смените имя файла. Описательное имя будет оценено поисковиками.

С цифрового фотоаппарата мы получим снимок с именем вроде «DSC0123.jpg», что не даст никакой информации об изображении.

Составив осмысленное имя для файла изображения, вы увеличите его шансы на высокое ранжирование в поиске по картинкам

Назовите ваше фото, к примеру так: «basket-of-red-apples.jpg». Именуя файл по-английски, вы увидите его появление по запросу «Корзина красных яблок» в поиске по изображениям от поисковиков.

Известно, как иногда полезно, для лучшего восприятия информации использовать дефис. SEO для изображений работает по этому же принципу:

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

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

О размере файла

Наверное, вы слышали, что Google учитывает при ранжировании сайта быстроту его работы, и теперь время загрузки страниц – фактор, влияющий на место в поисковой выдаче.

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

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

Оптимизация изображений форматов JPG, PNG и GIF

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

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

PNG изображения популярны благодаря своей поддержке прозрачности (в отличии от JPG). PNG это альтернатива для GIF формата по возможности сжатия без потерь.

GIF изображения можно сжимать не теряя в качестве, когда они содержат 256 цветов или меньше. Формат поддерживает анимацию.

С задачей сжатия и оптимизации веб-графики отлично справляется условно-бесплатная (имеются функциональные ограничения) программа Advanced JPEG Compressor.

Использование HTML — не лучший способ для изменения размеров изображений

Загрузка большого изображения (например 800 x 600 px) с отображением его в меньшем разрешении (400 x 300 px) средствами HTML, используя width и height атрибуты — впустую расходование ресурсов канала связи.

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