Tips SEO friendly Angular with Prerender, Docker and Nginx

 

Making a modern web framework based application SEO friendly is not a problem any more. Google proposed a specification for making web applications easier to parse by crawlers by pre-rendering the app views when requested by a crawler.

This tutorial will help you make an Angular based application SEO friendly using Docker container. You can use and apply this tutorial to any javascript frontend framework.

Using a Docker container is optional. It will help us save time setting up the prerender host and keep our server components well isolated. You can strip the Docker part and just run the host locally on your server.

dockertwo_0

Enable hashbang urls

Your web application needs to use hashbang urls so that search engines know how to ask for the SEO friendly pages.

Preparing the Prerender host

We will use docker-compose to quickly setup the prender host. I will assume docker and docker-compose are already installed on your host server.

Docker compose uses a simple configuration file to quickly pull images and setup docker containers. We will use the following docker-compose.yml

Put this file on your host server and run the following command from the same working directory as the file:

You can check if the prerender host is running with the following command:

and should see a process listenting on port 4000

Nginx configuration

Now that the prerender host is running and listening, we will setup our web application’s nginx configuration to forward requests from crawlers to the prerender host.

I will assume your already configured nginx to proxy requests to your web applications using the proxy_pass directive. This what the nginx configuration file for your virtual host should look like.

You are done

When a crawlers hit your server, nginx will forward the request to the prerender app. Prerender will automatically generate the page if it does not exist or just serve it from the cache. Otherwise the request is served from your web app.