[kennivich]

Влияние на SERP от А до Я

Статья для конкурса в номинации от Goodvert на тему “Альтернативные методы продвижения в поисковых системах”

Предисловие

Около двух месяцев назад всерьез увлекся темой сниппетов. Потом ушел глубже изучать возможности влияния на SERP, возможности микроразметки, очень много информации читал из буржунета, перелистал кучу страниц выдачи и провел парочку экспериментов. За это время я заметил что по такой довольно обширной теме, и во многом уже не новой, в рунете практически нет толковой информации, лишь некоторые отрывки. Около месяца назад я поднимал эту тему тут на форуме и люди захотели обширную статью. Тема вполне не маленькая, но вместе с конкурсом пришел стимул, и вот она :) Статья получилась достаточно длинная, однако в свете малого количества информации по этой теме хотелось основательно поправить ситуацию.
В тексте упоминается эта статья. На данный момент она не совсем актуальна, но некоторые моменты в ней очень хорошо написаны, так что повторяться мне ни к чему.
Так же в статье вы найдете достаточно подробное описание работы с микроразметкой(см. Рецепты).

Введение

Большинство вебмастеров рунета настолько погрязли в стандартных, а в некоторых случаях даже устаревших способах продвижения сайтов, что не обращают внимания на современные тенденции и возможности которые им представляют поисковые системы. Одно из таких направлений - влияние на SERP.
Зачем оно надо? Вместо того чтобы воевать с ПСами пользуясь серыми способами продвижения и оставаться под риском санкций или фильтров, у Вас есть возможность значительно повысить CTR в выдаче, пользуясь абсолютно белыми способами. Так же при этом улучшаются ПФ сайта, и позиции дополнительно идут вверх, увеличивая количество кликов еще больше. Такие работы особенно эффективны для сайтов, которые занимают 3-5 места в выдаче, так как в некоторых случаях сайт на 3-ем месте может собирать даже больше кликов, чем конкуренты сверху! Таким образом, по многим ВЧ запросам можно сэкономить немалые суммы на покупке ссылок и контента.
Как это выглядит на практике? Вот пара примеров.

Простой сниппет

Сниппет рецепта

Чем не красота? И это далеко не все возможности, которые дает нам гугл. С яндексом дела обстоят несколько скучнее, однако основные виды разметки он так же поддерживает. Ну а чтобы картина была полной мы рассмотрим все возможности, которые доступны вебмастерам для придания блеска сниппетам. И чтобы полностью освятить тему влияния на SERP начнем с основ.
Базовые элементы

Title

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

Description

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

Про эти 2 пункта можно было бы написать намного больше, однако они прекрасно описаны в статье указанной в начале (см. пункты 1, 4 и “обычные сниппеты”), так что изобретать велосипед не будем и перейдем дальше.

Урл сайта

На практике имеет достаточно малое значение, но забыть про него тоже нельзя. В первую очередь стоит поработать если ваши урлы выглядят так:
site.com/%D0%BA%D0%BE%D1%80%D0%B7%D0%B8%D0%BD%D0%B0
Это происходит из-за того что кириллические урлы обрабатываются в виде пуникода, и кроме ужасного вида это может стать причиной появления дублей, так что лучше заменить их на аналогичные в транслите и поставить редиректы. То же самое следует проделать с урлами вида: site.com/?page=123. Так же в некоторых случаях есть смысл сократить урлы. К примеру, если у вас урл в виде: “site.com/рубрика/страница”, а названия рубрик и страницы достаточно длинные, то, в общем, получится уж очень длинный урл, который не будет смотреться. В таких случаях есть смысл убрать рубрику из урл-а, оставив только “site.com/страница”.
Если ваша цель сделать сниппет максимально привлекательным, то такого вида урл-ы можно получить в яндексе и гугле:

Яша

Гугл

Для начала рассмотрим, как получить такой урл в выдаче гугла. Для этого лучше всего использовать хлебные крошки с микроразметкой. Гугл распознает разные способы разметки: rdf, микроданные, schema.org (в faq написано, что поддерживается не хуже других вариантов, однако на практике размеченные схемой крошки не воспринимаются). В некоторых случаях крошки воспринимаются гуглом и вовсе без разметки. Живой пример разметки крошек с помощью RDF есть в предыдущей статье (см. пункт 2), но использовать его в том виде не советую. Почему? Это обман ПС, так как эти крошки никоим образом не связаны с навигацией. Личный эксперимент показал, что такие урлы гугл показывает, но через время понимает, в чем дело и убирает их. Я не уверен, связано ли это, так как случай единичный, но когда гугл перестал выводить урлы в таком виде и я сделал крошки по-нормальному, показывать их в серпе гугл не хочет, хотя и давно переиндексировал. Точно сказать не могу, но мне кажется, за такой обман гугл будет лишать сайты расширенных сниппетов. И это вполне логично. Так что лучше не полениться и настроить их в нормальном виде, то есть вместо “but-tech.com > Магазин Бытовой Техника №1” сделать один из вариантов:
1. “but-tech.com > запись”
2. “but-tech.com > рубрика”
3. “but-tech.com > рубрика > запись”
Причем в последнем варианте “запись” может быть как ссылкой, так и, просто текстом. Для WP есть плагин Breadcrumb NavXT, на других CMS насчет подобных плагинов не уверен, хотя на популярных быть должны. Но на всякий случай рассмотрим общий шаблон кода (для варианта 1):

PHP код:

<div xmlns:v="http://rdf.data-vocabulary.org/#">
<span typeof="v:Breadcrumb">
<a property="v:title" rel="v:url" href="http://ваш_сайт/">Главная</a> › </span>
<span typeof="v:Breadcrumb">
<a property="v:title" rel="v:url" href="http://ваш_сайт<?php echo $_SERVER["REQUEST_URI"]; ?>">[title]</a></span>
</div>

Вместо “Главная” вы можете подставить свой анкор (он роли не играет), вместо “ваш_сайт” вставляем собственно ваш site.com, а вместо [title] вам нужно будет найти в документации вашего движка функцию, возвращающую заголовок текущей страницы. После того как заменили [title], весь этот кусок кода вставляем в удобное для вас место в шаблоне и - вуаля!

Яндекс в свою очередь использует немного другой способ составления урлов в выдаче. Точного рецепта получения такого урла в выдаче нет, однако как показывает практика, для его получения нужно вхождение ключа в title, заголовок в теле страницы или ЧПУ (лучше, если во всех трех местах). Тогда ключевое слово (словосочетание) возможно, будет использовано яндексом для придания красоты урлу вашего сниппета.

Дополнительные элементы

А теперь мы перейдем к “вкусненькому”, к тем возможностям которые дают ПСы для расширения информации выводимой в SERPе.

Быстрые ссылки

Тут со стороны вебмастера влияние минимально, так, что рассматривать практически нечего. Если для вашего сайта определены какие-либо быстрые ссылки, их можно найти в разделе “Сайт в результатах поиска > Быстрые ссылки” в панели ЯВ. Там их можно глянуть, и если туда попал какой-либо мусор - выкинуть. Аналогичные операции можно провести в разделе “Конфигурация > Ссылки сайта” в панели гугл для вебмастеров. Самому добавлять быстрые ссылки нельзя, их определяют сами поисковые системы. Чтобы роботы лучше распознавали потенциальные страницы, для таких ссылок ПСы рекомендуют делать продуманную структуру навигации и меню сайта, названия таких страниц короткими и уникальными, и ссылки на такие страницы оснащать заполненным атрибутом alt.
Для тех, кто не в курсе что такое быстрые ссылки:

В гугле они могут быть и в расширенном виде

однако, такие сниппеты это уже удел избранных :)

Favicon

Кажется что совсем мелочь, но в действительности может иметь значение, хотя и только в яндексе. Для ясности сразу рассмотрим на примерах:

Удачная фавиконка

Аккуратная, притягивающая взгляд к сниппету фавиконка. Плюс форма стрелочки создает дополнительный эффект. Хотя отдельно выдранный сниппет выглядит не так эффектно, но в выдаче по запросу “внутренняя перелинковка” сосновский явно выделился среди конкурентов этой примечательной картиночкой.

Неудачная фавиконка

Непонятно что изображено на этой фавиконке, но выглядит в выдаче она как непонятное пятно, от которого так и хочется отвести взгляд. Видимо вебмастер просто залил первую попавшуюся картинку. И это достаточно распространенная проблема, на которую немногие обращают внимание. Решить же ее очень просто, так как в интернете можно найти массу бесплатных примечательных фавиконок. Ну, или можно заказать у дизайнера. Обойдется вам это дело в 5-10$

Рецепты

Одна из самых вкусных возможностей микроразметки. Хотя сниппеты кулинарных рецептов в яндексе можно получить и без разметки (используя специальный xml-фид), правильная разметка микроформатами так же обеспечит Вас красивым сниппетом в гугле. Ну и собственно как это выглядит:

Яндекс

Гугл

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

Пример страницы

Код HTML:

<head>
    Бла-бла-бла
</head> <body> <div class = “menu”> <img src=”site.com/logo.jpg”>
Бла-бла-бла
</div> <div class = “content”> <div> <h1> Рецепт красивого сниппета с картиночками </h1> <img src=”site.com/готовый-сниппет.jpg”>
        Ингридиенты
            Кулинарный сайт 1 шт.
            Вебмастер  1 шт.
            Руководство по микроформатам 1шт.
            Микроформаты 1 ст.л.
            Картинки по вкусу
        Способ приготовления
Для начала берем нашего вебмастера и скармливаем ему заранее приготовленное руководство.
<img src=“site.com/фото-кушающего-вебмастера.jpg”>
Когда он будет готов, даем ему кулинарный сайт и постепенно высыпаем из ложки микроформаты.
<img src=”site.com/фото-ложки-с-микроформатами.jpg”>
В процессе добавления микроформатов для лучшего вкуса можно добавить дополнительные картинки.
<img src=”site.com/еще-какое-нибудь-фото.jpg”>
Та-дамс! Красивый сниппет готов для съедения поисковыми роботами, и если вы все сделали правильно, они обязательно отблагодарят вас в выдаче!
    </div> <div id = ”comments”>
        Бла-бла-бла
    </div> </div> <div class = “footer”>
    Бла-бла-бла
</div> </body>

[свернуть]

В принципе, у нашей странички все атрибуты живой страницы. Для начала в вашем шаблоне страницы вам нужно будет найти такой тег, в котором расположен весь текст рецепта, но в то же время минимум мусора. В примере он выделен подчеркнутым текстом. Мы выбрали именно его, а не div с классом content и тем более не body, так как он не содержит лишний мусор вроде комментариев или других, не относящихся к рецепту элементов сайта. Теперь добавляем к нему класс hrecipe, и теперь наш тэг будет выглядеть так: <div class=”hrecipe”>. Если подходящий тэг на вашем сайте уже содержит какие-либо классы - ничего страшного, тэг может содержать несколько классов одновременно, достаточно разделить их пробелом (к примеру <div class=”class1 hrecipe”>). Есть так же другой вариант - этот тэг обвалакиваем в новый div с классом hrecipe, как это выглядит на примере:

Код HTML:

<div class=”hrecipe”> <div class=”какие-либо классы”>
        Тело рецепта
     </div> </div>

где <div class=”hrecipe”> - это тэг который вам нужно будет добавить по аналогии, а подчеркнутый div это тэг который вы нашли у себя на странице.

Далее ищем название рецепта (заголовок статьи, название блюда). В нашем случае это “<h1> Рецепт красивого сниппета с картиночками </h1>”. К тэгу, в котором у вас название добавляем класс fn. Если у вас название написано обычным текстом, можно завернуть его в тег <span> таким образом:
<span class=”fn”> Название </span>
Далее мы наткнулись на картинку. Чтобы было удобнее, мы рассмотрим разметку всех картинок сразу. Важно! Размечать нужно только картинки внутри статьи. В примере они выделены наклонным шрифтом, в то время как <img> внутри div класса menu трогать не нужно. Для красивого сниппета в гугле достаточно одной размеченной картинки в статье, однако для яндекса нам понадобится не менее 4-ех (это видно в примере сниппетов сверху), так что рассматривать мы будем универсальный вариант. Причем из 4-ех картинок одна должна быть фоткой готового блюда (это нужно для яндекса), и она должна быть расположена выше остальных(это нужно чтобы гугл выбрал из них нужную). К первой картинке добавляем сразу 2 класса: photo и result-photo. Выглядеть это будет примерно так:
<img class=”photo result-photo” src=”site.com/готовый-сниппет.jpg”>
К остальным картинкам (их в статье может быть неограниченное количество) добавляем класс photo. Пример:
<img class=”photo” src=“site.com/фото-кушающего-вебмастера.jpg”>

Теперь перейдем к списку ингредиентов. Общая схема для каждого ингридиента в нашем случае будет такая:

Код HTML:

<span class="ingredient"> <span class="name">Название</span> <span class="value">Количество</span> <span class="type">Единица измерения</span> </span>

По аналогии соответствующие классы ingredient, name, value и type могут быть добавлены и другим тегам, но в нашем примере их нет, поэтому я добавил тэги <span>. Хотелось бы сразу заметить, что порядок, в котором расположены 3 тэга span внутри роли не играет, просто в таком порядке в нашем примере расположен список ингредиентов. Рассмотрим пару примеров размеченных ингридиентов:

Код HTML:

<span class="ingredient"> <span class="name">Кулинарный сайт</span> <span class="value">1</span> <span class="type">шт.</span> </span> <span class="ingredient"> <span class="name">Микроформаты</span> <span class="value">1</span> <span class="type">ст.л.</span> </span> <span class="ingredient"> <span class="name">Картинки</span> <span class="value">по вкусу</span> </span>

Из примера видно что type и value ингредиента может быть записан в произвольной форме, и никаких спецификаций для него нет. В некоторых случаях он и вовсе может отсутствовать. Аналогично может отсутствовать и value, однако без name ингредиент быть не может. Такая подробная разметка ингредиентов нужна чтобы яндекс мог правильно составить описание в сниппете.

Ну и остались инструкции. Их ни гугл, ни яндекс никак не использует, так что подробная разметка тут ни к чему, однако они обязательно должны быть размечены(без них ПСы не будут воспринимать ваш рецепт). Так что берем целиком весь текст с инструкциями и заворачиваем в тег <span> с классом instructions. Пример:

Код HTML:

<span class=”instructions”>
Для начала берем нашего вебмастера...дополнительные картинки.
<img src=”site.com/еще-какое-нибудь-фото.jpg”> <span>

Теперь для яндекса мы полностью готовы и в таком виде у вас уже будут красивые сниппеты. Но для гугла еще можно добавить 2 детали: время готовки и калорийность (их отображение есть в примере сверху). Вы наверняка так же обратили внимание на надпись “Отзывов: 5” - мы еще рассмотрим, как это получить, но на данный момент мы рассматриваем конкретно рецепты.
Итак - время готовки. Скажем, у нас есть такая запись:

Время готовки блюда 25 минут.

Ее нам нужно преобразовать в запись такого вида:

Время готовки блюда <span class="duration"><span class="value-title" title="PT25M"> </span>25 минут</span>,
где подчеркнутые цифры в title так же означают, кол-во минут готовки.

И последнее поле - калорийность. Сразу перейдем к примеру:

Калорийность блюда - 315 ккал.

Размечаем:

Калорийность блюда - <span class="nutrition"><span class="calories value">315</span><span class="type"> ккал</span></span>.

Ну и собственно объединим все и глянем, что получилось:

Пример страницы

Код HTML:

<head>
    Бла-бла-бла
</head> <body> <div class = “menu”> <img src=”site.com/logo.jpg”>
Бла-бла-бла
</div> <div class = “content”> <div class = “hrecipe”> <h1 class=”fn”> Рецепт красивого сниппета с картиночками </h1> <img class=”photo result-photo” src=”site.com/готовый-сниппет.jpg”>
        Ингредиенты
<span class="ingredient"> <span class="name">Кулинарный сайт</span> <span class="value">1</span> <span class="type">шт.</span> </span> <span class="ingredient"> <span class="name">Вебмастер</span> <span class="value">1</span> <span class="type">шт.</span> </span> <span class="ingredient"> <span class="name">Руководство по микроформатам</span> <span class="value">1</span> <span class="type">шт.</span> </span> <span class="ingredient"> <span class="name">Микроформаты</span> <span class="value">1</span> <span class="type">ст.л.</span> </span> <span class="ingredient"> <span class="name">Картинки</span> <span class="value">по вкусу</span> </span>
        Способ приготовления
        <span class=”instructions”>
Для начала берем нашего вебмастера и скармливаем ему заранее приготовленное руководство.
<img class=”photo” src=“site.com/фото-кушающего-вебмастера.jpg”>
Когда он будет готов, даем ему кулинарный сайт и постепенно высыпаем из ложки микроформаты.
<img class=”photo” src=”site.com/фото-ложки-с-микроформатами.jpg”>
В процессе добавления микроформатов для лучшего вкуса можно добавить дополнительные картинки.
<img class=”photo” src=”site.com/еще-какое-нибудь-фото.jpg”> </span>
Время готовки блюда <span class="duration"><span class="value-title" title="PT25M"> </span>25 минут</span>
Калорийность блюда -  <span class="nutrition"><span class="calories value">315</span><span class="type"> ккал</span></span>.

Та-дамс! Красивый сниппет готов для съедения поисковыми роботами, и если вы все сделали правильно, они обязательно отблагодарят вас в выдаче!
    </div> <div id = ”comments”>
        Бла-бла-бла
    </div> </div> <div class = “footer”>
    Бла-бла-бла
</div> </body>

[свернуть]

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

Код:

<тэг class=”Название поля”>
    Содержание поля
</тэг>

Это нужно, чтобы вы далее четко понимали, о чем я говорю без постоянных примеров. Ну и пока мы не ушли далеко от темы разметки, сразу хотелось бы рассмотреть работу с микроданными (schema.org), так как они пригодятся нам далее. Принцип разметки абсолютно такой же, с двумя незначительными отличиями:
1. Название поля пишется не в class, а в дополнительный атрибут itemprop
2. Если в названии поля обозначается название объекта (к примеру, Recipe), то добавить нужно 2 атрибута - itemscope и itemtype, и название поля пишется в itemtype.
Не совсем понятно на словах, так что рассмотрим на примере размеченного мини-рецепта:

Код HTML:

<div itemscope itemtype="http://schema.org/Recipe"> <h1 itemprop=”name”> Мини-рецепт </h1> <img src=”site.com/фото-мини-рецепта.jpg” itemprop=”image”> </div>

По сути, в примере все видно. Если вы разобрались с микроформатами, то тут у вас вопросов не возникнет. Так же вы наверняка заметили, что schema.org выглядят куда привлекательнее и интуитивно-понятнее, однако на практике поддерживаются они пока хуже(слишком сырые стандарты).

Отзывы (обзоры)

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

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

Код HTML:

<div xmlns:v="http://rdf.data-vocabulary.org/#" typeof="v:Review-aggregate">
Всего <span property="v:count">[B]2[/B]</span> оценки, в среднем: <span property="v:average">[B]4,50[/B]</span>баллов, из  максимальной оценки в <span property="v:best">[B]5[/B]</span> баллов.
</div>

Я думаю тут, и объяснять нечего, все прекрасно видно и понятно. Только стоит заметить, что главное разметить эти 3 числа, выделенные в примере, остальной текст роли не играет. Плюс, этот пример легко адаптировать под любой, к примеру, плагин голосования. Или рейтинга. Вариантов использования, по сути, масса, и придумать, куда всунуть этот рейтинг труда не составит. Еще хотелось бы заметить, что гугл частенько опускает эти звездочки в выдаче, если голосов мало (меньше 3-ех). Но не увлекайтесь накруткой - если в один прекрасный день вдруг появится 50 голосов, а потом они так и будут висеть, роботы могут понять в чем дело (опыт буржуйских коллег).

Товары

Тут, к сожалению универсального варианта, на данный момент нет, так как яндекс не обрабатывает разметку товаров. Если быть точным - обрабатывает, но использует исключительно в случаях с авто, и даже при этом ваш сниппет красивее не станет, просто информация, возможно, будет использовано в Auto.Yandex. Но это не значит, что выделиться, не получиться. Вот пример:

Для получения такого сниппета яндексу нужно передать информацию о товарах на вашем сайте. Скажу сразу - дело геморное, однако так как речь об онлайн магазинах и клиентах - стоящее. Передать эту информацию можно двумя способами: через Я.Маркет или Я.Вебмастер. Изобретать велосипед я не буду, это уже сделали на хабре http://habrahabr.ru/post/159937/. Если же загружать товары в маркет вы не хотите, тогда их нужно загрузить в панели вебмастера, а прайсы составляются тем же способом, что описан в хабростатье (часть 1).

Ну а теперь перейдем к товарам в гугле. И по традиции начнем с примера:

Код HTML:

[ATTACH=CONFIG]8229[/ATTACH]

Как вы видите к нашему сниппету можно добавить цену (либо слово Бесплатно) и доступность товара. Использовать для этого мы будем разметку schema.org, так как она отлично распознается и удобна в использовании. Пример в студию:

Код HTML:

<div itemscope itemtype=”http://schema.org/Product”> <h1 itemprop=”name”> Красивый сниппет </h1> <div itemprop="offers" itemscope="" itemtype="http://schema.org/Offer">
Вы можете купить красивый сниппет всего за <span itemprop="price"> $9.99  </span>
На данный момент они есть <link itemprop="availability" href="http://schema.org/[B]InStock[/B]" /> в наличии
</div>
Описание:
<span itemprop=”description”> красивый сниппет купленный у нас дает вам гарантированное увеличение числа кликов в поисковых системах </span> </div>

По большей части, после прочитанного в разделах выше, вы уже должны легко понимать все из примера. Но на всякий случай я уточню некоторые моменты:
1. В данном случае действительно используется сразу 2 объекта – Product (Продукт) и Offer (Предложение). Причем объект Offer лежит внутри продукта и соответственно принадлежит ему.
2. Если в цене (span с itemprop="price") указать $0, то в выдаче будет отображаться слово “Бесплатно”.
3. В доступности товара (выделено в примере) можно указать не только “В наличии”. Другие варианты можно посмотреть тут.
4. Добавлением нескольких объектов Offer с разными ценами можно добиться такого результата:

Авторство

Сразу хочу отметить - относится только к гуглу. На данный момент достаточно популярный вариант, так как при минимальных усилиях можно получить сниппет с картинкой. По традиции - пример(P.S. это я :Р):

Получить такой сниппет не сложно. Для начала нам понадобится живой профиль Google+. Если у вас уже есть аккаунт gmail, то достаточно просто зайти в G+ и заполнить свой профиль. Если нет - регистрируем. Главное это поставить аватарку, однако я бы посоветовал сделать профиль живым (максимально заполнить информацию), чтобы увеличить шансы появления вашего фото в выдаче. Теперь собственно привязываем страницы к вашему аккаунту. Для этого есть 2 способа:
1. На страницы с контентом разместить ссылки на ваш профиль G+. Ссылки должны иметь вид:
<a href="https://plus.google.com/1148849..." rel="author">Любой анкор</a>,
где 1148849... это ваш id. Глянуть его в урле страницы, если вы откроете свой профиль G+. А так же в самом профиле G+ добавить ваш сайт в поле “Мои публикации”.
2. Если у вас есть почта на домене вашего сайта (к примеру admin@ваш_сайт.ru), тогда вы можете привязать ее к аккаунту G+ тут.
Еще небольшая плюшка - если ваш профиль G+ находится в большом кол-ве кругов, то можно получить небольшой бонус:

События

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

Как вы видите - использовать события в сниппете можно по-разному. Ну а теперь рассмотрим, как это выглядит в коде:

Код HTML:

<div itemscope="" itemtype="http://schema.org/Event"> <a href="[B]Урл[/B]" itemprop="url"><span itemprop="name">[B]Название[/B]</span></a> <meta itemprop="startDate" content="[B]2013-03-010T111:20:00[/B]"> <meta itemprop="endDate" content="2013-03-020T110:20:00"> <span>Mar  10, 2013</span> <span itemprop="location">[B]Место[/B]</div> </div>

Урл - урл страницы, на которую будет вести ссылка в сниппете. Ссылка обязательно должна быть на тот же домен, на котором находится размеченная страница.
Название - анкор ссылки в сниппете
Место - надпись после "-" в сниппете
2013-03-010T111:20:00 - дата события в формате YYYY-MM-DDT1HH:MM:SS.
Ну и небольшое пояснение, почему в примере 3 ивента выглядят по-разному. В первом событии отсутствует meta-endDate и span-location, поэтому дата показана конкретным числом и отсутствует место. Во втором примере эти 2 тега присутствуют - результат на лицо. В третьем примере отсутствует только meta-endDate.

Видео

Опять же - исключительно гугл. Как это выглядит:

Чтобы получить такой сниппет, в первую очередь важно, чтобы видео правильно было встроено на странице, тогда можно обойтись и вовсе без разметки. Что имеется ввиду под “правильно”:
1. Каждое видео должно быть на отдельной странице
2. Если видео на вашей странице взято с youtube, то встраивание нужно делать с помощью тега <iframe>.
3. Если используются свои видео, то желательно использовать тег SWFObject или один из популярных плееров (к примеру, Flowplayer или JWPlayer). Либо можно использовать тэг <video> из html5. Так же желательно, чтобы к видеофайлам был прямой доступ через http.
Однако это по большей части советы гугла. На практике я наблюдал немного другую картину. Чтобы получить такой сниппет есть 2 пути:
1. Правильная настройка вашего плеера и разметка с помощью rdf. Работает в основном на достаточно трастовых сайтах.
2. Вставляем видео через ВК плеер и не паримся. Распознается даже на юкозовских ГСах при изъятом из просмотра видео без всякой разметки.
Я думаю, выбор пути очевиден :)

Организации

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

Гугль

Яндекс

На практике все просто - для этого нужно передать информацию о вашей организации в Гугл.Адреса и Яндекс.Справочник.

Прочее

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

Музыка

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

Приложения

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

Люди

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

Дополнительная выдача

Картинки

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

Видео

Если ваш сайт содержит большое количество видеороликов, и вы хотели бы попасть в соответствующую выдачу в ПСах, для гугла вам нужно выполнить рекомендации из раздела “Видео” выше, а для яндекса использовать OpenGraph, XML или Media-RSS.

Прочее

Как в яндексе, так и в гугле есть и куча прочих разделов выдачи: обсуждения, блоги словари, новости и множество других. Однако их польза очень сомнительна. Разве что Я.Маркет, однако, мы уже рассматривали его в разделе Товары. Гугл.Маркет к сожалению пока не работает в рунете, только США.

Хитрости

Так же используя рассмотренные схемы разметки, можно обманывая ПСы, необычным образом выделится в выдаче. Некоторые примеры указаны в статье указанной в начале, однако включив фантазию можно придумать, еще кучу всего. К примеру, к варез сайту можно прикрутить звездочки и разметку товара. Причем тут товар? В разметке мы укажем стоимость $0, и в сниппете будет красоваться слово “Бесплатно”. Выглядит достаточно эффектно, когда человек вбивает в поиск, к примеру “Скачать windows бесплатно” и видит такой сниппет. Ну и как я писал выше, включив фантазию можно придумать достаточно много схем оригинальных сниппетов. Однако хочу вас предупредить: по опыту буржуйских коллег, гугл в некоторых случаях распознавал такие хитрости и сайты лишались красивых сниппетов, однако на позиции это никак не повлияло.

Заключение

Надеюсь статья не показалось вам слишком длинной, так как я старался оставить только нужную информацию. Вебмастерам на будущее - посматривайте в сторону schema.org. Семантической разметке пророчат большое будущее как части семантического поиска, и не только в плане расширения сниппетов.

[zelez]

Хорошая статья! Правда с микроформатами уж очень много возни... Если нужно большое количество статей так оформить, то куча времени уйдет, а автоматизировать не как...

[kennivich]

Насчет автоматизации вы не правы :) На данный момент готовых решений насколько я знаю нет, однако сейчас работаю в этом направлении :)

[zelez]

kennivich, О! Успехов! Очень полезная штука была бы...

[genjnat]

Отличная статья, и работу по сбору информации проделали большую. Если бы еще и ПС, эти команды выполняли, безотказно...
Я микроразметку в снипете от Гугла ждал полгода, а от Яндекса полтора, с момента внедрения. Дали, но, Гугл для 30-40 страниц, а яндекс и вовсе, штук 10-15 отметил (речь про hRecipe), а разметил я около 300 - ручками, и каждую на валидность проверял.
На очереди еще около 3 к страниц, но как-то уже нет желания.

[kennivich]

genjnat, ну ручками 3к страниц это точно лишнее :)

[bljaher]

Очень интересный труд, в свое время искал что-нибудь подобное. Цдачи в конкурсе!

[Sabirchik]

Отличная статья. то что нужно новичкам. Всё разжевано и подробно рассказано, а так же с примерами. Желаю удачи вам в конкурсе.

[INFOdoz]

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

[kennivich]

Что-то практически никто не комментирует статью
Еще один момент, не хотелось впихивать это в статью - нужна небольшая тестовая группа. Сейчас много думаю в направлении автоматизации разметки, и есть некоторые идеи, однако своих сайтов нужных тематик нет. Поэтому хотелось бы получить тройку урлов сайтов кулинарной тематики, и по паре сайтов содержащих события и товары. С расчетом на то, что если дойдет до реализации идеи, эти сайты получат бесплатные версии, а от них в свою очередь хотелось бы получить развернутые отзывы. На данный момент никакого доступа к сайтам не нужно, только урл, пару ссылок на не размеченные страницы, пару ссылок на размеченные(если таковые имеются) и название CMS(опять же, если имеется). Требования к сайтам: СДЛ без всяких фильтров на нем. Если заинтересовало - пишите в ЛС.\
P.S. Просьба к модераторам - поправьте в разделе Товары картинку. Случайно засунул тег атача в тег html.