Meta tags not populating using SSR (server side rendering) | Community
Skip to main content
neeleshk1333067
neeleshk1333067
Level 2
January 21, 2022
Solved

Meta tags not populating using SSR (server side rendering)

  • January 21, 2022
  • 2 replies
  • 1300 views

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

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by DPrakashRaj

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/react/integrate-spa.html?lang=en

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

2 replies

kautuk_sahni
Community Manager
kautuk_sahniCommunity Manager
Community Manager
June 7, 2023

@sachin_arora_ @vijay_katoch @dprakashraj @saravanan_dharmaraj @asifchowdhury @joerghoh 

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
    DPrakashRaj
    Community Advisor
    DPrakashRajCommunity AdvisorAccepted solution
    Community Advisor
    June 7, 2023

    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/react/integrate-spa.html?lang=en

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

      Terms & ConditionsAccessibility statement

      Loading footer...