SEO Best Practices for Dyamic Pages in AEM

[chavad]

Hey All, 

We have many components that load dynamically rendering through react in front-end. These don't have markup in slightly as it is generated dynamically via react code based on the scenario. How can we make these pages SEO indexable? Does keeping dummy markup in HTL files help? Any other suggestions?

[KBWEB]

Hi @chavad - see the answer to a similar post here

- https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/seo-in-aem-react-spa/m-p/6... 

[daniel-strmecki · Accepted solution]

Hi @chavad,

keeping dummy markup in HTL files will indeed help, but a better solution would be to deliver fully rendered content to SEO robots. This can be done using third-party pre-rendering services, such as Prerender.io, or building it yourself with Node.js.

In case you want to build it custom, you first need to detect bots with user-agent on the CDN level and redirect them to your Node.js application. Puppeteer is a popular library that can open a headless instance of Chrome, load the page, and wait for it to fully render before capturing the HTML. Then you can return fully rendered HTML to bots.

Good luck,

Daniel

[Tethich]

Two small thoughts here, if you allow me.

1. Useful package for achieving SSR using node.js is ReactDOMServer

2. We need to pay attention to React lazy loading, in case it is used. Too much of it can affect SEO.