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

Angular Universal - SEO in Angular

By Martina Kraus

Angular Universal - SEO in Angular

Using SEO with Angular Universal

  • 591