SEO
      Back to home
      2. Technical
      3. SEO

      Live Center Pre-Rendering service (SEO)

      Need to improve your SEO? Live Center can help you with a pre-rendering service for your feed.

      Introduction

      In the dynamic world of content management systems (CMS) for live content, optimizing for search engine optimization (SEO) is crucial. Our pre-rendering service is designed to enhance the SEO performance of your published content by addressing key technical challenges associated with modern web technologies.

      The Challenge of Client-Side Rendering

      While JavaScript-based client-side rendering offers dynamic and interactive user experiences, it poses challenges for search engine crawlers. Google's indexing process includes client-side rendering, but this occurs with a significant delay, often several hours or more after initial crawling. This delay is due to the resource-intensive nature of rendering, which consumes substantial CPU cycles.


      Our Solution: Server-Side Rendering (SSR)

      To overcome these challenges, our pre-rendering service implements server-side rendering (SSR). This technique pre-renders content on the server, delivering fully rendered HTML to the client. SSR not only addresses SEO challenges associated with client-side rendering but also improves Time To First Byte (TTFB), a critical factor in Google's page experience signals that can positively impact search rankings.


      How it works:
      Upon request, the pre-rendering service will use a headless browser to render out the live blog fully. This is cached and returned to the requester.

      It can return mainly two types of results:

      • Full HTML page - Returns a complete HTML page with the feed as well as required style and script references. 
      • Html feed - Returns only the content of the feed. The rest is provided by the host.

      How it can be implemented:

      The prerender service will do all the actual rendering, but the result has to be fetched server side in order to have it prerendered at the hosting website.
      This fetching and serving will depend on the hosting solution. In general, the procedure goes something like this:

      1. The user requests the page where the feed will reside
      2. The host first fetches the prerendered feed from the URL
      3. Then the host inserts the prerendered html into the requested page
      4. The user receives the host page with the feed already “placed” inside

      This way the both the host’s site and the feed content is loaded together in the first document. This is advantageous for SEO and sometimes performance depending on users' conditions.

      This is opposed to serving the host page with only a reference to the feed. In that situation, the feed will load later on the end user’s side, along with all other dynamic content like images, scripts, etc.

      This is a common flow for how Live Center is integrated with a host. The part marked shows where the prerender service is typically implemented.

      Example using express.js

      There are several frameworks and hosting solutions where this can be implemented. This is a simple implementation example using an express.js server. 

      app.get('/insert-feed-example', async (req, res) => {

          // get my local html page

          const myPage = await readFile();

          const myPageDom = new JSDOM(myPage.toString());

          // get prerender feed

          const prerender = await

          fetch("https://lc2-ssr-proxy.azurewebsites.net"

              + "/api/v2/proxy/demoaccount/28449/feed")

          const responseText = await prerender.text();

          // insert feed into my page

          const feedParentDom = myPageDom.window.document.createElement('div');

          feedParentDom.id = 'lc-feed-section';

          feedParentDom.innerHTML = responseText;

          myPageDom.window.document

              .getElementById("lc-feed-section").replaceWith(feedParentDom);

          // serve

          res.setHeader('Content-type','text/html')

          res.send(myPageDom.serialize());

      });

      In this example, we have a static html template with the js implementation of lc set up. But before serving it. We get the actual content it should render and insert it into the template. 

      If you'd like to start using Live Center's pre-rendering service contact us at support@norkon.net