Headless AEM Installation Guide

Modified on Thu, 24 Aug 2023 at 09:51 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 Crawler (most common) to deploy. For highlight.js you will get the tags you need from Integrations -> JavaScript Copy the value for "JavaScript + Webhook Hybrid". 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.




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