Skip to content

Latest commit

 

History

History
235 lines (182 loc) · 9.34 KB

README.md

File metadata and controls

235 lines (182 loc) · 9.34 KB
Raw

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