SEO in Angular
No big deal with SSR
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
search engine crawls for index.html
@MartinaKraus11
@MartinaKraus11
That's me, Martina
@MartinaKraus11
GDE in Angular
Women Techmakers Ambassador
Trainer and Consultant
@MartinaKraus11
martinakraus
@MartinaKraus11
@MartinaKraus11
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
Meta-Tags in Angular
@MartinaKraus11
DEMO
@MartinaKraus11
... but index.html is empty
Googlebot ❤️ JavaScript
@MartinaKraus11
Google bot
@MartinaKraus11
Crawling
Indexing
Rendering
So everything is fine....right?
@MartinaKraus11
@MartinaKraus11
Sources: https://moz.com/blog/search-engines-ready-for-javascript-crawling
Social-media bots
@MartinaKraus11
@MartinaKraus11
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
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
DEMO
@MartinaKraus11
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
