Headless AEM Installation Guide - OnPrem

Modified on Tue, 14 Feb 2023 at 11:50 AM

Headless AEM is a Adobe Experience Manager setup in which the frontend is decoupled from the backend. A site with React or Angular in the frontend is classified as Headless AEM.

To see schema markup on the website or to be eligible for rich results, this guide assumes that relevant schema markup has been created and published both on the Editor and on the Highlighter in Schema App software.

Step 1: On Schema App

Note: A project on Schema App consists of a group of URLs. Every site on AEM should have a configuration that is linked to a project on Schema App i.e. one configuration for every AEM site.

  1. Login to Schema App, Click on ‘Home’. If you have an existing project, Click the Edit icon to edit the Deployment option. Please select “Adobe Experience Manager”. If you do not have an existing project, a project will have to be created before proceeding with next steps.

  2.  Enter the base URL / Domain of your AEM website.

  3. Click ‘OK’ to save the selection.
  4. On the side menu bar. Click ‘Integrations’.
  5. Under Deployment options, Select ‘Adobe Experience Manager’. 
  6. Copy the Account ID. These will be required for registration on AEM.

Step 2: Download and Install Schema App AEM Connector 

  1.  Download the connector from Adobe Marketplace Or via a link provided by Schema App and install using AEM Package Manager tool on all AEM instances.
  2. Once file is successfully download, login to your AEM environment.
  3. Navigate to Tools --> Deployment --> Packages.
  4. Then /crx/packmgr/index.jsp
  5. Click on 'Upload Package'

    Graphical user interface, text, application, email 
Description automatically generated

  6. Locate Schema App connector package and select 'Force Upload'. click 'OK'

  7. Install the Package. If installation is successful, package details will be displayed.

    Graphical user interface, text, application, email 
Description automatically generated

    Step 3: Schema App Connector Configuration 

        1. Login to Adobe Experience Manager. (if not logged in).

        2. Click on ‘Tools’ in the right menu bar.

      3. Click on Cloud Services and then Click on " Schema App Connector" tile.

    4. Click on ‘Create’ button on the top right.

    5. In the dialog box, Enter the Account ID, API key & Website URL (publisher). Also determine whether you want to deploy with JavaScript or the Crawler, this should match your Highlighter deployment in Schema App. When finished click 'Connect to Schema App' to register the site.

    6. You should get a message "You site has been registered with Schema App'.
        Click 'Save' in top right corner of the page.

   7. New config should be listed on the left of the screen.

The next steps guide you on how to configure the Schema App Configuration to the required pages.

  8. Go back to the Home page of your Adobe Experience Manager.

  9. Click on ‘Sites’.

 10. Select the site that you want the configuration earlier created to apply to.

Graphical user interface, application Description automatically generated

 11. On the top menu bar, click ‘Properties’.

 12. Then Click on ‘Cloud Services’ tab

Graphical user interface, text, application, email Description automatically generated

  13. Select the appropriate configuration created earlier in the drop down.

   14. Click Save and Close.

Step 4: Required Frontend configuration.

  1. Add logic to read below data from the AEM page model.json under the “schemaapp” JSON block.

    1. accountId

    2. siteURL

    3. deploymentMethod

    4. entity

  2. Check If deploymentMethod attribute value is “JavaScript”, then in your front-end code you have to add below HTML snippet: (you need to paste accountId attribute in the below script) If you are deploying using the Crawler this is not required.

    1. <script>window.schema_highlighter={output: false, accountId: "<paste accountId attribute value here >”}</script>

    2. <script async="" src="https://cdn.schemaapp.com/javascript/highlight.js"></script>

  3. Read “siteURL” attribute value in your front-end code and add below HTML snippet:

    1. <meta data-page-path="< paste siteURL attribute value here>">

  4. Read “entity” attribute value in your front-end code and add below HTML snippet:

    1. <script type="application/ld+json">< paste entity attribute value here> </script>

Step 5: Verification of Data for Headless Implementaion.

To confirm data is updated correctly, enter the below in a browser 
<page URL>.model.json e.g. https://weretail.com.model.json

Browser will return the json, search for 'schemaapp' and It should include the following data:

  • accountId

  • siteURL

  • deploymentMethod

  • entity

Step 6: Confirming Meta data added to the Page. 
To confirm a meta data-page-path element is in the head element
- Open any page of the website.
- Right click, then select ‘Inspect’
- Search with ‘meta data-page' Schema App’, you should see the meta data path and the URL. 


Step 7 : Confirming schema markup deployment on the website.
To confirm the integration and deployment is complete, allow for 5 minutes.
- Open any page of the website.
- Right click, then select ‘Inspect’
- Search with ‘Schema App’ and 'JSON-LD, you should see the required scripts with Account ID. And schema markup, if any schema markup has been created for the site.

Permissions & Services 

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








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


  To create and read schemaapp config






API registration.


Receives requests from the dispatcher.


Makes calls to the Schema App CDN.

Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select atleast one of the reasons

Feedback sent

We appreciate your effort and will try to fix the article