HTML5. Подгружаемое и генерируемое содержимое. Семантическая разметка. Семантическая разметка: что это такое и зачем она нужна

Оставьте комментарий 6,950

Одним из таких действенных методов является микроразметка или, как ее еще называют, семантическая разметка.

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

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

С помощью этой разметки передается информация поисковым роботам о содержимом страницы.

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

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

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

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

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

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

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

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

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

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

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

Какие способы создания микроразметки используют?

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

На сегодняшний день отмечают два способа создания семантической разметки:

Использование специальных атрибутов в HTML-коде. Речь идет об атрибутах itemscope, itemtype и itemprop.
Есть и более упрощенный вариант, не требующий особых знаний. Здесь имеется в виду специальный инструмент «Маркер» от Google. Это специальное приложение, в котором можно выделять курсором определенные данные, указывая их тип.

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

Яндекс

Контакты:

Жукова, 4

23678

Иркутск,

Телефон:+3 952 456 XXX XX,

Факс:+3 952 643 XXX XX,

Электронная почта: [email protected]

Что касается второго метода, то с помощью вышеуказанного инструмента можно сообщать о таких материалах на сайте, как «Мероприятия», «Приложения», «Телесериалы», «Книги», «Фильмы», «Рестораны», «Товары», «Местные организации» и т.д.

Как проверить, правильно ли сделана семантическая разметка сайта?

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

В частности, у каждого из них есть собственный метод проверки правильно семантической разметки на сайте. Для Яндекса это Валидатор микроразметки, а для Google — Google Structured Data Testing Tool. Рассмотрим оба способа проверки микроразметки.

Проверка в Яндексе

Первым делом необходимо зайти в само приложение Валидатор. В соответствующую строку вводим любую интересующую вас ссылку на статью. Далее жмем кнопку «Проверить».

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

Проверка в Гугле

В принципе, особых различий в проверке здесь нет, ведь они обе автоматизированы. Также нужно войти в приложение — https://search.google.com/structured-data/testing-tool , после чего в строку нужно вставить нашу ссылку. Далее жмем «Запустить тест». После проверки справа будет указано количество ошибок, если они все-таки присутствуют в разметке.

Заключение

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

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

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

Я прочитал про стандарт Schema.org. Как настроить его на своем сайте?

Ознакомьтесь с разделами нашей помощи и воспользуйтесь инструментами для работы с разметкой. Если стандартные способы внедрения вам не подходят (например, из-за сложной вёрстки), напишите в клуб Поиска . Скорее всего, вам понадобится помощь программиста.

Schema.org описывает много разных типов данных, все ли они поддерживаются Яндексом?

Нет, на данный момент мы поддерживаем не все типы данных Schema.org. Полный список обрабатываемых типов приведен в разделе Какие данные можно передать .

Я настроил у себя на сайте Schema.org. Как убедиться, что все заработало?

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

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

Почему сниппеты не показываются, хотя моя разметка успешно распознается вашим валидатором?

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

Прежде, чем появиться в сниппетах, данные должны быть:

корректно размечены;

проиндексированы;

промодерированы.

Если все требования Яндекса выполнены, то модератор одобряет использование данных с вашего сайта. Через некоторые время (около двух недель) сниппеты с вашими данными появятся в Поиске.

Что лучше использовать - микроформаты или Schema.org? Как робот будет обрабатывать сайт, если я использую и то, и другое?

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

Массив содержит строки - элементы списка . На самой HTML - странице размещен тег

программно создать элемент < li > ;
добавить созданному элементу HTML - код содержимого;
добавить элемент в список.

Программно это будет выглядеть следующим образом:

var list = document.getElementById("list"); for (var i = 0; i< items.length; i++) { var listItem = document.createElement("li"); listItem.innerHTML = items[i]; list.appendChild(listItem); }

Таким образом при вызове функции сформируется содержимое списка с id="list" .

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

var links = ; links = {name: "first", href: "document1.html"}; links = {name: "second", href: "document2.html"}; links = {name: "third", href: "document3.html"}; links = {name: "fourth", href: "document4.html"};

На HTML - странице определен контейнер

. Последовательность добавления ссылки в контейнер выглядит так:

программное создание элемента ;

задание текста ссылки;

задание значения атрибута href ;

добавление ссылки в контейнер.

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

var nav = document.getElementById("navigation"); for(var j = 0; j

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

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

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

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

Попробуем разобраться в том, что же это значит уже в контексте HTML и веб - разработки.

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

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

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

Помимо уже сказанного можно выделить следующие преимущества семантической разметки:

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

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

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

Таблица 14.1.

Тег	Описание
a	предназначен для создания cсылки или якоря
abbr	указывает, что содержимое тега является аббревиатурой
acronym	указывает, что содержимое тега является акронимом (разновидность аббревиатуры, которая произносится не по буквам, а слитно, как одно слово)
address	содержит информацию об авторе
area	применяется внутри контейнера < map > для создания карты-изображения. Определяет параметры активных зон-ссылок на карте
base	указывает полный базовый адрес документа. Применяется для составления относительных адресов и для указания целевого окна всех ссылок страницы
bdo	устанавливает направление вывода текста (справа налево, слева направо)
blockquote	выделяет цитату (как правило длинную). Отображается с увеличенным отступом
body	определяет границы тела документа . Внутри тега располагаются все элементы, отвечающие за содержание HTML-страницы
button	создает на форме кнопку
caption	создает заголовок таблицы. Отображается над таблицей вне рамки. Элемент таблицы
cite	используется, чтобы указать источник цитаты или ее автора. Как правило, оформляется курсивом
code
col	позволяет задать общие свойства сразу для всего столбца таблицы
colgroup	позволяет задать общие свойства сразу для нескольких столбцов таблицы
dd	и . Задает определение термина
del	обозначает текст, как удаленный. Может выступать как строчный или как блочный элемент в зависимости от контекста
dfn	выделяет в тексте термин
div	выделяет логический блок. Один из основных элементов блочной верстки
dl	используется при создании списка определений вместе с и
dt	используется при создании списка определений вместе с и
em	используется для акцентирования внимания
fieldset	предназначен для группировки элементов формы
form	создает форму на странице. Форма применяется для обмена данными между пользователями и сервером
h1, h2, h3, h4, h5, h6	используются для создания заголовков
head	заголовок документа, содержит информацию о текущем документе
html	тег-контейнер, заключающий в себе все содержимое страницы, кроме doctype , который должен быть расположен перед тегом
img	добавляет на страницу изображение
input	позволяет создавать элементы интерфейса: кнопки, текстовые поля, переключатели и флажки. Основной метод получения информации от пользователя (читателя) базируется на этом теге
ins	обозначает текст, добавленный в новой версии документа. Может выступать как строчный или как блочный элемент в зависимости от контекста
kbd	обозначает текст набираемый на клавиатуре или сочетания клавиш
label	позволяет связать элемент интерфейса на форме с текстовой надписью и задать горячие клавиши
legend	определяет заголовок для элементов форм, сгруппированных в контейнере тега
li	создает элемент списка
link	устанавливает связь с внешними документами, чаще всего с таблицами стилей
map	тег-контейнер для создания карты-изображений
meta	содержит метаданные - техническое описание документа в виде пар "имя-значение". Служит для идентификации свойств документа (например, автора, конечной даты использования, списка ключевых слов и т.д.) и установки значений этих свойств
noscript	содержит текст, который выводится браузером
object	используется для внедрения на страницу различных объектов (как правило медиафайлов)
ol	создает нумерованный список
optgroup	тег-контейнер для тегов
option	задает отдельную строку списка в теге
p	предназначен для создания абзацев
pre	определяет предварительно отформатированный фрагмент текста. Выводится с соблюдением всех пробелов и переводов строки
q	выделяет в тексте цитату
samp	обозначает текст, как код программы или формулу
script	добавляет на страницу скрипт
select	создает элемент выбора значений
span	используется в основном для оформления и/или назначения уникального идентификатора (id ) определенному фрагменту текста
strong	логически выделяет, усиливает текст.
style	задает таблицу стилей
table	определяет таблицу
tbody	применяется для группировки строк, с целью задать общее форматирование
td	задает ячейку таблицы
textarea	определяет многострочное поле для ввода.
tfoot	применяется для определения строки, которая будет отображаться внизу таблицы
th	определяет ячейку-заголовок таблицы
thead	применяется для определения строки/строк, которые будут отображаться вверху таблицы
title	определяет заголовок документа
tr	определяет строку таблицы
ul	создает маркированный список
var	обозначает имя переменной

Нами приведен не полный

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

Поисковики достаточно умны, чтобы понимать, на каком языке задан запрос; они умеют учитывать морфологию языка и подбирать словам из запроса синонимы. Однако в полной мере осознать, о чём именно идет речь на найденной веб-странице, машины не в состоянии.

Представьте, к примеру, сайт поликлиники с возможностью записи на приём к врачу через интернет. Среди всех страниц сайта поисковый робот без труда найдёт нужную - ту, где выполняется запись, - но дальше возникнут трудности. Человек легко догадается, что «Иванов», «Петров» и «Сидоров» - это фамилии врачей, «окулист», «невролог» и «терапевт» - их специализации, а «9:00», «9:30» и «10:00» - возможное время начала приёма. Компьютер же самостоятельно такие выводы сделать не может.

А если бы машина могла «читать» страницы так же, как это делает человек, она бы могла помочь в решении гораздо более сложных задач. Скажем, не просто «Записаться к врачу в поликлинику №2», а «Записаться к окулисту, о котором хорошо отзываются, в поликлинику не дальше чем в пяти километрах от моей работы, на 12-13 сентября, на утро, но не позже 11:00».

Впрочем, объяснить компьютеру, о чем идёт речь на веб-странице, вполне возможно. Для этого нужно дать ему подсказку.Такой подсказкой служит семантическая разметка или микроразметка. По сути, микроразметка - это отдельный язык с собственными словарём и синтаксисом, задача которого - помочь машинам (в частности, поисковым роботам) понять концепции, используемые людьми.

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

Чтобы понять, как работает микроразметка, рассмотрим простую фразу: «У Петра есть сын Иван». Несмотря на простоту человек может сделать из неё множество выводов: Пётр - отец (а также родитель) Ивана, отчество Ивана - Петрович, Пётр и Иван - мужчины и родственники, Пётр старше Ивана. Все эти факты очевидны, поскольку нам их подсказывает жизненный опыт. У машины такого опыта нет, поэтому она может воспринимать фразу только в её текущей формулировке

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

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

Единого стандарта микроразметки пока нет. Существуют разные синтаксисы и разные словари. Например, социальные сети собирают данные о сайтах с помощью словаря Open Graph, разработанного в Facebook, а поисковики, включая Яндекс, чаще ориентируются на словарь Schema.org. Подробнее о том, как устроены словари и синтаксисы, можно прочитать в техноблоге Яндекса на «Хабрахабре».

В том или ином виде микроразметку используют около 30% веб-страниц, известных Яндексу. Отсутствие микроразметки не влияет ни на способность страницы попадать в результаты поиска, ни на её позицию в результатах поисковой выдачи. Однако в ряде случаев разметка способна значительно упростить жизнь - как сайтам, так и пользователям.

Сделать наглядный сниппет

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

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

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

Подходящего определения на просторах Интернета мне найти не удалось, поэтому я его решил составить его из 4 наиболее подходящих определений.

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

Получилось немного замудрено… Однако из данного определения мы понимаем, что семантическая разметка - это некие правила, подчиняющиеся определенным стандартам или словарям. Которые, в свою очередь, призваны помочь поисковым системам (и не только) понимать содержимое страниц сайтов.

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

Виды разметки данных

Data Vocabulary - стандарт разметки данных, которая разрабатывала компания Google до июня 2011 года.

Развитие стандарта приостановлено в связи с созданием словаря Schema.org. Поисковый робот Google может использовать данные, полученные с помощью данной разметки, но рекомендации сводятся к смене стандарта на Schema.org.

Dublin Core, или Дублинское ядро - стандарт, разработанный в 1995 году. Семантика Дублинского ядра была создана международной междисциплинарной группой профессионалов библиотечного и музейного дела, компьютерных наук. Представляет собой набор из метатегов, 15 основных и 3-х дополнительных свойств.

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

FOAF, или Friend of a Friend - «друг друга» - стандарт, созданный Либби Миллером и Дэном Брикли в 2000 году. Используется в основном для домашних страниц и социальных сетей. Решает задачу построения связей между людьми и объединению их.

Microformats, или же микроформаты - стандарт, созданный в 2005 году сообществом заинтересованных энтузиастов из WC3.

Данный стандарт был очень популярным до появления Schema.org и на многих сайтах используется до сих пор. На момент написания статьи Яндекс поддерживает следующие Microformats: hCard - формат разметки контактов (адресов, телефонов и т.д.); hRecipe - формат описания кулинарных рецептов; hReview - формат разметки отзывов.

Вроде со стандартом определились, с синтаксисом тоже.

Для начала определимся, какая основная цель разметки. Если вы прочитали статью о том, что с разметкой вам гарантировано место в топ-10, то это не так. Цель микроразметки - улучшить понимание сайта в глазах робота, отправить в базы знаний поисковых систем информацию, повысить CTR вашего сниппета (что косвенно может увеличить и ваш трафик и позиции). Но надо понимать, что это всё косвенные показатели. Сайты с использованием микроразметки и без неё ранжируются одинаково.

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

Более подробно разберем три наиболее встречаемых примера:

Разметка карточки товаров schema.org

Товарные карточки - размечаем по сущности Product. Реализация данного вида поможет получить нам следующий сниппет в Яндексе:

Не путать с товарным сниппетом в выдаче Яндекса, полученным при использовании.yml файла из Яндекс.Маркета или сервиса «Товары и цены» вебмастера Яндекса.

Каким образом получить данный сниппет?

У кого есть подобная проблема на кулинарных сайтах, возможно, у вас такая же причина. Каждый раз убеждаюсь, что справка - наше всё.)) Также хочется отметить качество саппорта Яндекса, выразить благодарность за оперативные ответы - переписка происходила практически в реальном времени.

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

40 мин.