SEO in Angular
No big deal with SSR
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1148812/images/7293373/angular.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1148812/images/8474593/pasted-from-clipboard.png)
X
The power of Angular
@MartinaKraus11
- Better caching
- Client-side rendering
- User Experience
- Performance
SEO ...?
@MartinaKraus11
Why SEO?
@MartinaKraus11
- Increases organic discovery
- provides 24/7 Promotion
- Targets entire marketing funnel
- improves credibility and Trust
- good Return of investment
@MartinaKraus11
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1148812/images/8476507/pasted-from-clipboard.png)
search engine crawls for index.html
@MartinaKraus11
@MartinaKraus11
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1148812/images/8474584/app_root_html.png)
That's me, Martina
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1148812/images/7293189/martina.png)
@MartinaKraus11
GDE in Angular
Women Techmakers Ambassador
Trainer and Consultant
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1148812/images/6668361/kisspng-google-i-o-google-developers-google-developer-expe-5b31b111bf4c95.3580780315299832497836.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1148812/images/6668390/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1148812/images/7106295/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1148812/images/7795819/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1148812/images/7795825/pasted-from-clipboard.png)
@MartinaKraus11
martinakraus
@MartinaKraus11
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1148812/images/6668398/EDIKsf1WwAACW9g.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1148812/images/6668407/ngGirls_banner_transparent.png)
@MartinaKraus11
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1148812/images/6668428/group.jpeg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1148812/images/6668430/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1148812/images/9033350/pasted-from-clipboard.png)
Let's talk about Search Engines
@MartinaKraus11
Search engine bots
@MartinaKraus11
Crawling
Indexing
Crawling
@MartinaKraus11
- process of visiting new and updated pages
- specific algorithm to determine how often and when to crawl
- holds a list of web page URLs
- mobile and desktop crawler
- changes, dead links etc. will be noted
Indexing
@MartinaKraus11
- understand what the page is about
- textual content, tags, attributes
- processing content types
- prevent indexing with noindex directive
Serving (and ranking)
@MartinaKraus11
- matching search query against the index
- based on different factors
- user-experience
- fast loading
- mobile friendly
Meta-Tags
@MartinaKraus11
- are not displayed on the page
- defines metadata about an HTML
- search bots checks specific meta tags for keywords
- description
- title
- keywords
Important Meta-Tags
@MartinaKraus11
Name | Description |
---|---|
<meta name="description" content="..." /> | provide short description of the page |
<meta name="robots" content="..., ..." /> | define behavior of search engine bot |
<meta name="viewport" content="..."> | how to render a page on mobile device |
<meta name="rating" content="adult" /> | labels a page as adult content |
Meta-Tags in Angular
@MartinaKraus11
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1148812/images/8474670/ngMeta.png)
Meta-Tags in Angular
@MartinaKraus11
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1148812/images/8474670/ngMeta.png)
DEMO
@MartinaKraus11
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1148812/images/7393559/Screenshot_2020-05-23_at_22.36.06.png)
... but index.html is empty
Googlebot ❤️ JavaScript
@MartinaKraus11
Google bot
@MartinaKraus11
Crawling
Indexing
Rendering
So everything is fine....right?
@MartinaKraus11
@MartinaKraus11
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1148812/images/8452596/pasted-from-clipboard.png)
Sources: https://moz.com/blog/search-engines-ready-for-javascript-crawling
Social-media bots
@MartinaKraus11
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1148812/images/8474781/twitter.png)
@MartinaKraus11
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1148812/images/8474716/pasted-from-clipboard.png)
https://cards-dev.twitter.com/validator
Angular Universal to the rescue
@MartinaKraus11
In a nutshell
@MartinaKraus11
- Solution for Pre-Render your Angular Code
- implement different options for pre-redering:
- build-time / ahead of time
- on the-fly / on user request
- options to deliver first server-side rendered HTML and full JavaScript rendered HTML afterwards
Installation
@MartinaKraus11
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1148812/images/8474877/pasted-from-clipboard.png)
How does it work
@MartinaKraus11
- Creates different entry point
- Creates different tsconfig/ dist output path
- Using different rendering layers
- Swaps out different implementation of specific services
Build && Run
@MartinaKraus11
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1148812/images/8474901/runssr.png)
DEMO
@MartinaKraus11
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1148812/images/8474752/pasted-from-clipboard.png)
That's not enough ?
So how about performance?
@MartinaKraus11
Pre-rendering
@MartinaKraus11
- Angular universal offers pre-rendering
- Renders HTML ahead of time
- configure routes to pre-render
- provides option to pre-render just for specific user agents (like crawler bots)
Why not use it?
@MartinaKraus11
- increases complexity (real server involved)
- lots more code - logging, monitoring
- harder mental model
- build times (but it's way better with bazel)
SEO:
What else can we do?
@MartinaKraus11
Basic SEO advices
@MartinaKraus11
- getting content indexed quickly
- leverage progressiv parsing and rendering of HTML
- using Lighthouse for SEO analysis
- know you search engine
Summary
@MartinaKraus11
- pre-render HTML to satisfy social media bots
- Angular Universal for Server Side Rendering
- Using a different rendering layer
- You can also Pre-Render ahead of time
- and even better for performance :)
Thank you !!!
kraus.martina.m@gmail.com
@MartinaKraus11
martina-kraus.io
Ping me:
Slides: slides.com/martinakraus/seo-angular
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1148812/images/6674215/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1148812/images/6674227/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1148812/images/6674229/pasted-from-clipboard.png)
Angular Universal - SEO in Angular
By Martina Kraus
Angular Universal - SEO in Angular
Using SEO with Angular Universal
- 942