Статьи

Как добавить Schema.org в тему WordPress

Май 26, 2018

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

Поскольку все основные поисковые системы согласовали разметку, это облегчает реализацию schema.org и позволяет использовать преимущества всех поисковых систем.

Schema.org позволяет определить информацию на странице, существует множество различных типов, таких как:

  • Кино
  • книги
  • Рецепты
  • видео
  • аудио
  • События
  • организация
  • Человек
  • Место
  • Рассмотрение

Есть много других типов, которые вы можете определить страницу, вот полный список.

Полные типы Schema.org

Фрагменты структурированных данных

Чтобы увидеть, как это влияет на результаты поиска в Google, вы можете получить больше информации о богатых фрагментах в инструментах Google для веб-мастеров.

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

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

Как использовать Schema.org

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

Ниже приведен пример определения фильма в вашей HTML-разметке. Это начинается с поиска внешнего содержащего элемента и определения его как типа контента, который вы объясняете, используя атрибуты itemscope и itemtype .

<div itemscope itemtype="http://schema.org/Movie">

</div>

Каждый из элементов в фильме может быть определен с помощью атрибута itemprop . Чтобы определить название фильма, вам просто нужно добавить itemprop = «name» в тег заголовка.

<h1 itemprop="name">Avatar</h1>

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

<div itemscope itemtype="http://schema.org/Movie">
  <h1 itemprop="name">Avatar</h1>
  <div itemprop="director" itemscope itemtype="http://schema.org/Person">
  Director: <span itemprop="name">James Cameron</span> (born <span itemprop="birthDate">August 16, 1954)</span>
  </div>
  <span itemprop="genre">Science fiction</span>
  <a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">Trailer</a>
</div>

Что использовать в WordPress

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

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

<html <?php html_tag_schema(); ?> <?php language_attributes(); ?>>

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

function html_tag_schema()
{
    $schema = 'http://schema.org/';

    // Is single post
    if(is_single())
    {
        $type = "Article";
    }
    // Contact form page ID
    else if( is_page(1) )
    {
        $type = 'ContactPage';
    }
    // Is author page
    elseif( is_author() )
    {
        $type = 'ProfilePage';
    }
    // Is search results page
    elseif( is_search() )
    {
        $type = 'SearchResultsPage';
    }
    // Is of movie post type
    elseif(is_singular('movies'))
    {
        $type = 'Movie';
    }
    // Is of book post type
    elseif(is_singular('books'))
    {
        $type = 'Book';
    }
    else
    {
        $type = 'WebPage';
    }

    echo 'itemscope="itemscope" itemtype="' . $schema . $type . '"';
}

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

<title itemprop="name"><?php wp_title(''); ?></title>

Чтобы определить основную область содержимого вашего сайта, найдите div, который оборачивается вокруг функции the_content (), и добавьте itemprop mainContentOfPage вокруг области содержимого.

<div id="content" itemprop="mainContentOfPage">
	<?php the_content();?>
</div>

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

<time class="entry-date" datetime="<?php the_date('F jS, Y'); ?>" itemprop="datePublished" pubdate><?php the_date('F jS, Y'); ?></time>

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

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

36
Share: