Create your account

Already have an account? Login here

Note: By joining, you will receive periodic emails from Coursetro. You can unsubscribe from these emails.

Create account

Angular 6 SEO Tutorial from Scratch - It's Super Simple Now!

By Gary simon - Jun 05, 2018

Back in version 4 of Angular, I wrote a SEO tutorial and it was quite involved back then. Now, it's about 99% easier because we can use the Angular CLI to turn our projects into SEO-Friendly beasts.

It's literally a matter of issuing 3 commands via the console, and your project is ready to go for the search engines to index all of that glorious content.

We will be using Ng-toolkit Universal to do all of this. 

If you prefer watching a video..

Be sure to Subscribe to the Official Coursetro Youtube Channel for more videos.

Installing the Angular CLI

 

As always, we're going to use the Angular CLI to start a new project. Make sure if you already have it, it's at the latest version, or at least to the version we're going to use in this tutorial.

To check if you have it, open your console and type:

> ng -v

If it's unrecognized, or not at least version 6.0.7, run the following command:

> npm install -g @angular/cli

Great!

Starting an Angular 6 Project

Now, let's use the Angular CLI to start a new project with routing enabled. We're going to create a single route to demonstrate that it's truly SEO-friendly:

> ng new awesome-seo --routing

Once that's installed, cd awesome-seo and run:

> ng serve -o

If you view the page source, you will find that the content displayed in the browser is not present in the source. By default, the CLI does not present us with a project that's SEO-Friendly. We'll do that shortly, but for now, let's configure a route and change up some of the HTML.

Open /src/app/app-routing.module.ts and update it to match the following code:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { UsersComponent } from './users/users.component';

const routes: Routes = [
  {
    path: 'users',
    component: UsersComponent
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

So, we'll have a single path /users that uses the UsersComponent.

Next, open the /src/app/users/users.component.html template file and update it to:

<h2>My Secondary Content</h2>

<ul>
  <li>Hey whats up</li>
</ul>

Just some basic HTML!

Next, open up the /src/app/app.component.html and update it to:

<h1>My Home Page</h1>

<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Laboriosam, maiores ad nobis voluptates at nemo totam suscipit possimus minus culpa cupiditate facere. Veniam minima praesentium aperiam! Velit dignissimos dicta blanditiis.</p>

<a routerLink="/users">Users Page</a>
  
<router-outlet></router-outlet>

Great!

Making our Angular 6 App SEO-Friendly

Ordinarily, at this point, you would have to spend a bunch of time creating new files. Instead, we can use the Angular CLI to simply add a package that will modify our existing Angular 6 project and make it SEO-Friendly.

Visit the console and type:

> ng add @ng-toolkit/universal

Note: If you run into any errors, submit an issue to Ng-toolkit.

Next, instead of running ng serve -o you run:

> npm run build:prod
> npm run server

At this point, if you view source, you will find all of that lovely SEO content that's now present.

You can click on the Users page to direct yourself to the /users route, and you will find the additional HTML present if you view the source again.

Conclusion

And that's how darn simple it is to make your Angular 6 app SEO-Friendly out of the gate!

Here's some additional links based on this project:

 


Share this post




Say something about this awesome post!