Headless AEM Installation Guide

Modified on Mon, 6 May at 12:34 PM

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.

This guide assumes that relevant schema markup has been created and published using either the Editor or the Highlighter within Schema App.

Step 1 Installing the Connector

Follow the instructions here for installation and once those steps are completed return here.

Step 2: Required Frontend configuration.

Schema App injects content into the model.json within the :items object. It can come in two forms, when a page has JSON-LD to deploy and when it does not. Schema App recommends all elements be created within the <head> tag. Below is an example that will occur when there is not markup avaiable for that page. Each model.json should have at least the following within the schemaapp object.

{
":items": {
        "root": {},
        "cq:featuredimage": {},
        "schemaapp": {
            ":type": "schemaApp/components/content/entitydata",
            "siteURL": "https://example-corp.adobeaemcloud.com/content/schemaapp/en/article4/sample-article-41"
        }
    }
}

The siteURL is what allows Schema App to identify the URL of the current webpage. This value needs to be added as a meta tag with a data-page-path attribute that contains the value of siteURL. This is used for the Crawler or the highlight.js to build markup using the internal page paths. This is done so the connector is not impacted by vanity urls or URL rewrite rules that may exist outside of the connectors context.

<meta data-page-path="[siteURL Value]">

Below is a complete example using the siteURL from the schemaapp object:

<meta data-page-path="https://example-corp.adobeaemcloud.com/content/schemaapp/en/article4/sample-article-41">

When there is markup available, the object includes more information, in this case you still MUST include the meta tag as above. Additionally, create a <script> tag of type application/ld+json and include the value of the entity key. This script is what will provide the markup to webcrawlers. See the example below.

{
":items": {
        "root": {},
        "cq:featuredimage": {},
        "schemaapp": {
            ":type": "schemaApp/components/content/entitydata",
            "accountId": "http://schemaapp.com/db/ExampleCorp",
            "siteURL": "https://example-corp.adobeaemcloud.com/content/schemaapp/en/article",
            "eTagJavascript": "\"27d45761bc485c97d9c0cf2b68d7f13e\"",
            "eTag": "\"18d7ee31daf4dee3f8e7483456c70d6f\"",
            "deploymentMethod": "crawler",
            "sourceHeader": "AlternateUrlOfHighlightCrawl:http://schemaapp.com/resources/Company/ExampleCorp/Template20220719163707",
            "entity": "{\"archivedAt\":\"New Fixed Property\",\"identifier\":{\"@type\":\"PropertyValue\",\"name\":\"InternalUrl\",\"@id\":\"https://example-corp.adobeaemcloud.com/content/schemaapp/en/article.html#Article_PropertyValue\",\"value\":\"https://example-corp.adobeaemcloud.com/content/schemaapp/en/article\"},\"@type\":\"Article\",\"about\":{\"disambiguatingDescription\":\"test data\",\"@type\":\"Thing\",\"name\":\"article2\",\"description\":\"test data\",\"@id\":\"https://example-corp.adobeaemcloud.com/content/schemaapp/en/article\"},\"name\":\"Article\",\"description\":\"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ac pulvinar erat. In nunc orci, tincidunt a enim eu, malesuada pharetra felis. Suspendisse ut lectus id lorem vulputate scelerisque aliquam vel arcu. Aliquam elementum purus ut ornare aliquam. Phasellus rhoncus auctor velit. Etiam sollicitudin enim in tincidunt dignissim. In lacinia vulputate varius. Curabitur et accumsan justo. Pellentesque tristique malesuada risus vitae faucibus. Integer commodo dui nisl, sit amet viverra velit dapibus a.\",\"comment\":\"Updated 12:52\",\"@id\":\"https://publish-p62138-e507792.adobeaemcloud.com/content/schemaapp/en/article.html#Article\",\"accessMode\":\"Highlighter JavaScript\",\"@context\":\"http://schema.org\",\"headline\":\"Subtitle\",\"url\":\"https://example-corp.adobeaemcloud.com/content/schemaapp/en/article.html\"}"
        }
    }
}

Ensure to decode the JSON-LD (JSON-LD is just an extension to JSON so any normal JSON decode will work here). NOTE: scripts of type application/ld+json do not execute like a traditional script, the blocks are treated as data so they cannot manpulate your page. You should also add a data-source attribute to the tag with the "sourceHeader" as the value. The data-source attribute allows the Schema Monitoring service to more accurately verify deployment. The final object should look like the one below with the placeholders containing the real values of the object.

<script type="application/ld+json" data-source="[sourceHeader]">
[decoded entity]
</script>

Finally here is an example using the data in the schemaapp object.

<script type="application/ld+json" data-source="AlternateUrlOfHighlightCrawl:http://schemaapp.com/resources/Company/ExampleCorp/Template20220719163707">
{
    "archivedAt": "New Fixed Property",
    "identifier": {
        "@type": "PropertyValue",
        "name": "InternalUrl",
        "@id": "https://example-corp.adobeaemcloud.com/content/schemaapp/en/article.html#Article_PropertyValue",
        "value": "https://example-corp.adobeaemcloud.com/content/schemaapp/en/article"
    },
    "@type": "Article",
    "about": {
        "disambiguatingDescription": "test data",
        "@type": "Thing",
        "name": "article2",
        "description": "test data",
        "@id": "https://example-corp.adobeaemcloud.com/content/schemaapp/en/article"
    },
    "name": "Article",
    "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ac pulvinar erat. In nunc orci, tincidunt a enim eu, malesuada pharetra felis. Suspendisse ut lectus id lorem vulputate scelerisque aliquam vel arcu. Aliquam elementum purus ut ornare aliquam. Phasellus rhoncus auctor velit. Etiam sollicitudin enim in tincidunt dignissim. In lacinia vulputate varius. Curabitur et accumsan justo. Pellentesque tristique malesuada risus vitae faucibus. Integer commodo dui nisl, sit amet viverra velit dapibus a.",
    "comment": "Updated 12:52",
    "@id": "https://publish-p62138-e507792.adobeaemcloud.com/content/schemaapp/en/article.html#Article",
    "accessMode": "Highlighter JavaScript",
    "@context": "http://schema.org",
    "headline": "Subtitle",
    "url": "https://example-corp.adobeaemcloud.com/content/schemaapp/en/article.html"
}
</script>

(Optional) Step 3: Add Highlight.js

Some clients will want to use highlight.js instead of the crawler to deploy the markup. This is not required and should NOT be included if using the Schema App Crawler (most common) to deploy.

For highlight.js you will get the tags you need from your Schema App. First, make sure your project's deployment method is set to JavaScript Rendering.

Then, scroll down in the Deployment Settings, and copy the necessary scripts. Insert these scripts verbatim into your <head> tag.

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.

If you require further assistance with your Headless AEM integration, contact us at [email protected].