Expand my Community achievements bar.

Guidelines for the Responsible Use of Generative AI in the Experience Cloud Community.
SOLVED

Meta tags not populating using SSR (server side rendering)

Avatar

Level 2

Hi All,

Facing issue while using SSR approach to populate meta tags description,title, product name, brand name in AEM page.
This is AEM & react based SPA project using AEM as a cloud service.

In product page' properties we have
description = Order {productName} {brandName} more {l3categoryName}
Title = {productName}

 

Issue details :
--------------------
In view page source of product detail page og:title,og:description values are not updating dynamically.
As per the below details:
<meta itemprop="description" content="Order {productName} {brandName} more {l3categoryName} at online"/>
<meta name="og:title" content="{productName} | online"/>
<meta name="og:description" content="Order {productName} {brandName} more {l3categoryName} at online"/>
--------------------

Background:
We have used SSR approach and build the repo using archetype 28.
SSR was implemented using Adobe IO Runtime. The IO runtime was added to our Adode IO console and used its namespace and auth code to configure the remote renderer config in the project. Also added resource type to the body.html. The openwhisk is used to see the status of the deployed project.


Any suggestions about the above issue, please let me know.

 

Regards,
Neelesh

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Can you provide the detail on how your model.json is binded to the react.

index.js is the entrypoint of the SPA. ModelManager is provided by the AEM SPA Editor JS SDK. It is responsible for calling and injecting the pageModel (the JSON content) into the application.

it seems your sling model is not binded with your react component.

Check how to integrate react spa on aem https://docs.mktossl.com/docs/experience-manager-learn/getting-started-with-aem-headless/spa-editor/...

and https://medium.com/@toimrank/aem-react-spa-fb10256dbdce

View solution in original post

2 Replies

Avatar

Administrator

@Sachin_Arora_ @Vijay_Katoch @DPrakashRaj @Saravanan_Dharmaraj @AsifChowdhury @Jörg_Hoh 

It would be highly beneficial if you could please dedicate some time to examine this AEM question and provide your valuable expertise. Furthermore, if you could offer the author some direction to resolve the issue, it would be deeply appreciated.



Kautuk Sahni

Avatar

Correct answer by
Community Advisor

Can you provide the detail on how your model.json is binded to the react.

index.js is the entrypoint of the SPA. ModelManager is provided by the AEM SPA Editor JS SDK. It is responsible for calling and injecting the pageModel (the JSON content) into the application.

it seems your sling model is not binded with your react component.

Check how to integrate react spa on aem https://docs.mktossl.com/docs/experience-manager-learn/getting-started-with-aem-headless/spa-editor/...

and https://medium.com/@toimrank/aem-react-spa-fb10256dbdce