Этот элемент включает в себя глобальные атрибуты.

Пример

address> You can contact author at a href="http://www.somedomain.com/contact">www.somedomain.coma>.br /> If you see any bugs, please a href="mailto:webmaster@somedomain.com">contact webmastera>.br /> You may also want to visit us:br /> Mozilla Foundationbr /> 1981 Landings Drivebr /> Building Kbr /> Mountain View, CA 94043-0801br /> USA address> 

Спецификации

Совместимость в браузерах

BCD tables only load in the browser

Смотрите также

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

This page was last modified on 4 авг. 2023 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

• Product help
• Report an issue

Our communities

Developers

• Web Technologies
• Learn Web Development
• MDN Plus
• Hacks Blog

• Website Privacy Notice
• Cookies
• Legal
• Community Participation Guidelines

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

HTML: Микроразметка

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

• Название организации
• Время работы
• Адрес
• Номер телефона

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

Schema.org

Разработчики создали несколько вариантов микроразметки, наиболее распространённым из которых является Schema.org с широким выбором «словарей» для описания информации на странице.

Словарь — это набор правил, по которым описываются блоки на странице. Сеансы фильмов в кинотеатре, информация отдела продаж, цены на товары, отзывы о статье — всё это представлено в небольших словарях.

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

• Выбор словаря. Узнать о поддержке тех или иных словарей поисковой системой можно с помощью документации. Для поисковой системы Яндекс доступные словари указаны здесь
• Определение блока, который будет размечаться. Это может быть не только блок, а вся страница сайта
• Выделение информации. На примере разметки контактной информации это: название организации, телефон, email, адрес
• Указание атрибутов в зависимости от типа информации и словаря

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

Микроразметка контактов

Для примера возьмём контактные данные вымышленной компании «Прауд», и разметим контакты, используя Schema.org. Изначально блок с контактами выглядит следующим образом:

 
Компания «Прауд»
 
Адрес: г.Мотино, улица Строителей, дом 6





 
Телефон: 8 (8765) 333-00-00
 
Email: info@proud-company.test
 
 

Первое, нужно выбрать словарь. Поисковая система Яндекс для этого предлагает несколько вариантов. Возьмём словарь Organization. Полное описание этого словаря можно найти на сайте https://schema.org/.

В уроке не ставится цель научить полностью размечать данные. Цель урока — показать пример микроразметки

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

• itemscope — указатель на то, что блок — единая сущность, и данные в нем связаны. Указывается только у главного блока и не имеет своего значения
• itemtype — указывает на то, какой словарь будет использоваться. Например, для описания контактов выбран словарь Organization. Полный вид атрибута: itemtype=»http://schema.org/Organization»

 
Компания «Прауд»
 
Адрес: г.Мотино, улица Строителей, дом 6
 
Телефон: 8 (8765) 333-00-00





 
Email: info@proud-company.test
 
 

Теперь поисковая система будет знать, что внутри этого блока информация об организации. Приступим к разметке адреса. Schema.org позволяет отдельно указывать улицу, дом, строение и так далее, но мы обобщим это и используем только одно значение itemprop=»address» , чтобы обозначить адрес предприятия. Обратите внимание, что элементы разметки указываются с помощью атрибута itemprop.

 
Компания «Прауд»
 
Адрес: г.Мотино, улица Строителей, дом 6
 
Телефон: 8 (8765) 333-00-00
 
Email: info@proud-company.test
 
 

По аналогии с адресом разметим остальные данные: название, телефон, email. Для каждого из них есть своё значение атрибута itemprop. Обратите внимание, что размечаются только данные, оставляя за «бортом» название поля. Для этого нужные данные оборачивают в и для него указывают атрибут.

 
Компания «Прауд»
 
Адрес: г.Мотино, улица Строителей, дом 6
 
Телефон: 8 (8765) 333-00-00
 
Email: info@proud-company.test
 
 

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

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

Задание

Создайте разметку организации, в которой укажите:

• Название организации
• Email организации

Теги используются на своё усмотрение. Вся семантика строится на уровне микроразметки. В качестве словаря используйте http://schema.org/Organization

Упражнение не проходит проверку — что делать? ��

Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:

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

В моей среде код работает, а здесь нет ��

Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.

Мой код отличается от решения учителя ��

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

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

Прочитал урок — ничего не понятно ��

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

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

Микроразметка

В Unisender есть все для рассылок: можно создавать и отправлять клиентам письма и SMS, настроить чат-бота и делать рассылки в Telegram и даже собрать простой лендинг для пополнения базы контактов.

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

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

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

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

Для чего нужна микроразметка

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

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

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

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

По данным Google , некоторые бренды после добавления микроразметки на страницы сайтов смогли повысить CTR на 25-35%.

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

Что такое словари и синтаксисы

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

Типы словарей и виды синтаксиса в семантической разметке. Источник

Словарь — это набор классов и их свойств, с помощью которых можно описать контент страницы. По сути, это язык, который понимают алгоритмы поисковых систем. Самые распространенные словари в мире — Schema.Org и OpenGraph.

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

Синтаксис — это набор правил для использования словаря. Синтаксис определяет, как, где и какие теги указывать в HTML-коде сайта. Стандартов синтаксиса, как и словарей, несколько. Наиболее распространенные: JSON-LD, RDFa, микроданные и микроформаты. При этом последние три используются все реже, а JSON-LD — все чаще, так как именно его рекомендует Google.

В рамках словаря можно использовать один или несколько видов синтаксиса, как заявляют представители поисковых систем. Например, для Schema.Org подходят и JSON-LD, и RDF, и микроданные, и микроформаты. Главное — следить, чтобы атрибуты не противоречили друг другу и не создавали путаницу.

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

Schema.Org

С помощью типов микроразметки, описанных в Schema.Org , можно разметить почти любую информацию: о человеке, товаре или услуге.

В Schema.org описано несколько сотен типов микроразметки, наиболее популярные и полезные для разметки сайта — Article (статья), Recipe (рецепт), VideoObject (видео), HowTo (инструкции), BreadcrumbList (хлебные крошки) , Product (карточка товара), Review (отзыв), ImageObject (изображение). Каждый из этих типов с примерами более подробно описан в последнем разделе статьи.

Словарь Schema.org рекомендуют использовать крупные поисковые системы, среди которых Google, «Яндекс», Bing.

OpenGraph

Словарь семантической разметки, который был разработан Facebook*, чтобы решить проблемы с отображением страниц сайта в социальных сетях. Сейчас словарь OpenGraph поддерживают не только соцсети Facebook*, «ВКонтакте», Pinterest, но и популярные блог-платформы и мессенджеры: Telegram, Skype, Viber и другие.

Благодаря микроразметке OpenGraph при расшаривании ссылки в соцсетях подтягивается корректная картинка и текст, а не случайное изображение с сайта

А так в соцсетях расшаривается ссылка с сайта, который не использует разметку

Микроформаты

Еще один стандарт, о котором следует сказать отдельно, так как это объединенный стандарт синтаксиса и словаря. Микроформаты были разработаны в 2007 году и сейчас используются намного реже, чем OpenGraph и Schema.Org. Это связано в том числе с ограничениями, которые накладывает стандарт: при внедрении микроформатов нельзя использовать другие словари. Формат считается устаревшим.

Виды синтаксиса и их особенности

JSON-LD . один из самых распространенных форматов синтаксиса для разметки контента. Чаще всего применяется для разметки в рамках словаря Schema.org. Главное отличие этого типа синтаксиса от других — элементы помещаются не в код HTML-страницы, а в скриптовый тег — . Данные, размеченные JSON-LD, понимают и используют поисковые системы — Google в основном поиске, «Яндекс» — в «Яндекс Почте» и для вопросов и ответов на мобильной выдаче.

Пример кода с использованием JSON-LD для разметки статьи. Выбран тип разметки NewsArticle, среди указанных свойств — имя автора (author), дата публикации (datePublished)

RDFa — синтаксис, который чаще всего используется в словаре Open Graph для формирования привлекательных сниппетов для социальных сетей.

Микроданные (Microdata) — синтаксис, который изначально применялся со словарем Schema.org. В отличие от JSON-LD, с помощью микроданных нельзя добавить фрагмент кода в раздел . Вместо этого приходится помечать каждый HTML-элемент отдельно. Это неудобно, поэтому сейчас микроданные чаще используют для поисковых систем, которые не полностью поддерживают JSON-LD (например для «Яндекса»).

Пример кода с использованием микроданных для разметки контента о фильме «Аватар». Выбран тип разметки Movie, среди указанных свойств — имя режисера (name), дата его рождения (birthDate), жанр (genre) и ссылка на трейлер (trailer)

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

Пример кода с использованием микроформатов: к тегам добавляется атрибут class и элементы (помечены красным), которые указывают, какая информация представлена на странице

Распространенные типы микроразметки по Schema.org

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

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

Навигационная цепочка «хлебные крошки»

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

Пример навигационной цепочки на сайте «М.Видео»

Для разметки «хлебных крошек» используется микроразметка типа BreadcrumbList по словарю Schema.Org.

Микроразметка на странице «Контакты»

Для разметки контактной информации — адресов, телефонов и т. д. — используются типы разметки Organization и Place .

Размеченные таким образом данные отображаются в различных сервисах. Например, «Яндекс» показывает извлеченные контактные данные в поиске и на Картах

Микроразметка карточек товаров

Чтобы в выдаче показывались структурированные данные с ценой и описанием товара, необходимо корректно разметить нужные блоки. Товар размечается с помощью разметки Product и должен содержать свойство Offer (для одного предложения) либо AggregateOffer (для списка предложений).

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

Микроразметка статей

Для разметки статей используются следующие атрибуты структурированных данных типа Article :

• author помогает поисковым роботам найти информацию об авторе материала;
• datePublished указывает поисковым системам, когда статья была опубликована;
• headline показывает роботам, что в этом месте кода размещен заголовок статьи;
• image указывает на изображения, связанные с текстом статьи.

Пример кода страницы со структурированными данными категории Article

Микроразметка отзывов

Отзывы на сайте тоже можно разметить с помощью атрибутов и тегов типа Review . Для этого используют следующие свойства:

• author — имя автора;
• reviewRating — оценка, которая содержится в отзыве;
• datePublished — дата публикации отзыва;
• reviewBody — текст отзыва.

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

Микроразметка видео

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

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

Необходимые свойства разметки для словаря Schema.Org, без которых ролики не будут проиндексированы, указаны в «Яндекс Справке» .

Микроразметка фото и картинок

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

Необходимо задать поля:

• contentUrl — ссылка на изображение;
• name — название картинки;
• description — описание изображения;
• height и width — высота и ширина картинки.

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

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

Для кулинарных сайтов в Schema.Org существует своя микроразметка типа Recipe . С ее помощью можно разметить рецепты, указав название блюда (строка name), ингредиенты и их объем (recipeIngredient), инструкцию по приготовлению (recipeInstructions).

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

Микроразметка HowTo и Q&A

Данные типы разметки позволяют поисковым роботам находить блоки с вопросами и ответами на сайте и пошаговые инструкции. Чтобы поисковая система сформировала сниппет для блока Q&A, необходимо использовать на соответствующих страницах типы разметки Question и Answer .

Так выглядит сниппет страницы с разметкой Q&A

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

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

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

• Валидатор микроразметки в «Яндекс Вебмастере».
• Проверка расширенных результатов в Google.
• Валидатор разметки Schema.org.

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

HTML тег

Тег используется для выделения контактной информации владельца сайта либо автора статьи. В качестве контактной информации для обратной связи может быть указан адрес, телефон, e-mail, ссылка на сайт и т.д.

Синтаксис

Тег

html> html> head> title>Заголовок окна веб-страницы title> head> body> address> Автор: Команда W3docsbr /> a href="mailto:[email protected]">Связаться с автором a> address> body> html>

html> html> head> style> .header < height: 40px; padding: 20px 20px 0; background: #e1e1e1; > .main-content < height: 60vh; padding: 20px; > footer < padding: 10px 20px; background: #666666; color: white; > a < color: #00aaff; > style> head> body> div class="header">Заголовок / Меню div> div class="main-content"> h1>Основной контент h1> p>Это какой-то параграф p> div> footer style="display:flex; justify-content:space-between; align-items:flex-end;"> p style="margin:0;">Компания © W3docs. Все права защищены. p> address> 3-я улица, квартира 43br /> Нью-Йорк, США address> footer> body> html>