Микроразметка сайта на WordPress часть 1

Приветствую всех, дорогие друзья! Совсем недавно, мы только проверили css на ошибки и уже сразу приступаем к его дальнейшей оптимизации. Сегодня речь пойдет о том, как сделать микроразметку на сайте. Тема очень интересная и обширная, поэтому разделю ее на две части. Для начала давайте разберемся, что это такое и для чего нам нужно. Микроразметка, нужна в первую очередь для поисковых систем, чтобы понять какая информация находится на странице сайта. Давайте представим, поисковая система — это робот с очень сложным механизмом. Он обходит тысячи сайтов и должен понимать, где на странице, что написано.

Представим, робот зашел к нам на страницу и смотрит где, что расположено. Если сайт без микроразметки, видит это так: «Так есть статья, а где тут заголовок, много текста, имена, комментарии, ничего не пойму, что тут надо индексировать». Теперь взгляд поискового робота на сайт с микроразметкой: «Так вот вижу начало статьи, пошел заголовок, ага это автор и дата размещения статьи, тут ее текст, а после идут комментарии. Замечательно, так и возьмем в поиск страницу». Проще говоря, все по полочкам и своим местам должно быть.

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

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

Результат успешной микроразметки

Приступим  к работе:

Разметка шапки сайта

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

1
itemscope="itemscope" itemtype="http://schema.org/WebPage"

У меня получилось так:

1
<body itemscope="itemscope" itemtype="http://schema.org/WebPage" (); ?>>

Далее отмечаем, где находится шапка сайта. Находим тег

и пишем в него следующий код:

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

У меня получилось так:

1
<header itemscope itemtype="http://schema.org/WPHeader" id="header">

Разметка меню сайта

Затем по логике вещей идет у всех меню. Вот его и покажем роботу. Прошу заметить что у нас на сайте три разных вида меню «Top, header, Footer». Тут возникают не большие сложности, так как меню может быть сделано у всех по разному. Мне пришлось прибегнуть к хитростям чтобы сделать разметку. Если у Вас такой же шаблон как и у меня, то просто повторите мои шаги. Но не исключено, что данный способ может помочь и на других шаблонах.

Для разметки меню надо вставить следующий код (вставить в трех местах, так как у нас три разных меню):

1
itemscope itemtype="http://www.schema.org/SiteNavigationElement"

У меня вышло так (привожу только один пример для самого верхнего меню):

1
<div class="nav-wrap container" itemscope itemtype="http://www.schema.org/SiteNavigationElement">(array('theme_location'=>'topbar','menu_class'=>'nav container-inner group','container'=>'','menu_id' => '','fallback_cb'=> false)); ?></div>

Ну это еще не все. Данным кодом мы показали, где у нас расположенно меню, но не части меню и не ссылки с него. Чтобы это реализовать нужно вставить в файл functions.php следующий код в самый конец файла.

Это поможет нам сделать разметку для меню.

Далее двигаемся по шаблону и после верхнего меню идет его описание. Чтобы его отметить вставляем код:

1
itemprop="description"

я обернул его в тег и вот что у меня получилось.

1
 bloginfo( 'description' ); ?>

Далее идет снова меню header. Вставляем код:

1
itemscope itemtype="http://www.schema.org/SiteNavigationElement"

Вот что вышло:

1
<div class="nav-wrap container" itemscope itemtype="http://www.schema.org/SiteNavigationElement">(array('theme_location'=>'header','menu_class'=>'nav container-inner group','container'=>'','menu_id' => '','fallback_cb'=> false)); ?></div>

На этом микроразметка шапки сайта закончена.

Разметка статей сайта

После меню у нас начинается статья. В перую очередь скажем роботу «Привет, робот тут начало статьи». Для этого заходим в файл single.php и ищем с какого тега у вас начинается статья у меня вот тут:

1
<section class="content">

добавляем в него код:

1
itemscope="" itemtype="http://schema.org/Article"

и получаем такой результат:

1
<section class="content" itemscope="" itemtype="http://schema.org/Article">

С этого момента робот знает, что далее идет только разметка для статей.

Выделяем заголовок статьи и полчается вот так:

1
<h1 itemprop="headline" class="post-title">(); ?></h1>

Для выделения заголовка мы воспользовались элеменотом

1
itemprop="headline"

Теперь отметим автора статьи:

1

И не забываем выделить дату публикации:

1
<span itemprop="datePublished">('Y-m-d')?></span>

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

1
<div class="entry" itemprop="articleBody">

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

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

С уважением, Виктор

Рейтинг: 0

Автор публикации

11
не в сети 2 недели

Виктор

Молодой блогер с большим опытом :)

Комментарии: 10Публикации: 59Регистрация: 11-11-2015

Похожее ...

2 Комментарии

  1. Интернет Маркетолог:

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

    Ответить

    Рейтинг: 0
  2. Виктор:

    Интернет Маркетолог, игра стоит свечь и это уже доказано не однократно. Советую так же сделать. Лишним точно не будет

    Ответить

    Рейтинг: 0

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

Войти с помощью: 

Ваш e-mail не будет опубликован. Обязательные поля помечены *

0
  • В вашей корзине:
    Пока пусто

Авторизация

Войти с помощью: 

Регистрация

Войти с помощью: 

Генерация пароля

Яндекс.Метрика