Рубрика «семантическая разметка» - 2

Разбиение веб страниц на семантические блоки
Пример работы алгоритма на сайте Автокадабра.

Задача

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

Гораздо полезней отследить взаимодействие посетителей с сайтом, выяснить чем живёт сайт, с возможностью охватить одновременно множество посетителей. В итоге, появилась идея записывать информацию в виде осмысленного списка действий посетителей:

  • Dima: переход на сайт с поисковой системы Yandex RU по запросу sepyra (3м. 10 сек. назад)
  • Dima: переход со страницы "Веб-аналитика Sepyra | Официальный сайт" на страницу "О системе | Веб-аналитика Sepyra (1 м. 30 сек. назад)
  • Dima: выделение текста "времени" в блоке "Одна из ключевых особенностей веб-аналитики Sepyra — возможность… кто хочет быть в курсе каждого шага посетителей" (40 сек. назад)
  • Dima: средний интерес к подблоку "Подключиться" в блоке "Тарифы О системе FAQ Контакты Русский English Подключиться Войти" (20 сек. назад)
  • Dima: заполнение/изменение поля "Ваше имя" в форме "Регистрация" (10 сек. назад)

Запись состоит из двух частей: блок в котором происходит действие посетителя и само действие, например — выделение текста "времени" в блоке "Одна из ключевых особенностей ...". Для этого описания необходимо определить блок на странице и его имя. Если с именем было более-менее понятно, то над выделением блоков пришлось подумать.
Читать полностью »

image
Веб сегодня все больше и больше семантический. Но что означает «семантический»? Почему это важно?

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

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

Ок, итак семантическая разметка — это хорошо, но как ее использовать. Лучше всего начать с замены обычных тегов на более выразительные. Давайте посмотрим восемь элементов, которые позволят вам войти в эту игру.
Читать полностью »

Уровень подготовки веб-мастера: любой

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

С помощью этой разметки вы можете указать системе, где находится ваш логотип. Например, если вы – владелец сайта www.example.com, можно использовать следующую разметку элементов на странице:

<div itemscope itemtype="http://schema.org/Organization">
<a itemprop="url" href="http://www.example.com/">Главная</a>
<img itemprop="logo" src="http://www.example.com/logo.png" />
</div>

Читать полностью »


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js