Содержание статьи
Сегодня мы рассмотрим один важный аспект в SEO. И называется этот аспект "микроразметка" или "микродата".
Микроразметка - это семантическая разметка данных размещенных на сайте , которую используют поисковые системы и социальные сети для более точной обработки информации и формирования расширенных сниппетов.
Основные стандарты микроразметки это: OpenGraph , JSON-LD, микроформаты и schema.org.
В этой статье я хотел бы обратить внимание на schema.org и OpenGraph, так как эти форматы наиболее популярны.
Микроразметка формата OpenGraph
Open Graph — это формат, разработанный командой Facebook, предназначенный для улучшения отображения ссылок на веб-сайты в социальных сетях за счет создания расширенного сниппета. С момента его появления сторонние разработчики активно внедрили этот формат, и теперь он поддерживается в таких крупных сетях и мессенджерах, как Facebook, VK, WhatsApp, Telegram, X и других. Эти мета-теги встраиваются в шапку сайта, т.е. в раздел .
Пример мета-тегов, использующих формат OpenGraph, выглядит следующим образом:
<!-- Пример:-->
<meta property="og-locale" content="ru_RU">
<meta property="og:type" content="website">
<meta property="og-title" content="Веб студия Daracode - разработка сайтов под ключ">
<meta property="og:url" content ="https://daracode.ru">
<meta property="og:site_name" content="Разработка сайтов под ключ - веб студия daracode">
<meta property="og:image" content="https://daracode.ru/wp-content/uploads/.....">
<meta property="og:image:type" content="image/webp">По итогу при размещении ссылки в VK мы получаем такую картинку :
Так что же означает весь этот код?
<meta property="og-locale" content="ru_RU"> : <!--Этот мета-тег указывает локализацию контента страницы для социальных сетей. В данном случае, контент страницы предназначен для русскоязычной аудитории.-->
<meta property="og:type" content="website" <!-- - Указывает тип контента - наш конкретный случай "content ="website" указывает что ссылка ведет на вебсайт.-->
<meta property="og-title" content="Ваш заголовок"><!--: Этот мета-тег задает заголовок страницы, который будет отображаться при публикации ссылки на страницу в социальных сетях. -->
<meta property="og:url" content ="https://daracode.ru"> <!-- указывает URL-адрес страницы, который будет использоваться при публикации ссылки на страницу в социальных сетях. -->
<meta property="og:site_name" content="Название"><!-- определяет название сайта или компании, связанной с контентом страницы, для отображения в социальных сетях. -->
<meta property="og:image" content="url изображения "> <!-- указывает URL изображения, которое будет использоваться как предпросмотр при публикации ссылки на страницу в социальных сетях. -->
В этой статье мы рассмотрели лишь основные мета теги формата OpenGraph
Расширенную документацию вы можете посмотреть по адресу https://ogp.me/
В этой статье мы рассмотрели лишь основные мета теги формата OpenGraph
Расширенную документацию вы можете посмотреть по адресу https://ogp.me/
Микроразметка schema.org
Если OpenGraph предзначен для разметки в социальных сетях то schema предназначена для поисковых систем . Это обеспечивает структурированное представление данных, которое поисковые системы могут легко интерпретировать, позволяя эффективнее индексировать информацию на вашем сайте. Благодаря этому, некоторые элементы вашего сайта могут отображаться в расширенных формах, таких как карусели, рейтинги и другие визуальные представления.
Рассмотрим, как различается результат выдачи без микроразметки и с ней. В первом случае выдача выглядит довольно стандартно, безобидно. Однако когда вы добавляете микроразметку, автоматически появляется возможность выделиться среди конкурентов. Разнообразные элементы, такие как звездные рейтинги или изображения, делают сниппеты более привлекательными для кликов.
так выглядит поисковая выдача без расширенных сниппетов
А так с ними:
Ведь cогласитесь, вероятность клика по второй выдаче выше, т.к. она сильнее выделяется в сравнении с примером выше.
Документация schema.org включает множество типов разметки, что позволяет использовать микроразметку в различных областях. Одним из наиболее распространённых типов является "Организация". Чаще всего информация о компании располагается в области шапки сайта или в футере. Чтобы корректно использовать разметку, необходимо, чтобы блок элемента первого уровня имел атрибуты itemscope и itemtype.
При этом itemscope сообщает браузеру, что данный блок включает дочерние свойства определённого формата, а itemtype указывает на конкретный тип блока. Дочерние элементы в этой разметке также должны иметь атрибут itemprop, который определяет имя свойства.
Пример разметки Schema.org может выглядеть так:
<!-- Пример разметки schema.org блока организации -->
<div itemscope itemType="http://schema.org/organization">
<span itemprop="name">Название организации<span/>
<span itemprop="telephone">Номер телефона<span/>
<img itemprop="logo" src="http://example.org" alt="example log">
<meta itemprop="description" content="Описание организации">
<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<meta itemprop="addressCountry" content="Россия">
<meta itemprop="streetAddress" content="Адрес компании">
</div>
<div>Таким образом, мы видим, что все родительские элементы обладают атрибутами itemscope и itemtype, а вложенные элементы содержат itemprop с необходимыми значениями. Для представления этих атрибутов могут использоваться любые HTML-теги, в том числе meta.
Как проверить валидность микро-разметки?
Теперь давайте обсудим, как можно проверить корректность микроразметки. Для этого разработаны специальные инструменты, доступные на сайте schema.org, а также по адресу https://search.google.com/test/rich-results?hl=ru. Это позволяет проверить, правильно ли вы внедрили микроразметку на своём сайте.
Работа с валидатором Google происходит следующим образом: вы вводите URL-адрес вашего ресурса, и система перенаправляет вас на страницу с результатами валидации. Вы сможете увидеть, какие элементы были успешно распознаны, а также получит рекомендации по исправлению ошибок.
После ввода url вашего сайта происходит перенаправление на страницу с результатами валидации
которая выглядит примерно так:
Ну чтож на этом наше знакомство с микро-разметкой schema.org заканчивается. Ознакомиться с ней подробнее вы можете на сайте http://schema.org
Если не удается разобраться в навигации сайта то в строке поиска на сайтах google и Yandex Введите schema.org + "Тип разметки".
Например schema.org Продукт.
Поисковик выдаст страницу сайта schema.org посвященную этому типу разметки.
