As you may or may not know, I built my personal website as a Single Page Application (SPA) with the Angular framework and hosted on Github Pages. Everything works great until I integrated a Blog feature on my personal website. Things were getting ugly for search engine optimization (SEO) and social media preview.
My post couldn’t be indexed or previewed because there is nothing on the Html except for the <app-root></app-root> tag. The content and meta tags just weren’t ready yet.
Server-Side Rendering (SSR) comes to rescue. This is how it works:
The catch is that I need a server to handle the request which Github Pages cannot support at this moment. So I have to find another provider. There are few options for a Nodejs hosting like Firebase, Heroku, OpenShift Online, Digital Ocean…
Heroku is a good option for me at the moment.
Notice: If you are using yarn, you should switch to npm.
For Angular, there is a package that supports SSR named Angular Universal .
ng add @nguniversal/express-engine --clientProject your-project-name
For updating SEO meta tags, I used Meta and Title service from @angular/platform-browser. You can check the implementation from my Github .
After you get it working, it’s time for deploying to Heroku platform.
╰─ heroku loginheroku: Press any key to open up the browser to login or q to exit:Opening browser to https://cli-auth.heroku.com/...Logging in... doneLogged in as email@example.com
╰─ heroku git:remote -a dalenguyen-meset git remote heroku to https://git.heroku.com/dalenguyen-me.git
I push the project from dev to Heroku. Because my master branch is for Github pages.
╰─ git push heroku dev:masterEnumerating objects: 704, done.Counting objects: 100% (704/704), done.Delta compression using up to 8 threadsCompressing objects: 100% (550/550), done.…
Here are links to check your website’s SEO tags: