User guide

To incorporate semantic data from external resources into the web page content when it is loaded, the web developer should include some ready-made scripts and add specific markup to the resources hyperlinks.

There are several markup options and start scripts. Different markups and scripts are used to include metadata and data of Schema.org types. There are also several options for incorporating data of Schema.org types: simple, but with limited data formatting capabilities, and more complex but more flexible.

The scripts used in the tool are designed as jQuery plugins. They can be downloaded or called directly from our site.

  Download plugins 
For the plugin to work, you need to include the jQuery library and the file that contains the plugin. The plugin call can be added to the end of the <body> element or to the jQuery function $(document).ready().

Incorporating data of Schema.org types

Data is extracted from microdata and JSON-LD markups. The list of Schema.org types from which data must be extracted is passed as a parameter to the called jQuery plugin. Data is extracted from the first of these types that meeting on the external web page.

There are markups and scripts for extracting from microdata, from JSON-LD and without specifying the type of semantic markup. If the type of semantic markup is not specified, then the specified Schema.org types are first searched in the microdata, and if none of them are found in the microdata, then in the JSON-LD markup.

Including all properties

In this case, each Schema.org property is added to a separate <span> element with itemprop attribute equal to the name of the property. The web page developer determines which of the properties are visible to the user, and in what format, using CSS. Such an insert requires minimal HTML markup.

Using <span> tags is not suitable for all tasks. If you need to add images or if you cannot use CSS to achieve the desired appearance of the data, you can use more complex markup to insert particular properties.

from any markup

In this case, HTML element that should contain the extracted data must have class attribute with import-struct value, and the resource hyperlink must have class attribute with struct-url value, as in the sample:

<li class="import-struct">
    <a class="struct-url" href="http://keldysh.ru/" >KIAM RAS</a>
</li>

The data is loaded by the stampRefStruct plugin defined in the stamp-struct.js file. When called, an object in JSON format, with two properties apiMultiUri and import_schema, is passed to it. Property apiMultiUri contains REST API request URL. Property import_schema contains one or more types from the Schema.org dictionary, separated by commas. You can use the REST API of StructScraper site:

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

The sample below contains a call to the plugin for loading organizations data.

<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>

from microdata

In this case, HTML element that should contain the extracted data must have class attribute with import-micro value, and the resource hyperlink must have class attribute with micro-url value, as in the sample:

<li class="import-micro">
    <a class="micro-url" href="http://keldysh.ru/" >KIAM RAS</a>
</li>

The data is loaded by the stampRefMicro plugin defined in the stamp-micro.js file. When called, an object in JSON format, with two properties apiMultiUri and import_schema, is passed to it. Property apiMultiUri contains REST API request URL. Property import_schema contains one or more types from the Schema.org dictionary, separated by commas. You can use the REST API of StructScraper site:

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

The sample below contains a call to the plugin for loading organizations data.

<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).stampRefStruct({
            apiMultiUri: 'https://struct-scraper.keldysh.ru/api/micro/multi-uri',
            import_schema: "Organization, LocalBusiness, Store"
        });
    });
</script>

from JSON-LD

In this case, HTML element that should contain the extracted data must have class attribute with import-jsonld value, and the resource hyperlink must have class attribute with jsonld-url value, as in the sample:

<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>

The data is loaded by the stampRefJsonld plugin defined in the stamp-jsonld.js file. When called, an object in JSON format, with two properties apiMultiUri and import_schema, is passed to it. Property apiMultiUri contains REST API request URL. Property import_schema contains one or more types from the Schema.org dictionary, separated by commas. You can use the REST API of StructScraper site:

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

The sample below contains a call to the plugin for loading articles information.

<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: "ScholarlyArticle, Article"
        });
    });
</script>

Including particular properties

In this case, in addition to the import-struct and struct-url classes, which indicate which tag and from which resource the data should be added, itemprop attributes are used. itemprop attributes should be affixed to those HTML elements in which properties of the Schema.org type should be added. They should contain the names of these properties, as in the sample:

<div class="import-struct">
    <img itemprop="image" data-unique="true" alt="Photo">
    <h4>Potato Leek Soup</h4>
    <h5>Ingredients</h5>
    <ul>
        <li itemprop="recipeIngredient"></li>
    </ul>
    <a  class="struct-url" href="https://www.onceuponachef.com/recipes/potato-leek-soup.html">Learn more</a>
</div>

The data is loaded by the fillRefStruct plugin defined in the fill-struct.js file. When called, an object in JSON format, with two properties apiMultiUri and import_schema, is passed to it. Property apiMultiUri contains REST API request URL. Property import_schema contains one or more types from the Schema.org dictionary, separated by commas. You can use the REST API of StructScraper site:

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

The sample below contains a call to the plugin for loading recipes.

<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>

Incorporating metadata

Metadata is loaded by stampRefMeta plugin defined in the stamp-ref-meta.js file. For the plugin can add metadata to hyperlink, class attribute of the HTML element containing the hyperlink must include rsrc value, the hyperlink itself must have rsrc-ref value in class attribute, and the HTML elements into which the metadata should be written must have class attribute with rsrc-<name> value where <name> is a name for metadata. The metadata name should be mapped to data type, and list of names used to determine from which tags or properties to retrieve data. This mapping is written to an object with properties name, type, metas. An array of such objects containing all metadata names is passed in the class_metas property to the stampRefMeta plugin. Below are samples of markup and plugin call for such markup.

<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>

In this sample title of external resource is added to element with rsrc-title class, modification date is added to element with rsrc-modified class, and description is added to element with rsrc-description class.