Урок 319 Правильная страница «Контакты»: карта Яндекс на сайте и микроформат hCard

Привет. Сегодня я хочу показать вам, как должна выглядеть страница «Контакты» на коммерческом сайте с точки зрения SEO.

hСard

Страница «Контакты» должна быть выведена с использованием микроразметки hCard.

Очень подробно написано что такое hcard в Яндекс Помощи (добавьте эту ссылку в закладки, она вам пригодится не раз):

hCard — популярный, широко используемый во всем мире открытый формат, предназначенный для публикации контактной информации в структурированном виде.

Идея hCard очень проста: вы размечаете уже имеющиеся на вашем сайте данные специальным образом, чтобы сделать их понятными не только людям, но и роботам.

Обратите внимание на последнее предложение, используя hCard вы даете понимать ваши данные поисковым машинам, а не только людям.

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

Я обычно использую вот такой вариант микроформата hCard для сайтов (вы можете скопировать себе, а потом просто поменять данные на свои):

<div class='vcard'> <div><span class='category'>Интернет-агентство</span> <span class='fn org'>WPnew</span></div> <div class='adr'><span class='locality'>г. Чебоксары</span>, <span class='street-address'>ул. Текстильщиков, д. 8</span> <span class='extended-address'>после входа налево, эт. 2, оф. 777</span></div> <div class='tel'>Телефон: <abbr class='value' title='+7 (917) 777-77-77'<+7 (917) 777-77-77</abbr></div> <div class='tel'><span style='line-height: 1.5em;'>Электронная почта: </span><a class='email' style='line-height: 1.5em;' href='mailto:info@site.ru'> info@site.ru</a></div> <div>Мы работаем <span class='workhours'>пн-пт 9:00-18:00, сб 10:00-17:00, обед 13:00-14:00</span></div> </div>

В результате Вы получите что-то вроде этого:

Номер телефона

Распишу разные типы номеров телефона по приоритетности:

1. 8-800-…
2. Городской номер телефона.
3. Мобильный номер телефона.

Если мы можете использовать только  мобильный номер телефона, рекомендую подключить городской номер на мобильном, за подобную услугу придется платить всего в районе 50 рублей в месяц. В любом случае стремитесь к тому, чтобы номер телефона, как минимум был городским, а еще лучше типа «8-800…»

Формат номера телефона: +7 (777) 777-77-77 (обратите внимание на все пробелы и дефисы со скобками).

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

Яндекс карта на сайт

Сейчас я вам покажу, как вставить карту Яндекс на сайт. Если Вы продвигаетесь в первую очередь под Яндекс, я крайне рекомендую добавить Яндекс карту на странице «Контакты» (если вам приоритетнее Google, то выведите  Google Maps).

Cделать это очень просто:

1. Заходим на http://api.yandex.ru/maps/
2. Переходим во вкладку «Конструктор карт»:
3. Вбиваем требуемый адрес и нажимаем на кнопку «Найти»:
4. На Яндекс Картах вы увидите найденный адрес, даете описание своей компании, к примеру. Выбираете цвет «кружочка», проставляете номер при необходимости:
5. В результате, увидим, что-то подобное:
6. Вы можете нарисовать карту проезда к Вашей компании с остановки, например, с помощью инструментов, которые предлагает Яндекс. Я обычно подобное не рисую, так как карты — интерактивные, их можно приближать/отдалять и пользователь сам легко может разобраться:
7. «Двухсторонняя стрелка» — это тот инструмент, с помощью которого можно регулировать ширину и высоту Яндекс Карт:
8. Дальше даем название нашей карте и нажимаем на кнопку «Сохранить и получить код»:
9.  В итоге мы получаем код карты Яндекса, копируем его и вставляем на страницу «Контакты» в режиме HTML (кстати, в этом шаге можно выбрать, какой тип карт вывести — интерактивную или статическую?):
10. Если после вставки кода на сайт, вас не устраивает ширина или высота, не нужно возвращаться обратно к Яндексу, уменьшить/увеличить размеры можно задать прямо в коде (heigh — высота, width — ширина (в пикселях)):

URL

По поводу URL страницы «Контакты», я крайне рекомендую ее делать вида site.ru/contacts. Не нужно делать ее подчиненной какой-то странице и т.п.

Заключение

После всех манипуляций, продемонстрирую, как должна примерно выглядеть страница «Контакты» на коммерческом сайте с одним офисом:

Продемонстрированное — это минимум. Сюда можно (а в большинстве случаев даже нужно) добавить форму обратной связи.

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