Skip to main content

​
Overview

PageComponent is a wrapper component for individual pages in the Jet application. It automatically manages SEO meta tags (title, description, keywords, Open Graph tags) and updates the toolbar title based on input properties.

​
Selector

'jet-page'

​
Usage

Wrap your page content with PageComponent and provide required SEO inputs: 
<jet-page
  seoTitle="Home - My App"
  seoDescription="Welcome to my application home page"
  seoKeywords="home, angular, app"
  toolbarTitle="Home"
  [seoImageUrl]="customImageUrl"
>
  <!-- Your page content here -->
  <h1>Welcome to My App</h1>
  <p>Your content goes here...</p>
</jet-page>

​
Inputs

​
seoTitle
string
required
Page title for browser tab and Open Graph. Sets both <title> tag and og:title meta tag.Example: "Home - Jet Application"
​
seoDescription
string
required
Page description for search engines and social media. Sets both description and og:description meta tags.Example: "Welcome to the Jet Angular starter kit home page"
​
seoKeywords
string
required
Comma-separated keywords for SEO. Sets the keywords meta tag.Example: "angular, starter kit, pwa, material design"
​
toolbarTitle
string
required
Title displayed in the application toolbar. Updates the ToolbarTitleService signal.Example: "Dashboard"
​
seoImageUrl
string | undefined
default:"undefined"
Optional custom Open Graph image URL. If not provided, defaults to /og-image.jpg from the application origin.Example: "https://example.com/custom-og-image.jpg"

​
Features

​
Automatic SEO Management

The component uses Angular effects to automatically update meta tags whenever input values change:
  • Browser Title: Updated via Angular’s Title service
  • Meta Description: Standard and Open Graph description tags
  • Meta Keywords: Search engine keywords
  • Open Graph Image: Social media preview image
  • Open Graph Title: Social media title

​
Content Projection

The component uses <ng-content /> to project child content, making it a transparent wrapper around your page content.

​
Effects

The component implements five Angular effects that watch input signals:

​
seoDescription Effect

Updates the description meta tags: 
this.#meta.updateTag({ content: seoDescription, name: 'description' });
this.#meta.updateTag({ content: seoDescription, name: 'og:description' });

​
seoImageUrl Effect

Updates the Open Graph image, falling back to default if not provided: 
const seoImageUrl = this.seoImageUrl() ?? this.#defaultSeoImageUrl;
this.#meta.updateTag({ content: seoImageUrl, name: 'og:image' });

​
seoKeywords Effect

Updates the keywords meta tag: 
this.#meta.updateTag({ content: seoKeywords, name: 'keywords' });

​
seoTitle Effect

Updates both browser title and Open Graph title: 
this.#title.setTitle(seoTitle);
this.#meta.updateTag({ content: seoTitle, name: 'og:title' });

​
toolbarTitle Effect

Updates the toolbar title displayed in the app header: 
this.#toolbarTitleService.setToolbarTitle(toolbarTitle);

​
Dependencies

The component injects these services:
  • Meta - Angular meta tag management
  • Title - Angular page title service
  • LoggerService - Debug logging for effect runs
  • ToolbarTitleService - Toolbar title state management

​
Example: Complete Page Implementation

import { Component } from '@angular/core';
import { PageComponent } from '@jet/components/page/page.component';

@Component({
  selector: 'app-home',
  standalone: true,
  imports: [PageComponent],
  template: `
    <jet-page
      seoTitle="Home - Jet App"
      seoDescription="Modern Angular starter kit with Material Design"
      seoKeywords="angular, typescript, material design, pwa"
      toolbarTitle="Home"
    >
      <div class="container">
        <h1>Welcome Home</h1>
        <p>Your awesome content here...</p>
      </div>
    </jet-page>
  `
})
export class HomePageComponent {}

​
Best Practices

  1. Always provide required inputs: seoTitle, seoDescription, seoKeywords, and toolbarTitle are required
  2. Keep titles concise: Aim for 50-60 characters for SEO titles
  3. Write descriptive descriptions: 150-160 characters is optimal for search results
  4. Use relevant keywords: Comma-separated, 5-10 keywords is ideal
  5. Custom OG images: Provide custom seoImageUrl for important pages (1200x630px recommended)
  6. Toolbar titles: Keep short and descriptive for the app header

​
Source

Location: src/app/components/page/page.component.ts

Build docs developers (and LLMs) love

Get started for freeTalk to us