Angular Single Page App SEO Friendly Using Rendertron
Single Page Applications are awesome! They load fast and give you a lot of control on how you want your application to run. They are parsed by the browser and thus you have control of the DOM elements and all of that goodness. However, SPA’s are not SEO friendly off the bat because they need to dynamically change the meta tags and the content using JavaScript and this change is not usually picked up by the search engine’s bot.
For Instance, Angular applications load the first bare HTML content before pulling the HTML content for the page being loaded using XMLHttpRequest. Since some search bots cannot parse JavaScript when crawling the website, they will only see the first bare content every time.
Solution is:
When the user visit our website, it will render the default angular application, but when search bot is visiting, we use a server rendering approach to render the content on the server before rendering it on client side. This server rendering approach is using Rendertron.
what is Rendertron?
Rendertron is designed to enable your Progressive Web App (PWA) to serve the correct content to any bot that doesn’t render or execute JavaScript. Rendertron runs as a standalone HTTP server. Rendertron renders requested pages using Headless Chrome, auto-detecting when your PWA has completed loading and serializes the response back to the original request. To use Rendertron, your application configures middleware to determine whether to proxy a request to Rendertron. Rendertron is compatible with all client side technologies, including web components.
Steps To Build SEO In Your App:
1- Use Angular’s Meta service to dynamically generate meta tags for Facebook Open Graph and Twitter Cards.
In addition the service, it’s a good idea to hard-code meta tags as default fallback. Their content should usually reflect the content of your home page.
Add the following tags inside the <head> of the index.html file and customize the content for your brand.
2- We are going to be updating these default meta tags dynamically for each component that is loaded with the router. The SeoService is a DRY and convenient place to organize this code in Angular.
3- Now that we have a working service let’s put it to use in the components.
4- Now we need to run the rendertron instance to render our application on the server
clone rendertron on your machine and run it
git clone https://github.com/GoogleChrome/rendertron.git
cd rendertron
npm install
npm run buildRunning locally
npm run startNotice: you are should deploy your rendertron version to “https://render.example.com” because having it run on localhost:3000 is not gonna help
The reason is: we will use https://render.example.com/render in the rendertron middleware (which we implement below in the node file app.js) because the middleware needs to know your instance of rendertron url to use if the incoming requests are from the bots
5- Now we need to run the angular app using node server.
- go to the app root folder and run these comand
npm install --save express body-parser morgan body-parser serve-faviconmkdir bin
touch bin/www
- Open and edit www file then add this lines of codes.
To make the server run from bin/www, open and edit “package.json” then replace “start” value.
package.json
"scripts": {
"ng": "ng",
"start": "ng build && node ./bin/www",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},- Now, create app.js in the root of project folder.
- Install rendertron middleware:
npm install rendertron-middlewareThis middleware checks the User-Agent header of incoming requests, and if it matches one of a configurable set of bots, proxies that request through Rendertron.
- Open and edit app.js then add all this lines of codes.
- To add specific bots
- run the angular app using the node server:
npm startCheck Prerender Angular App:
to check how it works on some bots, just add the website link after deploying on facebook or twitter you should see the title, description, and image which exists in meta data for this page
Check URL In Rendertron:
https://render.example.com/render/http://www.example.comConclusion:
we make our Angular single page application SEO friendly and within the development we can run the app using “ng serve” and when we go to the server just run our app using “node ./bin/www” to open our app using this node app
References:
www.modeso.ch — Your nearshore partner for web and mobile development
We are a young Swiss company, with its headquarters in the Lake Constance region, which was founded in 2013 and has been on track ever since. Modeso is specialized in custom Nearshore-Models in the field of web and mobile development. We support companies from startups to large enterprises with highly qualified software developers at fair prices.
