Angular Static App by Scully — How it helps Website SEO?

Angular is continuously evolving and great for developing single page application. These single page application (SPA) especially created by angular framework has many advantages but it has few challenges and limitations when it comes to Search Engine Optimization (SEO). Angular built SPA app is client rendered by default and when the search engine crawlers(Google, Bing) tries to read the page then it cannot see the full page content because some of the page content is script loaded. This one limitation takes your whole web business towards south because the visibility and traffic to your website is mainly driven by Search Engines like Google.

Based on the limitation stated above it is clear that the fix could be somewhere around the way how SPA is getting rendered. This could be done by making the SPA render server side and present full content to the visitor including search engines. The solution is long provided by Angular Universal Server Side Rendering (SSR) and now it is provided by Scully in more simple and easy way. And when we go through this article there is a live example developed and published by my buddies, I would say the complexity of this example could be medium. for this solution . As for as comes to this web app there is roughly 3000+ routes to be prerendered and the Scully will does it quickly and prepares the static content for deployment maintaining the data/folder structure which is well supported/recognized by search engines. Given below is the statistics that could be helpful.

Courtesy: Tools In Place Website Team

Currently this website has some big list of cool tools and all the tools/pages are prerendered that we use in daily life and in comparison it has simple tools like Arcsine Calculator and the medium complex tools like Password Generator. Other than prerendered page for SEO benefits there is other benefits listed below which gives edge over client side rendering.

  • Website delivered fast. (roughly 3–4 times)
  • With the help of Scully, you can easily create blog only using Angular. Scully allows you to create a blog post in similar way how angular component is created.

ng g @scullyio/init:blog

After that, creating a new post is dead simple. Again, just use the CLI and run:

ng g @scullyio/init:post — name=”Name your post here”

Impact of Scully in Angular Project?

As we talked the pros of Scully, there is some cons which is negligible from my standpoint. Implementing Scully to your existing Angular project doesn’t going to impact your dev environment / process. With that promise the only change you going to see in your pipeline is some small difference in your PROD deployment process. You still can serve the Angular in local machine using the same command.

ng serve

Before server side rendering the angular project using Scully, still you need to run/build the angular build process using the same command.

ng build — — prod

Once after your angular project gets built in the folder dist/Project_Name, now you need to initiate the Scully prerendering process in command line.

npx scully — scanRoutes

In addition, we can serve the angular prerendered app in local machine to test the static webpage using the below command line.

npx scully serve


Scully should be part of most of the angular projects seeing its advantages in the fast loving world. As it has more pros than negligible cons, having Scully in project is really a boost more than SEO benefits.




Full Stack Developer. Budding medium content writer.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Flutter — ListView Sort Animation

Save OpenGL Rendering Result As A Video

React vs Angular

Models from JSON API response

How to Change Connect Button to Follow on Your LinkedIn Profile

Solving JS Algorithm Problem with Hashes

A React Feature you may want to know which really made 2020 a better year at the end…

Writting Solana dApps — Part 2: Requesting an airdrop

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ayshwarya Muthuraja

Ayshwarya Muthuraja

Full Stack Developer. Budding medium content writer.

More from Medium

Guide to create a trackpad app using JS.

Finger on phone with trackpad UI, wifi symbol, Desktop with cursor moving

Dive Deep!

Why Ionic Platform Is The First Choice For Mobile Application Development

Should you write your own Web Component?