Микроразметка сайта — что, где и зачем?

Главная » Верстка » Микроразметка сайта — что, где и зачем?
Самолетная 614022 Россия, Пермь +79630195620
Верстка
seo, новичкам, шаблоны
7850

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

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

Зачем нужна микроразметка и что это такое?

Микроразметка — это семантическая разметка страниц сайтов особыми тегами и атрибутами, с целю упростить понимание вашего сайта поисковыми роботами.

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

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

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

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

Взгляните на эти снипеты — это прямое воздействие микроразметки. Согласитесь они выглядят привлекательно.

микроразметка яндекс

микроразметка яндекс

Из вышесказанного можно сделать несколько выводов:

  1. Размещая микроразметку мы делаем сайт более понятным для поисковика, тем самым вызываем больше доверия в его глазах. Для молодых сайтов это очень важно.
  2. При правильной настройке мы можем повлиять на вид снипета, тем самым повысить кликабельность заголовка.
  3. Повышение ПФ сайта, связано с предыдущим выводом. Больше посетителей, больше положительных оценок.

Если перед вами все еще встает вопрос, нужна ли вам микроразметка на блоге или сайте, то мой ответ — да. Но не думайте, что внедрив микроразметку на свой сайт, вы сразу же заметите изменения позиций в выдаче. Это не так! Но разметка на вашем сайте должна быть, точно так же как и адаптивный дизайн.

Типы микроразметки — что выбрать?

Если вы самостоятельно пытались разобраться в микроразметке, то наверняка встречались с разными ее типами (Shema.org, OpenGraph, RDFa и тд), и скорее всего не могли понять в чем отличие, а тем более что использовать.

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

микроразметка для сайта

Использовать мы будем Shema.org так как она на данный момент является более универсальной для обоих поисковых гигантов.

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

Первым делом нам нужно точно знать, есть ли у нашего шаблона какие-либо микроразметки. Так как большинство зарубежных шаблонов которые вы устанавливаете через админку WordPress содержат в своем коде элементы различных микроформатов.

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

Для этого вводим наш URL в валидаторе яндекса и жмем кнопку «Проверить».

Идеальный для нас вариант — это если валидатор выдаст строку с надписью «Микроразметка не обнаружена».Но это бывает очень редко. Чаще можете видеть подобную картинку, где отображается 2-3 строки.

микроразметка яндекс

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

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

микроразметка яндекс

микроразметка яндекс

Внедрение микроразметки Shema.org на WordPress блог.

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

Файлы шаблона в которые вносится микроразметка

  1. index.php, archive.php, category.php (2 и 3 файла может не быть в вашем шаблоне, это не страшно, а вот index.php будет обязательно — он отвечает за вывод главной страницы, а так же за вывод категорий и меток, если 2 и 3 файлов нет)
  2. single.php — файл отвечающий за вывод статьи
  3. page.php — файл отвечающий за вывод страницы
  4. function.php — здесь может быть код отвечающий за формирование комментариев блога, в моих шаблонах он находится именно здесь
  5. header.php — файл формирование шапки сайта
  6. sidebar.php — файл отвечающий за вывод сайдбара
  7. footer.php — файл отвечающий за вывод подвала

Именно во все этих файлы нам необходимо будет внедрить микроразметку.

Необходимые теги и атрибуты микроразметки

Вот те сущности что мы будем использовать для микроразметке

А теперь давайте разберемся с тегами

itemprop="headline" — название страницы, либо статьи анонса

itemprop="articleBody" — текст статьи, записи

itemprop="articleSection" — категория статьи, записи

itemprop="description" — описание страницы

itemprop="image" — миниатюра, изображение записи

itemprop="datePublished" — дата публикации записи

itemprop="author" — автор записи

itemprop="text" — текст комментария

itemprop="creator" — автор комментария

itemprop="commentCount" — количество комментариев записи

itemprop="commentTime" — дата публикации комментария

itemprop="url" — ссылка меню

Это основные свойства которые я обычно использую при разметки шаблонов WordPress.

Теперь осталось разнести все это хозяйство по соответствующим HTML тегам которыми сформирован наш шаблон. Для примера — заголовок страницы у нас обрамлен тегами H1 — значит нам нужно ему назначить атрибут itemprop="headline».

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

Микроразметка поста (страницы)

И так приступим к небольшой практике, первым делом мы с вами должны обозначить сущность. В нашем случае это — контент страницы. Следовательно нам необходимо в файле отвечающем за формирование поста или страницы (single.php, page.php) найти общий тег который оборачивает всю страницу с его содержимым. У меня это тег section с классом middle. В нем и прописываем нашу сущность itemscope itemtype="http://schema.org/Article». На скриншоте я обозначил все теги которые подверглись модернизации.
микроразметка сайта
Вам необходимо проделать примерно то же самое, но в условиях вашего шаблона. Все различия будут лишь в HTML тегах и их порядке размещения. Либо как вариант будут отсутствовать некоторые элементы, рубрика, количество комментариев и тд.

Микроразметка главной страницы и страницы рубрик

Так как у меня за рубрики и за главную страницу отвечает файл index.php, то изменения я вношу только в него. Если у вас есть файлы archive.php, category.php то вам необходимо будет поработать и с ними.
микроразметка сайта
Вы можете заметить что я не указал общее количество комментариев поста в разметке ленты анонсов. Это связано с тем что свойство itemprop="commentCount" актуально только для сущности itemscope itemtype="http://schema.org/Article», поэтому если мы выведем количество комментариев в анонсе, то получим ошибку при проверке валидатором яндекса или гугла.

Результат проверки микроразметки у вас должен быть примерно таким же.
микроразметка сайта

Микроразметка комментариев

Еще одна важная часть любого блога, это его комментарии. Давайте объясним роботам поисковика где они точно находятся у нас на блоге.

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

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

Микроразметка миниатюр WordPress и изображений

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

Как обозначить миниатюры вы видели из скриншотов выше. Но я продублирую для вас код.

Ну а для того чтобы микроразметка назначалась всем картинкам поста, вам необходимо будет добавить следующий код в файл function.php

Микроразметка основных меню сайта.

Здесь мы тоже можем порадовать роботов, и указать им явно на имеющиеся меню нашего блога. Для этого каждому меню нужно назначить соотвествующие сущности itemscope itemtype="http://schema.org/SiteNavigationElement"
микроразметка сайта
А чтобы назначить значения на ссылки в меню, вам необходимо опять добавить код в файл function.php

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

Разметка частей шаблона.

Так же шаблон можно разметить для того чтобы робот понимал в какой части шаблона находится. Для этого в файле header.php в открывающемся тег head добавляем следующий код itemscope itemtype="http://schema.org/WPHeader"
микроразметка сайта
Далее обозначим сайдбар блога, открываем файл sidebar.php и прописываем itemscope itemtype="http://schema.org/WPSideBar" у соответствующего тега.
микроразметка сайта
Ну и в конце покажем где у нас подвал. Открываем footer.php и прописываем itemscope itemtype="http://schema.org/WPFooter"
микроразметка сайта
Проверив свой сайт в валидаторе гугла вы должны получить следующую картинку.
валидатор микроразметки гугл

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

Сделаю микроразметку на вашем блоге

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

Для этого вам необходимо отправить мне заявку через форму что находится ниже. Указать адрес вашего сайта и ссылку на ваш шаблон. Можете залить его на любой облачный сервис. (Яндекс диск, облако mail, google drive, dropbox). После чего я смотрю ваш шаблон и отвечаю в какие сроки смогу сделать вам разметку. Обычно это занимает 1-3 дня в зависимости от загруженности. Вы оплачиваете работу, и я приступаю к внедрению микроразметки на ваш шаблон.

Заказать микроразметку wordpress шаблона

Ваш e-mail (обязательно)

URL вашего сайта(обязательно)

Черкни и ты пару строк

А на вашем блоге уже есть микроразметка? Планируете ли ее вносить? Может пора задуматься о будущем! Если поисковики ее учитывают, может это действительно важно?

Подписка на блог MASALKIN.NAME
Не упусти шанс получить отличные бонусы!

100% конфидециальность, адреса электронной почты не разглашаются и не предоставляются третьим лицам для коммерческого или некоммерческого использования.

Благодарность читателям

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

P.S. Не забудь подписаться на блог, тебя ждет много интересного и полезного!

Удачи!

x

Ваше имя (обязательно)

Ваш e-mail (обязательно)

Сообщение