AngularStructuredData

Structured Data Service

You can add the structured data by using the StructuredDataService service.

By using the StructuredDataService you can add structured data to the page, remove structured data from the page and remove all structured data from the page.

If you use this approach, you have to remove the structured data from the page manually, otherwise, the structured data will stay on the page even if you navigate to another page.

Available methods:

Method	Description	Input	Output
addStructuredData	Add structured data to the page	Schema : Any child of schema class	string: The id of the structured data, can be used to delete the structured data of the page
removeStructuredData	Remove structured data from the page	string : the id of the structured data you want to delete	void
removeAllStructuredData	Remove all structured data from the page	void	void

Example:

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet],
  providers: [StructuredDataService],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss',
})
export class AppComponent {
  private structuredDataService: StructuredDataService;

  constructor(structuredDataService: StructuredDataService) {
    this.structuredDataService = structuredDataService;

    const schema = new WebsiteSchema();

    schema.name = 'My Website';
    schema.url = 'https://www.example.com';
    schema.search_url = 'https://www.example.com/search?q=';

    this.structuredDataService.addStructuredData(schema);
  }
}

Structured Data Component

You can add the structured data by using the StructuredDataComponent component.

This will allow you to add structured data to the page and remove structured data from the page automatically when the component is destroyed.

In an SSR application it's recommended to use the StructuredDataComponent component, because it will avoid duplicate structured data on the page.

Example:

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, StructuredDataComponent],
  providers: [],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss',
})
export class AppComponent {
  schema!: Schema;

  constructor() {
    const schema = new WebsiteSchema();

    schema.name = 'My Website';
    schema.url = 'https://www.example.com';
    schema.search_url = 'https://www.example.com/search?q=';

    this.schema = schema;
  }
}

<sd-structured-data [schema]="schema"/>

Article

Example:

const schema = new ArticleSchema();
schema.type = 'Article';
schema.headline = 'Article headline';
schema.image = ['https://www.example.com/image.jpg'];
schema.author_name = 'John Doe';
schema.author_url = 'https://www.example.com/johndoe';
schema.author_type = 'Person';
schema.publisher_name = 'My Website';
schema.publisher_url = 'https://www.example.com';
schema.date_published = new Date('2021-01-01');
schema.date_modified = new Date('2021-01-02');

Property	Type	Description
type	Article|NewsArticle|BlogPosting	The type of the schema
headline	string	The headline of the article
image	string[]	The URL of the images of the article
author_name	string	The name of the author of the article
author_url	string	The URL of the author of the article
author_type	'Person' | 'Organization'	The type of the author of the article
publisher_name	string	The name of the publisher of the article
publisher_url	string	The URL of the publisher of the article
date_published	Date|null	The date the article was published
date_modified	Date|null	The date the article was modified

Website SearchBox

Example:

const schema = new WebsiteSchema();

schema.name = 'My Website';
schema.url = 'https://www.example.com';
schema.search_url = 'https://www.example.com/search?q=';
schema.search_url_suffix = '&source=structured_data';

Property	Type	Description
name	string	The name of the website
url	string	The URL of the website
search_url	string	The URL of the search page
search_url_suffix	string	The suffix of the search URL

FAQPage

Example:

const schema = new FaqSchema();

schema.questions = [
  {
    question: 'What is the best thing about structured data?',
    answer: 'The best thing about structured data is that it helps search engines understand the content of the page.'
  },
  {
    question: 'What is the best thing about structured data?',
    answer: 'The best thing about structured data is that it helps search engines understand the content of the page.'
  }
];

Property	Type	Description
questions	Question[]	The list of the Question of the page

BreadcrumbList

Example:

const schema = new BreadcrumbSchema();

schema.items = [
  {
    position: 1,
    name: 'Home',
    item: 'https://www.example.com'
  },
  {
    position: 2,
    name: 'Category',
    item: 'https://www.example.com/category'
  },
  {
    position: 3,
    name: 'Subcategory',
    item: 'https://www.example.com/category/subcategory'
  }
];

Property	Type	Description
items	BreadcrumbItem[]	The list of the BreadcrumbItem of the page

Event

Example:

const schema = new EventSchema();

schema.name = 'Event Name';
schema.perfomer_name = 'Performer Name';
schema.description = 'Event Description';
schema.image_url = 'https://example.com/image.jpg';
schema.eventStatus = 'Scheduled';

const offer = new OfferSchema();
offer.price = 100;

schema.offers = [
  offer
];


const attendanceMode = new OfflineEventAttendanceModeSchema();
attendanceMode.name = 'Offline Event';
attendanceMode.postalAddress = new PostalAddressSchema();
attendanceMode.postalAddress.streetAddress = '123 Main St';
attendanceMode.postalAddress.addressLocality = 'Springfield';
attendanceMode.postalAddress.addressRegion = 'IL';
attendanceMode.postalAddress.postalCode = '62701';
attendanceMode.postalAddress.addressCountry = 'US';

schema.attendanceMode = attendanceMode;

Property	Type	Description
name	string	The name of the event
description	string	The description of the event
image_url	string	The URL of the image of the event
perfomer_name	string	The name of the performer of the event
perfomer_type	'Person'| 'PerformingGroup'| 'MusicGroup'| 'DanceGroup'| 'TheaterGroup'	The name of the performer of the event
eventStatus	'Scheduled'| 'Cancelled'| 'Postponed'| 'MovedOnline'| 'None'	The status of the event
offers	OfferSchema[]	The list of the offers of the event
attendanceMode	EventAttendanceModeSchema	The attendance mode of the event
startDate	Date|null	The start date of the event
endDate	Date|null	The end date of the event