Как быть красивым в Google+

Мы уже рассказывали как сделать, чтобы ссылки на ваш сайт выглядели красиво в Фейсбуке, ВКонтакте и Твиттере. Слава Опенграфу!

Продолжим — в этой статье про Google+ и поисковики. Для них важно иметь на сайте микроразметку.

Что такое микроразметка

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

Потом этих форматов стало, ну, штук пять.

Опенграф — тоже формат передачи информации о том, о чем эта страничка. Его придумал Фейсбук и всем навязал, потому что может.

Гугл и Яндекс используют формат схемы (микроразметки), про который написано на schema.org. Форматов на самом деле несколько. Так Яндекс делает из него Острова, а Гугл использует свой формат разметки сниппетов и для карточек в Google+.

Схема страницы (Schema.org)

В отличие от Опенграфа, теги схемы можно вставить не только в head, но и в тело страницы. Чтобы было проще, мы для примера засунем в head.

Для схемы важно определить тип страницы и ключевые свойства объекта.

Первый пункт — прямо в теге html дать знать, что сейчас мы тут будем про статью рассказывать.

itemscope говорит «Хей, тут разметка по схеме», а itemtype — рассказывает, какого типа будет контент.

В схеме зарезервировано много разных типов контента (вот полный список). Скорее всего, вам хватит типов Product, Offer, Person, Event, Article, Blog, Book, Movie.

Теперь важно указать несколько базовых свойств контента:

• название
• url
• описание
• картинку
• автора

Они почти всегда размещаются одинаково. itemprop может висеть на абслоютно любом теге в вёрстке, главное — внутри тега с itemscope.

Мы делаем теги meta — это удобно, потому что их можно объединить в одном месте в шапке страницы с тегами для Опенграфа и Твиттера.

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

Про автора статьи можно рассказать с помощью схемы Person. Чтобы вы поняли масштаб трагедии, в схеме можно указать национальность и вес. Но нам нужны разве что имя и аватарка.

Внимание: этот код в head вставлять нельзя — этот код можно и нужно использовать уже в теле страницы, точнее просто использовать нужные item* теги там, где у вас автор статьи в верстке выводится.

В head это не сработает — там запрещены вложенные теги meta (они нужны, чтобы сделать вложенную сущность).

Используйте тестировщик от Гугла, чтобы проверить разметку на странице.

Что дальше

Настроили? Покажите в комментариях ссылки на то, что получилось — мы проверим, постветуем, как улучшить.

Нет времени тратить по двадцать минут и разносить статьи по всем соцсетям? Используйте Амплифер, чтобы создать план публикаций на неделю вперед.

В следующей статье будем разбираться с разметкой для Pinterest. 

Подключите Гугл+ в Амплифере