Add JSON-LD schema markup to a page

Avatar

Avatar

gautamg99016783

Avatar

gautamg99016783

gautamg99016783

03-01-2020

We have a lot of custom components that can be added on to the page. If the page has a Breadcrumb or a Video component, we need to add the JSON-LD structured data to the page. 

 

https://developers.google.com/search/docs/data-types/breadcrumb

https://developers.google.com/search/docs/data-types/video

 

One approach is to do it on the client side using JS where we can go through the html and look for any breadcrumb or video component and add a <script> tag to the page for each. But I was hoping to get it done in the backend since we have all the details there. So as soon as the user drops a breadcrumb component and saves it while authoring the page, we should be able to fetch the details from component and add the structured data to the bottom of the page. Which means if I were to "view as published" the page, and i do View Source I will see the structured data at the bottom.

 

How can we do this in AEM? Are there any best practices?

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar

Jörg_Hoh

Employee

Total Posts

3.0K

Likes

910

Correct Answer

1.0K

Avatar

Jörg_Hoh

Employee

Total Posts

3.0K

Likes

910

Correct Answer

1.0K
Jörg_Hoh
Employee

04-01-2020

The least intrusive way is probably to augment the page component in a way, that it scans the complete content tree of the page, if there is one of the video or breadcrumb components (do not use a query, but rather just walk the tree), and then insert the required markup to the page.

 

Jörg

Answers (0)