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
@MartinaKraus11
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1148812/images/8476507/pasted-from-clipboard.png)
Why SEO?
@MartinaKraus11
- Increases organic discovery
- provides 24/7 Promotion
- Targets entire marketing funnel
- improves credibility and Trust
- good Return of investment
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
September 2022
@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://ng-de.org/
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
@MartinaKraus11
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1148812/images/8990870/meta-tags_example.png)
Meta-Tags in Angular
@MartinaKraus11
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1148812/images/8990963/SEO.png)
Meta-Tags in Angular
@MartinaKraus11
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1148812/images/8990963/SEO.png)
Meta-Tags in Angular
@MartinaKraus11
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1148812/images/8990963/SEO.png)
Best practices
@MartinaKraus11
- Always use a different Title for each page
- Always use `Description` Meta-Tag
- no bot is indexing the keywords-Meta-Tag
- Update Title and Description for all pages to provide even more information
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1148812/images/8990995/pasted-from-clipboard.png)
Page-Title
Description
Updating Meta-Tags
@MartinaKraus11
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1148812/images/8991010/updateTags.png)
@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
@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
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
Pre-rendering
- 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)
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/angular-seo
![](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
- 471