Микроразметка для WordPress

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

Оглавление:
  1. Микроразметка schema.org
  2. Микроразметка для WordPress
  3. Микроразметка для комментариев wordpress
  4. Комментарии с микроразметкой для темы twentytwelve
  5. Добавить поля в форму комментариев wordpress
  6. Микроразметка для изображений WordPress

Микроразметка schema.org

Для микроразметки schema.org все заголовки в шаблоне с тегами h1-h... должны содержать атрибут schema.org itemprop="name". Все ссылки как в шаблоне так и в содержании сайта должны иметь атрибут schema.org itemprop="url", кроме заголовка в шапке сайта, для названия сайта применяется атрибут itemprop="headline" для описания сайта, естественно itemprop="description".

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

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

к меню ↑

Микроразметка для WordPress

Как Я уже упоминал для каждого вида веб-сайта своя микроразметка. О микроразметке для веб-страниц можно написать книги в нескольких томах, поэтому перейдём сразу к делу. Проверить правильность разметки можно с помощью валидатора. Заказать микрозаметку для своего сайта Вы сможете на странице «Контакты».

Список атрибутов schema.org для блога WordPress по порядку, кроме контактов, рейтинга и социальных сетей.

Список атрибутов schema.org
  1. itemscope itemtype="http://schema.org/Blog"
    • meta name="description" itemprop="description" content=""
    • meta name="keywords" itemprop="keywords" content=""
    • meta itemprop="image" content="logo.png"
    • itemprop="headline"
    • itemprop="description"
  2. itemscope="itemscope" itemtype="http://schema.org/SiteNavigationElement"
    • itemprop="name"
    • itemprop="url"
  3. itemtype="http://schema.org/BreadcrumbList"
    • itemprop="itemListElement" itemtype="http://schema.org/ListItem"
  4. itemtype="http://schema.org/BlogPosting"
    • itemprop="blogPost"
    • itemtype="http://schema.org/WebPage"
    • itemprop="articleBody"
    • itemprop="image"
    • itemprop="articleSection"
    • itemprop="name"
    • itemprop="datePublished"
    • itemprop="dateModified"
    • itemprop="datePublished"
    • itemprop="author"
  5. itemtype="https://schema.org/Organization"
    • itemprop="publisher"
  6. itemscope itemtype="http://schema.org/WPSideBar"
    • itemprop="name"
    • itemprop="url"
  7. itemscope itemtype="http://schema.org/WPFooter"
    • itemprop="name"
    • itemprop="url"
    • itemprop="copyrightYear"
    • itemprop="copyrightHolder"
к меню ↑

Микроразметка для комментариев wordpress

Для примера микроразметка в комментариях wordpress, рассмотрим тему twentytwelve. Что бы микрораметка для комментариев wordpress была без ошибок, удаляем из кода класс vcard. (vcard и hCard это одно и тоже). Потому что vcard должен иметь классы fn n, если их добавить в валидаторе Яндекс будет предупреждение: ПРЕДУПРЕЖДЕНИЕ:кажется, ваша разметка hCard описывает не организацию (поля fn и org не совпадают).

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

к меню ↑

Комментарии с микроразметкой для темы twentytwelve

<li <?php comment_class(); ?> id="li-comment-<?php comment_ID(); ?>">
<article id="comment-<?php comment_ID(); ?>" itemprop="comment" itemscope="itemscope" itemtype="http://schema.org/Comment">
<h6 class="screen-reader-text">комментарии</h6>
<header class="comment-meta comment-author">
				<?php
					echo get_avatar( $comment, 44 );
					printf( '<cite itemprop="creator" itemscope="itemscope" itemtype="http://schema.org/Person"><b itemprop="name">%1$s</b> %2$s</cite>',
						get_comment_author_link(),
						// If current post author is also comment author, make it known visually.
						( $comment->user_id === $post->post_author ) ? '<span>' . __( 'Post author', 'twentytwelve' ) . '</span>' : ''
					);
					printf( '<a href="%1$s" itemprop="discussionUrl"><time datetime="%2$s">%3$s</time></a>',
						esc_url( get_comment_link( $comment->comment_ID ) ),
						get_comment_time( 'c' ),
						/* translators: 1: date, 2: time */
						sprintf( __( '%1$s at %2$s', 'twentytwelve' ), get_comment_date(), get_comment_time() )
					);
				?>
			</header><!-- .comment-meta -->
			<?php if ( '0' == $comment->comment_approved ) : ?>
<?php _e( 'Your comment is awaiting moderation.', 'twentytwelve' ); ?>
			<?php endif; ?>
<div class="comment-content comment" itemprop="text">
				<?php comment_text(); ?>
				<?php edit_comment_link( __( 'Edit', 'twentytwelve' ), '', '' ); ?>
			</div><!-- .comment-content -->
<div class="reply">
				<?php comment_reply_link( array_merge( $args, array( 'reply_text' => __( 'Reply', 'twentytwelve' ), 'after' => ' <span>&darr;</span>', 'depth' => $depth, 'max_depth' => $args['max_depth'] ) ) ); ?>
			</div><!-- .reply -->
		</article><!-- #comment-## -->

Обратите внимание на строку time их две. Не нужно забывать о валидаторе микроразметки от google, который также не логичен. Без второй строки time микроразметка в валидаторе от google покажет ошибку Ошибка. Missing required field ″dtstart″. Что означает не хватает даты начала комментария, зачем это нужно не понятно. Если есть начало должен быть и конец это закономерность, но в этом случае хватает только начала. Ну да ладно, добавляем еще одну строку с атрибутом itemprop="startDate" и стилем "display:none" чтобы не портить макет. Если кто не знает, атрибут itemprop="startDate" это альтернатива "dtstart".

После изменения кода мы имеем микроразметку для комментариев в wordpress без ошибок и предупреждений. Если Вы, всё таки решили оставить класс vcard и fn. А еще для автора комментария добавить классы n org и чтобы парсер микроразметки обработал вашу страницу без предупреждений и ошибок, потребуется выполнить ряд действий, добавить поля в форму комментариев организация, город, телефон как это сделать читайте дальше.

к меню ↑

Добавить поля в форму комментариев wordpress

Значение дополнительных полей и формы комментариев wordpres будут записываться в базу данных. Для отображения значений дополнительных полей вставляем код ниже в форму комментариев с микроразметкой.

/** выводим значение полей */
<span <?php $syti = get_comment_meta ( $comment->comment_ID, 'syti', true );
    echo '<i>Город:</i> <span class="adr">'.$syti.'</span>';
?>
<?php $org = get_comment_meta ( $comment->comment_ID, 'org', true );
    echo '<i>Организация:</i> <span class="org">'.$org.'</span>';
?>
<?php $tel = get_comment_meta ( $comment->comment_ID, 'tel', true );
    echo '<i>Телефон:</i> <span class="tel">'.$tel.'</span>';
?>

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

/** добавить поле для формы коммент.. wp - город */

function add_comment_syti($fields) {

    $fields['syti'] = '<label for="syti">' . __( 'Город' ) . '</label>' .
        '<input id="syti" name="syti" type="text" size="30" />';
    return $fields;

}
add_filter('comment_form_default_fields','add_comment_syti');

function add_comment_meta_values_syti($comment_id) {

    if(isset($_POST['syti'])) {
        $syti = wp_filter_nohtml_kses($_POST['syti']);
        add_comment_meta($comment_id, 'syti', $syti, false);
    }

}
add_action ('comment_post', 'add_comment_meta_values_syti', 1);

/** добавить поле для коммент... wp - организация */

function add_comment_org($fields) { 

    $fields['org'] = '<label for="org">' . __( 'Организация' ) . '</label>' .
        '<input id="org" name="org" type="text" size="30" />';
    return $fields;

}
add_filter('comment_form_default_fields','add_comment_org');

function add_comment_meta_values_org($comment_id) {

    if(isset($_POST['org'])) {
        $org = wp_filter_nohtml_kses($_POST['org']);
        add_comment_meta($comment_id, 'org', $org, false);
    }

}
add_action ('comment_post', 'add_comment_meta_values_org', 2);

/** добавить поле для коммент... wp - телефон */

function add_comment_tel($fields) { 

    $fields['tel'] = '<label for="tel">' . __( 'Телефон' ) . '</label>' .
        '<input id="tel" name="tel" type="text" size="30" />';
    return $fields;

}
add_filter('comment_form_default_fields','add_comment_tel');

function add_comment_meta_values_tel($comment_id) {

    if(isset($_POST['tel'])) {
        $tel = wp_filter_nohtml_kses($_POST['tel']);
        add_comment_meta($comment_id, 'tel', $tel, false);
    }

}
add_action ('comment_post', 'add_comment_meta_values_tel', 3);

Я сомневаюсь что эти поля пользователи будут заполнять даже если их сделать обязательными для заполнения есть риск снижение количества комментариев к записи. Используйте на своё усмотрение.


Добавлено: 2016.03.31

к меню ↑

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

Для того чтобы сделать микроразметку для изображений в содержании сайта WordPress, нужно в файл functions.php добавить функцию предлагаемую разработчиками этой CMS. Останется немного переделать функцию чтобы получить реальную ширину изображения. Для этого нужно заменить строку (10 + (int) $width) на (int) $width, вот и всё, ширина изображения нам известна.

Узнать высоту изображения в содержании WordPress не так просто, способов много; запросы к базе данных (медленно), функциями CMS, например, image_downsize (много кода), регулярными выражениями.

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

$images = get_children ( array( 
		'post_mime_type' => 'image',
		'post_parent' => get_the_ID(),
		'post_type' => 'attachment'
    ));

Теперь добавим высоту изображений в переменную $height.

foreach ( $images as $images_id => $attachment ) 
               $metadata = wp_get_attachment_image_src($images_id, false);    
  	           $height = ($metadata[2]);

Функция полностью:

function htmlhook_img__figure($val, $attr, $content = null)
{
	extract(shortcode_atts(array(
		'id'	=> '',
		'align'	=> '',
		'width'	=> '',
		'caption' => ''
	), $attr));
	
	if ( 1 > (int) $width || empty($caption) )
		return $val;

	$capid = ''; 
	if ( $id ) {
		$id = esc_attr($id);
		$capid = 'id="figcaption_'. $id . '" ';
		$id = 'id="' . $id . '" aria-labelledby="figcaption_' . $id . '" ';   
	} 
    
    $images = get_children ( array( 
		'post_mime_type' => 'image',
		'post_parent' => get_the_ID(),
		'post_type' => 'attachment'
    ));
	  
foreach ( $images as $images_id => $attachment ) 
        $metadata = wp_get_attachment_image_src($images_id, false);    
  	    $height = ($metadata[2]); 

	return '<figure itemprop="image" itemscope="itemscope" itemtype="http://schema.org/ImageObject" ' . $id . '
	class="wp-caption ' . esc_attr($align) . '" style="width: ' . (int) $width . 'px">' . do_shortcode( $content ) . '
		<meta itemprop="width" content="' . (int) $width . '">
		<meta itemprop="height" content="' . $height . '">
		<meta itemprop="name" content="' . $caption . '">
	<figcaption itemprop="caption description" ' . $capid . 'class="wp-caption-text">' . $caption . '</figcaption>
	</figure>';
} 
 
add_filter('img_caption_shortcode', 'htmlhook_img__figure', 10, 3);

Функция для тега img добавит необходимые атрибуты schema.org:

function htmlhook_schema_image($content) {
    global $post;
    $pattern = "<img";
    $replacement = '<img itemprop="url contentUrl"';
    $content = str_replace($pattern, $replacement, $content);
    
return $content;
}
add_filter('the_content', 'htmlhook_schema_image');

Микроразметка для изображений в содержании WordPress новой версии будет выглядит как показано на странице Микроразметка для изображений.