8-800-250-65-58
Приветствую!
Меня зовут Сферикс! Я знаю много об iМаркетинге и с радостью поделюсь своими знаниями :) А если вы хотите получать полезные знания регулярно, просто подпишитесь на рассылку.

Как сделать сайт удобнее для людей, соцсетей и поисковых роботов

07.12.2017

Юзабилити

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

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

1. «Хлебные крошки» (Breadcrumb)

«Хлебные крошки» – это такое символичное название навигационного инструмента, дополнительного меню. "Крошки" позволяют посетителю быстрее ориентироваться на сайте. Образ пришел в программирование из сказки Братьев Гримм, где главные герои, чтобы не заблудиться в лесу, разбрасывают крошки хлеба, а потом ориентируются по ним и находят тропинку.

На странице «Хлебные крошки» обычно размещают тонкой линеечкой: они указывают путь от главной страницы к той, которую вы сейчас посматриваете.

На скриншоте красным обведены «хлебные крошки», синим – основное меню.

Пример хлебных крошек на сайте Школы Продашь!

Вы скажете: зачем нам какие-то «крошки», для навигации по сайту есть основное меню?! Да, но в отличие от главного меню, Breadcrumb – более гибкий инструмент, он может не просто дублировать рубрикатор, но и подстраиваться под гостя (указывать страницы, на которых уже был посетитель, отражать траекторию движения по сайту). Кажется, мелочь, но создает особый комфорт для пользователя.

Наверняка у вас тоже были моменты: заходите на интересный сайт, что-то читаете в одном разделе, потом переходите дальше и вдруг хотите вернуться на несколько шагов назад, начинаете судорожно щелкать меню – что же это был за раздел? где же я это видел? «Хлебные крошки» решают эту проблему.

А если мы говорим об интернет-магазине, то «хлебные крошки» вообще незаменимы. Они косвенно выполняют роль продавца-консультанта: могут подсказать, в каком разделе что посмотреть, и даже предложить «самые популярные товары» или «товары, которые клиент смотрел недавно».

Web-мастера советуют для интернет-магазинов использовать сразу несколько видов «хлебных крошек»:

«Хлебные крошки», дублирующие разделы сайта. Они очень пригодятся, если клиент попал к вам на сайт через поисковую систему и сразу в определенный раздел (минуя главную страницу). С помощью «крошек» вам легко предложить дополнительные товары из той же категории, которая интересует вашего посетителя.

«Хлебные крошки», дублирующие историю нахождения посетителя на сайте. Он всегда может вернуться назад, чтобы еще раз что-то посмотреть. В отличие от кнопки «назад» в браузере, «хлебные крошки» не собьют настройки фильтров (к примеру, если у вас интернет-магазин одежды, то посетителю не придется вновь вбивать свои размеры или цвета, которые он ищет).

И еще важный момент: «хлебные крошки» положительно влияют и на SEO-оптимизацию сайта.

Устанавливаются «хлебные крошки» несложно. С этим, кстати, может справиться не только программист. Если вы умеете выставлять на свой сайт новости и видео, то при желании сможете разобраться и с таким инструментом, как «хлебные крошки». Тем более, на YouTube много таких уроков.

Кстати, Яндекс сам формирует «хлебные крошки» в результатах выдачи.

Пример «хлебных крошек» в Яндексе.

Пример «хлебных крошек» в Яндексе

А вот для Google важно, чтобы «хлебные крошки» содержали микроразметку.


2. Микроразметка

Если у вас есть свой сайт, то вы наверняка знаете, как это непросто – угодить роботам поисковых систем. Почему одни web-страницы они индексируют быстрее, а другие медленнее? Что нужно сделать, чтобы именно ваш сайт, а не конкурента, поисковик показывал первым? У каждого программиста на эту тему будет свое решение. Мы попробуем рассказать о некоторых инструментах, которые призваны помочь в этом непростом деле.

Микроразметка – это разметка веб-страниц сайта с помощью специальных тегов и атрибутов. Для «чайников» разметка невидима, но если вы хотя бы немного знакомы с программированием, то без труда откроете HTML-версию сайта и сможете ее разглядеть.

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

Например, на странице «О нас» или «Контакты» компании стоит выделить микроразметкой блок с контактными данными – в таком случае на запрос пользователя «контакты компании N» робот сразу выдаст нужную страницу и нужные данные.

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

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

Мы рассмотрим один из самых популярных Schema.org (общедоступный словарь, с помощью которого вебмастера могут размечать страницы так, чтобы они были понятны самым распространенным поисковым системам: Яндексу, Google, Bing и Yahoo!).

SЕО-специалисты считают, что Schema.org нужен в первую очередь для формирования расширенного сниппета и повышения релевантности страницы.

3. Что такое сниппет?

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

SEO-специалисты поясняют: к сожалению, нет гарантии, что наш сниппет будет выглядеть так, как мы хотим. Но, соблюдая правила, мы можем попытаться сделать его более удачным.

Пример сниппета:

Пример сниппета в Яндексе

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

У каждой поисковой системы свои правила создания сниппета. Например, Google формирует сниппет объемом не более 160 символов. Яндекс разрешает до 240 символов.

Важный элемент сниппета – это фавикон. Так называется крохотная иконка (картинка), сопровождающая сообщение о вашем сайте.

На скрине мы указали на фавикон красной стрелкой:

Пример фавикона в Яндексе

Зачем нужен фавикон? Исследования показывают, что с помощью даже такой крохотной иконки, сайт все равно в строках выдачи ленты смотрится интереснее и привлекает внимание. Эксперименты доказывают: из двух сайтов – с иконкой и без – пользователь скорее всего зайдет на тот, что с картинкой.

В качестве фавикона роботы чаще выбирают логотип компании (при условии, что он хорошего качества и при микроразметке отмечен как логотип).

Если ваш сайт грамотно структурирован, то спиппет будет выглядеть богаче и содержать, кроме двух строчек общей информации, дополнительные ссылки на популярные страницы сайта. Это будет выгодно выделять вас среди конкурентов.

Пример расширенного сниппета в Яндексе

Если у сайта есть контактные данные для связи пользователей с администрацией, их следует указать в сниппете. Делается это через «Яндекс.Справочник». То же можно проделать и с социальными сетями. Официальные аккаунты могут быть добавлены, но решение о том, показывать кнопку социальной сети или нет, принимает поисковая система.

4. OpenGraph

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

OpenGraph разработан Facebook’ом в 2010 году, но сегодня этот инструмент активно используют все популярные соцсети: Twitter, Google+, ВКонтакте, Одноклассники.

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

OpenGraph настроен частично:

OpenGraph настроен частично

OpenGraph настроен полностью:

OpenGraph настроен полностью

Чтобы подключить OpenGraph, достаточно внести несколько обязательных тегов:

og:title – название страницы (длина в Facebook — до 95 символов);

og:type – тип контента (статья, фильм, песня, конкурс, профиль человека);

og:image – адрес изображения, используемого в качестве;

og:url – канонический URL-адрес объекта, который будет использоваться в качестве его постоянного ID в графе;

og:description – одно-два предложения описания вашего объекта.

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

Требования к картинкам в разных соцсетях ч.1

Требования к картинкам в разных соцсетях ч.2

Грубо говоря, минимальный размер картинки, который «понравится» всем сосцетям сразу, должен быть не меньше 640 px в ширину и не меньше 315 px в высоту.

Можно бесконечно долго искать секретную формулу, как сделать свой сайт лучше. Но в основе эффективных инструментов лежит главное правило – старайтесь сделать web-канал максимально удобным как для людей, так и для роботов. Позаботьтесь о своих гостях даже в самых незначительных мелочах. Не случайно на вопрос «Как роботы определяют лучшие сайты?» разработчики ответили: «Они ищут тех, кто готов не просто порадовать удобным дизайном и качественными текстами, а в буквальном смысле осчастливить посетителя сайта собой и своим контентом».

Добавить комментарий:

Ваш e-mail не будет опубликован.

Имя:

E-mail:

Комментарий*:

Введите символы, изображённые на картинке: *
Нажимая на кнопку, вы даете согласие на обработку персональных данных и соглашаетесь c политикой конфиденциальности.

Отправьте нам свой номер телефона,
и мы вам перезвоним!

Нажимая на кнопку, вы даете согласие на обработку персональных данных и соглашаетесь c политикой конфиденциальности.