1. Introduction

Adobe Experience Manager (AEM), is a comprehensive content management solution for building websites, mobile apps and forms. And it makes it easy to manage marketing content and assets.

Schema App connector for AEM was created to serve a growing subset of our clients who host their websites on AEM. The connector allows our clients to get JSON-LD server side which increases schema markup deliverability as well as reduces client page rendering time. Clients are able to deploy up to date markup, at scale to their websites thereby making the site understandable to search engines making your content appear more prominently in SERPs. With an ultimate goal of being eligible for rich results. 

2. Technical Design
The Schema App connector for AEM locally caches your Schema App markup so it can be deployed with the rest of your content when the page is rendered. This provides greater assurance your markup will load in time for Search engines. 

The Integration

The first step in the process is The AEM connector is installed and registered with Schema App, setting up a webhook integration. On integration completion, the AEM connector injects a Schema App JavaScript library (highlight.js) into all pages previously selected on AEM. 

        [Fig. 1] Initial Setup Flow

  1. After Plug-in installation, the AEM author logs into the AEM and creates a new configuration and adds the details that they have copied from the Schema App.

  1. Submit the details to Schema App to Register the AEM URL.

  1. Schema App will return a Success response if API key, Account details and URL are correct. 

  1. AEM Author will add newly created configuration to the respective sites in which they want to enable the plugin.

  1. Publish the AEM page, where we have configured the plug-in configuration.

The Schema App AEM Connector is now ready to receive Schema Markup web-hooks.

JSON-LD Injection

On page load, highlight.js generates markup and pushes that to Schema App’s datastore.

As markup is produced, events are triggered at Schema App which will produce a web-hook to notify the AEM connector that markup needs to be created/updated/deleted inside the source AEM server.

The AEM connector receives the web-hook request and performs the corresponding action to update the markup in the AEM cache. On page load, the AEM connector inserts the latest markup (alongside the highlight.js script) into the <head> element of the page.

This process repeats whenever highlight.js generates updated or new markup that is different from what is in the cache.

[Fig. 2] JSON-LD Injection Flow

  1. Schema App connector for AEM injects highlight.js into <head> of all relevant web pages.  (Specific Domains and URLs get highlight.js is configured in the connector configuration page.)

  2. When a user renders the page, highlight.js generates JSON-LD and posts that back to the Schema App central store.

  3. When new or updated content arrives, Schema App notifies Web-hooks.  (Note, Web-hooks are only triggered when the content is new, or modified. We do not send duplicates onward.)

  4. Registered web-hooks are validated when receiving new or modified JSON-LD as part of the payload.

  5. The local AEM cache is updated with the new / modified JSON-LD of the page in question.

  6. Any dispatcher cache is cleared for that page.

  7. The next user loads the page with the latest JSON-LD included.

3. Security Features

  • Source of JSON-LD is validated by Schema App connector to make sure that malicious scripts or JSON-LD can not be injected into a website.

  • Schema App optimizes content visible on the web, primarily public data. Script is not able to change website content  Schema App Privacy Policy.

  • Validation of metadata and content of JSON-LD

    For more, see  Data Flow and Security Overview