1 of 53

Better SEO & sharing on social media platforms with

Angular Universal

Sam Vloeberghs�@samvloeberghs

2 of 53

Things to learn (or recap) today

What is the goal of Angular Universal?
Why & when (not) to implement Universal?
Optimise for SEO, Social sharing & UX
How does dependency injection help?

2

ngSpain 2019 - 19/10/2019

Sam Vloeberghs

Duration: 1min

Content:

What is the goal of Angular Universal?

Today we’re not going in-depth about the technical side of setting up a Universal application
We’re gonna discuss how to generate the correct static content for our need and give some basic overview on Universal.

Why and when not to implement Universal?�

We should really consider this.

There are several ways of using it and choosing the correct approach can be crucial to configuring the best possible setup.

Universal allows us to optimise our application for SEO, Social sharing and UX.�We will discuss the correct way of handling meta data and other structures like JSON-LD.

And how does Dependency Injection help?

DI is the main driver of this functionality and we will briefly discuss how it enables Universal.

As an example we will look at reading out cookies and generating and injecting JSON Linked Data

More info:

//

3 of 53

4 of 53

What is the goal of Universal?

anywhere,�framework agnostic

4

Sam Vloeberghs

ngSpain 2019 - 19/10/2019

5 of 53

Angular anywhere

Framework agnostic

In the browser ( typical case )
On the server ( advanced case, our case )
Or even in a worker ( expert case )

JS ( Express / hapi / NestJS / .. ) & ASP.NET
generic solution

5

But would it make sense to do it??

Sam Vloeberghs

ngSpain 2019 - 19/10/2019

Duration: 2min

Content:

There are 2 or even 3 possible basic cases of where we can run Angular.

We can run it in the browser, which is our typical case for a Single Page Application.

Or we run it on the server. This the more advanced case we are discussing today.

If you want to go expert mode you could even run Angular inside a worker. But would it make sense to do it?

Do you see a valid usecase of using Angular inside a worker?

We could think about the example of using a web worker to process large sets of data, before we render it on the screen.�

The idea would be to offload it from the main thread, to not block the UI. But does that require Angular?

Via the normal event messaging API’s we can pass data between workers and browser windows.

So in this particular example I would just write some pure JS functions that get data and return a processed state of that data.

Nothing much Angular about that. Please do let me know if you see or have used a case of Angular in a worker!

The next big aspect is that Angular should be able to run Framework agnostic.

For JS servers we have several options and framework implementations like Express & the HAPI engine. And these days even NestJs is �ASP.NET also has its own implementation.

For all the rest we have a generic solution. Now what is this generic solution than?

More info:

//

6 of 53

Generic solution

No “native framework support ” available on the backend server?

Use Socket Engine to support any language (via a JavaScript detour)

6

.NET Server

PHP Server

Socket Engine (JS )

CLIENTS�browsers / search engines / ...

JS Server

Python Server

Java Server

Sam Vloeberghs

ngSpain 2019 - 19/10/2019

7 of 53

Ultimate goal

7

Retrieve a stable state �of the application

on any platform at run or build time

Prerender that stable state �to static HTML

Sam Vloeberghs

ngSpain 2019 - 19/10/2019

hold on to this thought

8 of 53

Is Angular Universal

the right tool for the job?

9 of 53

Are you starting a new project?

Is your team

skilled in Angular?

Do you have strong SEO requirements?

9

YES

NO

NO REAL ADDED VALUE

but there are valid use cases ..

10 of 53

Are you starting a new project?

Is your team

skilled in Angular?

Do you have strong SEO requirements?

10

NO!

YES!

CONSIDER USING A DIFFERENT SSR FRAMEWORK

11 of 53

Are you starting a new project?

Is your team

skilled in Angular?

Do you have strong SEO requirements?

11

GO FOR IT!

YES!

12 of 53

Do you really need Universal?

13 of 53

Why & when (not) to use Universal?

Who is my user?
Informative website or CRUD application?
Internal application? Or public facing website?

Would your application benefit from Universal? Why?

13

Sam Vloeberghs

ngSpain 2019 - 19/10/2019

14 of 53

A few basic rules, IMO

Do use Universal

Public facing website / informative site or app (SEO)
Fast loading or TTI / FCP required

14

Sam Vloeberghs

Blog or�personal website

Informative company website

Product pages

of a webshop

ngSpain 2019 - 19/10/2019

15 of 53

A few basic rules, IMO

Do not use Universal

Pure CRUD application
Behind authentication mechanism / internal app

Why? Because it adds complexity!

15

Sam Vloeberghs

Backoffice of that same webshop

Enterprise application

Mobile application or PWA?

ngSpain 2019 - 19/10/2019

16 of 53

Complex things about Universal (1/2)

Not all dependencies are available on all platforms �(or via the same way or approach)

window / navigator / document

cookies / Storage API

Check the platform you are running the application on

16

Sam Vloeberghs

ngSpain 2019 - 19/10/2019

17 of 53

17

use the platformId + the isPlatformBrowser or isPlatformServer method to switch functionality depending on environment

Sam Vloeberghs

ngSpain 2019 - 19/10/2019

18 of 53

18

depending on the environment we read out the cookie from the browser or the ExpressJS request

Sam Vloeberghs

ngSpain 2019 - 19/10/2019

Duration: 1min

Content:

What we see here, the MyCookieService, is a very basic sample service on how this could be implemented.

We inject the cookie service from a third party library and we also inject the request coming from Express.

Both are optional dependencies, because only of the 2 can exist, depending on the platform this code is executed.

The “getCookie” method correctly returns the cookie, depending on the platform.

In case of the browser, we use the cookieService that reads out the document object.

In case of the server we use the request object from Express to read out the cookie.

The good thing is that the API of the service does not change. Deeper in the implementation of our application, we just call “getCookie”.

We don’t care about it’s implementation.

More info:

//

19 of 53

Complex things about Universal (2/2)

Avoid reloading the data of your application

Serialize and transfer the data state to the browser
Use it as a cacheFirst mechanism on bootstrap

19

Sam Vloeberghs

ngSpain 2019 - 19/10/2019

20 of 53

20

6) rebuild news page with data from server

Browser

1) request dynamic page /news/1/slug

Server

DB

3) return full html + js + css

= angular application

static page

NG app

5) request news data /api/news/1

2) SSR with dynamic data

4) angular bootstrap

Sam Vloeberghs

can we avoid this extra round trip to the server?

ngSpain 2019 - 19/10/2019

Duration: 3min

Content:

Our application in the browser requests a route that uses dynamic data, like for example a detail news page
The server loads this data from the database and uses it to generate the SSR version of the page.
The server returns the static HTML + all the static resources that define our Angular SPA
Our browser bootstraps the static HTML page to an Angular SPA

And this is where the peculiar thing happens!
Our application is bootstrapping again, just as on the server, so requesting the data to visualize the news detail page again

This means our application will do a request to the server to retrieve the data for displaying the news!
Based on that data, the Angular app will rebuild the page.

Now, can we avoid this situation? Yes we can, by not bootstrapping the Angular application on the browser.

But that would be a pitty, because we can benefit from the Angular app in our browser.

So, let’s fix this!

More info:

//

21 of 53

21

1) request dynamic page /news/1/slug

3) return full html + js + css

+ SERIALIZED DATA

= angular application

4) angular bootstrap

5) rebuild news page based on SERIALIZED DATA

Browser

NG app

static page

{}

Server

DB

2) SSR with dynamic data

{}

Sam Vloeberghs

ngSpain 2019 - 19/10/2019

Duration: 1min

Content:

Our application in the browser requests a route that uses dynamic data, like for example a detail news page
The server loads this data from the database and uses it to generate the SSR version of the page.
The server returns the static HTML + all the static resources that define our Angular SPA �but now also returns a serialized version of the data, included in the static resources
Our browser bootstraps the static HTML page to an Angular SPA

Our application is bootstrapping again, just as on the server, so requesting the data to visualize the news detail page again

This time our application checks if there is a serialized version of the data available, in the static resource
the Angular app now uses that data to rehydrate the page.

And we have avoided a round trip to the server!

This is BTW a basic feature available with Universal, no need to do much specific stuff for this :)

More info:

//

22 of 53

Now what was that about stable state?

23 of 53

Stable Application State?

When is my application stable?
When can I render my application?
Async and reactive code?
$digest loop, no?

23

Sam Vloeberghs

ngSpain 2019 - 19/10/2019

24 of 53

Stable when

the zone (zone.js) is stable
No micro / macro tasks pending

setTimeout?
unresolved promise?
incomplete observer?

isStable: Observable<boolean> on ApplicationRef

24

Sam Vloeberghs

ngSpain 2019 - 19/10/2019

25 of 53

How can Universal help with �SEO and Social sharing?

26 of 53

Different ways to optimise for SEO

& social sharing

The initial content of your “static” application

= food for crawlers of Google / Bing / ..

Correct meta / title / alternate / .. tag usage
JSON LD, or micro-data

26

Sam Vloeberghs

ngSpain 2019 - 19/10/2019

27 of 53

Initial content

The full HTML of your page
Contains vital info / meta data for the �first crawl by search engines
User does not have to wait for content

27

Sam Vloeberghs

ngSpain 2019 - 19/10/2019

28 of 53

28

CLIENT SIDE RENDERING

29 of 53

29

SERVER SIDE RENDERING

30 of 53

Correct usage of meta & other tags

All search engines behave differently

FB & LI use og prefix (og:title) & property attribute
TW uses twitter prefix (twitter:title) & name attribute
Google does who knows what 😆�but the “meta description” tag is important!

30

Sam Vloeberghs

ngSpain 2019 - 19/10/2019

31 of 53

31

inject the title value as meta/title tags with name or property depending on the social network

use the Meta & Title service provided by Angular to do the heavy lifting of manipulating DOM

cleanup if no value given

Sam Vloeberghs

ngSpain 2019 - 19/10/2019

32 of 53

Validate your pages

Twitter Card Validator:�https://cards-dev.twitter.com/validator �
Facebook Crawler Debugger https://developers.facebook.com/tools/debug/�
LinkedIn Post inspector�https://www.linkedin.com/post-inspector/�
Google Search Console�https://search.google.com/search-console

32

Sam Vloeberghs

ngSpain 2019 - 19/10/2019

33 of 53

Watch out for “over-optimization”

of the initial content

not all search engines or crawlers �are equally capable �of parsing or executing HTML / JS

Example: HTML Minification

33

Sam Vloeberghs

ngSpain 2019 - 19/10/2019

34 of 53

34

Sam Vloeberghs

ngSpain 2019 - 19/10/2019

35 of 53

35

Sam Vloeberghs

ngSpain 2019 - 19/10/2019

36 of 53

36

these “optimizations” do

more harm than good

Sam Vloeberghs

ngSpain 2019 - 19/10/2019

37 of 53

37

😮

Sam Vloeberghs

ngSpain 2019 - 19/10/2019

38 of 53

38

Sam Vloeberghs

ngSpain 2019 - 19/10/2019

39 of 53

How does dependency injection help?

Inject the right services, depending on the platform
Use the same API
No platform check while coding

39

Sam Vloeberghs

ngSpain 2019 - 19/10/2019

40 of 53

Example: JSON - LD

JSON Linked Data
network of standards-based machine-readable data
across and inter-linking websites
alternative to micro-data

Very good for SEO!

40

Sam Vloeberghs

ngSpain 2019 - 19/10/2019

41 of 53

41

Sam Vloeberghs

The “library” defining the list of types of objects

The data associated with the defined object @type

ngSpain 2019 - 19/10/2019

42 of 53

42

F.A.Q.

REVIEWS / PRICING

43 of 53

Rendering JSON - LD

Only relevant place to render it: on the server
Search engines don’t navigate client-side
We want to code it platform independent

43

Remember the isStable Observable?��=> extra hooks, named BEFORE_APP_SERIALIZED

Sam Vloeberghs

ngSpain 2019 - 19/10/2019

44 of 53

Server vs Browser - App Module

44

Sam Vloeberghs

ngSpain 2019 - 19/10/2019

AppServerModule is basically an extension and overwrite of the AppModule

45 of 53

Server vs Browser - JsonLd Module

45

Sam Vloeberghs

ngSpain 2019 - 19/10/2019

46 of 53

46

provide a serialize function factory�that gets executed during BEFORE_APP_SERALIZED

inject the serialized JsonLd state as the least script tag in the <head>

Sam Vloeberghs

ngSpain 2019 - 19/10/2019

47 of 53

END

RESULT

47

Sam Vloeberghs

plus of course all your content available at time of app serialization!

ngSpain 2019 - 19/10/2019

48 of 53

48

Sam Vloeberghs

ngSpain 2019 - 19/10/2019

49 of 53

50 of 53

Conclusion (1/3)

Goal of Angular Universal

Angular everywhere ( browser, server, worker, .. )
Server technology agnostic
The server-side-rendered version is based on the stable state of your application

50

Sam Vloeberghs

ngSpain 2019 - 19/10/2019

51 of 53

Conclusion (2/3)

Fast & meaningful initial content
Valid meta tags for search engines & social media
JSON linked data (JSON-LD)
Validate the result for different search engines and social networks

Different ways to optimise for SEO & social sharing

51

Sam Vloeberghs

ngSpain 2019 - 19/10/2019

52 of 53

Conclusion (3/3)

Do different things on different platforms

server / browser / worker

Keep the same API, change functionality under the hood, depending on the platform

Make use of dependency injection

52

Sam Vloeberghs

ngSpain 2019 - 19/10/2019

53 of 53

Better SEO & sharing on social media platforms with Angular Universal�

@ ngSpain 2019 - Madrid, Spain - 19/10/2019

Thank you for your attention. Feel free to contact me at sam.vloeberghs@gmail.com or directly on Twitter @samvloeberghs