[Feature] Read-only mode should have the option to be rendered on the server for SEO

[ranemihir]

The newly introduced Read-only mode can be used to put the JSON data directly into the main Editor instance to display the data as an article. But right now the main Editor instance is rendered on the client side which does not give SEO.

My idea is to provide some way to render the main Editor instance on the server side but we have to write universal code for this (code which works on both client and server side which does not use client specific objects like document).

[bcnroller]

Not being able to satisfy SEO requirements is a show-stopper for me. The editor must provide a solution that also does not rely on React or Angular.

[Heriberto-Juarez]

I don't think there is a lot to do from them.
You have content in your db, you receive it in the client and after that the editor has to parse it to HTML, how is that parsed? Yeah via javascript so the robots don't run JS and there is no way of them (at least not from the client side)

I posted a workaround for this in this discussion if you want to check it out.

Note:
Other editors are "SEO-Friendly" since they return HTML and you can simply print it but they don't offer the same features as this one, it depends on your needs.

[Duncank]

I disagree, since the content that has been entered into the editor can be used in many different ways it doesn't make sense to render the content 'as is', as each users implementation will vary.
You are able to create your own rendered view based on the editor's data, aren't you?

[Heriberto-Juarez]

Hello, to everyone looking to get SEO friendly content

I have found a workaround.

So I found this parser that can be used in the server (Editorjs-parser)

So the thing is that we want to pre-render our content and be able to inspect the source code (so as a robot would do) to load the html from without javascript.

In order to do that I use my node.js app to parse the data I have saved in my db as a JSON.

Here is part of my code in the server:

    if (typeof blog === 'object' && blog?.content?.blocks?.length > 0) {
      const parser = new edjsParser();
      blog.preRendered = parser.parse(blog.content)
    }

    res.json(blog);

So basically I send the HTML from the server (so that I don't have to parse the HTML in the client side)

Im using Next.js (A react Framework)
So I render the data as this:

      <div style={{display: 'none'}}>
        <div dangerouslySetInnerHTML={{ __html: blog.preRendered }}></div>
      </div>

I leverage the advantages of SSR that next.js gives us to pre-render the content.
The HTML is hidden and I finally display the content by using Editorjs with readOnly option set to true.

So, robots now get to view the pre-rendered HTML and the final user gets to view the content rendered by editor.js.

I don't really think @codex-team has an option to make the library SEO-Friendly as pre-rendering has to work server-side and the only thing they could do is create an official package to parse the content to HTML in a different package that has to be installed on the server.

Here is an example of my inspect URL (what a robots sees)