TABLE OF CONTENTS


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. This setups the website and integration information within Schema App. If you chose to use the JavaScript. AEM will also inject highlight.js into your pages when add the configuration to your site. For Crawler once the configuration is added to your pages you can start a crawl to begin deployment. 


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

Once the registration is all set up, the process of inserting and updating JSON-LD can now proceed. 



[Fig. 2] JSON-LD Injection Flow

  1.  AEM Scheduler runs on a pre determined schedule to make calls to Schema App API data for each page.  

  2.  Once a response is received from the DATA API call, if it's not blank we will find that page in AEM, and create 'schemaapp' node under the page node and set the JSON-LD, if node already exists then the JSON-LD is updated.

  3. After updating JSON-LD in the page node, we will make call to AEM dispatcher to clear the cache for that particular page.

  4. Once the user hits the website URL e.g. page1, request first comes to dispatcher as we have already cleared the cache for page1, and redirects to the publisher. In the publisher, a logic checks if schema app node exists under the page node, reads JSON-LD and sets it to the page. 



Headless AEM

For decoupled AEM, when a user requests a page, the request will be served by the front end (React JS or Angular JS), AEM frontend will call the page.model.json API and fetch the page content as JSON.
When response is received from the API, scripts are created and added to the HTML header section. Subsequent API calls to the json API generates and inserts required markup on the page.


Sample script.

%3CmxGraphModel%3E%3Croot%3E%3CmxCell%20id%3D%220%22%2F%3E%3CmxCell%20id%3D%221%22%20parent%3D%220%22%2F%3E%3CmxCell%20id%3D%222%22%20value%3D%22%26lt%3Bfont%20face%3D%26quot%3BComic%20Sans%20MS%26quot%3B%20style%3D%26quot%3Bfont-size%3A%2012px%3B%26quot%3B%26gt%3B%26lt%3Bspan%20style%3D%26quot%3Bbackground-color%3A%20initial%3B%26quot%3B%26gt%3B%26amp%3Blt%3Bscript%26amp%3Bgt%3Bwindow.schema_highlighter%3D%7Boutput%3A%20false%2C%20accountId%3A%20%26quot%3B%26amp%3Blt%3Bpaste%20accountId%20attribute%20value%20here%20%26amp%3Bgt%3B%E2%80%9D%7D%26amp%3Blt%3B%2Fscript%26amp%3Bgt%3B%26lt%3B%2Fspan%26gt%3B%26lt%3B%2Ffont%26gt%3B%26lt%3Bdiv%20style%3D%26quot%3B%26quot%3B%26gt%3B%26lt%3Bfont%20face%3D%26quot%3BComic%20Sans%20MS%26quot%3B%20style%3D%26quot%3Bfont-size%3A%2012px%3B%26quot%3B%26gt%3B%26amp%3Blt%3Bscript%20async%3D%26quot%3B%26quot%3B%20src%3D%26quot%3Bhttps%3A%2F%2Fcdn.schemaapp.com%2Fjavascript%2Fhighlight.js%26quot%3B%26amp%3Bgt%3B%26amp%3Blt%3B%2Fscript%26amp%3Bgt%3B%26amp%3Bnbsp%3B%26lt%3B%2Ffont%26gt%3B%26lt%3B%2Fdiv%26gt%3B%26lt%3Bdiv%20style%3D%26quot%3B%26quot%3B%26gt%3B%26lt%3Bfont%20face%3D%26quot%3BComic%20Sans%20MS%26quot%3B%20style%3D%26quot%3Bfont-size%3A%2012px%3B%26quot%3B%26gt%3B%26amp%3Blt%3Bmeta%20data-page-path%3D%26quot%3B%26amp%3Blt%3B%20paste%20siteURL%20attribute%20value%20here%26amp%3Bgt%3B%26quot%3B%26amp%3Bgt%3B%26lt%3B%2Ffont%26gt%3B%26lt%3B%2Fdiv%26gt%3B%26lt%3Bdiv%20style%3D%26quot%3B%26quot%3B%26gt%3B%26lt%3Bspan%20style%3D%26quot%3Bbackground-color%3A%20initial%3B%26quot%3B%26gt%3B%26lt%3Bfont%20style%3D%26quot%3Bfont-size%3A%2012px%3B%26quot%3B%20face%3D%26quot%3BComic%20Sans%20MS%26quot%3B%26gt%3B%26amp%3Blt%3Bscript%20type%3D%26quot%3Bapplication%2Fld%2Bjson%26quot%3B%26amp%3Bgt%3B%26amp%3Blt%3B%20paste%20entity%20attribute%20value%20here%26amp%3Bgt%3B%20%26amp%3Blt%3B%2Fscript%26amp%3Bgt%3B%26lt%3B%2Ffont%26gt%3B%26lt%3B%2Fspan%26gt%3B%26lt%3B%2Fdiv%26gt%3B%22%20style%3D%22whiteSpace%3Dwrap%3Bhtml%3D1%3BfontFamily%3DVerdana%3BfontSize%3D14%3BstrokeColor%3D%23999999%3BfillColor%3D%23CCCCCC%3Balign%3Dleft%3B%22%20vertex%3D%221%22%20parent%3D%221%22%3E%3CmxGeometry%20x%3D%2220%22%20y%3D%22800%22%20width%3D%22650%22%20height%3D%2280%22%20as%3D%22geometry%22%2F%3E%3C%2FmxCell%3E%3C%2Froot%3E%3C%2FmxGraphModel%3
3. Permissions & Services 

Below table highlights the permissions and services that will be required for the Plugin to work efficiently.    

 

Path

Read

Modify

Create

Notes

/content*

To create schemaapp JSON-LD data node under page content node.

/etc/cloudservices* 

  To create and read schemaapp config

    

 

Function

Role

Author

API registration.

Publisher

Receives requests from the dispatcher.

Scheduler

Makes calls to the Schema App CDN.


4. 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 , Video: How AEM works