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

chto takoe mikrorazmetka

Что такое микроразметка?

Микроразметка – стандарт семантической разметки данных в сети. 2011 г. поисковые системы Google, Bing и Yahoo объявили о семантической разметки Schema.org. Была внедрена для того, чтобы облегчить поисковым системам разбираться в размещенной информации на сайтах. С помощью микроразметки вы можете улучшать сниппеты в поисковой выдаче.

В данной статье рассмотрим микрозаметку для показа адреса и телефона компании в поисковой выдаче. 

shema.org

Возьмем за пример сайт ufasauna.com.

На сайте данные о компании показаны в шапке, такие как телефон, адрес, название компании. 

Было

<div id="header_verh_c">
<div id="menu_text_mobil"></div>
<div id="header_verh_left">
<p><span>г. Уфа</span> <span> ул.Бакалинская, 11</span> </p>
<p><a href="/kontakty/">на карте</a></p>
<p class="header_verh_left_p">КРУГЛОСУТОЧНО, БЕЗ ВЫХОДНЫХ</p>
</div>
<div id="header_verh_logo">
<a href="/"></a>
</div>
<div id="header_verh_right">
<p>+ 7 347 <span >294-14-84, 274-49-82</span></p>
<div class="d3"><a href="/o_saune/"><img src="/templates/ufasauna/images/3d-symbol.png" alt="3D тур" title="3D тур"><span>тур</span></a></div>
<span class="zz">заказать звонок</span>
</div>
</div>

zaprosy jandeks

Добавим микроразметку shema.org

<div id="header_verh_c" itemscope itemtype="http://schema.org/Organization">
<div id="menu_text_mobil"></div>
<div id="header_verh_left">
<p><span itemprop="addressLocality">г. Уфа</span> <span itemprop="streetAddress"> ул.Бакалинская, 11</span> </p>
<p><a href="/kontakty/">на карте</a></p>
<p class="header_verh_left_p">КРУГЛОСУТОЧНО, БЕЗ ВЫХОДНЫХ</p>
</div>
<div id="header_verh_logo">
<a href="/"></a>
</div>
<div id="header_verh_right">
<p>+ 7 347 <span itemprop="telephone">294-14-84, 274-49-82</span></p>
<div class="d3"><a href="/o_saune/"><img src="/templates/ufasauna/images/3d-symbol.png" alt="3D тур" title="3D тур"><span>тур</span></a></div>
<span class="zz">заказать звонок</span>
</div>
</div>

так мы показали поисковым роботам, что у нас есть

адрес: г. Уфа ул.Бакалинская, 11

телефон: 294-14-84, 274-49-82

 

Это не единственный способ показать адрес и телефон компании. Рассмотрим JSON-LD 

JSON-LD 

JSON-LD — это формат описания контента с помощью объектов словаря связанных данных (Linked Data, LD). Информация, оформленная таким образом, становится машиночитаемой. Чтобы сделать данные JSON-LD доступными для автоматической обработки на веб-странице, их следует помещать в тег <script>.

Рассмотрим пример сайта ufa-da.ru

Покажем той же микроразметкой shema.org, только в формате JSON-LD

Пропишем в <head> 

<script type="application/ld+json">
{
"@context": "https://schema.org/",
"@type": "Organization",
"name": "UFA Digital Agency",
"telephone": "+7 (347) 294-79-00",
"email": "office@site-rb.ru",
"address": {
"@type": "PostalAddress",
"addressLocality": "Уфа",
"streetAddress": "Ад. Макарова 5/1 офис "
}
}
</script>

Тем самым мы показали адрес, телефон, e-mail поисковикам, причем не отображая этих данных на сайте для пользователей. К сожалению яндекс написал:

Примечание. Данные, размеченные с помощью JSON-LD, используются Яндекс.Почтой, но пока не отображаются в результатах поиска Яндекса.

но Google его воспринимает адекватно.

Микроформат hCard

Микроформат не относится к микроразметке, но суть таже.

Микроформаты — это форматы семантической разметки (X)HTML-страниц, позволяющие сделать контент доступным для обработки роботами. Микроформаты дают возможность явно указать смысловое значение отдельных блоков текста, дополнив существующую HTML-разметку специальными блоками.

Рассмотрим сайт ufa-da.ru, где мы использовали микроформат.

<div class="vcard">
<div class="adr">
<span class="locality">г. Уфа</span>
<span class="street-address">Адмирала Макарова 5/1</span>
</div>
<div class="tel">+7 (347) 294-79-00</div>
<a class="fn org url" href="https://ufa-da.ru/">UFA Digital Agency</a>
</div>

Она отличается от shema.org тем, что тут определенные классы. Тут лучше верстать изначально с определенными классами, чтобы не переделывать существующую верстку под него потом.

 

 

Блог студии

Блог студии


Введите текст на картинке
captcha

Читайте также

Читайте также
Готов ли Ваш сайт к лидогенерации?
Готов ли Ваш сайт к лидогенерации ?