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 https://toolsinplace.com 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.
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
Conclusion
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.
