Приветствую вас, уважаемые читатели блога сайт !

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

Вы знали о том, что 90% сайтов сегодня не используют микроразметку?! Пока они не успели понять своих ошибок, вы можете обогнать их на шаг и даже не один и уйти вперед. Поверьте микроразметка выделит ваш ресурс среди поисковиков как наиболее качественный!

Кстати недавно я писал о том, . Если вы еще не сделали у себя на сайте карту, то обязательно прочитайте эту статью.

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

Что такое микроразмета сайта и зачем она нужна

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

Если вы хотите увидеть как примерно видит ваш сайт поисковик, то зажмите одновременно ctrl+u и увидите исходный код страницы. Там все: скрипты, стили, картинки, комментарии, заголовки, блоки и т.д.

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

Для них он – как водителю эта пьяная дорога

Нет, конечно, алгоритмы поисковиков с каждым днем совершенствуются и автоматизируются. Но если вы хотите создать качественный ресурс, который будет быстро индексироваться и выводится в ТОП, то добавление микроразметки на сайт просто необходимо. Даже вопроса не должно стоять, делать разметку или нет. Если вы делаете разметку, ваш проект уже на шаг впереди тех сайтов, где ее нет. И в итоге для поисковика, ваш блог будет как аккуратная доска со стикерами, каждый из которых несет свою смысловую нагрузку

Все понятно и структурированно

Если вы все же не поняли, что такое микроразметка сайта, то посмотрите это видео от Яндекс :

Как проверить микроразметку сайта

Чтобы проверить, есть ли на вашем ресурсе микроразметка и в каком она состоянии, просто перейдите по этой ссылке https://webmaster.yandex.ru/microtest.xml и введите в верхней строке адрес вашего ресурса. Возможно, что в ответ будет написано, что микроразметка не обнаружена или же вылезет Предупреждение – это значит, что нужно что-то исправить. Вот и все, посмотрели как есть, идем дальше.

Микроразметка header на сайте для WordPress

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

Первым делом добавим микроразметку названия и описания блога. В панели управления wordpress в разделе Внешний вид – Редактор находим файл header.php, также этот и последующие файлы вы можете найти в файловом менеджере хостинга в папке с вашей темой.

Находим тег header и внутри тега пишем

itemscope itemtype="http://schema.org/WPHeader"

itemscope говорит роботу о том, что внутри этого тега будет что то описано.

itemtype сообщает, что конкретно будет описываться.

http://schema.org/WPHeader – сообщаем, что речь пойдет о заголовке блога на WordPress.

Ищем место где выводится имя блога, обычно это выглядит так – и находится в теге

. Внутри тега h1 пишем itemprop=”headline”. Должно получиться примерно так

itemprop="headline" >

добавляем itemprop=”description”. Вот так:

itemprop="description" >

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

Таким образом в файле header.php мы показали роботу название и описание нашего блога.

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

Как вам статья? Получилось начать внедрение микроразметки? Отпишитесь в комментариях.

С уважением,

Хотите увеличить ваш трафик из Google? Наверняка, все ответят на этот вопрос ДА!

Большинство людей, слыша фразу Органический трафик, в первую очередь думает о ранжировании своего сайта в Google. Но не столь важно, какое место вы занимаете в рейтинге, вам нужно максимизировать количество людей, которые таки зашли на ваш сайт из поисковой системы.

Как это сделать? Используйте Schema Markup и микро-данные для Rich Snippets для вашего сайта в поисковых системах. Вы можете сделать это вручную, но есть несколько потрясающих бесплатных и премиум плагинов, которые сделают это за вас.

В этой записи мы покажем вам, что такое Rich Snippets и Schema Markup, а потом расскажем о нескольких отличных плагинах для реализации всего этого в WordPress.

Приступим!

Что такое Rich Snippets и Schema Markup?

Rich Snippets - это такое дополнение к результатам поисковой выдачи, которые вы видите в Google. Вы можете помочь поисковой системе добавить их, используя кое-что под названием "микро-разметка" или Schema Markup на вашем сайте. Schema Markup структурирует микро-данные для того, чтобы поисковая система легче определяла тип вашего контента.

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

Это визуально выделяет первый результат поиска среди других результатов. Выделяться - значит получать больше посетителей.

Микро-разметка и Rich Snippets подходят не только для сайтов с обзорами. Вот несколько примеров других Schema Markup, которые вы можете использовать:

• Рецепты
• Фотографии
• Особенности продукта
• Адреса и номера телефонов
• И многое, многое другое

Вы можете проверить их полный список на schema.org. Форматы, перечисленные там, поддерживают все основные поисковые системы.

Добавьте Rich Snippets и получите больше органического трафика

Мы хотим, чтобы вы поняли, что Rich Snippets и Schema Markup не влияют на ранжирование вашего сайта в Google (хотя сам Google не отрицает такой возможности). Они увеличивают число людей, которые заходят на ваш сайт из поисковой системы, или другими словами CTR (click-through rate).

CTR - это не просто битва за клик. Это то, что вам нужно оптимизировать в органическом поиске. Новости от Search Engine Land показывают, что некоторые сайты увеличили свой трафик почти на 30% после внедрения Rich Snippets.

Мы не можем гарантировать, что вы тоже увеличите свою посещаемость на 30%, но даже если на 5% или 10%, то уже будет здорово, не так ли?

Для этого вам не нужно углубляться ни в какой код. Просто выберите один из плагинов, установите и настройте его. И вы увидите, как через несколько дней Rich Snippets появятся в поисковом запросе на ваш сайт.

1. All In One Schema.org Rich Snippets

Цена: Бесплатно

All In One Schema.org Rich Snippets - это сложное название для плагина, но он всё равно является одним из наиболее популярных бесплатных плагинов. У него есть все нужные базовые функции.

Плагин поддерживает схемы для множества тем, к примеру, отзывы, события, рецепты и т.д. Тут также можно предварительно просматривать как будут выглядеть Rich Snippets в поиске Google.

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

2. Schema Creator by Raven

Цена: Бесплатно

Schema Creator by Raven - ещё один бесплатный вариант для добавления микро-данных, хотя он и не обновлялся уже год.

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

3. WP Rich Snippets

Цена: от $69

WP Rich Snippets - не бесплатный плагин, но за эти деньги вы получите массу функций.

У него есть множество параметров для настройки Rich Snippets, которые можно найти в красиво спроектированной и очень интуитивной консоли. Вы можете добавлять:

• Рейтинг
• Часы роботы
• Адреса и телефоны
• И многое другое

К тому же, есть много расширений, которые можно интегрировать с WooCommerce, добавить шорткоды и таблицы данных, показать местоположение на Google Maps и так далее.

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

4. Schema App Structured Data

Цена: Бесплатно с платными аддонами

Schema App Structured Data - бесплатный плагин для установки Rich Snippets на ваш сайт. Он автоматически добавляет базовые данные Schema Markup на все записи и страницы, которые потом можно настроить.

Плагин может автоматически подключаться к Schema App Editor и автоматически создавать и проверять данные, но эта функция, к сожалению, платная.

Но если вам нужны только базовые функции, то их Schema App Structured Data предоставляет бесплатно. Но всегда можно передумать и купить дополнительные функции.

5. Rich Snippets WordPress Plugin

Цена: $12

Rich Snippets WordPress Plugin - это платный плагин от CodeCanyon, но его цена значительно ниже, чем WP Rich Snippets.

Он генерирует шорткоды схемы, которые вы можете показывать в записи или оставить невидимыми для пользователей (но видимыми для поисковых систем). Шорткоды применяются отдельно к каждой записи или странице.

Итак, если у вас есть большой сайт и вы хотите вставить данные Schema Markup во все старые записи, то это займёт много времени. Но если вы только начинаете ведение сайта, то это отличный недорогой способ внедрить данные Schema Markup.

Бонус - Yoast

Некоторые аддоны Yoast автоматически добавят определенные данные Schema Markup к вашим записям. К примеру, Если вы установили Local SEO Plugin, то будет автоматически добавлены адрес и часы работы. Аналогично к Video SEO Plugin будут добавлены данные о видео.

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

Плагины для рейтинга со звёздочками

• Rich Reviews
• WP Review Pro
• WP Post Ratings

У них нет полных данных Schema Markup, но они отлично подходят для сайтов с обзорами.

Выводы

Независимо от того, какой плагин вы выбрали, всегда проверяйте правильность разметки Schema Markup. Вы можете сделать это с помощью Structured Data Testing Tool от Google Developers. Просто введите ваш URL, и вам сообщат об обнаружении каких-либо проблем с данными схемы.

Мы пропустили какой-то плагин? Вы считаете, что лучше устанавливать микро-разметку вручную? Поделитесь с нами своим мнением в комментариях!

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

Плагин микроразметки – Schema Creator

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

Вкладка плагина для настроек открывается из админпанели. В чекбоксах устанавливаем отметки для атрибутов микроразметки. Это — Item Type, Itemscopy, сохраняем. После установки и активации плагина, в редакторе появляется дополнительный значок «Add Schema».

Вносить микроразметку можно перед статьей или в конце ее, но лучше смотрится после статьи. Закончив вставку текста, установим курсор для вставки структурированных данных и нажмем значок: Add Schema.

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

Получиться понятный выбор типов для Российского гражданина. Для статьи – article, в плагине не указано типов. Однако на сайте о даче применяю вариант рецептов, там у меня есть небольшая рубрика о домашней кулинарии. В микроразметке рецептов стараемся наиболее полно ответить на вопросы. Включая калории блюда и содержание в нем белков, жиров и углеводов, иначе будут указаны ошибки. Получается, что микроразметку делаем в каждой статье, вручную. Однако плагин помогает.

Плагин микроразметки для обзоров

В некоторых статьях можно сделать структурированную разметку с помощью плагина микроразметки, сделав «обзор».

Нажмем выбранный тип, откроется вкладка, которую нужно заполнить. Для строки имени – копирую из браузера название статьи, которое в опубликованном варианте станет ссылкой. Вписываем полный адрес сайта, в следующей строке краткое описание. Item name –переводится, как имя продукта. Item review — имя, на которое ссылается обзор, но написала просто — сайт. Имя автора записываем как в Google+1. Дату выбираем, нажимаем кнопку вставить. Структурированные данные окажутся под статьей и отобразятся в индексах поисковиков.

Проверила – ошибок нет.

Указана одна ошибка, но она относиться к пустому , который не могу убрать.

Привет! Мы продолжаем разбирать самые интересные и самые полезные плагины для сайта WordPress ! Сегодня вы узнаете как добавить на свой сайт разметку Schema.org для отображения Rich Snippets (Богатого сниппета). Данный плагин очень полезен для SEO поисковой оптимизации сайта. Также помогает увеличить CTR и рейтинг сайта. Чем хорош и полезен данный плагин:

– Отлично работает с Google, Bing, Yahoo и Facebook.

– Поддерживает большинство типов контента.

– Отображает в поисковой выдаче:

• Фото.
• Видео.
• Автор.
• Цена.
• Звёздный рейтинг.
• Рецепты.

Установить плагин вы сможете прямо из админ-панели WordPress. Перейдите на страницу: Плагины – Добавить новый , введите название плагина в форму поиска, нажмите Enter, установите и активируйте плагин.

Configuration. Здесь можно заполнить данные для сниппета по умолчанию. Если вы не указываете данные для отдельной странице, то для неё будут отображаться данные, которые указаны здесь.

– Item review, отзыв, рецензия, обозрение.

– Events, события.

– Product, товар.

– Recipe, рецепт.

– Software Application, программа, приложение.

– Video, видео.

– Article, статья, запись.

– Service, сервис, услуги, обслуживание.

Нажмите по вкладке, чтобы её открыть и заполнить. Заполните поля сниппета и нажмите на кнопку – Update .

– Box Background, цвет фона бокса.

– Title Background, цвет фона заголовка.

– Border Color, цвет бордюра или границы.

– Title Color, цвет заголовка.

– Snippet Text Color, цвет текста в сниппете.

– Update colors, сохраните изменения.

Обратите внимание! если вы используете плагин Woocommerce, вы можете интегрировать данный плагин с товарами Woocommerce.

Далее, перейдите на страницу создания или редактирования записи или страницы. Внизу страницы у вас появится специальный бокс “Configure Rich Snippet” . Здесь вы можете добавлять данные сниппета для отдельно страницы.

Пример, если у вас страница с рецептом, то выберите вариант “Recipe” и заполните все необходимые поля. Обновите страницу.

Продолжим разбираться с микроразметкой. Если Вы ещё не прочитали мою , то очень рекомендую это сделать.

Она не большая, но даёт необходимое понимание того, о чём мы будем говорить.

Первым делом определим, какая разметка, применена на блоге по умолчанию, и какие ошибки выдают валидаторы Google и Яндекса.

Заходим в Google Инструменты для веб мастеров — Ваш сайт — Вид в поиске — Структурированные данные.

Как видите, на моём блоге применена разметка microformats.org, то есть она уже была внедрена в файлы шаблона, и в 151 элементе, выдаётся ошибка.

У меня хостинг обеспечивает ежедневное резервное копирование, и в процессе этого эксперимента, я дважды восстанавливал блог.

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

Необходимо это для того, чтоб при проверке выполненных действий, в Инструментах веб мастера, сервис не цеплял сохранённые копии.

microformats.org использует очень много форматов разметки. Это:

hcard — организации и люди

hatom — ленты новостей

hCalendar — события

hProduct — товары

hReview — отзывы о товарах

hRecipe — кулинарные рецепты

И это ещё не полный список. Как очень точно сказано в Википедии: «Вот наиболее известные из них». И все они, или только некоторые могут присутствовать в коде блога.

Но самое интересное, что в том виде, в котором они представлены в этом списке, в коде их найти невозможно.

В код эти форматы разметки вводятся в виде классов со свойствами, закреплёнными за каждым форматом. И этих свойств, тоже достаточно много.

Вот например формат hcard, в коде выводится как атрибут, или класс контейнер vcard, а его свойства, как class=»fn» или class=»n», который в свою очередь тоже является контейнером, и так далее.

И если первый класс применяется к имени, то второй, с некоторыми дополнениями, к фамилии-имени-отчеству.

Так же есть классы для организации, её названия, адреса, профиля, и так далее.

Конечно далеко не факт, что всё это заложено в вашем шаблоне, но чтоб выявить то что есть, желательно знать всё. Или, как в Википедии, наиболее известные.

Такое ощущение, что все их вообще никто не знает. А наиболее известные, я собрал в

Ну ладно, в инструментах веб мастера Google, мы определили, что в блог внедрена разметка microformats.org.

Теперь определим, имеющиеся у нас, форматы этой разметки.

Для этого воспользуемся инструментами Google Инструмент проверки структурированных данных , и Яндекс веб-мастер Проверить микроразметку .

Начнём с Главной страницы, чтоб по порядку. Вводим в поле для адреса, адрес Главной страницы, и нажимаем Проверить, в обеих инструментах.

В подавляющем большинстве случаев, Яндекс выведет предупреждение, и начинаться оно будет словом «кажется». То есть точно не знает, но чувствует, что что-то не то.

То же самое делаем в Google. Здесь информация будет более подробная. Google покажет, какие форматы он видит на Вашем сайте, и какие в них есть ошибки.

Вот это как раз то, что нам и нужно.

Первым идёт Издатель. И скорее всего, у Вас будет сообщение: Страница не содержит тега издателя.

Если это так, то чтоб тег издателя появился, нужно создать аккаунт в Google+, войти в свой Профиль, перейти в Записи, и скопировать адрес, обозначенный в адресной строке браузера.

Затем этот адрес нужно будет привязать к страницам нашего сайта, и для этого есть два варианта.

1. Если у Вас установлен плагин All In One SEO Pack, по заходим в Консоль — Инструменты SEO — Основные, прокручиваем их вниз до раздела Настройки сервисов Google, и вставляем скопированный адрес в строку Профиль в сети Google+.

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

2. Если у Вас нет плагина All In One SEO Pack, то адрес нужно вставить в виджет Текст, в Вашей панели виджетов, в виде ссылки.

Этот виджет можно разместить в любой области, и проверить так же как в пункте 1.

Следующий формат обычно присутствующий в блоге по умолчанию — это hatom.

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

У меня, как видно из картинки, в этом формате выдаётся ошибка Missing required field «updated».

То, что эта ошибка принадлежит именно данному формату, можно определить с помощью Шпаргалок. По ним сразу видно, что свойство updated применяется в формате hatom.

Будем исправлять.

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

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

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

Возможно и Вам придётся искать свой вариант устранения ошибки, поэтому давайте посмотрим, как гарантированно можно найти её причину.

Для этого воспользуемся старым добрым инструментом .

Открываем страницу в браузере Chrome, нажимаем клавишу F12, или щёлкаем правой клавишей мыши и выбираем Просмотр кода элемента.

В открывшемся окне веб-инспектора находим строку с кодом, которая подсветит дату на нашей странице.

Эта строка и будет тем элементом кода, в котором нужно искать ошибку.

Быстренько идём в Гугл, то есть вставляем rel=»bookmark» в поисковую строку браузера, окунаемся в поисковую выдачу, и узнаём, что bookmark — это закладка, а в формате hatom, это свойство применяется, как определение чего-то постоянного, а от нас требуется обновление.

Значит нужно удалить rel=»bookmark», и на его место вставить class=»updated». Как это сделать?

Идём Внешний вид — Редактор, и начинаем в файлах темы искать слово bookmark. Кто ещё не знает, как это быстро делается, прочитайте .

У меня этот элемент нашёлся в файле functions.php.

Удаляем его, вставляем class=»updated», обновляем файл, и идём проверять в Google Инструмент проверки микроразметки.

Как видите — одной ошибкой стало меньше. За что и боролись.

Тут нужно обратить внимание на ещё один момент. Возможно, у Вас вывод даты будет реализован совсем по другому, и вы найдёте ошибку в другой строке кода.

Возможно Вам не нужно будет ничего удалять, а только вставить class=»updated», но если уж необходимо будет удалить какой-то элемент, то обязательно проверьте, нет ли его в файле style.css.

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

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

Переименовав его и в файле php, и в таблице стилей, Вы избавитесь от ненужного элемента, и сохраните дизайн.

Теперь посмотрим вторую ошибку. Как видно из названия: Ошибка. Missing required hCard «author», относиться она к формату hCard.

В этом формате представлены свойства (смотри Шпаргалки), которые мы сможем заменить на свойства schema.org, поэтому данный формат лучше полностью удалить.

В коде он представлен корневым классом vcard, то есть если в блоге присутствует hCard, то в коде он будет vcard.

Идём в файлы темы, и просматриваем их на наличие vcard, не забывая про style. css.

Если в стилях его нет, то просто удаляем, там где он найдётся. Если есть, то переименовываем.

Затем проверяем точно так же свойства этого формата. Причём, тут нужно смотреть по смыслу. Например свойство fn состоит из двух букв, и эти две буквы могут входить в какое либо слово, или свойство url может быть реальным адресом.

Естественно, удалять их не нужно. Обычно свойство, в коде является значением класса: class=»fn», class=»url». Вот эти конструкции можно смело удалять. Опять же, если их нет в стилях. И так далее.

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

Яндекс должен доложить, что микроразметка не обнаружена.

А у Google в результатах не должно быть красных строк.

Если это так, то ваши мучения закончены. Если нет то веб-инспектор всегда к Вашим услугам.

Вообще-то, не успокоившись на достигнутом, и так как остались не понятные до конца моменты, я потратил ещё некоторое время, на поиск информации по microformats.org.

Оказывается этот вопрос волнует не только русскоязычную аудиторию, но и пользователей по всему миру.

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

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

Так что если кто-то не сможет исправить ошибки в структурированных данных, не расстраивайтесь. Просто внедряйте schema.org на свой блог, и всё будет нормально.