How To: Add and Configure the Schema Filter to Remove Unwanted Markup

Modified on Mon, 24 Jun at 10:09 AM

This support article briefly outlines the process of adding and configuring the Schema Filter created by Schema App. You can find the code and additional instructions on the GitHub overview page.

The Schema Filter is designed to remove unwanted or problematic markup coming from a source that cannot be disabled or easily removed. SchemaFilter can remove all major formats of schema markup including, Microdata, JSON-LD, and RDFa.

How To: Add and Configure the Schema Filter

Step 1: Add the following line of code to your website

Start by adding the SchemaFilter to your site with the following script tag.

<script src="https://cdn.schemaapp.com/javascript/schemaFilter.min.js"></script>

Note: there will both other lines of script to add depending on the format and Types you are looking to remove. However, this must come before

Step 2: Identify the markup to be removed

Review the markup you want to remove to determine the format and Type of content you're looking to remove.

Microdata (most common)

Microdata uses attributes in the HTML like itemscope, itemtype, and itemprop to produce markup if you seeing attributes in your HTML that contain those attributes like the example below you have microdata.

<div itemscope itemtype="https://schema.org/SportsTeam">
    <span itemprop="name">San Francisco 49ers</span>
    <div itemprop="member" itemscope itemtype="https://schema.org/OrganizationRole">
        <div itemprop="member" itemscope itemtype="https://schema.org/Person">
            <span itemprop="name">Joe Montana</span>
        </div>
        <span itemprop="startDate">1979</span>
        <span itemprop="endDate">1992</span>
        <span itemprop="roleName">Quarterback</span>
    </div>
</div>

Use the following lines of code to remove microdata. The first tag would remove all RDFa markup, the second tag would remove only Organization Type RDFa markup.

<!-- Remove all classes of microdata. -->
<script>SchemaFilter.remove();</script>

<!-- Remove all Organizations of RDFa -->
<script>SchemaFilter.remove(['Organization']);</script>

JSON-LD

JSON-LD is contained within script tags of type application/ld+json you will be able to spot them by looking for those type of scripts. One must be careful in removing JSON-LD with the filter because you can remove markup produced by Schema App since JSON-LD is the type of markup produced. Make sure to specify the exact schema types you want to remove, and that they are different from what you are deploying in Schema App. If the types are the same it is suggested that you contact your theme/plugin developer for instructions on removing that markup.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "SportsTeam",
  "name": "San Francisco 49ers",
  "member": {
    "@type": "OrganizationRole",
    "member": {
      "@type": "Person",
      "name": "Joe Montana"
    },
    "startDate": "1979",
    "endDate": "1992",
    "roleName": "Quarterback"
  }
}
</script>

You can remove JSON-LD using the Schema Filter with the following examples. We do not recommend you remove all JSON-LD if you are going to deploying markup using a Schema App integration.

<!-- This will remove LocalBusiness, Organization, and WebSite classes in a JSON-LD format. --> 
<script>SchemaFilter.remove(['LocalBusiness', 'Organization', 'WebSite'], 'json-ld');</script>

RDFa

RDFa can be identified by looking for property and typeof attributes in your HTML. If you are seeing these properties (example below) you will want to remove RDFa using the filter.

<div vocab="https://schema.org/" typeof="SportsTeam">
    <span property="name">San Francisco 49ers</span>
    <div property="member" typeof="OrganizationRole">
        <div property="member" typeof="https://schema.org/Person">
            <span property="name">Joe Montana</span>
        </div>
        <span property="startDate">1979</span>
        <span property="endDate">1992</span>
        <span property="roleName">Quarterback</span>
    </div>
</div>

You can remove RDFa using the following snippet for the SchemaFilter. The first tag would remove all RDFa markup, the second tag would remove only Organization Type RDFa markup.

<!-- Remove all classes of rdfa (notice the empty array). -->
<script>SchemaFilter.remove([],'rdfa');</script>

<!-- Remove all Organizations of RDFa -->
<script>SchemaFilter.remove(['Organization'], 'rdfa');</script>

Note: Recommended solution is to have the markup removed. However, in scenarios where changes could take a long time, using above procedure is a good option.