Seo-Бизнес блог Progress-project

Все о создании, продвижении сайтов и заработке в интернете

Обновлённый дизайн блога Progress-project
logotip «Progress-project»
logotip «Progress-project»

Микро-разметка для Google и Яндекс с учётом всех нововведений Schema.org

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

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

Ведь после того, как Google значительно поменял свои представления о микро — форматах данная тема стала, как нельзя актуальна.

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

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

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

Поэтому и я тоже сегодня буду говорить в основном о микро — разметки сайта которую нам рекомендует: Google, в этой поисковой системе у меня изначально показатели были на порядок выше и к тому же, как я уже говорил, через каких нибудь пару месяцев Яндекс всё равно тоже введёт у себя эти нововведения и нам придётся всё переделывать заново.

Общая микро-разметка ресурса для Google и Яндекс

Если вы ещё никогда не размечали свой блог придётся начинать с самых азов, к счастью основная микро разметка таких элементов, как; заголовок, странички с записями и комментарии, сегодня подходит как для Google так и для Яндекс.
Давайте начнём размечать свой сайт с шапки (заголовка), но для этого сначала если у вас установлен плагин: «All in One SEO Pack» посмотрите не активирована ли в нём функция: «Use Schema.org Markup», если да то отключите.
Проверить; наличие или отсутствие, атак же все имеющиеся ошибке в микро-разметке вашего блога вы всегда можете в специальных валидаторах от Google и Яндекс.

Вносим микро-разметку в заголовок шапку блога «header»

Итак, открываем файл темы: «header.php», дальше находим: тег <body> и после него, что то на подобии:

<div id="header">

Конечно может быть и что то совсем другое у меня например так:

<div id="pro-main">

Теперь нам нужно в конец данной строки прописать микро-элемент нашей новой разметки заголовка вот такого вида:

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

Вот, что у меня получилось:

<div id="pro-main" itemscope itemtype=" https://schema.org/WPHeader">

Дальше нам необходимо добавить микро-разметку к описанию блога, ищем, что то похожее на:

<h3><?php bloginfo('description'); ?></h3>

И добавляем элемент разметки:

itemprop="description"

Результат:

<h3 itemprop="description"><?php bloginfo('description');?></h3>

Также старайтесь, чтобы описание вашего ресурса не превышало более 160 символов.

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

<h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>

На этот раз элемент микро-разметки у нас будет вот такой:

itemprop="headline"

Вот, что должно у нас получиться:

<h1 itemprop="headline"><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>

Теперь уже при желании можно проверить результат в каком либо указанном выше валидаторе и если всё нормально идём дальше, а вернее ниже по блогу, так как: «header» у нас с вами уже размечен приступаем к внедрению микро-разметки в статью.

Вносим микро-разметку в запись статью «single»

Находим в теме: «single.php», открываем его для редактирования и сразу после:

<?php get_header(); ?>

В первый же блок div с каким либо классом например:

<div class="contentLayout">

Прописываем микро-разметку:

itemscope itemtype="https://schema.org/Article"

Вот, как это выглядит на «Progress-project»:

<div class="contentLayout" itemscope itemtype="https://schema.org/Article">

Дальше ставим микро-разметку в заголовок поста, ищем:

<h2><?php the_title(); ?></h2>

И добавляем элемент:

itemprop="name"

В результате получаем:

<h2 itemprop="name"><?php the_title(); ?></h2>

Ниже поста, как правило выводится имя автора и дата публикации, давайте разметим и их, находим функцию:

<?php the_author() ?>

Оборачиваем её следующим образом:

<span itemprop="author"><?php the_author() ?></span>

И переходим к дате публикации:

<?php the_time('Y-m-d') ?>

Результат:

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

К разметке статьи мы ещё с вами сегодня вернёмся а пока переходим к комментариям.

Вносим микро-разметку в комментарии «comments»

Чтобы нам одним махом разметить сразу все элементы в комментариях давайте воспользуемся преимуществом «php».

Итак открываем для редактирования файл: «functions.php» где в самом низу перед: ?> устанавливаем специальную функцию которая в дальнейшем и будет размечать комментарии на нашем блоге:

function progress_comment($comment, $args, $depth){
$GLOBALS['comment'] = $comment;
if ( 'div' == $args['style'] ) {
$tag = 'div';
$add_below = 'comment';
} else {
$tag = 'li';
$add_below = 'div-comment';
}
?>
<<?php echo $tag; ?> <?php comment_class( empty( $args['has_children'] ) ? '' : 'parent' ); ?> id="comment-<?php comment_ID(); ?>">
<?php if ( 'div' != $args['style'] ) : ?>
<div id="div-comment-<?php comment_ID(); ?>" class="comment-body">
<?php endif; ?>
<div class="comment-author">
<?php echo get_avatar($comment,$size='48'); ?>
</div>
<div itemprop="comment" itemscope="itemscope" itemtype="https://schema.org/Comment">
<?php printf( __('<div class="comcreator" itemprop="creator">%s:</div>' ), get_comment_author_link() ); ?>
<?php if ( '0' == $comment->comment_approved ) : ?>
<em class="comment-awaiting-moderation"><?php _e( 'Your comment is awaiting moderation.' ) ?></em>
<br />
<?php endif; ?>
<div class="comment-meta commentmetadata" itemprop="datePublished"><a href="<?php echo esc_url( get_comment_link( $comment->comment_ID, $args ) ); ?>">
<?php
/* translators: 1: date, 2: time */
printf( __( '%1$s' ), get_comment_date('Y-m-d')); ?></a><?php edit_comment_link( __( '(Edit)' ), '&nbsp;&nbsp;', '' );
?>
</div>
<div itemprop="text"><?php comment_text( get_comment_id(), array_merge( $args, array( 'add_below' => $add_below, 'depth' => $depth, 'max_depth' => $args['max_depth'] ) ) ); ?></div>
<div class="reply">
<?php comment_reply_link( array_merge( $args, array( 'add_below' => $add_below, 'depth' => $depth, 'max_depth' => $args['max_depth'] ) ) ); ?>
</div>
</div>
<?php if ( 'div' != $args['style'] ) : ?>
</div>
<?php endif; ?>
<?php
}

Дальше переходим уже в: «comments.php», находим:

<?php wp_list_comments(); ?>

Дальше добавляем в эту функцию такую строчку:

callback=progress_comment

Результат:

<?php wp_list_comments('callback=progress_comment'); ?>

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

Здесь же попутно находим похожую строку с функцией:

<h4 id="comments">Комментарии к статье: <?php comments_number();?></h4>

И добавляем к ней микро-разметку:

<h4 id="comments">Комментарии к статье: <span itemprop="commentCount"><?php comments_number();?></span></h4>

Только, что мы рассмотрели основную базовую, общепринятую микро-разметку веб-ресурса которая нравится, как Google так и Яндексу, дальше я планирую рассказать уже о нововведении Google в виде дополнительных микро форматах, если вы хотите ограничится прежним вариантом микро-разметки которую мы рассмотрели только что, то дополнительно к уже проделанной работе добавьте в: «functions.php» код-функцию представленную в самом низу статьи. Данный код поможет вам автоматически разметить все изображения в теле поста.

Новая микро-разметка от Google

Итак на этот раз Google решил «порадовать» нас своей обновлённой библиотекой: «schema.org/Article».
В принципе нововведений на этот раз не так уж и много, но без их внедрения появляется куча ошибок, давайте рассмотрим поближе, что же именно на этот раз добавил Google.

Сразу хочу сказать, что все нововведения библиотеки: «schema.org/Article» в виде дополнительных микро-форматов, относятся исключительно к разметке постов и их действие не должны выходить за их пределы.

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

В файле: «single.php» активной темы поверх заголовка поста пишем главную библиотеку микро-разметки:

<div itemscope itemtype="https://schema.org/Article">
<h2><?php the_title(); ?></h2>

Так же незабываем и о закрывающемся: </div> после кода выводящего все элементы поста.

Google микро-разметка «MainEntityOfPage» — «Schema.org/WebPage»

Далее уже в этот блок прописываем новые элементы микро разметки:

<meta itemscope itemprop="mainEntityOfPage" itemType="https://schema.org/WebPage" itemid="URL_страницы"/>

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

<meta itemscope itemprop="mainEntityOfPage" itemType="https://schema.org/WebPage" itemid="<?php the_permalink() ?>"/>

Google микро-разметка «Publisher» — «Schema.org/Organization»

Сразу же после уже прописанных только что строк вставляем, как бы новый блок с информацией о публикации поста:

<div itemprop="publisher" itemscope itemtype="https://schema.org/Organization">
    <div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject">
        <img itemprop="url" src="полный_путь_до_логотипа_ресурса" style="display:none;"/>
        <meta itemprop="width" content="ширина_логотипа">
        <meta itemprop="height" content="высота_логотипа">
    </div>
    <meta itemprop="name" content="название_вашего_ресурса">
    <meta itemprop="telephone" content="+7 xxx xxx xx xx (можно написать, что угодно)">
    <meta itemprop="address" content="Ваш_Город">	
</div>

Как видите здесь всё понятно и подробно описывать я думаю ненужно, вписываем в поля необходимую информацию и идём дальше.

Google микро-разметка «DateModified»

Добавляем сразу после только, что вставленного «мини-блока» дату обновления поста:

<meta itemprop="dateModified" content="<?php the_modified_time('Y-m-d')?>"/>

В принципе, что касаемо данного блока то на этом всё. Вот, как всё это дело выглядит на «Прогресс-проект»:

<div itemscope itemtype="https://schema.org/Article">
<meta itemscope itemprop="mainEntityOfPage" itemType="https://schema.org/WebPage" itemid="<?php the_permalink() ?>"/>
<div itemprop="publisher" itemscope itemtype="https://schema.org/Organization">
<div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject">
<img itemprop="url" src="https://abrek-ad-abra.ru/wp-content/uploads/2015/12/logotip-progress-project-0-02.png" alt="logotip «Progress-project»" style="display:none;"/>
<meta itemprop="width" content="211">
<meta itemprop="height" content="149">
</div>
<meta itemprop="name" content="SEO-Бизнес блог: «Progress-project»">
<meta itemprop="telephone" content="+7 xxx xxx xx xx">
<meta itemprop="address" content="Город">
</div>
<meta itemprop="dateModified" content="<?php the_modified_time('Y-m-d')?>"/>

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

Google микро-разметка «Image» — «Schema.org/ImageObject»

Опять же будем это делать в автоматическом режиме с помощью php.
Открываем: «functions.php» и в самый низ этого файла вставляем код:

function progress_filter_image($content) {
$ar_mk	= '!<img (.*?) width="(.*?)" height="(.*?)" (.*?)/>!si';
$br_mk = '<span itemprop="image" itemscope itemtype="https://schema.org/ImageObject"><img itemprop="url" itemprop="image" \\1 width="\\2" height="\\3" \\4/><meta itemprop="width" content="\\2"><meta itemprop="height" content="\\3"></span>';
$content = preg_replace($ar_mk, $br_mk, $content);	
	return $content;		 
}
add_filter('the_content', 'progress_filter_image');

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

Думаю, что я сполна пополнил пробел «Progress-project» по поводу отсутствия какой либо информации о микро-разметки и поэтому со спокойной душой на сегодня с вами прощаюсь желаю удачи и до новых встреч!

С уважением, автор блога!
© progress-project
★Обновлено:2016-05-21

Введите свой e-mail:

Вы можете поделиться статьёй в социальных сетях:

Ваш комментарий

Внимание! Перед тем, как вставить в комментарий: html, php либо JavaScript, преобразуйте его в HTML сущность!

» Подписаться на комментарии по RSS
Поиск по блогу

Введите свой e-mail:

ВКонтакте Google+ Facebook RSS-лента сайта abrek-ad-abra.ru

Топ комментаторов

Виктор(6)
seoonly(4)
Николай(3)
Олег(3)
Иван(3)

© 2015-2017

SEO-Бизнес блог «Progress-project».

Все материалы, опубликованные на сайте: принадлежат автору и охраняются в соответствии с законодательством РФ.

При использовании материалов сайта гиперссылка на обязательна!



seo-блог