Микроформаты и микроданные для WordPress

предисловие
Оптимизация ваших статей
Объявление элемента BlogPosting
Оптимизировать «изображения в заголовках»
Объявите содержание статьи
Продемонстрировать видео
Отметить
Всегда больше!
Некоторые источники и ресурсы
Bonux: полный код

WordPress известен своей естественной оптимизацией для SEO своего контента.

В дополнение к предложению плагинов для оптимизации, которые позволяют вам контролировать дублирующийся контент, настраивать каждый метаданные (описание, ключевые слова, заголовки и т. Д.) Или создавать интересные по контексту внутренние ссылки, CMS использует в своих темах по умолчанию («Двадцать») микроформаты.

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

entry-title : позволяет определить заголовок содержимого.
entry-content : определяет ядро контента, тело страницы или статьи.
entry-summary : позволяет определить краткую информацию о содержании.
updated : устанавливает дату обновления контента, эта информация соответствует шаблону Дата и время (Шаблон представляет собой точный синтаксис, например: YYYY-MM-DD - шаблон даты, предлагающий ввести год из 4 цифр, месяц и день по две цифры в каждой).
опубликовано : позволяет определить дату публикации содержимого, эта информация соответствует шаблону Дата и время
автор : позволяет определить автора в соответствии с форматом hCard
закладка : ссылка, которая предоставляет статью, соответствует постоянной ссылке WordPress и использует атрибут отн-закладки
теги : позволяет определить ключевые слова статьи благодаря списку слов или предложению (см. также отн-тег )

Выглядя хорошо, вы найдете все это на WordPress, в темах по умолчанию или на вашей, если он хорошо построен.

Сегодня я предлагаю вам взглянуть на то, что предлагают микроформаты в их форме. Микроданные HTML5.

предисловие

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

Сегодня Google, похоже, не хочет идти дальше, чем когда он предоставляет информацию о новинках своих алгоритмов, включая обработку информации, передаваемой с помощью технологии HTML5 (новая семантика элементов HTML5 или микроданных). Тем не менее, некоторые HTML5-интегрированные сайты с реализацией Microdata используют преимущества Rich Snippets от Google.

Это относится к каталогу плагинов WordPress, который недавно внедрил продукты Schemas, Offer и AggregateRating для оптимизации отображения своих плагинов в результатах поиска.

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

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

Рекомендация Google по использованию формата микроданных

Оптимизация ваших статей

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

Объявление элемента BlogPosting

Давайте просто начнем маркировать содержимое нашей статьи так, как это делает TwentyEleven (стандартная тема WordPress).

Функция post_class () будет генерировать, среди прочего, класс hentry, необходимый для поддержки схемы микроформата hEntry. Для реализации микроданных, здесь все начинается тоже.

<article id = "post - <? php the_ID ();?>" <? php post_class (); ?> itemscope itemtype = "http://schema.org/BlogPosting"> <! - содержание статьи -> </ article>

Мы создаем элемент BlogPosting, соответственно, благодаря атрибутам itemcope и itemtype. Последнее позволяет указать, какая схема будет использоваться для определения элемента.

Название нашей статьи

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

Небольшое примечание: schema.org различает «заголовок» и «имя». Первый больше соответствует «заголовку» газеты, где «имя» скорее означает название объекта, произведения.

даты

Давайте продолжим отмечать заголовок нашей статьи информацией о дате, которая также имеет очень специфический синтаксис. Добавьте этот раздел ".entry-meta" вместо предыдущего комментария HTML:

<div class = "entry-meta"> Опубликовано <time datetime = "<? php the_time ('c');?>" itemprop = "datePublished"> <? php the_date (); ?> to <? php the_time (); ?> </ time> <? php if (get_the_modified_time ()! = get_the_time ()) {?> - Последнее обновление <time datetime = "<? php the_modified_time ('c');?>" itemprop = " dateModified "> <? php the_modified_time ('d F Y'); ?> </ time> <? php}?> </ div> <! - .entry-meta ->

Функции WordPress the_time ('c') и the_modified_time ('c') позволяют возвращать дата в формате ISO 8601 , В этом случае важно предупредить поисковую систему, что ваша статья была обновлена.

Ссылка с комментариями

Следуя этой информации, можно добавить ссылку на комментарии, указав их номер. Такой способ работы присутствует в некоторых темах WordPress. Здесь есть возможность перетащить ссылку на обсуждение (topicUrl) и подсчитать количество взаимодействий (взаимодействияCount).

<a href="#comments" itemprop="discussionUrl"> <? php comments_number ('нет комментариев <meta itemprop = "InteractionCount" content = "0 UserComments">', '1 комментарий <meta itemprop = "InteractionCount" content = "1 UserComments"> ','% comments <meta itemprop = "interactiveCount" content = "% UserComments"> ');?> </a>

Функция WordPress comments_number ($ no, $ one, $ more) используется для отображения количества комментариев в посте. Здесь мы непосредственно вставляем нашу мета-носитель информации о количестве и типе взаимодействия (здесь «UserComments»)

Оптимизировать «изображения в заголовках»

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

Schema.org различает здесь два разных изображения: изображение и thumbnailUrl. Первый - это «изображение предмета», а второй - «изображение, представляющее предмет. Эта дифференциация, кажется, соответствует приоритету в использовании изображений для иллюстрации Rich Snippets.

Новости Rich Snippet в поиске Google

Rich Snippet на классический поиск Google

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

<? php // если изображение существует if (has_post_thumbnail ()) {echo '<div class = "post-thumbnail">'; // расширенное управление атрибутами $ attr_th = array ('title' => get_the_title (), 'itemprop' => 'image', 'alt' => ''); the_post_thumbnail ('medium', $ attr_th); // получить URL-адрес эскиза $ src = wp_get_attachment_image_src (get_post_thumbnail_id ($ post-> ID), 'thumbnail', false); echo '<meta itemprop = "thumbnailUrl" content = "'. $ src [0]. '">'; echo '</ div>'; }?>

Здесь мы получаем URL изображения в миниатюрной версии, предлагаемой в основных форматах WordPress («миниатюра»). Этот квадратный формат используется Google для отображения миниатюр (которые могут быть сгенерированы в любом случае из другого формата).

Объявите содержание статьи

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

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

Список наших категорий

Статья может относиться к нескольким категориям, я вас ничему не учу. Их можно перечислить благодаря функции get_the_category_list () что мы не будем использовать здесь, чтобы позволить нам настроить HTML-код.

<? php $ post_cats = get_the_category (); $ Categories_list = ''; foreach ($ post_cats as $ cat) $ Categories_list. = '<a itemprop="about" href="'.esc_url(get_category_link($cat-> term_id)).' "> '. $ cat-> name.' < / a>, '; $ Categories_list = Trim ($ Categories_list, ','); ?>

Здесь мы используем itemprop «о», чтобы отметить категории, темы статьи. Держите нашу переменную теплой, мы будем использовать ее позже.

Список ключевых слов

Мы будем действовать так же, используя функцию get_the_tags () ,

<? php $ post_tags = get_the_tags (); $ tag_list = ''; if ($ post_tags) {foreach ($ post_tags as $ tag) $ tag_list. = '<a rel="tag" itemprop="keywords" href="'.esc_url(get_tag_link($tag-> term_id))' " > '. $ tag-> name.' </a>, '; $ tag_list = trim ($ tag_list, ','); }?>

Это «ключевые слова» itemprop, которые мы используем для маркировки ключевых слов. Мы держим здесь классический rel-tag. Давайте также будем держать эту переменную $ tag_list в тепле, которая будет служить нам сразу после.

Постоянная ссылка или рел-закладка

Чтобы просто завершить закладку rel, уже существующую по умолчанию в WordPress, необходимо составить ссылку, добавив URL-адрес itemprop.

<? php $ permalink = '<a href = "'. esc_url (get_permalink ()). '" title = "Постоянная ссылка на .thethettlele_attribute (' echo = 0 ').'" rel = "bookmark" itemprop = "url «> Постоянная ссылка </a>«; ?>

Авторский блок

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

Авторская разметка

Google предлагает расширенную поддержку для отображения автора перед статьей. Он называет его сам разметка авторства и позволяет этот вид рендеринга.

Rich Snippet из профиля Google плюс объявлен автором

Чтобы получить такой результат, Google использует (по-прежнему) атрибут rel-author, связанный с URL-адресом вашего аккаунта Google+. Поэтому эту информацию можно объединить по ссылке, которая указывает на вашу учетную запись Google+. Тем не менее, наименее ограничительным методом является использование мета или элемента ссылки следующим образом:

Чтобы создать эту небольшую ссылку, это легко сделать для личного блога с одним автором. Сделай это вручную. Для блога с несколькими авторами добавьте этот фильтр в файл functions.php вашей темы.

<? php add_filter ('user_contactmethods', 'update_contact_methods', 10,1); if (! function_exists ('update_contact_methods')) {function update_contact_methods ($ contacts) {$ contacts ['Google_contact'] = 'Google+'; вернуть $ контакты; }}?>

Затем, все еще в документе functions.php, добавьте этот фильтр в функцию wp_head.

<? php add_filter ('wp_head', 'custom_header_with_authorship_markup'); if (! function_exists ('custom_header_with_authorship_markup')) {function custom_header_with_authorship_markup () {global $ post; if ('post' == get_post_type ($ post-> ID)) {if (get_the_author_meta ('google_contact', $ post-> post_author)! = '') echo '<link rel = "author" href = "'. get_the_author_meta ('contact_google', $ post-> post_author). '">'." \ n "; }}}?>

Индивидуальный профиль автора для размещения информации о профиле Google+

Как только у нас появится сообщение «пост» и автор введет поле «Google+» в своем профиле участника, ссылка rel-author будет добавлена в заголовок документа.

Информационный блок "Об авторе"

Я понятия не имею о совместимости или возможном конфликте между автором itemprop и разметкой авторства Google. По моему мнению, если вы заполните URL-адрес автора в учетной записи Google+, эта информация будет иметь приоритет над авторским блоком, который последует. Это будет, по крайней мере, случай с Rich Snippet: Google должен сделать это, чтобы повысить интерес к своей социальной сети.

Давайте предположим, что микроданные предназначены не только для Google, и добавим правильный авторский блок с пометкой Схема человека ,

<? php if (get_the_author_meta ('description')) {$ author_block = '<div id = "author-info" itemprop = "author" itemscope itemtype = "http://schema.org/Person"> <div id = "author-avatar" itemprop = "image"> 'get_avatar (get_the_author_meta (' user_email '), 50).' </ div> <! - # author-avatar -> <div class = "author-description"> <h2> Об <span itemprop = "name"> '. get_the_author ().' </ span> </ h2> <p itemprop = "description"> '. get_the_author_meta (' description ').' </ p> <p class = "author-link"> <a href="'.esc_url(get_author_posts_url(get_the_author_meta('ID')) ).'" itemprop="url"> Просмотреть все сообщения пользователя. .get_the_author (). '</a> </ p> <! - .author-link -> </ div> <! - .author-description -> </ div> <! - .entry-author -info -> ';}?>

Здесь мы начинаем с элемента, объявленного как «автор», чтобы определить его как новый элемент типа «Персона». Это «встроенный элемент», который позволяет распространять информацию внутри другого.

Здесь мы получаем основную информацию о зарегистрированном пользователе. Вы несете ответственность за заполнение этой информации путем добавления настраиваемых полей в пользовательской области в соответствии с вашими потребностями и схемой «Персона».

=> Состав нижнего колонтитула

Здесь у нас есть все элементы для размещения в нашем нижнем колонтитуле, здесь мы идем:

<footer class = "entry-meta"> <? php // о категориях echo '<p> Эта статья написана'. $ author. ' был опубликован в категориях ». $ Categories_list. '.'; // о тегах if (''! = $ post_tags) echo 'Он отмечен тегом.. $ tag_list.'. '; // about permalink echo '<br /> Добавьте его в избранное с помощью'. $ permalink. '. </ p>'; // об авторе echo $ author_block; ?> </ footer> <! - .entry-meta ->

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

Я все еще даю вам дополнительный трек относительно вставки видео в ваши статьи.

Продемонстрировать видео

Некоторые из ваших статей, безусловно, основаны на видео-контенте, который было бы интересно разместить непосредственно в результатах поиска. Долгое время было хорошей идеей использовать атрибут rel со значением «media: video» в элементе объекта, который используется для вставки вашего видео. Google использует метаданные видео для отображения эскиза, продолжительности видео и т. Д.

Rich Snippet статьи с видео

Давайте свяжем эти данные со схемой BlogPosting, которую затем можно расширить благодаря Схема VideoObject ,

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

Отметить

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

<? php if ('post' == get_post_type ()) {echo 'itemprop = "title"'; }?>

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

Всегда больше!

Расширить микроданные

=> к плагинам

Мой подход к микроданным в WordPress очень прост здесь. WordPress позволяет представить что-то кроме «BlogPost», как, например, Отзывы или aggregateRating который может вращаться вокруг обозначения сообщения или карты.

Мы можем пойти дальше, адаптировав Схема продукта к инструментам электронной коммерции WordPress (WooCommerce, РП электронной коммерции и т. д.) или путем настройки тем, созданных вокруг этих плагинов.

=> темы

Вы, которые являются создателями качественных тем и которые хотите выделиться или внести реальную добавленную стоимость своей теме (прекратите бесполезные шорткоды! #Troll), интегрируйте микроданные, характерные для темы, к которой относится ваша тема.

Например, Пищевые Рецепты Тема WordPress предлагает рецепты приготовления благодаря Схема рецепта и aggregateRating ,

Богатый фрагмент рецепта, реализующего схемы рецептов и оценок

=> благодаря некоторым плагинам

Микроданные для SEO - плагин для вставки в ваши статьи определенных форматов.
Автор hReview - плагин для поддержки микроформата hReview, включая микроданные AggregateRating
Автор уверен - плагин для оптимизации авторского блока в конце статьи.

Некоторые источники и ресурсы

schema.org - Схемы микроформатов данных обнародованы Google, Yahoo !, Bing и Yandex.
schema-creator.org - Позволяет генерировать микроформованные части кода с микроданными HTML5, следуя схемам schema.org.
Инструмент для веб-мастеров Rich Snippets - Позволяет контролировать ваши маркировки и дает список советов по оптимизации.

Bonux: полный код

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

functions.php:

add_filter ( 'user_contactmethods', 'update_contact_methods', 10.1); if (! function_exists ('update_contact_methods')) {function update_contact_methods ($ contacts) {$ contacts ['Google_contact'] = 'Google+'; вернуть $ контакты; }} add_filter ('wp_head', 'custom_header_with_authorship_markup'); if (! function_exists ('custom_header_with_authorship_markup')) {function custom_header_with_authorship_markup () {global $ post; if ('post' == get_post_type ($ post-> ID)) {if (get_the_author_meta ('google_contact', $ post-> post_author)! = '') echo '<link rel = "author" href = "'. get_the_author_meta ('contact_google', $ post-> post_author). '">'." \ n "; }}}

content-single.php (зависит от структуры вашей темы):

<article id = "post - <? php the_ID ();?>" <? php post_class (); ?> itemscope itemtype = "http://schema.org/BlogPosting"> <header class = "entry-header"> <h1 class = "entry-title" itemprop = "headline"> <? php the_title (); ?> </ h1> <? php if ('post' == get_post_type ()):?> <div class = "entry-meta"> <time datetime = "<? php the_time ('c');?> "itemprop =" datePublished "> <? php the_date (); ?> to <? php the_time (); ?> </ time> <? php if (get_the_modified_time ()! = get_the_time ()) {?> - Последнее обновление <time datetime = "<? php the_modified_time ('c');?>" itemprop = " dateModified "> <? php the_modified_time ('d F Y'); ?> </ time> <? php}?> | <a href="#comments" itemprop="discussionUrl"> <? php comments_number ('нет комментариев <meta itemprop = "InteractionCount" content = "0 UserComments">', '1 комментарий <meta itemprop = "InteractionCount" content = "1 UserComments"> ','% comments <meta itemprop = "взаимодействияCount" content = "% UserComments"> '); ?> </a> </ div> <! - .entry-meta -> <? php endif; ?> </ header> <! - .entry-header -> <? php if (has_post_thumbnail ()) {echo '<div class = "post-thumbnail">'; $ attr_th = array ('title' => get_the_title (), 'itemprop' => 'image', 'alt' => ''); the_post_thumbnail ('medium', $ attr_th); $ src = wp_get_attachment_image_src (get_post_thumbnail_id ($ post-> ID), 'thumbnail', false); echo '<meta itemprop = "thumbnailUrl" content = "'. $ src [0]. '">'; echo '</ div>'; }?> <div class = "entry-content" itemprop = "articleBody"> <? php the_content (); ?> </ div> <! - .entry-content -> <? php // найти категории сообщения $ post_cats = get_the_category (); $ Categories_list = ''; foreach ($ post_cats as $ cat) $ Categories_list. = '<a itemprop="about" href="'.esc_url(get_category_link($cat-> term_id)).' "> '. $ cat-> name.' < / a>, '; $ Categories_list = Trim ($ Categories_list, ','); // найти теги из поста $ post_tags = get_the_tags (); $ tag_list = ''; if ($ post_tags) {foreach ($ post_tags as $ tag) $ tag_list. = '<a rel="tag" itemprop="keywords" href="'.esc_url(get_tag_link($tag-> term_id))' " > '. $ tag-> name.' </a>, '; $ tag_list = trim ($ tag_list, ','); } // постоянная ссылка $ permalink = '<a href = "'. esc_url (get_permalink ()). '" title = "Постоянная ссылка на .the_title_attribute (' echo = 0 ').'" rel = "bookmark" itemprop = "URL"> Постоянная ссылка </a> «; // автор $ author_block = ''; if (get_the_author_meta ('description')) {$ author_block. = '<div id = "author-info" itemprop = "author" itemscope itemtype = "http://schema.org/Person"> <div id = "author -avatar "> '.get_avatar (get_the_author_meta (' user_email '), 50).' </ div> <! - # author-avatar -> <div class = "author-description"> <h2> Об <span itemprop = "name"> '. get_the_author ().' </ span> </ h2> <p itemprop = "description"> '. get_the_author_meta (' description ').' </ p> <p class = "author-link"> <a href = "'. esc_url (get_author_posts_url (get_the_author_meta (' ID '))). "" Itemprop = "url"> Показать все сообщения о .get_the_author ().' </a> </ p> <! - .author-link -> </ div> <! - .author-description -> </ div> <! - .entry-author-info - > '; }?> <footer class = "entry-meta"> <? php echo '<p> Эта статья написана'. $ author. ' был опубликован в категориях ». $ Categories_list. '.'; if (''! = $ post_tags) echo 'Он помечен'. $ tag_list. '.'; echo '<br /> Добавьте его в избранное с помощью его.. $ permalink.'. </ p> '; echo $ author_block; ?> </ footer> <! - .entry-meta -> </ article> <! - #post - <? php the_ID (); ?> ->

РЕДАКТИРОВАТЬ Даниэль Рох

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

Предварительный просмотр блога в Google

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

Lt;article id = "post - <?
Php the_ID ();?
Gt;" <?
Php post_class (); ?
Lt;article id = "post - <?
Php the_ID ();?
Gt;" <?
Php post_class (); ?
Lt;header class = "entry-header"> <h1 class = "entry-title" itemprop = "headline"> <?
Php the_title (); ?

Категории

Новости