SEO With Client Extension

General
1

I’m using Liferay Quarter releases ( 2025 Q2.6) and build the frontend by React application ( client extension; not React module ) , how to improve SEO , since the client extension needs only (1) JS file & (1) CSS file only .

and it loading the html from script side .

3

Hi @AhmadQasem

As you’re developing your client extension, keep in mind that when it’s deployed within Liferay, it will be dropped onto a Liferay page.

Crucially, Liferay pages offer built-in options to configure SEO-related metadata. This is essential for optimizing your content’s visibility!

You can find more details and a configuration reference here: https://learn.liferay.com/w/dxp/sites/optimizing-sites/seo-and-metadata-configuration-reference

Alternatively, if your plan is to run the Client Extension (CX) outside of Liferay, you have a direct way to manage the metadata.

  • Within your Client Extension, you will have an index.html file.

  • You can directly add your necessary metadata (such as SEO tags) inside the <head> section of this file.

This approach gives you full control over the document header when operating independently from the Liferay page structure.

Thanks
Priyank Gajera

4

Hi @AhmadQasem ,

It sounds like your concern is related to wanting the first render of your page to include HTML from your CX, but because you’re using React and there is no server side rendering or progressive enhancement, then that is not taking place.

One way to handle this is to use a custom page fragment for progressive enhancement. In the HTML section of the page fragment you can add HTML that you want rendered during the first paint. Then you can use the Javascript section of the fragment to render your React component into the fragment replacing the HTML provided by the HTML section. Your react component can easily be provided to and imported by the fragment when you use the JS Import Map Entry client extension to deploy your React component.

There are some trade offs to this approach since you are now using a fragment instead of a widget. The primary difference is that permissions for widgets has more features than permissions for fragments.

I hope this helps.

5

So Evan has the most accurate way to handle your situation, but here’s more to chew on…

  1. The crawlers now can run some JS, so building a solution based on JS shouldn’t be so much of an issue, as long as you’re just rendering the content.
  2. If you’ve built an actual application around the data, that’s not really going tot be subject to indexing and won’t really have any SEO impact.
  3. In my advanced custom element techniques, I show how you can renderer the DOM representation of the thing that is then used by the (in this case React) JS application. In this way, if the crawler is not using JS, it would see the content in the DOM even if it is not rendering the app.

The last item assumes, of course, that there’s a unique URL to identify the artifact and the rendered DOM (whether from a template or whatever) for the artifact so google will index it. SEO improvement follows typical patterns (i.e. needing links into and out of the content).

Just remember that the custom fragments are server side rendered, not JS-side rendered, so find a way to take advantage of that from an SEO approach.

2

Hey @AhmadQasem, what do you mean about how to improve the SEO, what exactly are you trying to improve there? How do you think that Liferay could help you in this scenario?