SEO in Angular is so easy now

in #programming6 years ago (edited)

Angular Universal

I was actually applying for a job and one of the questions the employer asked was what I know about Angular and SEO. Well, not much, honestly. For the past 2 years I had been working on an internal project for a renewable energy company so there was no need for SEO. This is the same time I started learning Angular.

Anyways, the problem is that when you build your app, even for production, when the page is rendered and you view the page source, there is no content. That's because Angular injects the elements into the DOM via Javascript.

The solution would be to build each route's HTML with it's content on the server-side and then serve that to the visitor. Angular does have this built in, but takes some setting up. It's pretty straight-forward.

There's an even easier way now though, with ng-toolkit, and more specifically, @ng-toolkit/universal.

Simply run this command on a new project and you'll be all set up for server-side rendering:
ng add @ng-toolkit/universal

Read the ng-toolkit documentation for further instructions. Thanks for reading, enjoy!

Sort:  

Hello! Your post has been resteemed and upvoted by @ilovecoding because we love coding! Keep up good work! Consider upvoting this comment to support the @ilovecoding and increase your future rewards! ^_^ Steem On!

Reply !stop to disable the comment. Thanks!

Congratulations @n0tahacker! You have completed the following achievement on the Steem blockchain and have been rewarded with new badge(s) :

Award for the number of upvotes

Click on the badge to view your Board of Honor.
If you no longer want to receive notifications, reply to this comment with the word STOP

To support your work, I also upvoted your post!

Support SteemitBoard's project! Vote for its witness and get one more award!

Congratulations @n0tahacker! You have completed the following achievement on the Steem blockchain and have been rewarded with new badge(s) :

Award for the number of upvotes received

Click on the badge to view your Board of Honor.
If you no longer want to receive notifications, reply to this comment with the word STOP

Support SteemitBoard's project! Vote for its witness and get one more award!

Congratulations @n0tahacker! You have completed the following achievement on the Steem blockchain and have been rewarded with new badge(s) :

You got your First payout

Click on the badge to view your Board of Honor.
If you no longer want to receive notifications, reply to this comment with the word STOP

Do not miss the last post from @steemitboard:

SteemitBoard knock out by hardfork

Support SteemitBoard's project! Vote for its witness and get one more award!