Оптимизация изображений для продвижение сайта
- 18 сентября 2013
- Автор: Сергей Кузнецов
- Просмотров: 5285
Изображения являются достаточно важным элементом продвижения сайта и не учитывать их влияние на продвижение, а тем более, не использовать изображения в продвижении сайтов было бы не простительной ошибкой. Но прежде, чем посмотрим на то, как продвигать, заметим, что, наверное, продвижение картинками можно сегодня разбить на две связанные, но в общем то самостоятельные части. Это:
- Изображение, как один из элементов HTML кода, который требует оптимизации:
- Изображение, как самостоятельный объект продвижения.
И так, рассмотрим их по порядку, что нам необходимо сделать для оптимизации изображений для сайта.
Изображение, как НTML элемент продвижения
Прежде всего отметим, что раз поисковики рассматривают изображения на странице, как фактор ранжирования (об этом говорят и Google, и Яндекс), получается, что и надо однозначно признать - каждая продвигаемая страница сайта должна содержать изображения. Иначе мы просто теряем один из факторов ранжирования и тем самым не используем предоставленные нам возможности.
Но кроме этого такого "требования" (по наличию изображений на страницах сайта), можно сказать, "от внутренней SEO", мы всегда должны помнить, что кроме оптимизации изображения, они еще и визуальный элемент, который должен привлекать клиента. Ведь ни кто не отменял действие известной поговорки "Лучше один раз увидеть, чем сто раз услышать", а следовательно, мы должны подбирать изображения очень тщательно в плане из привлекательности, уместности, побудительности и т.п., но это пожалуй, уже немного выходит за рамки роли изображений в SEO и мы не будем это здесь обсуждать.
Давайте попробуем разобраться, как же мы должны их использовать?
Количество изображений на странице - на мой взгляд, лимитируется только требованиями по времени загрузки, как самого изображения, так и необходимого количества запросов (чем больше отдельных картинок на странице, тем больше количество http запросов в процессе загрузки страницы). Т.о. надо стремится, если это не вызвано какими то другим особенными причинами (например, "фото сайт" или что-то подобное), к минимально необходимому количеству изображений на странице - для обычной страницы сайта, где изображения - это простой элемент иллюстрации, это наверное 1...3 изображения.
Размер изображений - опять не вижу ни каких ограничений, кроме требований по времени загрузки. А исходя из времени, выходит, что чем меньше изображения, тем лучше. Но здесь конечно же надо смотреть на картинки еще и с точки зрения их "читабельности" и привлекательности. Т.е не стоит в угоду скорости доводить ситуацию до абсурда! Т.о. на обычной странице я бы размещал изображения, иллюстрирующие текст, размером от 150х250 до 300х400 пикселей и весом от 20 до 100 КБ. Это конечно же не означает, что никогда не стоит размещать более мелкие и более крупные изображения - все зависит от реальных потребностей в изображениях. Вполне могут быть ситуации, когда вам могут понадобиться, например, и очень большие изображения. но все же, очень большие изображения лучше загружать по дополнительному клику, как это делается в большинстве галерей изображений.
Здесь же наверное стоит отметить и еще одну особенность, связанную с размером - рекомендуется указывать размер изображения (атрибуты height и height у тега img) в пикселях и хранить само изображение именно в таком размере. Это хоть и немного, сократит расходы на визуализацию изображения.
Формат изображений - если в общем, то наверное любой приемлемый в WEB формат (jpeg, gif и png). Но это только в общем. А если подходить более тщательно и соотносить потребности с возможностями, то все может быть немного сложней. И так, на мой взгляд, исходя из требований времени загрузки, мы должны выбрать тот формат, в котором наше изображение будет достаточно читабельно, т.е. не будет явного видимого ухудшения "качества" изображения.
На что же мы можем здесь повлиять и что выбрать?
Повлиять можно на качество изображения и его цветовую палитру. А вот что выбрать - я обычно иду таким путем.
Если у изображения нет прозрачных элементов, то тогда это JPEG. В JPEG я обязательно ставлю прогрессивную развертку (progressive JPEG) - это позволяет визуализировать картинку не моментально по окончании загрузки, а постепенно (сначала размыто, потом все лучше и лучше). И уменьшаю качество изображение (сжимаю) до тех пор, пока наблюдаю достаточно качественную картинку (обычно это 90...80%) и делаю это простой и бесплатной программкой GIMP. Прогрессивный JPEG, считается лучше (и меньше размером, и визуализируется лучше), чем последовательный и многие валидаторы загрузки это позволяют проверить - например WebPageTest.
Если у изображения есть прозрачные элементы, то GIF или PNG. Выбираю обычно то, что будет меньше по размеру. PNG можно сжимать, GIF нет, но не всегда PNG получается меньше чем GIF. При одинаковых размерах предпочитаю PNG (считается, что он лучше обрабатывается браузерами).
Если изображение требует анимации, то GIF.
А если обратиться к "официальным источникам", например, Google, то буквально дословно их рекомендации звучат так:
- Используйте формат GIF для очень маленьких и простых изображений (т.е. меньше 10х10 пикселей или с цветовой палитрой менее 3 цветов) и для изображений, содержащих анимацию. Если вы думаете, что изображение в GIF может быть сжато лучше, проверьте результат в GIF и PNG, и используйте тот, который даст меньший размер.
- используйте JPEG для всех изображений в стиле фотографий.
- не используйте TIFF и BMP!
Наименование файла изображения - обычно, либо транслитерация ключевого понятия (например, если страница про "отдых в Египте", то либо otdyh-egipet.jpg), либо английское наименование (rest-egypt.jpg). При этом слова в наименовании разделяю символом "-".
Атрибут alt изображения является самым важным элементов поисковой оптимизации изображения. В него, в окружении сопутствующих слов должна быть внесена ключевая фраза. Если опустить вопрос плотности слов в элементах alt, на основе которой и определяется необходимо общее количество слов в элементах alt и количество повторений ключевых слов, что является самым важным при внутренней оптимизации страницы в части использования изображений, то следует отметить, что в теге img, описывающем изображения, должны быть заполнены атрибуты alt (самый важный ) и title (второстепенный, с точки зрения SEO, но важный для пользователя, т.к. будет показываться при наведении курсора на изображение). При этом, текст в этих атрибутах должен быть осмысленным, и интересным. А может быть и побуждающим к действию (это рассмотрим ниже), т.к. он служит не только элементом SEO, но и может показываться в различных поисковых запросах.
Давайте посмотрим на примеры (может не самые удачные, но иллюстрирующие правильный, как мне кажется, подход в оптимизации картинок)
Есть страница и ключевая фраза, которую мы уже ранее использовали - "Отдых в Египте". В атрибут alt помещаем "Дешевый отдых в Египте от Илиан тур". В атрибут tiltle помещаем "Отдых в Египте - вылет из Москвы" или тоже, что и alt.
Что мы таким образом решаем:
- Ключевая фраза присутствует в элементе, который участвует в ранжировании, а следовательно, в этом элементе (img) мы дополнительно акцентируем внимание поисковика на том, что страница у нас об "отдыхе в Египте";
- Ключевая фраза будет участвовать в ранжирование самой картинки (все поисковики имеют отдельный режим поиска по картинкам) и тем самым дополнительно указывать поисковику на то, как искать картинку (на какой запрос выдавать картинку);
- Добавленные дополнительные слова делают фразу более естественной (а естественности все больше и больше внимания уделяется поисковиками) и возможно привлекательной для клиента, если он ее увидит (например, при поиске изображений), а так же расширяют ключевые фразы ( ведь кроме "отдых в египте", в интернете ищут и "дешевый отдых" и "дешевый отдых в египте" - вот уже вместо одного поискового запроса мы указали фактически три). Да и "Илиан тур" мы добавили не просто так - про бренд тоже не надо забывать. И теперь, если мы поищем в поисковике картинки по запросу "Илиан тур", то увидим те, где в alt присутствует эта фраза.
- И наше выражение в alt может выдаваться в поиске картинок и пользователь может его увидеть. А если он увидит что-то привлекательное в этом тексте, то перейдет на сайт.
Можно еще отметить одну возможность эффективного использования изображения - это включение изображения в ссылку. Параметры изображения будут связаны с ссылкой и по-видимому, будут учтены поисковиком при ранжировании страницы, на которую ссылается такая ссылка. Но такими ссылками лучше адресоваться на другие страницы и пожалуй, в случае необходимости (т.к. нет, во всяком случае у меня, четкого понимания, как будут учтены параметры изображения в ссылке, на сколько они весомы и как с ними работают разные поисковики, но то что они учитываются - это точно. А как известно, самая короткая дорога - это та, которую знаешь.).
Следуя этим нехитрым правилам мы проведем SEO оптимизацию изображений для страниц сайта и этим внесем дополнительный небольшой вклад в улучшение ранжирования страниц сайта в поисковой выдаче.
Изображение, как самостоятельный объект продвижения
Используя изображение в тексте страницы никогда не стоит забывать, что поисковики имеют специальные механизмы поиска изображений и не учитывать это, по меньше мере, расточительно.
И так, посмотрим, что же находят поисковики в изображениях. Для этого в Yandex наберем строку для поиска "Непал илиан", перейдем в режим просмотра картинок (или сразу ищем в Яндекс картинках). Берем любую картинку, смотрим, что за подпись под ней, а потом переходим к оригиналу (то, откуда Яндекс взял эту картинку) и смотрим, какие теги определены в оригинале, и что из них использовал Яндекс. Проделываем это несколько раз для разных изображений с разных сайтов (одна и та же статья, несколько лет назад была опубликована на разных сайтах, фото выложены во внешний альбом, а так же нашлись копирайтеры, либо просто копировщики, которые скопировали статью к себе на сайты) - на разных сайтах изображения оформлены по разному.
Мы видим, что где-то Яндекс в подпись взял содержимое тега alt, где-то название статьи (где не было alt), а наверное, возможно и что-то другое. Но находит эти изображения Яндекс по содержимому alt и данным страницы, из которой берется это изображение, а от них, при заинтересованности пользователя, можно перейти на сайт-источник. И здесь, кроме SEO задачи перед нами встает задача именно зацепить клиента, если он увидел картинку (хотя, конечно же, не стоит на это уж очень сильно надеяться, т.к. непосредственно в картинках люди обычно ищут именно картинки, а не услуги. Но отбрасывать такую возможность зацепить клиентов не стоит).
Ну и конечно же, я так думаю, что еще возможен (а вернее, должен быть) синергетический эффект поисковой фразы, бренда, изображения и html кода.
А еще возможно что-то?
Пожалуй это все, из того, что сегодня влияет на продвижение сайтов изображениями. Во всяком случае, это то, с чем мне удавалось сталкиваться в различных статьях от представителей поисковиков и в различных инструментах исследования сайтов.
Но если взглянуть на изображения повнимательней (возьмем, например, файл JPEG и посмотрим его свойства - (например, в Windows нажимаем правую кнопку мышки, затем Properties, затем Details), то мы увидим, что у нас есть возможность задать заголовок файла (title), ключевые слова (keywords) и другие атрибуты. Задаем пару для проверки и сохраняем файл. И что же мы видим?
А видим мы, что файл:
- увеличился примерно на 8 КБ (в моем тесте);
- содержит "добавку", часть из которой представляет из себя описание в соответствии со спецификацией RDF где и сохранились наши теги.
Примерно аналогичного добавления RDF "вставки" можно добиться и при редактировании файла графическим редактором, например, Adobe Photoshop (но здесь он допишет, как мне показалось, значительно больше. Хотя, если по воевать, то наверное можно добиться минимума информации по объему).
Смотрим, а браузеры то это скушают? Беглая проверка стандартного набора сеошника под виндами показала, что всё нормально обрабатывается.
Но прежде добавлять в файл изображения всё это, надо задаться другим вопросом: А надо ли это делать?
С одной стороны, RDF - это спецификация, для описание мета данных в WEB от W3C и эту информацию, в виде отдельных файлов способны использовать поисковики. С другой стороны, я пока ни где не встречал подтверждения, что поисковики обрабатывают RDF вставки в графических файлах.
Т.о. мне кажется, что пока это использовать преждевременно, т.к. показывает практика, не все приживается, но быть к этому готовым надо.
