Хотите, чтобы ПС легко индексировали ваш контент, чтобы сниппет вашего сайта выделялся на странице поисковой выдачи? (Что такое сниппет узнайте в этом посте)
Вы всегда сможете сообщить поисковому роботу, какого типа контент есть на сайте, чтобы ускорить и облегчить его индексацию.
Для этого нужно добавить на сайт семантическую микроразметку.
Сделать ее очень просто:
- Переходим на сайт schema.org или на его русский аналог - ruschema.org, изучаем иерархию сущностей (так schema.org называет объекты разметки).
Для наших целей (сайта на wordpress) подходит сущность CreativeWork (творческаяя работа), а также ее подразделы WebPage (веб страница) и WebPageElement (элементы веб страницы). - Переходим на страницу ruschema.org/WebPageElement. Изучаем, какие из предлагаемых параметров сущности WebPageElement мы можем использовать.
Нам подходят:
WPHeader
SiteNavigationElement
WPAdBlock
WPSideBar
WPFooter - На странице ruschema.org/WebPage выбираем подходящие для нас параметры.
Нам подходят:
keywords - ключевые слова/теги, использованные для описания содержимого,
breadcrumb – хлебные крошки,
headline – заголовок статьи,
creator или author – создатель контента или его автор,
datePublished – дата публикации,
text - текствое содержание творческой работы (текстовый контент).
video - встроенный объект видео,
offers - предложение о продаже — например, предложение о продаже продукта или услуги,
aggregateRating - общая оценка, основанная на наборе рейтингов, отзывов, оценок,
comment – комментарий.
А также свойства, унаследованные от самой высокой сущности (Thing):
description - короткое описание записи,
ImageObject - изображения записи,
url - URL записи,
mainEntityOfPage - основная страница. - Можно, также, прокрутить страницу вниз, нажать на вкладку Microdata, чтобы изучить примеры.
Теперь все это нужно перенести на свой сайт.
Открываем файл header.php, ищем в нем тег html, добавляем к нему параметры itemscope itemtype="http://schema.org/WebPage"
Параметр itemscope показывает поисковому боту, что на странице описывается определенный объект.
Параметр itemtype всегда идет рядом с itemscope. Он нужен для того, чтобы показать поисковому боту тип объекта (в данном случае, WebPage).
Конечно, для сохранения валидности кода, лучше добавить их в тег BODY, но добавив эти параметры к тегу HTML мы сможем, разметить также мета теги description и keywords, что окажется не возможным, если мы добавим их к BODY.
Вот так:
<html itemscope itemtype="http://schema.org/WebPage" lang="ru"> |
Добавляем itemprop="description" и itemprop="keywords" в соответствующие мета-теги. Вот так:
<meta itemprop="description" name="description" content="" /> <meta itemprop="keywords" name="keywords" content="" /> |
itemprop – описывает свойства указанного выше объекта (WebPage).
В этом же файле находим селектор header или div id="header", добавляем к нему itemscope itemtype="http://schema.org/WPHeader".
Вот так:
<div itemscope itemtype="http://schema.org/WPHeader" id="header"> |
К названию сайта добавляем itemprop="name"
<h1 itemprop="name"><?php bloginfo('name'); ?></h1> |
Открываем файл footer.php, ищем там селектор footer или div id="footer", добавляем к нему itemscope itemtype="http://schema.org/WPFooter"
<div itemscope itemtype="http://schema.org/WPFooter" id="footer"> |
Открываем файл sidebar.php, к тегу aside или div id="sidebar"
добавляем itemscope itemtype="http://schema.org/WPSideBar"
<div itemscope itemtype="http://schema.org/WPSideBar" id="sidebar"> |
Осталось разметить меню, чтобы микроразметка для сайта была готова.
Поскольку, в wordpress меню выводится функцией, я не стала заморачиваться с автоматическим добавлением разметки в эту функцию, а просто скопировала HTML код меню (правой клавишей мыши вызываем контекстное меню, выбираем в нем пункт "Просмотреть код страницы") и разметила меню вручную.
В селектор, который содержит меню, как правило, он находится в файле header.php, добавляем itemscope itemtype="http://www.schema.org/SiteNavigationElement", вот так:
<div itemscope itemtype="http://www.schema.org/SiteNavigationElement" id="page-menu"> |
Каждую ссылку оформляем так:
<li itemprop="name"> <a itemprop="url" href="//prodengiblog.ru/" title="Главная">Главная</a> </li> |
Как вариант, можно воспользоваться Мастером разметки структурированных данных от Google или аналогичным сервисом от Schema-creator.org.
Проверка микроразметки в Гугле здесь.
Валидатор микроразметки Яндекса находится здесь.
Прочитать документацию Яндекса можно здесь.
А теперь самое неприятное:
У стандартов микроразметки пока нет завершенной версии, она все время развиваются, добавляются новые параметры или изменяются старые, поэтому то, что вы сделаете сегодня, через месяц может устареть и все придется делать заново. Вот так :(.
Но, все же, чтобы удержать сайт на плаву, чтобы он не терял позиции в ПС, микроразметку придется внедрять.
На сегодня все, микроразметка сайта готова.
Что делать с оставшимися параметрами я расскажу в будущих постах.
Вы узнаете, как сделать микроразметку для:
- Хлебных крошек, а также поделюсь кодом хлебных крошек с уже готовой разметкой.
- Постов.
- Изображений.
- Видео.
- Комментариев.
- Кулинарных рецептов.
- Товаров.
- Офферов (предложений).
А напоследок, не удержусь, чтобы не похвастаться – мой сайт http://prodengiblog.ru/ попал в ДМОЗ.
Будьте на связи!
Спасибо за полезную информацию, однако для меня дилетанта она непостижима. Боюсь, что после введения всех кодов разметки, мне придется восстановить сайт из резервной копии.
P.S. От души поздравляю вас, Ксана, с включением вашего сайта в каталог ДМОЗ. Удачи вам!
Спасибо, Николай.
И вам удачи!
Ммм ...поздравляю Людмила с демоз! круто... Вы заслужили, темы стоящие и инофрмации полезной на блоге много ..тоже со временем хочу попробовать разместиться там.. На счет разметки, не хрена не понял где размещать сидебар разметку, не найду таких элементов в шаблоне Сабрина адаптивная.. А Вы вообще можете сделать разметку на заказ?
Разметку размещать в файлах:
header.php
footer.php
sidebar.php или sidebar-1.php и sidebar-2.php (если сайдбара два)
Да, могу сделать разметку на заказ. Напишите мне через форму для контактов.
Здравствуйте, Людмила! Нашел Вас в сети, очень понравился Ваш блог. И статья про микроразметку пришлась к стати! Подписываюсь на блог однозначно. Буду теперь Вашим постоянным посетителем, а не гостем. Веду свой блог, но занялся им не так давно, всего лишь второй месяц ему. Не знаю, ссылки наверное нельзя оставлять? Я не спамер! Напишу название "Блог Валерия Бородина", вроде уже находится в поисковиках. Если Вам не трудно посмотрите, может как профессионал, что нибудь посоветуете? Если конечно будет время. Спасибо!
Посмотрела.
Рекомендую СРОЧНО! сменить шаблон.
В вашем шаблоне:
- в шапке подключено 10! скриптов, которые загружаются до загрузки контента.
- один из тегов мета занимает 40 строк в коде.
Что он содержит один бог знает - информация в нем закодирована.
- шапка занимает половину первого экрана. зачем такая большая?