Семантика HTML для веб контента. Обзор про микроданные в HTML-шаблонах

Обзорная статья про микроданные в HTML-шаблонах. Вольный перевод статьи «Semantic HTML for Web Content», автором которой является Jacob Gube. Семантический HTML повышает доступность веб-сайтов. Программы для чтения с экрана, анализируют и интерпретируют в

Семантика HTML для веб контента

» » Сообщение:

Семантика HTML для веб контента. Обзор про микроданные в HTML-шаблонах
Семантика HTML для веб контента. Обзор про микроданные в HTML-шаблонах

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

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

Вот что говорит Google об использовании семантического HTML (курсивом выделены мои записи):

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

Социальные веб-сервисы такие как Facebook, Pinterest и Twitter любят семантическую разметку. Особенно тогда, когда их пользователи хотят поделиться контентом на них. Эти веб-сервисы берут части наших статей и отображают их на своей платформе. Если мы будем использовать семантический HTML, то они будут в состоянии сделать эту работу лучше.

Языковые инструменты (переводчики) исследуют нашу разметку для того, чтобы они могли перевести наши статьи на другой язык. Хорошая HTML разметка может привести к более точному переводу. Для примера, существуют различия между американским и британским английским. Люди могут с легкостью понять диалектические и идиоматические различия, но машины этого не могут.

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

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

О'кей, теперь, я надеюсь, вы на борту и хотите использовать семантический HTML. Может быть на своем блоге или при разработке CMS.

Посмотрите на шаблон ниже.

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

html Код: Выделить всё Развернуть
<!DOCTYPE html>
<html itemscope itemtype="https://schema.org/Article" lang="" dir="">
  <head>
    <title itemprop="name"></title>
    <meta itemprop="description" name="description" content="">
    <meta itemprop="author" name="author" content="">
  </head>
  <body>
    <article>
      <header>
        <h1 itemprop="headline"></h1>
        <time itemprop="datePublished" datetime=""></time>
        <p><a itemprop="author" href=""></a></p>
      </header>
      <div itemprop="about"></div>
      <div itemprop="articleBody">
        <!-- Основной текст статьи должен быть здесь -->
      </div>
      <footer>
        <time itemprop="dateModified" datetime=""></time>
        <section itemscope itemtype="http://schema.org/WebPage">
          <!-- Секция заголовка-->
          <h2></h2>
          <p><a itemprop="relatedLink" href=""></a></p>
        </section>
      </footer>
    </article>
  </body>
</html>

HTML-разметка шаблона использует семантические элементы (т.е. article, header и footer).

Также здесь используется структурированная разметка данных Schema.org. В частности, схемы Статья и Веб-страница. Schema.org — это совместный проект компаний Google, Bing и Yahoo!.
Целью проекта является предоставление способа для поисковых систем, лучше понимать содержимое страниц.

Вот заполненный пример:

html Код: Выделить всё Развернуть
<!DOCTYPE html>
<html itemscope itemtype="https://schema.org/Article" lang="ru" dir="ltr">
  <head>
    <title itemprop="name">Название страницы статьи</title>
    <meta itemprop="description" name="description" content="Краткое описание статьи.">
    <meta itemprop="author" name="author" content="Имя автора">
  </head>
  <body>
    <article>
      <header>
        <h1 itemprop="headline">Заголовок статьи</h1>
        <time itemprop="datePublished" datetime="1990-11-12">12 ноября 1990 года</time>
        <p>Написано <a itemprop="author" href="#author-profile.html">Имя автора</a></p>
      </header>
      <div itemprop="about">Резюме статьи. Это может быть руководство, выдержка, абстрактный или вводный абзац.</div>
      <div itemprop="articleBody">
        <p>Основная часть статьи идет здесь.</p>
      </div>
      <footer>
        <p>Эта статья была обновлена
          <time itemprop="dateModified" datetime="2015-03-01">30 марта 2015</time></p>
        <section itemscope itemtype="http://schema.org/WebPage">
          <h2>Похожие статьи</h2>
          <p><a itemprop="relatedLink" href="#related-article.html">Связанные статьи</a></p>
          <p><a itemprop="relatedLink" href="#related-article-02.html">Другие статьи по теме</a></p>
        </section>
      </footer>
    </article>
  </body>
</html>

Уточнение типа контента, языка и направления текста

HTML элемент имеет четыре атрибута:

  • itemscope указывает, что схема Статья используется на протяжении всего документа.
  • itemtype содержит адрес используемой схемы.
  • lang даёт информацию о том, на каком языке написано содержимое страницы. W3C говорит, что мы должны пользоваться языковыми тегами, перечисленными в IANA Language Subtag Registry. Например, если страница написана на немецком языке, мы должны присвоить атрибуту land значение de.
  • dir содержит информацию о направлении текста статьи. У вас есть два варианта. Либо «слева направо» (ltr), либо «справа налево» (rtl). Если вы хотите, чтобы браузер решил это за вас, то не используйте его.

Семантическая HTML структура

Для осмысленного структурирования, мы используем следующие HTML элементы согласно спецификациям W3C.

  • article - Элемент article представляет собой обособленный фрагмент контента, который может существовать сам по себе.
  • header - Вводный контент лучше структурировать как дочерний элемент элемента header. В рамках статьи, вводный контент может быть заголовком, датой публикации и именем автора.
  • footer - «Подвал, обычно содержит сведения о разделе, ссылки на различные документы, авторские данные и прочее.» ~ The footer element

Структурированные данные

Шаблон использует микроданные, чтобы усилить семантическую HTML структуру.

Если вы обеспокоены использованием новых HTML5 элементов, то вы можете заменить их полностью поддерживаемыми элементами, такими как div или span. при этом вы можете обеспечить их семантическую значимость с помощью микроданных.

Ниже приводится краткое описание микроданных, используемых в HTML-шаблоне:

  • name - Это свойство указывает на имя пункта. В нашем случае, пункт — это статья. Свойство name нашей статьи — это заголовок веб-страницы, который представлен в элементе title. Обычно, названия веб-страниц уникальны (из-за SEO), поэтому такое название хорошо подходит, в большинстве случаев, и для статей.
  • headline - Человекочитаемое название статьи. Некоторые сайты используют короткие, богатые на ключевые слова значения для title из-за SEO, а затем идёт полный заголовок, описывающий тему статьи.
  • description - Краткое объяснение содержания статьи. В большинстве случаев, присвоенное значение мета-тегу description хорошо работает.
  • author - Имя создателя контента. В HTML-шаблоне за это отвечает мета-тег author и видимая часть статьи.
  • datePublished - Это свойство позволяет нам четко указать дату размещения статьи в элементе time.
  • about - Это свойство применимо к тексту, описывающему тему статьи. Хорошо подходит для сопровождающего предложения или параграфа.
  • articleBody - Это свойство представляет собой основную часть статьи.
  • dateModified - Возможно, вы хотите дать людям знать, когда статья была последний раз пересмотрена и обновлена. Если вы хотите дать эту информацию и машинам, то следует использовать свойство dateModified. Это также даёт веб-сервисам намек на то, что они должны обновить свой индекс, потому что содержимое изменилось.
  • relatedLink - Это свойство используется для ссылок, имеющих отношение к статье. Свойство relatedLink является частью веб-страницы, поэтому мы вынуждены указать тип пункта в родительском элементе.

Использование более значимой разметки

Как я сказал ранее, HTML-шаблон — это всего лишь отправная точка. Рассмотрите возможность использования дополнительных микроданных (и других семантических HTML элементов), которые могут сделать ваш контент более значимым.

Schema.org имеет массу схем для различного типа контента.
Вот некоторые примеры:

Полный лист доступных схем находится здесь.

Подсказки

Проверить свою семантическую HTML структуру можно с помощью Google’s Stuctured Data Testing Tool.

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

semantic, html, web content, микроданные, jacob gube, facebook, pinterest и twitter, семантическая разметка, article, header, footer, itemscope, itemtype, lang, dir



Похожие темыКомментарии ПросмотрыПоследнее сообщение
0644Tiny MCE и html код <code>, И...
Сообщение от: Admin
01226Доработка мода Enable HTML - убирае...
Сообщение от: Admin
11023Функция преобразование HTML кода в ...
Сообщение от: Admin
0401Вывод html только для определенной ...
Сообщение от: Admin
1813Типограф для TinyMCE / Хабрахабр
Сообщение от: Admin