MARTIN SPLITT: If you're building single page apps that
use hash routing or the History API,
you might be using a JavaScript framework to do so.
One of the most popular frameworks is Angular.
Angular allows you to quickly build and deploy a single page
apps, and helps you and your team be productive doing so.
But what do you need to make sure your Angular apps are
discoverable in search?
How do you handle SEO?
In this video, we will cover a few important basics
to make sure your Angular app can be found by your users
by a search, and how you can make the experience even better
with Angular Universal.
[MUSIC PLAYING]
Let's start by looking at a typical Angular app.
While your Angular app and Angular projects
might be different in size, content and complexity,
there's a lot that all Angular applications have in common.
For this video, we will start by creating a fresh Angular
app using the CLI.
First we should make sure that we
have a more or less recent version of the Angular
CLI installed.
Once we have established that, we
can create a new Angular app.
This creates a basic Angular app that we
will use throughout this video to learn more
about the fundamental SEO concepts.
Let's take a look at our application now.
Right now, our web app only has one page so far.
That's add one more and set up the route to it.
Now it's time to look a little closer at our web app.
The first thing that stands out is
that we have the same title for both routes.
But they are about very different things.
It's always a good practice to have a descriptive title that
sets the expectations for what the page is about.
So let's fix this.
Angular provides us with the title service
to retrieve and set the title.
In our app component, we can extend the constructor
to get a reference to the title service,
and then use it within the constructor
to set the title to something more appropriate.
Note that we can change the title later on as well.
But crawlers might not pick it up then.
We will discuss techniques to make
sure that the crawler sees the title and our content properly
later.
Now, let's look at a sample search result.
There's one more thing here that we should definitely provide--
the description snippet.
This snippet is generated from the meta description tag.
Like the title, this description should
be specific to the individual pages
and reflect what the user can expect
when they click on the search result.
Let's add some descriptions to our pages now.
Similar to the title service, Angular also
has a meta service that we can use.
It allows us to create or read meta text on the page.
We are interested in adding a description tag.
So we get a reference to the meta service
and add a description tag with a meaningful description
like this.
Descriptions don't have a limitation in how long
they can be, but we will pick an excerpt if necessary--
for instance, to accommodate for limited screen space
on a mobile device.
If your web app has content that changes frequently,
you might notice that it can take quite a while for search
engines to pick it up.
Some might not even show your content at all.
We explain the reason for this in episode 2.
In that episode, we suggested using Rendertron or Puppeteer
to handle this.
And with Angular, there's a simpler option
of using Angular Universal.
Angular Universal runs our app on the server
and delivers static HTML to the clients.
This often results in an improvement in speed as well.
The Angular app continues to work as usual,
and as you would expect, because it then also runs
your JavaScript code in the browser,
to give users the normal experience
when using your Angular app.
To set up Angular Universal for our web app,
we add the universal module and generate a Universal App
based on our existing web app.
Then we need to make sure the server runs the Universal App.
If you use Express for your server site,
you can use the express engine to do so.
Now, we start the server and can see the difference in the HTML
that is sent from the server to the client.
Here is the version before we used Angular Universal.
And here it is after we added Angular Universal.
Users and crawlers now get the content faster
and without needing the JavaScript.
It's not always this easy, but at least for our sample,
this Angular web app is now discoverable in search
and fast.
Thanks for watching this video.
If you liked it, leave us a comment below.
And to stay tuned with all the new webmaster videos coming
out, definitely also subscribe.
And you know what?
My good friend, [INAUDIBLE] and I will now just sit and wait.