1. Меню хлебной крошки с семантической маркировкой
2. Панировочные сухари с микроданными от schema.org
3. О нас Я анализирую ваш веб

[Рейтинги]

То, как Google и другие поисковые системы представляют результаты, содержит все больше и больше интересных деталей для всех нас, посвященных разработке веб-сайтов, их позиционированию и аналитике. Чтобы начать эту статью, мы подробно изучим первые три результата, полученные по следующему запросу на google.es: alfonso ii asturias .

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

Если мы посмотрим на URL-адреса, в целевых ссылках мы можем проверить, что в первом результате мы получаем два разных, но связанных URL-адреса :

В двух других результатах заголовок и URL-адрес в зеленой точке указывают на один и тот же сайт . Это правда, что второй результат Википедии содержит другие ссылки, но они являются якорями в одном и том же тексте и поэтому указывают на разделы одной и той же веб-страницы. Как это достигается? Давайте рассмотрим следующие два способа семантической маркировки хлебных крошек.

Меню хлебной крошки с семантической маркировкой

Использование меню в формате хлебной крошки с семантической разметкой . Меню «хлебные крошки» - это то, что говорит нам путь, который мы прошли в структуре веб-сайта, и позволяет нам легко вернуться к любой точке пути. В сети первого результата нашего примера меню крошки хлеба выглядит так:

Обычный способ разработать эти меню в HTML 5 - это код:

<Nav>

<Ul>

<li> <a href="http://www.condadodecastilla.es"> Главная страница </a> & gt; </ li>

<li> <a href="http://www.condadodecastilla.es/personajes"> Символы </a> & gt; </ li>

<li> Альфонсо II, целомудрие </ li>

</ ul>

</ nav>

Новый элемент <nav> указывает, что это раздел навигации, и мы представляем элементы в виде неупорядоченного списка с тегами <ul> и <li>. Это также может быть сделано с <div> или <p> вложенным. Далее мы добавим необходимые ссылки на каждый пункт меню.

Но только имея меню такого типа, поисковые системы не могут индексировать семантическую информацию, которую они могут содержать. Для этого необходимо пометить хлебные крошки смысловой информацией. В настоящее время это можно сделать с помощью двух технологий: с помощью микроданных schema.org и с RDFa .

Панировочные сухари с микроданными от schema.org

Микроданные - это информация, которая добавляется в HTML-код веб-страницы, чтобы у поисковых систем была дополнительная информация о ее содержимом . Как правило, эта дополнительная информация имеет семантическую природу, то есть о значении и объеме знаний контента, представленного на веб-сайте. Для правильной интерпретации этой информации необходимо иметь словарь, принятый подавляющим большинством поисковых систем и браузеров. Одним из самых распространенных словарей является тот, который предлагает schema.org , Он возникает в 2011 году по инициативе Google, Bing и Yahoo! и позже ассоциируются другие поисковые системы, такие как Яндекс. Его цель - стандартизировать использование микроданных, создать общий словарь и использовать некоторые форматы, ранее использовавшиеся в качестве FOAF или те, которые предложены Microformats ,

Микроданные всегда имеют пару значений: область приложения, определенную itemscopeitemtype = "value", и одно или несколько свойств, имеющих значение в этом типе содержимого, определенного с помощью itemprop. Именно schema.org предлагает нам подходящий тип контента под названием хлебный мякиш (крошка хлеба на английском языке) со следующими свойствами:

• название , название элемента хлебной крошки
• URL , ссылка элемента хлебной крошки
• ребенок , следующий элемент крошки хлеба в иерархии. Он также должен быть типа Breadcrumb.

Поэтому предыдущий исходный код можно изменить следующим образом:

<Nav>

<Ul>

<li itemscope itemtype = " https://schema.org/Breadcrumb «>

<a href="http://www.condadodecastilla.es" itemprop="url"> <span itemprop = "title"> Start </ span> </a> & gt;

</ li>

<li itemscope itemtype = " https://schema.org/Breadcrumb «>

<a href="http://www.condadodecastilla.es/personajes" itemprop="url"> <span itemprop = "title"> Символы </ span> </a> & gt;

</ li>

<li> Альфонсо II, целомудрие </ li>

</ ul>

</ nav>

Таким образом, каждому связанному элементу хлебной крошки мы назначаем значение меню хлебной крошки и даем ему два свойства: ссылку, определенную с помощью itemprop = "url", и заголовок, определенный с помощью itemprop = "title". В этом случае нет необходимости определять, кто является сыном, от кого предполагается, что первый элемент является отцом следующего. Но если есть случаи сложных навигационных элементов, в которых может быть несколько навигационных маршрутов, необходимо указать, кто является чьим дочерним элементом, с помощью свойства itemprop = "child".

В следующей статье мы обсудим Семантическая маркировка с помощью RDFa ,

Больше информации:

О нас Я анализирую ваш веб

Услуги технического аудита, аналитики, консалтинга и веб-разработки.

Похожие

Комментарии