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

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