Meta tags not populating using SSR (server side rendering)

[neeleshk1333067]

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

[kautuk_sahni]

@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.

[DPrakashRaj · Accepted solution]

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