Продвижение сайта с помощью картинок
При грамотном подходе раскрутка по изображениям может дать значительный прирост (на 20 – 30%) к числу посетителей. А если у Вас блог об интерьер–дизайне, или о web–дизайне, если Вы занимаетесь печатной рекламой и на Вашем сайте много примеров графических работ, то и больше 50%.
Занять позиции в ТОП по Google, Yandex Images гораздо проще, даже по высоко конкурентным запросам, просто обладая интересной графической информацией и занимаясь правильным её наполнением.
Позвольте привести несколько советов для продвижения по картинкам
- Весь интернет буквально кишит информацией: заполняйте alt (для поисковых роботов) и title (для людей) атрибуты картинок. Так Вы объясните поисковикам, какую тематику освещает изображения. Но это правда лишь отчасти. Данные меры носят лишь рекомендующий характер. Например, Google старается выделить смысловой подтекст картинки из первого абзаца, идущего перед или после картинки. И «выставляет» детальное описание согласно найденному тексту.
- В детальном освящении новости старайтесь «подтянуть» как можно выше картинку, на которую вы хотите обратить внимание поисковых систем, к началу новости. Первый абзац новости на странице должен содержать в себе изображение.
- Не делайте вёрстку вокруг изображения слишком сложной. Не раз замечал проблемы с индексацией изображений на таких сайтах, где картинки, обрамлённые сложной вёрсткой, с корректно заполненными alt и title долгое время игнорируются поисковыми роботами, или вообще не индексируются.
- Также часто обсуждаемым является правило осознанного названия картинок и папок по пути к ним, задания названия изображений для людей. Будем считать это просто правилом хорошего тона. Насколько сильно оно влияет на раскрутку по изображениям в Google и Yandex – официальной «статистики» ещё никто не приводил («до» и «после»). Старайтесь транслитом или на английском языке в названии изображения передать его смысловое значение. Например, правилом хорошего тона будет задание пути к изображению о студии создания сайтов в Харькове: /images/kharkov/we-creating-sites.jpg, или же: /images/kharkov/my-delaem-saity.jpg.Совет: для экономии времени с транслитом (например: транслит одной комбинацией клавиш) воспользуйтесь программой Punto Switcher.
- Старайтесь размещать на Вашем сайте не только изображения высокого качества, но и помните, многие пользователи ищут в Google по картинкам заданного формата, нескольких форматов (большие, маленькие, средние и т.п.). Например, если Вы посвящаете новость набору иконок, было бы здорово разместить примеры иконок из набора в формате: ширина — 32 на высоту — 32, 48 на 48 и т.п.
- Указывайте явно размеры изображений, это поможет при поиске картинок с заданными размерами. Назначайте в пикселях целым числом в атрибутах width и height для тега img.
- А ещё о дублях. Поисковые системы умеют просто отлично искать «дубли» картинок, по названию, по размеру. Даже есть такая фишка: «похожие изображения (similar images)». Так что старайтесь размещать уникальные качественные интересные изображения на страницах Вашего сайта.
- Технические изображения (например: логотип) старайтесь размещать с помощью css в виде background для нужных элементов или закрывать их от индексации.
Google images sitemap
Если по какой-то причине уже который месяц Google не индексирует изображения на Вашем сайте, или индексируются не все изображения (некоторые являются частью ссылок, некоторые – бекграундами, или появляются с помощью rollover эффектов и javascript), Вы можете добавить их в sitemap (карту сайта), согласно следующему формату.
XML — Пример карты сайта по картинкам для google:
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
xmlns:image="http://www.google.com/schemas/sitemap-image/1.1">
<url>
<loc>http://example.com/sample.html</loc>
<image:image>
<image:loc>http://example.com/image.jpg</image:loc>
</image:image>
<image:image>
<image:loc>http://example.com/photo.jpg</image:loc>
</image:image>
</url>
</urlset>
Совет: а ссылку на карту сайта Вы всегда можете указать в robots.txt
Sitemap: http://<адрес вашего сайта>/<путь к карте сайта>
Примечание: текст в карте сайта должен быть обязательно в кодировке UTF-8
Примечание: не забываем расширить пространство имён для существующей карты сайта в urlset указав
xmlns:image="http://www.google.com/schemas/sitemap-image/1.1"
В loc может содержаться до 1000 изображений <image:image>.
Внимание: общий размер карты сайта не должен превышать 10 мб.
<image:image> может содержать такие элементы:
- <image:loc>[путь к изображению]</image:loc> — (обязательный параметр) — содержит путь к картинке , например: <image:loc>http://example.com/image.jpg</image:loc>
- <image:caption>[заголовок изображения]</image:caption> — (очень желательный параметр) — аналог alt для изображения
- <image:title>[заголовок изображения]</image:title> — (необязательный параметр) — аналог атрибута title для изображения Например: <image:title>Харьков, создание web сайтов</image:title>
- <image:geo_location>[Позиционирование изображений по регионам] </image:geo_location> — (необязательный параметр) – позиционирование изображения согласно региону, Например: <image:geo_location>Харьков, Украина</image:geo_location>
- <image:license>[Адрес лицензии изображения]</image:license> — (необязательный параметр) если Вы используете рисунок с другого источника, или рисунок, защищённый авторскими правами, правилом хорошего тона является указать ссылку на лицензию.
После создания карты сайта, добавляем её через инструменты google web мастера (необходим аккаунт google и подтверждение, что Вы являетесь владельцем данного сайта) в карту сайта Вашего проекта.
Примечания о формате xml для sitemap
Любой тег должен быть парным закрывающимся. Тоесть, если он начинается с <image:loc>, он должен обязательно закончиться</image:loc>.
В значениях, заключённых в теги, все специальные символы должны быть заменены на соответствующие html сущности:
- «&» (ampersand) на «&».
- «»» (double quote) на «"».
- «’» (single quote) на «'».
- «<» (less than) на «<».
- «>» (greater than) на «>».
Например, в php для этого существует специальная функция htmlspecialchars:
(string) htmlspecialchars ( string $string [, int $flags = ENT_XML1, [, string $charset [, bool $double_encode = true ]]] ) – возвращает строку с заменой спец. символов на их html сущности, принимает параметры:
- (string) $string – строка для замены,
- (int) $flags – устанавливаем в ENT_XML1 (транслировать код, как XML),
- (string) $charset – устанавливаем кодировку в «UTF-8»
PHP пример добавления в карту xml значения image:title для текущей картинки:
$xml .= "<image:title>". htmlspecialchars($image_title, ENT_XML1,"UTF-8")."</image:title>";