OK, let's implement structured data in our Angular app and enrich our search results in Google search engine .
What is structured data and what is good for? Well you can find out that on this link.
So let's implement this in our Angular application in 3 simple steps
1. install @ngx-lite/json-ld and add it to your app
npm install @ngx-lite/json-ld --save
2. add it to your AppModule:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
// Import library module
import { NgxJsonLdModule } from '@ngx-lite/json-ld';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
// Register module
NgxJsonLdModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
3. insert directive to your AppComponent
@Component({
selector: 'app',
template: `<ngx-json-ld [json]="schema"></ngx-json-ld>`
})
class AppComponent {
schema = {
'@context': 'http://schema.org',
'@type': 'WebSite',
'name': 'angular.io',
'url': 'https://angular.io'
};
}
You can set many different types of structured data, the list of data supported by Google you can find here
For example if you want set up structured data for article, here is how it should look like for the article you are currently reading:
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"image": [
"https://floyk-dev.s3.eu-central-1.amazonaws.com/post_photos/thumb/77a74c33e4f9f5b2dc3a8e43b417ac8b.jpg",
"https://floyk-dev.s3.eu-central-1.amazonaws.com/post_photos/normal/77a74c33e4f9f5b2dc3a8e43b417ac8b.jpg",
"https://floyk-dev.s3.eu-central-1.amazonaws.com/post_photos/big/77a74c33e4f9f5b2dc3a8e43b417ac8b.jpg"
],
"url": "https://floyk.com/en/post/structural-data-in-your-angular-app",
"dateCreated": "2020-09-05",
"headline": "Structural data in your Angular app",
"name": "Structural data in your Angular app",
"description": "OK, let's implement structured data in our Angular app and enrich our search results in Google search engine .What is ...",
"keywords": "",
"author": {
"@type": "Person",
"name": "Igor Simic",
"creator": [
"Igor Simic"
]
}
}
After you are done, please use Google tool to check your rich results:
https://search.google.com/test/rich-results
If everything is fine you should see something like this:
