Микроразметка: применение для оптимизации страницы

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

История и варианты создания микроразметки

Первое о чем мы поговорим – это история возникновения этого мета тега. Микроразметка впервые появилась пять лет назад. По официальным данным известно о том, что два совершенно разных источника создавали словари для микроразметки, причем, с разными целями.

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

Вернемся к источникам, которые начали создание микроразметки – это словари Open Graph и Schema.org. Если остановится на каждом источнике отдельно, то стоит отметить их значительное отличие между собой.

Open Graph изначально создавал микроразметку для улучшения качества сайта фейсбук.

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

Schema.org – это специальный словарь, который был создан для удобного и понятного составления сниппета со всеми точными и необходимыми данными.

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

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

Предназначение микроразметки: основные правила и стандарты

О том, для чего нужна микроразметка и что она может принести вам и вашему сайту нужно поговорить детальнее. Предназначение микроразметки – это стандартная семантическая оптимизация, которая поможет увеличить количество посетителей вашей страницы в несколько раз.

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

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

Если говорить и первоначальном появление данного понятия, то стоит отметить, что в 2011 году его начали использовать поисковики Google, Bing и Yahoo.

Но система Яндекс далеко не отставала от нововведения. И в конце того же года, тоже в этой системе появилась микроразметка. Этот незаменимый элемент оптимизации стал одним их первых помощников роботов при выдаче необходимой информации пользователям со страниц сайтов. Всего через год микроразметкой уже начали пользоваться около 10 процентов сайтов рунета.

Виды разметки: микроформаты, микроданные и RDFа

Стоит ознакомиться с составляющими микроразметки, а точнее ее видами – это микроформаты, микроданные и RDF. В первую очередь запомните, что микроразметка подразумевает использование специальных HTML-кодов любой использованной страницы.

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

Микроданные могут описывать название организации, дату проведения мероприятия, телефон, адрес и многое другое. Для того, чтобы написать такую разметку данных, необходимо применять такие атрибуты как <div> и <span>.

Когда для описание вышеперечисленной информации будут применяться атрибуты <div> и <span>, тогда будут присвоены небольшие описательные имена свойствам и элементам.

Теперь ознакомимся с понятие микроформаты. Эти элементы разметки служат для описания типа информации на странице. Каждый такой формат будет иметь свои свойства и правила применения.

Например, при описании какого-либо мероприятия, применяется такое свойство, как место, дата, время проведения и подобное описание. Необходимо запомнить, что при написании микроформатов нужно использовать атрибут class в используемых тегах <div> и <span>.

И последний тип микроразметки - это RDFa. Этот составляющий тип микроразметки, работает по подобному принципу с вышеописанными элементами. Но основными привилегиями RDFa являются более расширенные возможности. Ознакомится с написание микроданных, можно просмотрев видео.

Микроразметка Schema.org: применение, правила, написания, значение для поисковых систем

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

Schema.org – это информационный Интернет-ресурс, на котором можно найти любую схему микроразметок, которые распознаются всемирными сайтами поисковиками, в том числе Яндекс и Гугл. Под понятие «схемы» нужно подразумевать применение и написание HTML-кода.

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

Использование Schema.org увеличивает вероятность того, что ваш сайт будет в списке популярных и топовых, в несколько раз.

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

Например, понятие «мимоза» - это может быть как весенний цветок, так и салат. С помощью микроразметки вы с точностью можете описать, о чем идет речь на вашем сайте – о цветке, где и в каких условиях он растет или о рецепте салата и способе его приготовления. Еще одним плюсом использования Schema.org является подача и размещение информации о вашей компании.

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

• без микроразметки:

<div>

<span>Королек</span>

Контакты:

<div>

Адрес: Пушкина, 16,

119021,

Москва,

</div>

Телефон: +7 495 000-02-01,

Факс: +7 495 000-01-02,

Электронная почта: 020103rte@yandex-team.ru

</div>

• c микроразметкой

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

<span itemprop="name">Королек</span>

Контакты:

<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">

Адрес:

<span itemprop="streetAddress">Пушкина, 16</span>

<span itemprop="postalCode"> 119021</span>

<span itemprop="addressLocality">Москва</span>,

</div>

Телефон:<span itemprop="telephone">+7 495 000-02-01</span>,

Факс:<span itemprop="faxNumber">+7 495 000-01-02</span>,

Электронная почта: <span itemprop="email">020103rte@yandex-team.ru </span>

</div>

Использование itemscope, itemtype и itemtype: основное значение и написание

Теперь стоит детально ознакомиться с тегами itemscope и itemtype, и узнать, для чего они нужны. Для этого мы возьмем конкретный пример. Например, премьеру мультфильма «Ледниковый период». Пока у нас есть стандартная информация о мультфильме, режиссере и дате выхода. Это будет выглядеть так:

<div>

<h1> Ледниковый период </h1>

<span>Режиссер: Blue Sky Studios</span>

<span>Мультфильм</span>

<a href="/../movies/lednikoviy-period-theatrical-trailer.html">Трейлер</a>

</div>

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

<div itemscope>

<h1> Ледниковый период </h1>

<span>Режиссер: Blue Sky Studios</span>

<span>Мультфильм</span>

<a href="/../movies/lednikoviy-period-theatrical-trailer.html">Трейлер</a>

</div>

Использование тега itemtype подразумевает применение определенной сущности в информации поданной для зрителя. В итоге получаем такой HTML-код:

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

<h1> Ледниковый период </h1>

<span>Режиссер: Blue Sky Studios</span>

<span>Мультфильм</span>

<a href="/../movies/lednikoviy-period-theatrical-trailer.html">Трейлер</a>

</div>

Последняя микроразметка показывает нам, что теперь мы используем определенную сущность, которая описывается в теге <div> и представляет собой мультфильм типа Movie с общей базы schema.org. Названия типов кинофильмов имеют вид URL, в нашем примере это http://schema.org/Movie.

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

Второй атрибут – это itemtype, который не может быть без itemscope и указывает роботу, какой именно тип объекта описывается, например, организация, продукт, товар, фильм и другое. И последний рассматриваемый атрибут – это itemprop – описывает свойства объекта, например, если это организация, то название, адрес и телефон, а если фильм, то жанр, автор, актеры и другое.

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

Schema.org: описание разнообразных событий, с помощью специальных схем

С помощью Schema.org можно описать событие или мероприятие, которое будет происходить в определенную дату. В таком случае у вас есть возможность, например, описать адрес, организаторов, название и указать цену входа или участия. Стоит ознакомиться с такой возможностью на примере. Но в первую очередь запомните, что в случае описания любого мероприятия нужно указывать в HTML-коде странице тип объекта. А точнее:

<div itemscope itemtype=”http://schema.org/Event”>

В таком коде itemscope – говорит поисковому роботу, что на данной странице описан конкретный объект, а itemtype – с точностью определяет тип объекта, при этом отсылая поисковую систему на конкретную страницу сайта.

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

<span itemprop="name">Соревнования по танцам "Весенний ветер"</span>

<meta itemprop="startDate" content="2017-03-03T08:00">

<div itemprop="location" itemscope itemtype="http://schema.org/Place">

<a itemprop="url" href="/v-stoliche.html">

В столице</a>

Обязательно необходимо обратить внимание на описание места, где будет проходить соревнование, а точнее показать в конкретной строке кода (третья сверху) поисковикам. В нашем примере описание свойств объекта само считается отдельным объектом, что ведет к использованию после itemprop атрибутов itemscope и itemtype.

Так же в этом примере можно указать стоимость участия, например:

Теперь укажите стоимость участия в мероприятии:

<div itemprop=”offers” itemscope itemtype=”http://schema.org/AggregateOffer”><span itemprop=”lowPrice”>500 рублей</span> – <span itemprop=”highPrice”>1000 рублей</span>

</div>

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

Open Graph: использование микроразметки, целесообразность для сайтов

Изначально нужно понять, что Open Graph впервые было создано социальной сетью facebook. Такое решение основателями данной соцсети было принято для того, чтобы отображать другие сайты и ссылки выгодным ракурсом для пользователей. Словарь Open Graph используют 15 процентов сайтов рунета. Но по статистке известно о том, что данный словарь применяется сайтами лишь для того, чтобы «красиво» отображаться в социальных сетях.

На данный момент Open Graph используется такими соцсетями как Google+, Twitter, Вконтакте, facebook и другие. Выгодный ракурс сайта на страницах социальных сетей повышает посещаемость каждой указанной страницы в разы.

Кроме того, можно проверить насколько правильно и целесообразно используется Open Graph, контролируя HTML-код через проверенные ресурсы Google или валидатор «Яндекс».

Детально ознакомиться с тонкостями использования микроразметки Open Graph можно во время просмотра видео.

Основные мета теги для словаря Open Graph

Как известно в микроразметке используются специальные мета теги, с помощью которых можно описать необходимую информацию о желаемом сайте. Если говорить о классическом использовании Open Graph, то в нем описывается, лишь один объект, например компания, товар, человек или мероприятие. Именно для выбранного объекта применяется полное и детальное описание. Если вы хотите передать поисковым системам полную информацию о вашем объекте необходимо указать такие мета теги:

• og:title — название объекта
• og:type — тип объекта. Необходимо запомнить, что если на странице находятся несколько объектов, то нужно указать в описании, лишь, самый важный (по вашему мнению) из объектов
• og:image — URL изображения, объекта, который описывается
• og:url — краткий URL объекта, который будет использован в качестве постоянного идентификатора

Используя пример, можно понять, насколько просто пользоваться Open Graph:

<meta property="og:title" content=" Дженнифер Джоанна Энистон "/>

<meta property="og:description" content="Американская киноактриса"/>

<meta property="og:type" content="profile"/>

<meta property="og:url" content= "https://ru.wikipedia.org/wiki/Энистон,_Дженнифер" />

Детальные комментарии и видео по теме Open Graph можно увидеть в предоставленном ролике.