Angular SEO and State Management

Introduction

• Tools: Angular Platform Browser package
  • Meta and Title Services: Manipulate metadata and the title of a web page.
  • Importance: Crucial for search engine optimization (SEO).

Meta and Title Services

• Injection into Component/Service:

  • Constructor Injection: Makes meta and title services available to the class.

• Title Service:

  • setTitle Method:
    • Sets the document's title.
    • Purpose: Title appears in the browser tab and is used by search engines to determine page topic.

• Meta Service:

  • Adding Meta Tags:
    • Description Tag: Summarizes page content for search results.
    • Open Graph Meta Tags:
      • Examples include Aug, Title.
      • Define how URLs are displayed on social media.
      • Benefits: Improved user experience and social media visibility.

Transfer State and State Key

• Purpose: Efficient state transfer from server to client during server-side rendering.

  • Maintains consistent CO and user experience.

• State Key:

  • Role: Unique identifier for data to transfer between server and client.

• Transfer State Service:

  • Injection into Component/Service: Allows setting and retrieving transferred states.

• Server Side:

  • set Method: Save data under state key.

• Client Side:

  • ngOnInit Lifecycle Hook: Use the get method to access initially saved data.
  • Fallback: Provides a default value if no data is found.

SEO Service

• Marked as Injectable: Allows provision and injection across the application.

• Functionality: Centralizes metadata and title updating.

• updateTitle Method:

  • Parameter: Takes a title string.
  • Action: Uses Title service to dynamically set the document title.

• updateMetaTags Method:

  • Parameter: Takes an array of tag objects.
  • Action: Uses Meta service to dynamically update meta tags across pages or in response to user interactions.