Семантическая разметка сайта: Семантическая разметка сайта — инструкция, обзор, пояснения

alexxlab

Содержание

Семантическая разметка сайта в SEO || Блог Megaindex.com

Весь список задач по поисковой оптимизации сайта состоит из части по внутренней оптимизации и части по внешней оптимизации.

В список задач по внутренней оптимизации сайта, среди прочих, входит задача по созданию семантической разметки для контента на страницах сайта.

Как правильно выполнить задачу? Что работает, и что не работает? Рассмотрим как извлечь явную практическую пользу из семантической разметки.

Что такое семантическая разметка


Семантическая разметка является способом дополнительной маркировки данных на странице сайта.

Маркировка данных проводится посредством использования специальных тегов.

Практически весь контент на странице любого сайта может быть размечен.

Понятие семантической разметки связано с HTML и выведено в отдельное направление. Не логотип сержанта. Официальный логотип семантики представлен далее.

Пример семантической разметки


Как выглядит семантическая разметка сайта? К примеру, ранее для обозначения навигационного меню сайта использовалось подобная конструкция:
<div></div>

Сейчас есть специальная семантическая разметка, которая помогает поисковой системе в определении смыслового предназначения элементов сайта.

Сейчас для обозначения навигационного меню сайта следует использовать следующую конструкцию:

<nav></nav>

Пример разметки раскрывающегося меню для сайта indexoid.
<nav>
  <button aria-expanded="false">Menu</button>
  <ul hidden>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/shop">Shop</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

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


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

Семантическая разметка влияет на:

  • Поведенческие факторы;
  • Качество продвигаемого сайта.

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

Как пример по адаптации сайта по разные типы устройств, можно рассматривать сайт проекта Webkit.

Ссылка на сайт — webkit.org.

Использование подобного сайта является удобным на iPhone и Apple Watch.

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

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

Применение семантической разметки на практике


Есть важные и не важные элементы семантической разметки.

Что работает? При анализе сайта поисковой системой происходит оценка пользовательских факторов. Важно то, что влияет на пользовательские факторы.

На пользовательские факторы влияет опыт использования сайта. Опыт использования сайта можно улучшить посредством семантической разметки страниц сайта.

Опыт использования можно оценить по ряду простых показателей:

  • Нагрузка на устройство, используемое для открытия сайта;
  • Объем используемого трафика при открытии сайта;
  • Удобство интерфейса сайта;
  • Расход батарейки устройства.

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

Что влияет на опыт использования сайта


Весь комплекс мер по семантической разметки сайта, выполнив который можно улучшить опыт использования сайта, можно разделить на блоки:
  • Контент;
  • Интерфейс.

Контент или семантическая разметка текста


Все пользователи приходят на целевой документ с целью потребления контента. Если поисковый оптимизатор правильно разметит контент, пользователям будет удобнее пользоваться сайтом.

В семантической разметке есть устоявшиеся практики. К примеру, разметка списков с использованием тегов ul, ol, и li является простым понятным способом по разметке списков в документе.

Есть практики, используемые реже. Рассмотрим примеры.

Главная часть контента должна находится в контейнере article.

Какой тег следует использовать на сайте для прочих блоков: article или section? Для разметки прочих блоков в документе правильно использовать контейнер section

.

Цитаты должны быть оформлены в теге blockquote.

Но есть вещи, которые соблюдаются еще реже. К примеру, крайне часто на сайтах не используется правильная разметка изображений. Не используются атрибуты aria-label, figure и figcaption.

Как правильно делать разметку изображений


Проблема с семантикой в контенте заключается в отсутствии информации по контенту. Например, проблема с изображениями в контенте страницы заключается в отсутствии информации в атрибутах alt, aria-label или тегах figure и figcaption.

Далее пример не правильной разметки для изображений.

<img alt>

Почему информация в атрибуте alt важна? Обработчик информации должен понимать назначение изображения. По причине отсутствия информации картинка может быть воспринята как рекламный баннер.

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

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

Картинки в формате SVG являются векторными и используются при создании адаптивных сайтов. Если на сайте используется формат картинок SVG, требуется указать описание через специальный контейнер.

Пример для сайта wixfy.

<svg role="image" aria-label="wixfy logo">

В качестве alt выступает aria-label.

Подпись к картинке следует заворачивать в теги figure и figcaption. Просто заголовок в теге p после картинки не указывает на описание картинки. Если нужно установить семантическую связь между картинкой и расширенным описанием в виде параграфа, то следует использовать указанные теги figure и figcaption.

Рекомендованный материал в блоге MegaIndex по теме оптимизации и продвижению изображений в поисковых системах по ссылке далее — SEO оптимизация изображений — Как получать трафик за счет SEO оптимизации изображений.

Язык


Алгоритм поисковой системы должен четко определить язык страницы сайта.

Примеры по разметке языка на странице сайта далее.

<html lang="en" />
<html lang="uk" />

Ссылки


По пустым ссылкам передается статический вес, отбирая вес у продвигаемой страницы.
<a href></a>

Подобного кода ссылок требуется избегать и по причине отсутствия описания ссылки. Если подобную ссылку все же надо поставить, то следует использовать описание с использованием aria-label.

Пример пустой ссылки с описанием:

<a href="" aria-label="Twitter"></a>

Заголовки


Заголовки на страницах любого сайта обозначаются тегами h2 — h6. Проблемы с заголовками связаны с отсутствием информации и отсутствием
семантической структуры страницы.

На странице сайта есть проблема в случае, если на странице 0 штук заголовков. Как минимум, следует использовать один заголовок h2.

Заголовок должен быть:

  • Навигационным, то есть обозначать конкретный блок контента;
  • Полезным, то есть обладать смысловой нагрузкой.

На сайте нельзя использовать большое количество заголовков, например 200.

Новые устройства с ридерами, вместо браузеров


Использование адаптивного дизайна позволяет создать один сайт для всех устройств.

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

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

Семантическая разметка поддерживается лидерами отрасли производства устройств.

Сейчас сайты можно открывать даже на таких типах устройств как Apple Watch. Для подобных устройств требуется специфическая разметка.

Пример из официального доклада от Apple на Worldwide Developers Conference.

Разметка позволяет пройти авторизацию на сайте.

<input type="email" aria-label="Email Address">

Подобная разметка позволяет устройству определить тип вводимых данных. Как итог, операционная система устройства предлагает на выбор данные из облака iCloud.

Аналогичная разметка требуется для разметки номера мобильного телефона.

<input type="tel">

Аналогичная разметка требуется для разметки поля ввода даты.
<input type="date">

Аналогичная разметка требуется для тега select.

Вся подобная разметка относится к улучшению пользовательского опыта.

Какая семантическая разметка не улучшает сайт


Вопросов по семантике множество. Но что совсем не важно?

Есть множество похожих тегов. Например, есть теги для выделения текста жирным начертанием b и strong. Что использовать: b или strong? На сегодняшний день для скринридеров, поисковых систем и браузеров нет разницы. Не забивайте голову лишним. Выбор среди подобных тегов абсолютно не важен.

На практике для выделения текста на странице сайта жирным начертанием чаще используется тег strong, а em используется для выделения курсивом.

Суммарное количество блоков на странице не имеет значения, если объем страницы не превышает отметку в 1000 блоков на документ. Наличие сотни блоков div не оказывает негативного влияния ни на что, если DOM не тормозит.

Schema


Браузеры и поисковые роботы поддерживают стандарт микроформатов Schema.

Пример разметки далее.

Список всех поддерживаемых форматов есть на официальном сайте протокола.

Ссылка на сайт — schema.org.

Open Graph


Браузеры и поисковые роботы поддерживают протокол разметки Open Graph.

Пример разметки далее.

Список всех поддерживаемых форматов есть на официальном сайте протокола.

Ссылка на сайт — Open Graph.

Интерфейс


Для элементов интерфейса требуется использовать специальную разметку.

Есть специальные так называемые теги ориентиры. Ориентирами называются важные структурные части.

Перечень тегов ориентиров:

  • header;
  • main;
  • aside;
  • footer.

Основная задача ориентиров в том, чтобы показать что на сайте есть общие части.

Элементы форм:


Аудит сайта


Разные проблемы на сайте можно обнаружить посредством использования систем аудита.

Задача поискового оптимизатора заключается в анализе полученных данных, формированию списка задач к выполнению и расстановке приоритетов в списке задач по выполнению исправлений по найденным ошибкам.

Для аудита можно использовать разные инструменты, к примеру аудит от MegaIndex.

Ссылка на сервис — MegaIndex Аудит.

Сервис бесплатный.

Семантическая верстка сайта, помогите роботу понять ваш сайт

Чем глубже вы изучаете html и web разработку, тем чаще слышите одно загадочное слово “семантика”. В этой статье мы разгадаем загадку, и расскажем что такое семантическая верстка. Разберем основные теги которые используются для описания семантической структуры.

Что такое семантическая верстка?

Семантическая верстка — это изучение значений слов и выражений. В html ничто иное как написание элементов со смыслом. Семантический элемент четко описывает свое значение как для браузеров, так и для разработчиков.

Давайте взглянем на отличие семантического элемента от обычного.

Например div или span — простые элементы, глядя на них мы не можем понять какого типа контент в них содержится. Это может быть просто текст, картинка, или другие теги.

Теперь семантические form, table, и article здесь уже совсем другое дело. Только прочитав названия мы можем с легкостью понять что внутри этих тегов. Пример верстки обычной и семантической:

<!-- обычная блочная верстка -->
<div>
	<img src="/pictures.jpg" alt="">
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, pariatur! Quasi sed eaque praesentium ea odio voluptatibus repudiandae commodi, ut cupiditate perferendis voluptate provident, nobis ullam doloribus accusantium omnis perspiciatis.</p>
	<a href="">Читать Далее</a>
</div>

<!-- семантическая верстка -->
<article>
	<img src="/pictures.jpg" alt="">
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores atque facere repellat. Maxime quod dolor exercitationem commodi, perspiciatis laborum, sunt, magni illo ipsam molestiae a ullam amet adipisci et omnis!</p>
	<a href="">Читать Далее</a>
</article>

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

Почему семантическая верстка сайта так важна?

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

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

Как реализовать семантическую верстку страницы?

Существует одно единственное правило, при написании мы должны использовать теги которые в конкретном случае могут наиболее точно передать значение и тип контента, поисковым роботам и программам. Если нет подходящих тегов, то используем обычные т.к. div

Мы можем сгруппировать наиболее распространенные и важные элементы на четыри группы:

  • Теги структуры документа
  • Текстовые теги
  • Медиа теги
  • Корреляционные теги

Теги структуры документа

В прошлом элемент div был основным с помощью которого создавалась структура html документа, W3C обратили внимание на то, что разработчики использовали в названиях id и class слова header, footer, menu и т.д. Которые описывали смысловое содержимое элемента. Так и появились новые семантические теги в HTML5.

header: Элемент который используется как контейнер для логотипа, названия сайта и меню. Также для определения заголовков, в статьях и т.д.

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

main: Элемент высокого уровня, используется как контейнер для уникального содержимого на странице, которое не повторяется на других страницах сайта.

nav: элемент для создания навигации по сайту. nav обычно находится в header (хедере) и footer (футере), а также может быть использован в aside (сайдбаре) сайта.

section: Описывает разделы документа, должен содержать в себе заголовок h2 — h6

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

article: Это самодостаточный элемент который используется для описания статьи сайта, блога так же публикации на форуме. Может содержать элемент header и footer.

Текстовые теги

Существует множество тегов для работы с текстом на странице, но не все они семантические. К примеру можно использовать span для стилизации текста, но информацию о содержимом браузеру он не передает.

h2, h3, h4, h5, h5 и h6: используются для обозначения заголовков. Самый высокий уровень, или самым главным, заголовком является h2, за ним идут в порядке убывания важности заголовки уровня h3 — h6.

strong: тег придает тексту важности, как правило, отображается полужирным шрифтом.

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

cite: тегом обычно помечают названия книг, песен, фильмов, тв-передач.

blockquote и q: элементы используются для вставки цитаты из текста другого источника.

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

Медиа теги

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

audio: Используется для добавления одного или нескольких аудио на страницу, отображается в виде аудио плеера.

video: подобен аудио тегу, но используется для добавления видео контента в документ.

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

Корреляционные теги

Некоторые теги используются для создания связи между другими элементами. К примеру тег маркированного списка ul говорит браузеру что элементы li связаны и должны появляться в определенном порядке. Есть еще теги:

ol: тег нумерованного списка, аналогичен с тегом ul

figure: используется для группировки такого контента как картинки, графики, может содержать заголовок figcaption.

address: описывает контактную информацию на странице. И связывает ее с автором статьи или страницы.

Если вы новенький в html то попробуйте применить все эти теги для создания семантической верстки страницы уже в следующем проекте. Не используйте элементы если не уверены нужен ли он там или нет, использование правильного тега очень важный момент. Лучше потратьте немного времени для глубокого его изучения. Это даст свои плоды в будущем.

HTML5 Семантическая вёрстка

Всю жизнь человек старается делать все согласно здравой логики. Если он видит красную стену, он так и скажет: “я вижу красную стену”. Никто не будет говорить вместо этого о “розовом потолке”, если его там тоже не будет. Видишь что-то и называешь это своим именем, — это семантика. Существует даже целая наука в лингвистике, которая это изучает.

Но не только подобное есть в языковедении. В веб-разработке тоже присутствует понятие “семантической верстки”. И вот с теперь, мы поговорим об этом более подробно.

Для начала правильно будет ответить на вопрос:

«Зачем нужна семантическая разметка страниц?»

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

HTML5 и семантика. Что нового?

Даже сегодня еще можно встретить множество страниц с таким HTML-кодом:

“<div id = «nav»> <div class = «header»> <div id = «footer»>”. Он используется для обозначения навигации хедера и футера.

<html>

<html>

  <head>

      <title>…</title>

  </head>

 <body>

   <div>… </div>

   <div> …</div>

   <div> … </div>

 </body>

</html>

HTML5 для тех же целей предлагает нам новые семантические элементы: <article>, <aside>, <details>, <figcaption>, <figure>, <footer>, <header>, <main>, <mark>, <nav>, <section>, <summary>, <time>.

И даже сегодня при, уже казалось бы, “развязанных руках”  у разработчиков, SEO специалисты не могут получить 100% семантически валидной верстки. В основном правильно используют <footer>, <header>, <nav>, реже или неправильно используют  <aside> <main>  <section>. Остальные элементы если не совсем редко, то вообще не используют.

Пример правильной семантической разметки HTML5:

<html>

    <head>

      <title>…</title>

 </head>

 <body>

      <header>…</header>

      <nav>…</nav>

      <main>…</main>

      <footer> … </footer>

 </body>

</html>


Тег

<nav>

      <nav>
 <a href=»#»>…</a>
 <a href=»#»>…</a>
 <a href=»#»>…</a>

      </nav>

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

ВАЖНО! Не все наборы ссылок нужно оборачивать тегом <nav>. Если такие элементы как, к примеру <footer> и <header> справляются с положенными на них задачами в единичном экземпляре, то <nav> можно использовать больше одного раза на страницу. Можно размещать в <header>, но зачастую выносят после него.

<body>

        <article>
   <header>…</header>
   <nav>…</nav>

         <aside>…</aside>
   <main>…</main>
   <footer> … </footer>

        </article>
</body>


Основной контент

     <main>
   <h2>…</h2> 
   <p>…</p> 
   <section> 
     <h3>…</h3> 
     <p>…</p>    

         </section>

         <section>

         <h3>…</h3>

         <p>…</p>

        </section>

        <section>

        <h3>…</h3>

        <p>…</p>

   </section>

</main>

Элемент <article> представляет из себя независимую или самостоятельную контентную композицию многоразового использования. Он может быть, к примеру, постом на форуме, записью в блоге, газетной статьей, отзывом пользователя или отдельным виджетом. Разрешается делать вложения один <article> в другой. Однако, в таком случае нужно, чтобы дочерние  элементы несли в себе контент, который семантически связан с родителем. Например, цепочка комментариев.

Когда основное наполнение страницы является самостоятельным элементом (например виджет), то его можно “обернуть” в  <article>. Но в большинстве случаев это будет технически лишним.

Элемент <section> является ничем иным  как блоком страницы или тематической группой контента обычно с заголовком <h> группы.

Когда вам нужен элемент только для стилизации или сценария скрипта, то рекомендуется использовать <div>  вместо <section>.

Элемент <aide> является дополнительным не самостоятельным  разделом страницы который по смыслу привязан к основному контенту. К примеру можно использовать как выносную цитату, боковые панели для рекламы, фильтров и сортировок товаров или организации навигации.  Нецелесообразно использовать элемент как основной контент. Элемент <main> можно использовать как основной контейнер для контента страницы. Хотя ограничений, что касаются количества даных элементов на странице нет, разработчики рекомендуют использовать его в одиночном количестве.

<details> — выпадающее меню или  дополнительные детали которые юзер может скрыть или показать.

<summary> используется как видимый заголовок элемента <details> по клику на который можно показать/спрятать его.

<details>
       <summary>Copyright 1999-2014.</summary>
         <p>All content and graphics on this web site are the property of the company Refsnes Data.</p>
</details>


 

<figure> и <figcaption>

<figure>
       <img src=»pic.jpg» alt=»<span>The Picture»>
       <figcaption>The Picture 2009</figcaption>
</figure>

Таким образом, элементы могут использоваться для подписи картинок, диаграмм,  таблиц итд.

<mark> используется для выделения важного текста.

Тег <time> выделяет дату / время читаемую человеком. Также может использоваться с атрибутом datetime для уточнения времени машинно-читабельным способом. Например, клиент-программа сможет добавить напоминание или записать дату рождения в календарь пользователя автоматически. А поисковые системы смогут выдавать более глубокие результаты поиска.

<p>We open at <time>10:00</time> every morning.</p>
<p>I have a date on <time datetime=»2008-02-14 20:00″>Valentines day</time>.</p>

Подводя итог под написанным выше, можно констатировать, что все элементы важны по-своему. Их нужно знать и использовать в соответствии с предназначением. Огромное количество умов по всему миру специально придумывают новые теги и варианты их использования, чтоб и разработчики и пользователи получили более качественный продукт. Однако, в погоне за новыми технологиями, не стоит забывать о своеобразности браузеров! Некоторые из них “не знают” новых (а иногда — и старых) тегов и выводят информацию не корректно.

Семантическая разметка и структура документа

Семантическая разметка – создание осмысленной и логически связанной информационной структуры содержимого (контента) html-документа в соответствии с семантикой (предназначением) html-элементов, их тегов и атрибутов.

Информационно-осознанная структурная семантическая разметка html-документа легко и просто сменила классическую косметическую информационно-безликую блочную div-верстку, придав осмысленность структуре подаваемой информации. Простота семантической разметки html-документа объясняется фактом появления в спецификации HTML5 ряда целевых и наполненных смыслом тегов для оборачивания важных элементов по информационному содержимому (контенту), а не по визуальному представлению страницы в браузере.

  1. Назначение семантической разметки
  2. Пользователи семантики – пауки и ридеры
  3. Структура HTML-документа
  4. Семантическая структура HTML-документа
  5. Вёрстка семантического шаблона (макета)
  6. Реклама в семантике страницы
Назначение семантической разметки

Семантическая разметка несет поисковым роботам, браузерам и программам-ридерам (чтецам) информацию о типе, важности и акцентировании контентного содержания html-документа для облегчения его машинной обработки.

Семантическая разметка не имеет отношения к внешнему виду (представлению) страницы на экране, для визуализации html-элементов подключаются стилевые правила.

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

Поисковые пауки особенно «полюбляют» семантическую структуру веб-документа, помогающую определиться с индексацией контента (содержащегося материала). Не отстают от поисковиков в любви к html-семантике браузеры и ридеры (обозреватели и чтецы), часто скрывающие в режиме чтения колонтитулы страницы (header и footer), навигационные (nav) и связанные (aside) элементы.

Структура HTML-документа

Традиционно, код веб-страницы в HTML5 начинается элементом <!DOCTYPE html>, определяющим тип документа. Единственный и неповторимый тег html с атрибутом указания языка содержащегося контента lang=»ru» обрамляет два основных элемента html-документа: <head> – блок неотображаемой на экране служебной информации и <body> – видимая в браузере часть веб-страницы. Между тегами <body></body> находится тема семантической разметки.

1.<!DOCTYPE html>
2. <html lang="ru">
3.  <head>
4.   Служебная информация
5.  </head>
6.  <body>
7.   Семантическая разметка контента
8.  </body>
9. </html>
Семантическая структура документа

Опытные верстальщики настоятельно рекомендуют избегать лишних нагромождений кода и для начала ограничиться минимальным набором обязательных структурных семантических html-элементов в шаблоне (макете) веб-страницы: <header>, <nav>, <main> и <footer>.

<header>
Вводная информация документа. Сквозной элемент, отображающийся на всех сайто-страницах возглавляемого домена. Хедер (header) – визитная карточка документа, его «шапка», верхний колонтитул. Служит идентификатором контента в области принадлежности сайту, разделу, категории, домену. Обязательно содержит логотип сайта и заголовок страницы h2. Допускается размещение в хедере элементов сайтовой навигации.
<main>
Контейнер в <body> основного уникального содержимого, не допускающего дублирование на сайте. Текст, рисунки, видео, аудио и т.п., в <main> – исключительно в единственном и неповторимом экземпляре в пределах сайта (блога, домена).
Скромно умалчиваемый в практических руководствах, чисто! семантический элемент <main> – главное действующее лицо семантической разметки. <main> не содержит сквозные типовые повторяющиеся блоки страниц: шапку сайта (хедер), подвал (футер), сайтовую навигацию (нав), боковые панели (<div>), формы для поиска, регистрации, входа и т.д. Содержимое <main> индексируется поисковыми системами в первую очередь. В документе (на странице) – исключительно один элемент <main>. <main> не вкладывается в другие семантические элементы: <article>, <aside>, <footer>, <header>, <nav> …
Боковая панель (sidebar) в <main>
Возлелеянная яростной div-ной версткой, сквозная боковая панель навигации не входит в элемент <main> ни в каком виде. Горячо любимый рунетом сквозной боковой, повторяющийся на всех страницах, блок не получил собственного семантического тега HTML5, не предусмотрен семантической разметкой и служит исключительно удобству (юзабилити) юзера, отвлекая его от настоящих семантических элементов навигации. С большой нужды, боковая панель веб-страницы верстается div-ом, расположенным за пределами структуры вложений элемента <main> и визуально выравнивается стилями.
Контентные html-элементы внутри <main> обрамляются тегами соответствующего назначения:
картинки – <img>, <picture>, <figure> …;
заголовки, тексты, списки и цитаты – <h3 … h6>, <р>, <ul>, <ol>, <strong> и <em> вместо <b> и <i>, <blockquote> …;
видео – <video> …;
аудио – <audio> и т.д.
Безликий элемент <div> в <main> – крупная дичь исключительно визуального назначения!
<footer>
Нижний колонтитул веб-документа, «подвал» статьи (сайта, раздела), содержит дополнительную информацию технического или правового характера: автор, контакт, копирайт, ссылки доп.меню, кнопка «Вверх» и т.д
<nav>
Блок основных приоритетных ссылок навигации, обычно расположен в колонтитуле страницы (хедере или футере) или между ними.
Семантическая структура html-документа
1. <header>
2.  <h2>Заголовок сайта</h2>
3.  <nav>
4.   Ссылки (сайто- навигация)
5.  </nav>
6. </header>
7. <main>
8.  Контент (неповторимый)
9. </main>
10. <footer>
11.  Копирайт, контакт, «про автора»
12. </footer>
Вёрстка семантического шаблона (макета)

Семантический шаблон (макет) веб-страницы – минимализм, лаконичность и логика, позволяющая избежать дублирования материала. Первым делом отказался от многочисленных раскрашенных менюшек и тупого поиска. CSS-трюки (закруглюшки, тенюшки, плюшки и финтиклюшки) – в прошлом, блок основной сайтовой навигации (<nav>) – одинокий воин в хедере семантической страницы.

Абзацы-черновики:

 
Семантические теги
<article> <aside> <audio> <canvas> <command> <datalist> <details> <figcaption> <figure> <footer><header> <hgroup> <keygen> <main> <mark> <menu> <meter> <nav> <output> <progress> <rp><rt> <ruby> <section> <source> <summary> <time> <video> <wbr>

Реклама в семантике страницы

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

Сердца почтенных юзеров наполнились теплотой термина «семантическая разметка», подаваемого под соусом некоего магического продукта, способного вознести поисковую индексацию сайта (блога) до невиданных высот. Трепетное отношение к новорождённым html-тегам сменилось легким недоумением, переросшим в банальный профессионализм контентных интернет-авторов и верстальщиков шаблонов веб-страниц.

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

Поисковые пауки усовершенствовались гораздо быстрее. Без дополнительных указаний со стороны, поисковики отлично и самостоятельно разбираются с назначением и важностью индексируемой информации, прекрасно понимая идентичность элементов <header>, <div> и <header>.

Элемент <р> (абзац) – чисто «литературный герой». Не правильное трактование перевода с инглиш – параграф. Не используемый верстальщиками в сайтовых шаблонах тег, предназначенный исключительно для отображения структуры контентного текстового содержания.

Игнорирование использования семантических HTML-тегов непременно приводит к падению общего рейтинга веб-страницы в глазах поисковиков, уделяющих пристальное внимание качеству индексируемого материала. Использование семантических HTML-тегов в соответствии с их семантикой (назначением) – обязательное условие повышения конкурентоспособности веб-документа.

Источник: HTML5 Semantic Tags: What Are They and How To Use Them!
Перевод источника: Секреты использования семантической вёрстки в HTML5

понятие и примеры семантического кода

Если вы тот, кто использует div теги для всего что есть на сайте, эта статья для вас. Мы сфокусируемся на том, как писать чистый семантический HTML код, используя валидную разметку. Вы увидите на практике, как можно минимизировать количество div тегов в вашем HTML коде. Вы научитесь семантической верстке не только в теории, но и на примерах. Написание правильных семантических шаблонов упрощает жизнь не только себе, но и команде в целом. Ну и проще для браузеров, которые интерпретируют код. Чем меньше кода, тем быстрее грузиться страница. Это также позволяет сохранить время и простоту понимания кода, при создании больших проектов. Другими словами, семантическая верстка – это необходимое условие создания качественного сайта.

Понятие семантической верстки

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

Как достигнуть семантики кода?

Это просто, главное делать все проще и стараться как можно больше все выносить в CSS стили, а JS код в отдельный файл. По классике, на одной HTML странице должен подключаться только один CSS файл и один JS файл. По поводу HTML, на каждом сайте своя ситуация. Ведь каждый  из них уникален. Сейчас рассмотрим основные моменты, на которых претыкаются верстальщики:

  • Заголовки должны выделяться тегами h2, h3, h4, h5, но никак не B и STRONG.
  • При создании меню лучше всего использовать UL список, внутри которого будут лежать LI элементы меню. Этим мы показываем, что ссылки равносильные. Если имеются пункты второй вложенности, соответственно создаем внутри первичного LI элемента еще один UL список.
  • Все служебные картинки (иконки, стрелки, пульки…) должны быть прописаны в CSS коде. В HTML, тег IMG должен использоваться только для больших картинок. Большие, понятие растяжимое, скажем так, начиная с превьюшек 100 x 100 и выше.
  • Параграф блока текста создается с помощью P тега, но никак не DIV.
  • Не использовать атрибуты STYLE внутри HTML тега. Все стили выносить в отдельный CSS файл.
  • То же самое по поводу JavaScript.
  • Соблюдать иерархию и логику документа. Более важные элементы страницы должны стоять в начале HTML кода, менее в конце. С помощью CSS стилей и DIV блоков, этого достичь не сложно, при любой схеме шаблона.
  • Может быть, еще что-то забыл… если да, поправьте меня в комментариях к статье.

Для большей ясности сути вопроса, смотрите схему семантической разметки текста:

Семантическая верстка на практике – примеры HTML + CSS кода

Теперь закрепим все эти принципы семантической верстки на практике. Будем разбирать конкретные ситуации.

Удаляем ненужные div теги

Я видел, что многие люди создают div тег около form или ul. Зачем создавать дополнительный div, который вам не нужен? Вы можете достичь такого же результата, дописав несколько указаний в CSS файле.

Пример 1:

Пример ниже показывает, как вы можете убрать div тег и дописать тот же стиль к form селектору.

Пример 2:

Иногда мы обвертываем контент в div блок, чтобы создать отступы, как показано на примере слева. Но если каждый из блоков имеет заголовок h5, мы можем просто применить margin отступ к h5 селектору и убрать лишний div тег.

Используем семантическую разметку кода

Как упоминалось ранее, вы всегда должны использовать семантическую разметку для HTML кода. Но этого нельзя достичь без CSS файла стилей.

Пример:

Картинка ниже показывает разницу между div разметкой и семантической разметкой без css стилей.

Минимизируем использование div тегов

Может быть, вы видели шаблоны, где div теги везде… они меня бесят. Имели ли вы лишний закрывающий тег /div, или не закрытый div? Я уверен, каждый верстальщик сталкивался с подобной проблемой, когда рядом стоит 3-4 div тега. Чтобы не путаться, нужно минимизировать использование div, так будет проще отслеживать ошибки.

Пример 1:

Вместо использования div для создания навигационного пути, можно использовать p тег.

Пример 2:

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

Заключение

Пожалуй, это все. Если вы знаете еще техники, обязательно расскажите мне в комментариях. Если имеете вопросы по поводу семантической верстки, также задайте в комментариях ниже.

Дальше: Контент для людей, работает ли он для SEO?


Дискуссия по теме    26 Комментариев

Добавить комментарий

Mikhail 29.07.2019 ? 00:01

По поводу меню не согласен, может со временем всё помегялось, но для одноуровневого не нужно городить ul. А ещё надо заменить p.date на time.

Shaman 01.04.2018 ? 13:42

Посыл правильный, но не хватает просто опыта у автора. Дивы это не зло, где просто понимать куда и сколько реально надо, а вот хлебные крошки оборачивать в p это просто жесть нереальная. p вообще то для абзацев теста нужен, это тоже самое что использовать ul li что бы сделать блоки горизонтальные типа каких нибудь преимуществ на лэндах

Альбатрос 28.02.2015 в 23:47

Не так давно только читал как ребята с пенкой у рта доказывали что разметка должна быть «ДИВной», теперь уже у них семантическая… и не дай бог див увидят, сразу антиСемитом назовут..

Любитель div 10.10.2014 в 02:49

<div> <div> Не самый лучший пример заменять блочный элемент <div> не блочным <p>. А ещё в хороших программах есть такая замечательная подстветка тегов. Запутаться…. ну нереально. </div> </div> <!— end wrap—>

Александр 16.04.2015 в 13:55

Кто Вам сказал, что <p> — это не блочный элемент? Учите мат. часть http://htmlbook.ru/samlayout/blochnaya-verstka/blochnye-elementy

Михаил 29.09.2014 в 13:30

Никогда не закрываю <P> и <LI>. Разница визуально отсутствует. Это тоже семантика?

Тарас 30.09.2014 в 19:07

Вообще то надо закрывать. Когда то это может вылезти боком в каком то из браузеров и их версиях. Ну и семантика само собой.

Надежда 07.06.2013 в 13:26

Возник вопрос. Удаление не нужных тегов div и есть семантика? Почему в крошках лучше использовать p, а не nav к примеру? Может подскажете статью про семантическую верстку с использованием HTML5?

Тарас 19.06.2013 в 22:45

Вот неплохие реккомендации от самого поисковика, собственно для него то все и стараются сверстать корректно: http://help.yandex.ru/webmaster/?id=1122752 И там же есть рубрика вопросов по семантической верстке: http://help.yandex.ru/webmaster/?id=1127476

Надежда 21.06.2013 в 14:28

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

Тарас 21.06.2013 в 14:36

Сколько людей, столько и мнений. Используйте div, главное не злоупотребляйте.

Тарас 21.06.2013 в 14:41

Alex 21.05.2013 в 20:32

Резюме. Читайте больше стандартов и меньше «откровений «специалистов», и у вас будет меньше глупых ошибок и стереотипов. P.S. Автор или модератор, объедините по возможности в один комментарий, или хотя бы поменяйте «Заполните правильно все поля» на нечто более информативное.

Alex 21.05.2013 в 20:30

Css код (приблизительно и схематично) #articles_list,#articles_list>li{list-style:none;clear:both;} #articles_list>li{}/*стиль начального текста статьи*/ #articles_list>li>h4>a{}/*стиль заголовка*/ #articles_list>li>div{float:left;background:…;}/*Дата публикации*/ #articles_list>li>div>span{display:block;}/*месяц (вторая строка в дате)*/ #articles_list>li>a{}/*стиль ссылки «читать далее»*/ Один див все-таки нужен. Согласно w3c — стандартизирующей организации web (в частности — html), <div> — контейнер, а <p> — абзац текста, что уместнее для блока даты публикации с точки зрения семантики — решайте сами.

Alex 21.05.2013 в 20:30

А теперь — маленький пример семантичного на мой взгляд кода. Тот же список заголовков статей, который разбирает автор аж в двух примерах. html код <ul> <li> <h4><a href=»…» title=»»>Заголовок статьи</a></h4> <div>21<span>мая</span></div> начало статьи, без параграфов, только бр’ы <a href=»…» title=»»>читать далее</a> </li> <li> <h4><a href=»…» title=»»>Заголовок статьи</a></h4> <div>21<span>мая</span></div> начало статьи, без параграфов, только бр’ы <a href=»…» title=»»>читать далее</a> </li> </ul>

Alex 21.05.2013 в 20:26

Верстку можно считать семантичной, если она удовлетворяет двум требованиям: 1) теги должны использоваться по назначению; 2) страница без стилей не должна принципиально отличаться о страницы со стилями. Есть еще одно требование, имеющее опосредованное отношение к семантичности — верстка должна быть валидной, то есть соответствовать определенному стандарту языка разметки. Тупым избавлением от div семантичности не достичь. Могу привести массу примеров, где div не только желательно, но и необходимо использовать. За подробностями — в почту. Но речь не о том. Автор видимо несколько нечетко представляет себе зачем и для чего уменьшать глубину дерева тегов на странице. Браузеру не настолько принципиально минимальное количество дивов на странице, насколько важна минимальная вложенность элементов. Быстрее всего работают страницы, на которых теги расположены линейно а не иерархически.

Игорь 02.04.2013 в 17:42

Тарас, покажите пожалуйста пример семантической верстки такого блока: шапка, внутри слева логотип. p.s.: У вас комментарии на сайте ограничены всего одним вопросом, нет возможности продолжить тему после вашего ответа.

Тарас 03.04.2013 в 23:45

Вам действительно нужна помощь? или пытаетесь что-то доказать? Более чем уверен, у Вас хватает знаний как это реализовать. Так или иначе у меня нету времени. Извнините.

Игорь 27.03.2013 в 06:47

Удаляем ненужные div теги — Пример 2: И как же вы сделаете уникальный отступ между блоками? Лишний стиль или класс дописывать? Вообще все эти примеры хороши, тогда когда стили CSS пишутся отдельно чуть ли не для каждого элемента. Это стиль верстки когда что вижу то и верстаю по порядку. При такой верстке дублирование стилей неизбежно, а соответственно и превращение CSS файла в помойку. А если страница верстается последовательно начиная от общей структуры, углубляясь внутрь, выделяя общие стили (что значительно сократит CSS и придаст более читаемый вид), то помещать содержимое внутрь div с заранее определенными и прописанными классами — это более удобно и более быстро.

Тарас 27.03.2013 в 17:00

Если Вам нужна простота а не семантика, делайте все через div

Игорь 27.03.2013 в 06:33

Вместо: <div> <a href=»#» title=»»>Главная</a> / О компании </div> использовать: <p> <a href=»#» title=»»>Главная</a> / О компании </p> Только потому что вас «бесит»?

Тарас 27.03.2013 в 16:52

Можно использовать это не значит нужно использовать. Делайте как Вам угодно… повидимому это Вас бесит, потому что привыкли делать по другому. В статье описан вариант, а не единое правило для всех.

antonov 10.02.2013 в 20:54

пригодится спасибо дружище!!!вопрос.если делать небольшой сайт ну к примеру 4-5 страниц без сms,пару картинок влияет ли на скорость загрузки?вернее на сколько.или не стойт мне беспокойтся.Вот хоть убей я с самого начало привык писать так(где ты показываешь»так не рекомендую делать»)Вот так и делаю,придется переделывать.

Тарас 10.02.2013 в 23:24

Смотря какие по весу картинки. Если страница суммарно будет весить 100-400 кб, это нормально, будет грузить быстро.

Артем 04.01.2013 в 19:12

«Удаляем не нужные div теги» «Не нужные» пишется слитно. А за статью спасибо.

Тарас 04.01.2013 в 22:23

Исправил! Спасибо за Ваш вклад в качество сайта!

Добавить комментарий

Семантическая разметка Shema.org — Веб-студия WebTend г. Екатеринбург

Использование семантической разметки Shema.org — одна из последних тенденций в SEO. Семантическая разметка является одним из самых новых, мощных, и при этом точно наименее используемых методов поисковой оптимизации. После того, как вы поймете концепцию и способы семантической разметки, вы можете значительно улучшить позиции своего сайта в результатах выдачи поисковых систем (SERPs).

Моя цель в этой статье, показать вам, что начать использовать семантическую разметку Shema.org для вашего сайта достаточно просто.

Что из себя представляет семантическая разметка

Семантическая разметка — это код , который вы размещаете на своем сайте , чтобы помочь поисковым системам получить более информативные результаты по вашему сайту для пользователей поисковой выдачи. Если вы когда — либо использовали расширенные сниппеты , вы уже примерно понимаете , как это работает.

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

Семантическая разметка сообщила поисковику, что нужно отобразить график предстоящих событий в городе таким образом. Это для пользователя, является исключительно полезным.

Семантическая разметка сообщает поисковым системам, что обозначают ваши данные, то есть их смысл (семантику). С семантической разметкой контент сайта индексируется и возвращается в результаты поиска другим способом, так как разметка говорит поисковой системе, что этот контент означает.

Например, скажем , в статье появляется слово «Иван Сергеев». Поисковая система видит это, и выводит в выдачу слова Иван Сергеев. Тем не менее, если поставить правильную семантическую разметку схемы вокруг имени «Иван Сергеев», поисковик поймет, например, что Иван Сергеев является автором статьи.

Schema.org объясняет это следующим образом:
Большинство веб-мастеров знакомы с HTML-тегами на своих страницах. Как правило, HTML-теги сообщают браузеру, как отображать информацию, содержащуюся в теге. Например, Аватар сообщает браузеру, чтобы отобразить текстовую строку «Аватар» в формате заголовка 1. Тем не менее, HTML тег не дает никакой информации о том, что означает, что текстовая строка — «Аватар» может относиться к чрезвычайно успешному 3D фильм, или он может относиться к картинке у профиля на форуме, и это делает ваш текст более трудным для понимания поисковыми системами и отображения его для пользователей в поисковой выдаче.

Вот эту проблему и решает семантическая разметка Шема.орг

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

Shema.org – сайт, созданный совместной командой из Google, Bing и Yahoo. Нечасто конкуренты собираются вместе, чтобы помогать друг другу, но Schema.org — именно такого рода межотраслевое сотрудничество. Итог этого сотрудничества — согласованный набор кода, который объясняет основным поисковым системам, что делать с данными на вашем сайте.

Что самое приятное — вам не нужно изучать новые языки программbрования, так как шема.орг использует обычный HTML.
Семантическая разметка была изобретена для пользователей

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

Это улучшение ориентированное на пользователей. Поисковые системы существуют для пользователей и чем более точную информацию они им дают, тем лучше для всех. Схема разметки помогает именно в этом, а значит подключая ее на свой сайт, мы улучшаем свои позиции в поисковой выдаче.

Схема разметки помогает вашему сайту быть выше в поисковой выдаче для всех видов типов контента. Существует разметка семантических данных для:
• Статей
• Местных предприятий
• Ресторанов
• Телесериалов и рейтингов
• Отзывах о книгах
• Фильмах
• Применение программного обеспечения
• Мероприятий
• Продуктов
для сотен других тематик и типов информации — от магазинов игрушек до медицинских графиков.

В одном из исследований установлено, что сайты с семантической разметкой находятся в среднем на четыре позиции выше в поисковой выдаче, чем сайты без нее. Хотя еще не совсем ясно, обусловлен ли этот более высокий результат только разметкой, но очевидна некоторая корреляция. На данный момент, одна треть результатов поиска Google включает сниппеты, которые содержат в себя разметку от шема.орг. Другими словами, есть миллионы сайтов, не использующих этот источник своего SEO-потенциала. При использовании семантической разметки вы автоматически опережаете подавляющее большинство ваших конкурентов.

Как использовать схемы разметки на своем сайте

Теперь, давайте поговорим о том, как использовать семантическую разметку на вашем сайте.
Внимательно смотрите на ваш сайт и выполняйте следующие действия.
1. Заходим Google’s Structured Data Markup Helper.

2. Выбираем тип данных, которые вы планируете разметить на своем сайте (или уже разместили)
Есть несколько вариантов в списке. Перечень не является исчерпывающим. Для образца мы будем использовать тип «Статьи» , так как это один из наиболее распространенных типов контента.

3. Вставляем в URL страницы или статьи, которую вы хотите разметить (также вы можете вставить туда свой HTML-код).

4. Затем нажимаем кнопку «Начать разметку (Start Tagging)»

Страница загрузится в инструмент разметке и вы увидите рабочее пространство для следующего этапа разметки — разметка элементов. Вы увидите вашу веб-страницу в левой панели, а элементы данных в правой панели.

5. Выделяем и выбериаем тип элементов, которые необходимо разметить.
Так как это статья, нужно выделить название статьи, чтобы добавить разметку «Name» разметку. После выделения названия я выбираю «Name» в панели инструментов.

Когда я выбираю «Name», инструмент добавляет его в «Элементы данных» Data Items в правой панели

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

7. Создаем HTML.
После того, как вы закончите, нажмите кнопку «Создать HTML»

На следующей странице вы увидите HTML вашей страницы с соответствующими микроданными, вставленными в местах, которые вы выбрали.

8. Добавляем схемы разметки на вашу страницу.

Зайдите в вашу CMS (или в исходный код, если вы не используете CMS) и добавьте выделенные фрагменты в соответствующие места. Найти желтые маркеры на полосе прокрутки, чтобы найти код сементической разметки.

Есть Простая альтернатива — загрузить автоматически сгенерированный HTML-файл и копировать / вставить его в CMS или исходный код.

При нажатии кнопки «Готово» вы увидите «Следующие шаги»

9. С помощью Structured Data Testing Tool вы увидите как ваша страница будет выглядеть с дополнительной разметки.

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

Советы по использованию схемы разметки

Найдите схемы, которые используются чаще всего.
Schema.org предоставляет список наиболее распространенных типов схемы разметки. Вы можете посетить страницу Организация схем Organization of Schemas, чтобы увидеть этот список. Найдите там типы, которые лучше всего подходят для вашего бизнеса.

Найдите любой тип схем, которые вам нужны.
Как я уже говорил ранее, существует множество типов разметки. Чтобы получить полный список, посетите «The Type Hierarchy». Этот список содержит большинство доступных типов разметки.

Чем больше разметки, тем лучше.
Schema.org в инструкции четко объясняет: «чем больше контента вы размечаете, тем лучше». Однако учтите, что там также говорится: «Вы должны размечать только тот контент, который виден людям, которые посещают страницы, а не содержится в скрытых DIV или других скрытых элементах страницы». За такое вас скорее накажут, чем похвалят.

Семантическая разметка создает интерактивные элементы и расширенные сниппеты в поисковой выдаче для удобства навигации пользователя. На сайте schema.org микроразметка разбита по типам бизнеса.

Основные типы микроразметки

Микроразметка для организаций (Organization Schema Markup)

Улучшает поисковый сниппет и карточку из Сети Знаний при запросе торговой марки или бренда организации.

Микроразметка для персоны (Schema Person Markup)

Так же улучшает сниппет на поиске и отдельные элементы карточки из Сети Знаний при запросе знаменитости.

Микроразметка для сайтов (Website Schema Markup)

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

Микроразметка навигационного меню (Site Navigation Schema Markup)

Помогает поисковому роботу просчитать архитектуру сайта и указать навигационные ссылки в выдаче.

Микроразметка «хлебных крошек» (Breadcrumbs Markup)

Выводит в поисковой выдаче «хлебные крошки» прямо под заголовком при информационных и коммерческих запросах.

Микроразметка видео (Video Schema Markup)

Выводит расширенные сниппеты для видеоклипов на ютубе.

Микроразметка событий (Event Schema Markup)

Выводит даты местных событий и праздников.

Микроразметка отзывов и оценок (Schema Ratings & Reviews Markup)

Обогащает сниппеты интернет-магазинов и местных организаций звездами рейтинга.

Важные изменения в семантической разметке

Семантическая разметка помогает поисковикам понять, о чем ваш сайт и как его лучше отображать. Я бы не рекомендовал пытаться манипулировать микроразметкой в свете последних изменений со стороны Гугл, которые он внес в руководство 27 августа 2016 года:

  • В сниппетах должны содержаться только правдивые, независимые и непроплаченные редакторские отзывы.
  • В отзывах должно присутствовать как положительное, так и отрицательное мнение. Отзывы должны размещаться в системе как есть, без правок.
  • Отзывы не должны быть шаблонными и генерироваться на основе автоматических метрик. Недопустимо следующее: «Основываясь на Х числе отзывов, среднее количество людей, которые воспользовались услугами компании Y, равно Z».
  • Отзывы о сетевых магазинах или франшизах должны быть привязаны к конкретному месту ведения торговли.
  • Агрегаторам или контент-студиям запрещается иметь с компанией коммерческие соглашения по написанию отзывов.
  • Нельзя дублировать или частично заимствовать отзывы со сторонних сайтов или компаний.

Немного детальнее об изменениях в микроразметке

Размещать сторонний контент в разметке теперь запрещено

Запрещено использовать в разметке отзывы со сторонних сервисов (Yelp, Google+, Facebook, и т.д.). Вы можете продолжать собирать отзывы и дальше, однако Гуглу интересны только те, что появились на вашем сайте.

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

Все отзывы необходимо размечать согласно местоположению отделений. К примеру, если компания насчитывает 30 отделений с разными адресами, то рейтинг должен выводиться для каждого отделения, а не в совокупности, иначе можно схлопотать фильтр.

Должны присутствовать как положительные, так и отрицательные отзывы

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

Советы по работе с микроразметкой

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

Проверяйте валидность микроразметки

После внедрения микроразметки в код важно понять, правильно ли она работает. В инструменте проверки структурированных данных вы можете проверить валидность микроразметки. Дополнительную информацию об ошибках можно получить в панели вебмастера Search Console, в разделе «Структурированные данные».

Разработайте стратегию сбора отзывов

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

Работайте с отрицательными отзывами

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

При создании новых сайтов и интернет-магазинов в веб-студии WebTend г. Екатеринбург — мы обязательно вводим разметку shema.org, а так же разметки Open Graph и Twitter Card. Это работа автоматизированна установкой специальных компонентов и их настройкой.

Практика применения семантической разметки / Хабр

В последнее время в мире seo применение микроразметки (семантической разметки) для различных целей становится всё более и более популярным.  Хотя микроразметка начала использоваться ещё несколько лет назад, сейчас мы наблюдаем её активное развитие как в Яндексе, так и в Google. Тому подтверждение последние публикации в блоге Яндекс для веб-мастеров:

«Микроразметка для крупных сайтов»

и

«Товарные сниппеты для интернет-магазина»

.

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

Цель семантической разметки

Основная цель микроразметки – предоставить структурированные данные поисковой системе о товаре/услуги или любом другом материале, размещенном на странице. С использованием семантической разметки стало возможно выделять важную информацию на странице, разграничивать и структурировать контент по типу. Это легко понимают поисковые системы, они предоставляют пользователю именно ту информацию о странице, которую

вы хотите донести

.

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


(Данные за 2014 год)

Рассмотрим основные виды семантической разметки:

1. Open Graf
2. Data Vocabulary
3. Schema.org
4. UTF символы

1. Open Graf

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

Изначально Open Graf создавался именно для Facebook, но сейчас данную микроразметку поддерживают многие социальные сети.

На СMS Word Press существует бесплатный плагин для разметки Open Graf на страницах сайта. Многие ведущие seo-блоггеры пользуются Open Graf. Здесь приведен один из таких примеров. Информативный контент отображается при клике на страницу:

Полное руководство по использованию можно найти на сайте Яндекса.

2. Data Vocabulary

Data Vocabulary, далеко не ведущая разметка, и применяется значительно реже, чем её аналогичные собратья, но, на мой взгляд, это один из лучших словарей в своем классе (особенно для Google), так как позволяет действительно выделить сниппет на фоне конкуретов.

Органическая ссылка в Google выделяется, так как уже в выдаче есть информация о ценах на товар:

По моему мнению, это еще один способ увеличить CTR ссылки на поиске. Серьезный минус, что Яндекс данную разметку не понимает.

Сейчас развитие формата Data Vocabulary приостановлено, так как все усилия направлены на Schema.org , но до сих пор Google понимает эту разметку и прекрасно её обрабатывает.

Полное руководство для Data Vocabulary.

3. Schema org

Самая распространенная микро-разметка, о которой существует множество информации в блоге Яндекса. Хотелось бы особенно выделить её применение для коммерческого seo:

а) Разметка страницы – Контакты для коммерческого сайта (правила для заполнения есть в том же блоге Яндекса):

б) разметка товарных сниппетов для магазина, которая была введена в конце 2014 года.

Пользователю  сразу выдается краткая информация о параметрах товара, а так же указывается его цена:

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

Подробное руководство по использованию Schema org.

4. UTF символы

UTF символы  (★ ☒ ) не являются микроразметкой как таковыми, но в целом с точки зрения seo имеют одинаковую цель, что и семантическая разметка – повысить CTR ссылки на поиске. Поэтому стоит рассмотреть это в данной пубикации.

Логика простая: используем короткие description (желательно не более 160 символов) и добавляем в них любые UTF символы, которые улучшат привлекательность ссылки. На сегодняшний день существуют более 100 различных символов.

По моим исследованиям, Google в 85% случаев обрабатывает данные символы. Яндекс же делает это очень редко, но если удается получить такой привлекательный сниппет, то CTR начинает сильно расти, особенно для 1 страницы выдачи. Это огромный бонус на фоне конкурентов.

Например, для запроса – “светодиодные люстры” все сайты из ТОП-3 в Google используют UTF символы:

Семантическая разметка – перспективное направление. В этой публикации было рассмотрено её использование для коммерческого seo, а именно — для поднятия CTR ссылки в органическом поиске. Здесь нет углублений в подробности кода, а приведены уже готовые примеры, в том виде, в котором их видит пользователь, и которые действительно работают на практике.

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

Что такое семантический HTML и почему его следует использовать

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

Что такое семантический HTML?

Семантический HTML или семантическая разметка — это HTML, который придает значение веб-странице, а не просто представление. Например, тег

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

На оборотной стороне этого уравнения такие теги, как и , не являются семантическими. Они определяют только то, как должен выглядеть текст (полужирный или курсив), и не придают никакого дополнительного значения разметке.

Примеры семантических тегов HTML включают:

  • Теги заголовков от

    до

  • <код>

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

Почему следует заботиться о семантике

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

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

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

Правильное использование семантических тегов

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