Семантическая разметка. Практика применения семантической разметки. Где используется семантическая разметка
-
, для того, чтобы добавить элементы в список
, необходимо:
- программно создать элемент < li > ;
- добавить созданному элементу HTML - код содержимого;
- добавить элемент в список.
- программное создание элемента ;
- задание текста ссылки;
- задание значения атрибута href ;
- добавление ссылки в контейнер.
- Повышается доступность, т.к. страницы сайта не потеряют своей структуры даже при отключенном или неподдерживаемом CSS .
- Контент страниц сайта будет понятен для людей, читающих сайты с помощью специальных программ для чтения с экрана.
- Семантическая разметка оказывает положительное влияние на поисковые системы , т.к. их роботам не составляет труда индексировать страницы и определять истинное значение тех или иных фрагментов текста.
- Значительно упрощается дальнейшая поддержка подобным образом сверстанного сайта, снижаются затраты на редизайн.
- Уменьшается вес страниц сайта, повышается читабельность кода сайта за счет его компактности, увеличивается скорость загрузки страниц сайта.
- . Задает определение термина
- и
- Использование специальных атрибутов в HTML-коде. Речь идет об атрибутах itemscope, itemtype и itemprop.
- Есть и более упрощенный вариант, не требующий особых знаний. Здесь имеется в виду специальный инструмент «Маркер» от Google. Это специальное приложение, в котором можно выделять курсором определенные данные, указывая их тип.
Программно это будет выглядеть следующим образом:
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 - странице определен контейнер
Следующий код иллюстрирует программную реализацию указанной последовательности действий:
var nav = document.getElementById("navigation");
for(var j = 0; j Разумеется генерировать содержимое можно не только на основе массивов, в рамках последующих практических занятий мы рассмотрим пример формирования содержимого различных элементов на основе использования хранилищ данных
. Для начала необходимо сказать несколько слов о семантике в целом. К сожалению в рамках данного курса мы не можем позволить себе подробное описание этой области знаний, поэтому постараемся акцентироваться только на ключевых моментах. Семантика
, как научная дисциплина, изучает значение
единиц языка. В IT под семантикой
понимается формализация конструкций языков программирования. Попробуем разобраться в том, что же это значит уже в контексте HTML
и веб - разработки. Мы упоминали о том, что большинство веб - страниц создается по определенному шаблону: шапка сайта, полоса навигации
, блок основного содержимого и т.д. В HTML5 предусмотрен ряд тегов, позволяющих явно указать что тот, или иной контент
относится к определенной части веб - страницы, либо указывающих на то, чем контент
является (цитата, время и дата и т.п.). Очевидно, что "потребителями" подобной разметки являются не пользователи сайтов, ведь тегов они не видят. Суть семантической разметки – упрощение машинной обработки содержимого сайтов, к примеру, для лучшего "понимания" сайта поисковыми роботами
. Помимо уже сказанного можно выделить следующие преимущества семантической разметки: Таким образом, HTML
теги могут быть разделены на семантические и теги представления. К семантическим тегам относятся любые теги, указывающие на суть их содержимого. Приведем список
наиболее часто встречающихся семантических тегов: Нами приведен не полный Одним из таких действенных методов является микроразметка или, как ее еще называют, семантическая разметка. С помощью этой разметки передается информация поисковым роботам о содержимом страницы. Элементы семантической разметки добавляются в HTML-код, что позволяет роботу быстрее произвести анализ данной страницы, чтобы в дальнейшем составить наиболее подробное описание веб-ресурса в поисковых результатах. Такая разметка является своеобразной гарантией, что различная информация о статьях, фильмах, акциях и прочем содержимом страницы будет интерпретирована верно. Получается, что семантическая разметка является своеобразной подсказкой роботу, чтобы он как можно быстрее . Именно с помощью нее бот поймет, что определенный перечень букв и цифр является реальным адресом компании, к примеру. Это объясняется тем, что микроразметка лучше описывает ваш ресурс, причем не только по ключевым запросам, но и по картам, картинкам, а также поиску по видео. Кстати, с помощью семантической разметки происходит формирование сниппетов. Если говорить упрощенно, то — это небольшое описание содержимого страницы, которое видят пользователи в результатах поиска. Это своеобразный анонс, побуждающий человека перейти на сам сайт. Многие путают сниппеты и description, но это несколько разные вещи. Да, дескрипшн также кратко описывает содержимое страницы, чтобы пользователю и поисковому роботу было понятно, о чем данный ресурс. Если дескрипшн не будет прописан в контейнере Семантическая разметка
Таблица
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
обозначает имя переменной
Что такое семантическая разметка и зачем она нужна?
Семантическая разметка представляет собой особые параметры тегов, которые добавляют в код текста или файла.
Кроме того, добавление семантической разметки позволяет привлечь больше посетителей на сайт, которые в дальнейшем могут стать вашими потенциальными клиентами.
Сниппет как раз и представляет тот вырванный фрагмент из текста, необходимый для аннотации страницы.
Естественно, если его грамотно составить, добавив в него определенное количество , то система выделит их жирным шрифтом, что привлечет внимание пользователей.
Если сниппет не сформировать, то выберет дескрипшн в качестве описания к ресурсу. В Яндексе description и вовсе может быть проигнорирован, поэтому правильное составление сниппета очень важно.
С помощью семантической разметки можно выделить сниппет, чтобы поисковая машина выдавала в строках поиска именно то, что вам нужно, а не произвольные части из текста. Но для того, чтобы овладеть этим безусловно полезным инструментом, необходимо знать основные способы создания такой разметки.
Какие способы создания микроразметки используют?
Чтобы не только создать семантическую разметку, но и правильно ее добавить, необходимо тщательно изучить Schema.org , а также научиться добавлять код на сайт. Shema.org является совместной разработкой многих поисковых систем, представляющих собой единый стандарт формирования микроразметки.
На сегодняшний день отмечают два способа создания семантической разметки:
Первый способ отличается тем, что все приходится прописывать вручную. Возьмем для примера контакты какой-нибудь компании, которые мы выделим семантической разметкой:
Яндекс
Контакты:
Жукова, 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 , после чего в строку нужно вставить нашу ссылку. Далее жмем «Запустить тест». После проверки справа будет указано количество ошибок, если они все-таки присутствуют в разметке.
Заключение
Семантическая разметка не является обязательным атрибутом сайта в интернете. Но если ее внедрить, то пользователи в сети будут лучше проинформированы о содержимом вашей страницы, даже не переходя на нее.
Следовательно, они поймут из сниппета, что информация на сайте представляет для них интерес, после чего кликнут по вашему сайту. Получается, что правильная микроразметка способствует и увеличению числа переходов на него.
Среди колоссального количества сайтов, существующих в русскоязычном сегменте Интернета, далеко не все пользователи могут найти то, что им нужно. Конечно, поисковые системы позволяют привлечь целевую аудиторию к конкретному веб-ресурсу, но они не смогут удержать людей на вашем сайте, если вы сами не приложите к этому усилий. Отдельной проблемой является информация о сайте, которую пользователь видит в поисковой выдаче. К сожалению, она далеко не всегда составлена адекватно и грамотно.
Именно поэтому возникла семантическая разметка данных, помогающая структурировать информацию для поисковых роботов. Изначально форматов семантической разметки было несколько, причем все они конкурировали друг с другом. Страдали от такого положения дел прежде всего веб-мастера, которым приходилось выбирать между конкурирующими форматами. Однако с 2011 года все изменилось, после того, как крупнейшие поисковики (Google, поисковик Bing от Microsoft и Yahoo!) выбрали единый стандарт Schema.org.
Практическая польза от Schema.org и особенности работы
Schema.org обязательна, если вы хотите, чтобы сниппет вашего сайта (основная информация о веб-ресурсе, которая показывается в поисковой выдаче) привлекал внимание целевой аудитории. По умолчанию поисковый робот самостоятельно структурирует данные, но при этом качество информации в сниппете оставляет желать лучшего. Например, пользователь вместо нормального текста о том, что его интересует, будет видеть обычный информационный мусор, не говорящий ни о содержании сайта, ни о его тематике. С другой стороны, если на соседней строчке в поисковой выдаче будет сайт, использующий Schema.org, то пользователь гарантированно зайдет именно туда, ведь сниппет сайта будет содержать полезную и удобочитаемую информацию.
Одним словом, разметка Schema.org несомненно повысит релевантность сайта, как и адекватное описание веб-ресурса в поисковой выдаче. Размечать вы можете практически все, однако при этом важно помнить, что поисковики используют не всю разметку. Впрочем, то, что не учитывалось ранее, может начать учитываться в будущем, так что мелочей здесь быть не может. Подавляющее большинство веб-мастеров в первую очередь размечают отзывы, разнообразные рейтинги, товары, людей, компании, видео, проводимые мероприятия, рецепты и т.д. Конечно, в каждом конкретном случае система разметки своя, так что любой сайт требует индивидуального подхода.
Также следует обращать внимание на иерархию типов, чтобы донести до пользователя самую важную информацию о сайте. Посмотреть их вы можете на официальном сайте в разделе http://schema.org/docs/schemas.html (требуется знание английского языка). Выбор методики разметки зависит в первую очередь от тематики сайта и, конечно же, пожеланий самого вебмастера. К примеру, если у вас информационный ресурс со множеством самых разных тем, можно выбрать разметку Article. Статьи, размещенные на личном блоге, размечают при помощи BlogPosting, а материалы технической направленности – TechArticle, и т.д. Внутри любой из этих схем может быть любое количество других схем, вам лишь нужно соблюдать правильную иерархию.
Если вы уже создали HTML-макет своего сайта, не добавляя при этом семантическую разметку, то его придется переделывать, ведь только так получится правильно и качественно внедрить ее. Нельзя сказать, что это огромный объем работы, но постараться все равно придется. В результате код может существенно увеличится, однако вашему сайту в конечном итоге это пойдет только на пользу. Например, после успешного внедрения семантической разметки любой поисковик сможет предельно точно понять содержание вашего сайта, отличить статьи от комментариев пользователей, выявить в тексте ключевые слова и фразы, выделить важную информацию и второстепенную, т.д. Это действительно очень полезно для продвижения ресурса.
Для тех, кто хочет при помощи Schema.org повысить конверсию и популярность сайта, также существуют свои рекомендации. Например, если на странице есть множество interactionCount (разнообразные репосты, лайки, твиты и многое другое), а также комментариев, поисковый робот автоматически обозначает такой сайт как более приоритетный и значимый по сравнению с другими (у того же Яндекса существует что-то вроде «шкалы счастья»). Конечно, это серьезно сказывается на посещаемости ресурса, так что пренебрегать такой возможностью не стоит. Например, вы можете разметить каждый комментарий схемой (обозначение UserComments) внутри единой схемы уже размещенной на ресурсе статьи (TechArticle). Метод очень распространенный и, что немаловажно, действительно работающий. Если комментариев и других признаков пользовательской активности на веб-ресурсе много, поисковик будет отображать его как полезный и важный.
Работать с Schema.org смогут и те вебмастера, которые привыкли пользоваться системами микроформатов, микроданных и RDF. Абсолютно все, что можно было сделать с этими форматами, можно сделать и в Schema.org.
Принципы разметки и конструкции кода
Чтобы ввести семантическую разметку на ту или иную страницу сайта, вам для начала потребуется поместить описание в отдельный контейнер, где указывается выбранная схема разметки (например,
Инструменты для работы
У популярных поисковиков есть свои инструменты для работы с семантической разметкой. Например, тот же Яндекс предлагает собственный валидатор разметки (находится в сервисе Вебмастер). Кроме того, существуют и специальные плагины, предназначенные для использования с системами управления веб-ресурсом. Они призваны облегчить рутинные действия вебмастера и автоматизировать многие процессы, так что не лишним будет с ними ознакомиться. Отдельного внимания заслуживает такой сервис, как http://schema-creator.org/, который помогает намного быстрее внедрить разметку в код сайта.
Конечно, это далеко не все инструменты, способные помочь вебмастеру. Список полезных плагинов и сервисов постоянно пополняется по мере развития и популяризации Schema.org, так что желательно всегда быть в курсе трендов и внедрять их в свою работу.
Подписаться на рассылку
Разметка может сделать ваш сайт более заметным в Поиске Яндекса и таким образом привлечь больше посетителей, принадлежащих целевой аудитории. Однако, напрямую семантическая разметка не влияет на ранжирование.
Я прочитал про стандарт Schema.org. Как настроить его на своем сайте?
Ознакомьтесь с разделами нашей помощи и воспользуйтесь инструментами для работы с разметкой. Если стандартные способы внедрения вам не подходят (например, из-за сложной вёрстки), напишите в клуб Поиска . Скорее всего, вам понадобится помощь программиста.
Schema.org описывает много разных типов данных, все ли они поддерживаются Яндексом?
Нет, на данный момент мы поддерживаем не все типы данных Schema.org. Полный список обрабатываемых типов приведен в разделе Какие данные можно передать .
Я настроил у себя на сайте Schema.org. Как убедиться, что все заработало?
Сначала убедитесь, что размеченные данные правильно и без ошибок распознаются. Если разметка верна и размеченные данные используются сервисами Яндекса, то через некоторое время (обычно - две недели) эти данные появятся на соответствующих страницах.
Если разметка верна, но данные не проходят ручную модерацию, вы получите сообщение от модератора в интерфейсе Я.Вебмастера. Модератор расскажет, почему предоставленные данные не могут быть использованы, и предложит внести коррективы.
Почему сниппеты не показываются, хотя моя разметка успешно распознается вашим валидатором?
Убедитесь, что Яндекс может использовать ваши данные в сниппетах. Все сниппеты, которые могут составляться из ваших данных, описаны в разделе Какие данные можно передать .
Прежде, чем появиться в сниппетах, данные должны быть:
корректно размечены;
проиндексированы;
промодерированы.
Если все требования Яндекса выполнены, то модератор одобряет использование данных с вашего сайта. Через некоторые время (около двух недель) сниппеты с вашими данными появятся в Поиске.
Что лучше использовать - микроформаты или Schema.org? Как робот будет обрабатывать сайт, если я использую и то, и другое?
Наши алгоритмы не отдают предпочтение какому-либо одному типу разметки. Это означает, что вы можете использовать тот формат, который вам кажется более удобным. Тем не менее, мы рекомендуем использовать Schema.org как более современный, полный и активно развивающийся стандарт.
В последнее время в мире seo применение микроразметки (семантической разметки) для различных целей становится всё более и более популярным. Хотя микроразметка начала использоваться ещё несколько лет назад, сейчас мы наблюдаем её активное развитие как в Яндексе, так и в Google. Тому подтверждение последние публикации в блоге Яндекс для веб-мастеров: «Микроразметка для крупных сайтов» и «Товарные сниппеты для интернет-магазина» .
Google также занимается данным направлением, примером чего является доработки сниппетов в основной выдаче, о которой далее и пойдет речь в этой публикации.
Цель семантической разметки
Основная цель микроразметки - предоставить структурированные данные поисковой системе о товаре/услуги или любом другом материале, размещенном на странице. С использованием семантической разметки стало возможно выделять важную информацию на странице, разграничивать и структурировать контент по типу. Это легко понимают поисковые системы, они предоставляют пользователю именно ту информацию о странице, которую вы хотите донести .Каждая микроразметка имеет свой словарь (некая база различных команд, классов, подклассов), который она понимает и способна правильно обрабатывать. Словари достаточно обширные, но всю библиотеку можно найти на специализированных сайтах (в статье приведены ссылки на библиотеки для наиболее популярных).
(Данные за 2014 год)
Рассмотрим основные виды семантической разметки:
1. Open Graf
2. Data Vocabulary
3. Schema.org
4. UTF символы
1. Open Graf
Open Graf используется для создание информативной ссылки для передачи в социальных сетях. То есть возможно самостоятельно вписать нужный текст и картинку, чтобы пользователи, кликая на лайк, распространяли ваш контент в максимально презентабельном варианте.Изначально Open Graf создавался именно для Facebook, но сейчас данную микроразметку поддерживают многие социальные сети.
По использованию Schema org.
4. UTF символы
UTF символы (★ ☒) не являются микроразметкой как таковыми, но в целом с точки зрения seo имеют одинаковую цель, что и семантическая разметка - повысить CTR ссылки на поиске. Поэтому стоит рассмотреть это в данной пубикации.Логика простая: используем короткие description (желательно не более 160 символов) и добавляем в них любые UTF символы, которые улучшат привлекательность ссылки. На сегодняшний день существуют более 100 различных символов.
По моим исследованиям, Google в 85% случаев обрабатывает данные символы. Яндекс же делает это очень редко, но если удается получить такой привлекательный сниппет, то CTR начинает сильно расти, особенно для 1 страницы выдачи. Это огромный бонус на фоне конкурентов.
Например, для запроса - “светодиодные люстры” все сайты из ТОП-3 в Google используют UTF символы:
Семантическая разметка - перспективное направление. В этой публикации было рассмотрено её использование для коммерческого seo, а именно - для поднятия CTR ссылки в органическом поиске . Здесь нет углублений в подробности кода, а приведены уже готовые примеры, в том виде, в котором их видит пользователь, и которые действительно работают на практике.
Если тема действительно интересна, то подробное использование того или иного формата легко можно изучить, перейдя по вышеприведенным ссылкам.