Марафон v2.0

Урок 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. Не нужно делать ее подчиненной какой-то странице и т.п.

Заключение

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

Страница "Контакты" на сайте

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

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

P.s. Вам постоянно нужно перекидывать информацию с одного компьютера на другой? Тогда usb флешка по недорогой цене - это то, что нужно именно вам.

Новый марафон 2.0 от WPnew
С уважением, Пётр Александров.
Подпишитесь на бесплатные уроки

Понравился урок? Вы не хотите пропускать новые бесплатные уроки по созданию, раскрутке и монетизации блога? Тогда подпишитесь на RSS или на электронный ящик в форме выше и получайте новые уроки мгновенно! Также можете следить за мной в Twitter.

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

Такой e-mail уже зарегистрирован. Воспользуйтесь формой входа или введите другой.

Вы ввели некорректные логин или пароль

Извините, для комментирования необходимо войти.

14 комментариев

по хронологии
по рейтингу сначала новые по хронологии
Артём Черкасов http://zarabotka.guru/

Крутая тема для коммерческих сайтов, а теперь давай что-нибудь интересненькое для информационных =)

Александр Красильный http://wpmir.ru/

А что "интересненькое для информационных сайтов" вас конкретно интересует? Если есть конкретные вопросы, задавайте, как раз Пете будет некая мотивация для написания новых статей, если такой информации не окажется в ранее опубликованных постах.

Автор
Пётр Александров http://wpnew.ru

Да, было бы приятно еще получать более конкретные вопросы. 🙂 Может подкинете и идею для поста. А так, конечно будет.

Влад http://adzi.ru

Поддерживаю!

Никита http://blogokamne.ru

стоит ли использовать эту настройку для некомерческих сайтов?

т.е. дополнить страницу контактов на блоге? даст ли это результат?

и поддерживаю ребят 🙂 пора полезное для информационных сайтов выложить 🙂

Автор
Пётр Александров http://wpnew.ru

Для продвижения некоммерческих запросов (информационных) не стоит, эффекта не будет. Подобное нужно, если на вашем сайте встречаются коммерческие запросы, типа "купить что-то", "отзывы того-то" и т.д. А для запросов "как сварить варенье" подобная оптимизация страницы "Контакты" не требуется.

Александр Красильный http://wpmir.ru/

Смотря что вы подразумеваете под понятием некоммерческие сайты. Возьмем для примера ваш сайт о камне. Дело в том, что в будущем вы как и большинство вебмастеров планируете зарабатывать как минимум на рекламе. Одним из способов заработка на рекламе является работа на прямую с рекламодателем.

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

Владислав http://adobe-master.ru

Для обычных блогов вряд ли особо нужно?

Автор
Пётр Александров http://wpnew.ru

Нет, ответил чуть выше.

Александр http://terraingis.ru

Ну еще как, правда в другом смысле. Я например на одном из сайтов использую leaflet-скрипты, к стати доя WordPressa готовые плагины, ну для примера вот такой вариант, правда движок несколько другой про Озеро Морской глаз в РМЭ - promariel.ru/article/read/ozero-morskoj-glaz.html

Александр Красильный http://wpmir.ru/

Читайте чуть выше мое длинное сообщение, где под некоммерческие сайты попадают и обычные блоги.

Юрий http://uznaytut48.ru

Петр, а что это за фишка у вас, адреса сайтов стоят ниже имен? Как и для чего вы так сделали?

Автор
Пётр Александров http://wpnew.ru

Имею несколько украинских сайтов, которые продвигаю в гугле. Однако используют для разметки страницы контактов Schema.org вместо hCard. Есть какие-то наработки по поводу того какую разметку лучше использовать? Под гугл?

Наверх Рейтинг@Mail.ru