Оформление веб‑страницы
Вставка типов Schema.org
со всеми свойствами
из всех микроразметок
из микроданных
из JSON‑LD
с отдельными свойствами
Вставка метаданных

Оформление веб‑страницы

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

Имеется несколько вариантов разметки и стартовых скриптов. Разные разметки и скрипты используются для включения в контент веб‑страницы метаданных и данных типов Schema.org. Для включения в контент данных типов Schema.org также имеется несколько вариантов: простые, но с ограниченными возможностями форматирования данных, и более сложный, но более гибкий.

Скрипты, используемые в инструменте, оформлены в виде плагинов jQuery. Их можно скачать или вызывать непосредственно с сайта. 

  Скачать плагины
Для работы плагина необходимо подключить библиотеку jQuery, а также добавить ссылку на файл, в котором содержится плагин. Вызов плагина можно добавить в конец тела <body> или в jQuery-функцию $(document).ready().

Вставка данных из типов Schema.org

Данные извлекаются из семантических разметок "микроданные" и JSON-LD. Вызываемому jQuery-плагину передается в качестве параметра список типов Schema.org, из которых должны быть извлечены данные. Данные берутся из первого встреченного на HTML-странице типа, входящего в список.

Есть разметки и скрипты для извлечения из "микроданных", из JSON-LD и без указания вида семантической разметки. Если вид семантической разметки не указывается, то заданные типы Schema.org сначала ищутся в "микроданных", а если ни одного из указанных типов в "микроданных" не нашлось, то в разметке JSON-LD.

Вставка всех свойств

В этом случае каждое свойство типа будет добавлено в отдельный элемент <span> с атрибутом itemprop, соответсвующим названию свойства. Какие из свойств будут видны пользователю и в каком виде, разработчик веб‑страницы определяет при помощи CSS. Для такой вставки нужна минимальная HTML-разметка.

Включение всех свойств в теги <span> подходит не для всех задач. Если необходимо добавить изображения или при помощи CSS не удается добиться желаемого внешнего вида данных, можно использовать более сложную разметку для вставки отдельных свойств.

из всех микроразметок

В этом случае html-элемент, в который должны быть добавлены данные, должен иметь атрибут class со значением import-struct, а гиперссылка – атрибут class со значением struct-url, как в примере: 

<li class="import-struct">
    <a class="struct-url" href="http://keldysh.ru/" >ИПМ им.М.В.Келдыша РАН</a>
</li>

Загрузку данных осуществляет плагин stampRefStruct, определенный в файле stamp-struct.js. При вызове ему передается объект в формате JSON со свойствами apiMultiUri, содержащем веб‑адрес запроса REST API, и import_schema, содержащем один или несколько типов из Schema.org через запятую. Можно использовать REST API сайта StructScraper: 

https://struct-scraper.keldysh.ru/api/struct/multi-uri

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
<script src="https://struct-scraper.keldysh.ru/Scripts/stamp-struct.js"> </script>
<script type="text/javascript">
    $(document).ready(function () {
        $(document).stampRefStruct({
            apiMultiUri: 'https://struct-scraper.keldysh.ru/api/struct/multi-uri',
            import_schema: "Organization, LocalBusiness, Store"
        });
    });
</script>

из разметки "микроданные"

В этом случае html-элемент, в который должны быть добавлены данные, должен иметь атрибут class со значением import-micro, а гиперссылка – атрибут class со значением micro-url, как в примере: 

<li class="import-micro">
    <a class="micro-url" href="http://keldysh.ru/" >ИПМ им.М.В.Келдыша РАН</a>
</li>

Загрузку данных осуществляет плагин stampRefMicro, определенный в файле stamp-micro.js. При вызове ему передается объект в формате JSON со свойствами apiMultiUri, содержащем веб‑адрес запроса REST API, и import_schema, содержащем один или несколько типов из Schema.org через запятую. Можно использовать REST API сайта StructScraper: 

https://struct-scraper.keldysh.ru/api/micro/multi-uri

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
<script src="https://struct-scraper.keldysh.ru/Scripts/stamp-micro.js"> </script>
<script type="text/javascript">
    $(document).ready(function () {
        $(document).stampRefMicro({
            apiMultiUri: 'https://struct-scraper.keldysh.ru/api/micro/multi-uri',
            import_schema: "Organization, LocalBusiness, Store"
        });
    });
</script>

из разметки JSON-LD

Загрузку данных из формата JSON‑LD осуществляет плагин stampRefJsonld, определенный в файле stamp-jsonld.js. При вызове ему передается объект в формате JSON со свойствами apiMultiUri, содержащем веб-адрес запроса REST API 

https://struct-scraper.keldysh.ru/api/jsonld/multi-uri
, и import_schema, содержащем один или несколько типов из Schema.org.

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://struct-scraper.keldysh.ru/Scripts/moment-with-locales.min.js"></script> 
<script src="https://struct-scraper.keldysh.ru/Scripts/stamp-jsonld.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $(document).stampRefJsonld({
            apiMultiUri: 'https://struct-scraper.keldysh.ru//api/jsonld/multi-uri',
            import_schema: "Article"
        });
    });
</script>

Чтобы включить данные из внешнего ресурса, содержащиеся в нем в формате JSON‑LD, тег, в который должны быть добавлены данные, должен иметь атрибут class со значением import-jsonld, а атрибут class гиперссылки должен содержать класс jsonld-url, как в примере: 

<li class="import-jsonld">
    <a class="jsonld-url" href="http://www.imedpub.com/articles/deployment-of-softcomputing-for-system-computing-and-informatics.php?aid=22627" >Article</a>
</li>

Вставка отдельных свойств

В этом случае помимо классов import-struct и struct-url, указывающих в какой тег и из какого ресурса должны добавляться данные, используются атрибуты itemprop. Атрибуты itemprop должны проставляться у тех html-элементов, в которые должны быть добавлены свойства типа Schema.org. Они должны содержать названия этих свойств, как в примере: 

<div class="import-struct">
    <img itemprop="image" data-unique="true" alt="Фото">
    <h4>Суп с домашней лапшой</h4>
    <h5>Ингредиенты</h5>
    <ul>
        <li itemprop="recipeIngredient"></li>
    </ul>
    <a  class="struct-url" href="https://papinaeda.ru/244">Подробнее...</a>
</div>

Загрузку данных в этом случае осуществляет плагин fillRefStruct, определенный в файле fill-struct.js. Пример ниже содержит вызов плагина для загрузки кулинарных рецептов. 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
<script src="https://struct-scraper.keldysh.ru/Scripts/fill-struct.js"> </script>
<script type="text/javascript">
    $(document).ready(function () {
        $(document).fillRefStruct({
            apiMultiUri: 'https://struct-scraper.keldysh.ru/api/struct/multi-uri',
            import_schema: "Recipe"
        });
    });
</script>

Вставка метаданных

Загрузку метаданных осуществляет плагин stampRefMeta, определенный в файле stamp-ref-meta.js. Для того чтобы плагин stampRefMeta добавил к гиперссылке метаданные, атрибут class html-элемента, содержащего гиперссылку, должен включать класс rsrc, у самой гиперссылки должен быть класс rsrc-ref, а html-элементы, в которые будут записаны метаданные, должны иметь класс rsrc-<name>, где name – название для метаданных. С названием метаданных связывается тип данных и список названий, используемых для определения, из каких именно тегов или свойств должны извлекаться данные. Это соответствие записывается в объект со свойствами name , type , metas . Массив таких объектов, содержащий все названия метаданных, передается в свойстве class_metas плагину stampRefMeta. Ниже приведены примеры разметки и вызова плагина для такой разметки. 

<li class="rsrc">
    <a href="http://www.chu-rouen.fr/documed/eahilsantander.html">
        <h3 class="rsrc-title"></h3>
    </a>
    <a class="rsrc-ref" href="http://www.chu-rouen.fr/documed/eahilsantander.html">http://www.chu-rouen.fr/documed/eahilsantander.html </a>
    <br />
    <span class="rsrc-modified"></span>
    <span class="rsrc-description"></span>
</li>
<script>
    $(document).ready(function () {
        $(document).stampRefMeta({
            apiMultiUri: 'https://struct-scraper.keldysh.ru/api/metadata/multi-uri',
            class_metas: [
                {
                    name: "title",
                    type: "string",
                    metas: ["<Title>", "DC.Title", "Title", "og:title"]
                },
                {
                    name: "modified",
                    type: "date",
                    metas: ["DC.modified", "DC.Date.Modified", "dc:modified", "DCTERMS.Modified", "DateLastSaved", "ModDate", "DCTERMS.Created", "Created", "DateCreated", "CreationDate"]
                },
                {
                    name: "description",
                    type: "string",
                    metas: ["DC.Description", "description", "og:description", "Subject"]
                }
            ]
        });
    });
</script>

Заголовок добавляется в элемент с классом rsrc-title, дата модификации — в элемент с классом rsrc-modified, описание ресурса — в элемент с классом rsrc-description

Используя описанную разметку классами и соответствия, заданные в свойстве class_metas , плагин для каждой гиперссылки составляет список запрашиваемых тегов или свойств. Из данных, полученных для всех гиперссылок, формируется массив JSON-объектов и отправляется веб-службе. Получив ответ, плагин расставляет полученные данные в соответствии с разметкой классами. При этом, если получено несколько значений для метаданных, то берется первое по порядку в списке metas.