Фотографии к товарам и услугам, иллюстрации к статьям, схемы и графики, – графический материал влияет на восприятие материала пользователями, а при грамотном оформлении способствует продвижению сайта в поиске и увеличению количества заказчиков.
- Технические требования к картинкам
- Откуда брать картинки
- Фотографируем для сайта сами: выгоды и издержки
- Нанять фотографа
- Иллюстрации с фотостоков
- Обработка чужих фотографий
- Нарисовать картинку для сайта с нуля
- Поручить обработку или создание иллюстраций дизайнеру-ретушеру
- Выводы
Картинки с иллюстрациями, графиками, схемами и другими визуальными элементами облегчают восприятие информации для пользователей. Поисковые системы учитывают эти элементы и ранжируют выше сайты с уникальными, красочными, правильно оформленными иллюстрациями.
Таким образом, добавляя иллюстрации, владелец сайта убивает двух зайцев: становится более убедительным для пользователя и более лояльным для поисковика. Кстати, я в статьях неспроста добавляю скриншоты и другие картинки с подписями.
Сразу для понимания: SEO-специалист не должен фотографировать, обрабатывать снимки или рисовать картинки. Это дело специально обученных специалистов – дизайнера или ретушера.
Технические требования к картинкам
Для веб-страницы подойдет далеко не любая картинка. Иллюстрация должна быть:
- уникальной;
- не слишком большой по размеру (чтобы быстро загружалась на любом устройстве);
- не слишком маленькой (чтобы пользователь не напрягал глаза, разглядывая детали);
- в стиле сайта;
- в тему материала страницы;
- с правильно подобранным названием и подписью.
Возможны дополнительные детали.
Уникальность
Если картинка уже опубликована на одной странице, то нет смысла индексировать другую с такой же картинкой. Так думают поисковые машины.
Делайте что хотите, но против этой стены не попрешь. И если SEO-специалист говорит, что картинки, сворованные у конкурента, топят сайт в выдаче, не думайте, что он прикрывает свою некомпетентность.
Размер иллюстраций
Картинка для веб-страницы должна быть небольшой по размеру, но хорошо различимой. Оптимальной считается ширина 500-700 пикселей.
Точный размер для фотографий определяется макетом конкретного сайта. При этом учитываются:
- скорость загрузки страницы;
- видимость картинки на устройствах разного типа (ПК, планшеты, смартфоны);
- макетом самой страницы.
Для большего удобства продумывают увеличение по клику: к самой странице прикрепляют маленькую картинку для предпросмотра шириной 200-400 пикселей, оформляют ее как ссылку на большую. При щелчке открывается большая картинка.
Качество картинок
Зернистые, пересвеченные, переполненные «украшениями», нечеткие картинки отталкивают пользователя. Поисковые системы могут и не понять, что именно не так с иллюстрациями, но поведение пользователей: снижение трафика, отказы и т.д., – снизят авторитет ресурса, а следом и позиции в выдаче.
Оформление в HTML
Для вставки картинки чаще всего используют непарный тег с атрибутами <img src=”URL картинки”>. Картинка может быть оформлена как ссылка, в таком случае конструкция будет такой:
<a href=”URL ссылки, например, на большую картинку”><img src=”URL картинки”></a>
Оформление картинок стилями
К картинкам допустимо добавлять атрибут class, чтобы задать ей определенный стиль оформления: обтекание текстом, рамку, поведение в зависимости от положения курсора и т.д. Недопустимы устаревшие теги.
Названия иллюстраций
Названия картинок для сайта пишут строчными буквами, на латинице, без пробелов. Допустимы тире, нижние подчеркивания. Название должно соответствовать теме страницы и содержанию картинки.
Alt и title
Всем картинкам прописывают атрибуты alt и title. Первый атрибут виден только в коде страницы или в том случае, когда картинка не подгрузилась. Второй виден при наведении курсора на картинку.
Допускается, чтобы содержимое этих атрибутов совпадало, если это не препятствует продвижению. Если есть подозрения, что одинаковый текст вредит, заменяйте без стеснения.
Эти атрибуты повышают релевантность страницы и помогают ранжировать сайт по сервисам вроде Яндекс.Картинки и Гугл Картинки. Эти источники не станут основными каналами продвижения, но тоже помогут сайту подняться.
Содержимое атрибутов alt и title должно отвечать требованиям:
- содержать ключевые слова, под которые заточена страница;
- соответствовать теме страницы и содержимому иллюстрации;
- быть уникальными в пределах сайта;
- в длину быть до 140-160 символов – больше пользователь не станет читать.
Чего в картинках быть не должно
Картинка всегда должна быть видима. Случается, что в адрес иллюстрации вкрадывается опечатка или сам файл перемещают. В таком случае вместо нее отображается что-то неприглядное, в лучшем случае текст атрибута альт. Срочно находите картинку и меняйте адрес в коде страницы. Как находить битые ссылки на сайте, говорилось в одной из предыдущих статей.
NB! Никогда не оформляйте текст картинками. Поисковые роботы учатся читать с иллюстраций, но текстовую информацию считывают из текстовых, а не из графических элементов. Поэтому информацию о скидках, материалах и прочих деталях прописывайте буквами, а не прорисовывайте.
Инфографика – исключение. Диаграммы, графики, цифры изображать допустимо. Впрочем, с развитием CSS логичнее оформлять эти данные кодом.
Откуда брать картинки
Вариантов несколько:
- вооружиться фотоаппаратом и снимать товары самостоятельно;
- нанять фотографа;
- обратиться в фотосток;
- обрабатывать скачанные у конкурента фотографии до неузнаваемости – своими руками или с помощью дизайнера;
- нарисовать картинку с нуля – самостоятельно или с помощью профессионала.
В каждом случае свои преимущества и недостатки.
Фотографируем для сайта сами: выгоды и издержки
Самостоятельная съемка выгодна экономически, но отнимает много времени. А качество кадров под сомнением: то снимали против света, то в сумерках, то зернистость, то еще какая печаль.
ФНанять фотографа
Фотограф сэкономит время, но хороший фотограф стоит хороших денег, а плохие снимки вы себе и бесплатно сделаете. Нанимать его актуально, если съемки проходят регулярно и помногу, например, для интернет-магазина одежды или техники.
Иллюстрации с фотостоков
Фотостоки – есть платные и бесплатные. Вариант подходит для новостных ресурсов, информационных порталов и блогов. Иллюстрации для таких сайтов могут быть абстрактными. Например, нет необходимости показывать товар определенного артикула или модели, достаточно показать что-то похожее, близкое по теме материала.
Для магазинов такой выход неприемлем, потому что нужна конкретика. Разве что в раздел новостей или статей.
Обработка чужих фотографий
Обработка скачанных картинок своими руками – процесс долгий и кропотливый. SEO-специалисты рекомендуют для повышения уникальности менять угол наклона картинки, переводить в черно-белую гамму, кому-то помогает зеркальное отражение или повышение контрастности. Учитывайте, что поисковые машины учатся отлавливать такие изменения и со временем «уникальные» иллюстрации могут сыграть против вас.
Среди прочих методов поиска дублей, Яндекс и Гугл обращаются к метаданным фотографий: место и дата съемки, марка и модель аппарата, разрешение, размер, глубина и т.д. Эта информация размещается в свойствах файла. Чтобы посмотреть их, нажмите на картинке правую кнопку мыши и выберите соответствующий пункт меню.
Чтобы поднять уникальность картинки, измените и значения этих свойств.
Нарисовать картинку для сайта с нуля
Нарисованные с нуля картинки будут так же уникальны, как собственноручно сделанные снимки. Правда, на них потребуется много времени.
Поручить обработку или создание иллюстраций дизайнеру-ретушеру
Дизайнер или ретушер, если обработка или отрисовка поручены ему, сэкономит время, к тому же выполнит задачу профессиональнее. Но потребует плату.
Выводы
Иллюстрации делают веб-страницу более понятной и привлекательной для пользователя. Уникальные, красочные, правильно оформленные картинки увеличивают харизму сайта в глазах поисковых роботов.
Правильная картинка – это снимок или рисунок, сделанный самостоятельно или купленный на фотостоке, оформленный в соответствии со стилем сайта. Размер файла должен быть удобен для просмотра на любом устройстве.
Каждой иллюстрации прописывают атрибуты альт и тайтл. Содержимое этих атрибутов влияет на продвижение сайта в сервисах вроде Яндекс.картинки. Текст должен содержать ключевые фразы и до 160 символов.
Картинка на веб-странице должна быть всегда доступна. Временами проверяйте сайт на битые ссылки, чтобы отлавливать невалидные адреса.
Текст на картинках не пишется, за исключением инфографики. Впрочем, и инфографику при желании можно заменить на CSS.
Уникальные картинки для сайта можно создавать самостоятельно или нанимать для этого фотографа. В первом случае сэкономите деньги, во втором – время.
SEO-специалист не рисует картинки и не фотографирует. Это дело дизайнера или ретушера.
Комментариев нет:
Отправить комментарий