SEO in Angular

No big deal with SSR

X

The power of Angular

@MartinaKraus11

  • Better caching
  • Client-side rendering
  • User Experience
  • Performance

SEO ...?

@MartinaKraus11

@MartinaKraus11

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

That's me, Martina

@MartinaKraus11

GDE in Angular

 

Women Techmakers Ambassador

 

Trainer and Consultant

@MartinaKraus11

martinakraus

September 2022

@MartinaKraus11

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

Meta-Tags in Angular

@MartinaKraus11

Meta-Tags in Angular

@MartinaKraus11

Meta-Tags in Angular

@MartinaKraus11

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

Page-Title

Description

Updating Meta-Tags

@MartinaKraus11

@MartinaKraus11

... but index.html is empty

Googlebot ❤️ JavaScript

@MartinaKraus11

Google bot

@MartinaKraus11

Crawling

Indexing

Rendering

@MartinaKraus11

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

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

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

Angular Universal - SEO in Angular

By Martina Kraus

Angular Universal - SEO in Angular

Using SEO with Angular Universal

  • 404