在 html 标签中每页添加微数据 angular 5
Add microdata per page in html tag angular 5
我正在处理 angular 5 个应用程序,但我在某个时候卡住了。我想在 html 标签中动态添加特定于每个页面的微数据,例如
<html itemscope itemtype="http://schema.org/QAPage">
有什么办法吗?如果有的话请告诉我。
对于结构化数据,google好像推荐ld+json。查看 intro to structured data。如果你决定使用 ld+json 你可以使用这样的东西:
@Component({
selector: 'json-ld',
template: ``,
styleUrls: ['./json-ld.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class JSONLdComponent implements OnInit {
private _json: SafeHtml;
@Input()
@HostBinding('innerHtml')
set json(v: any) {
this._json = this.getSafeHtml(v);
}
get json() {
return this._json;
}
constructor(private sanitizer: DomSanitizer) {}
ngOnInit() {}
private getSafeHtml(value: object) {
const json = value
? JSON.stringify(value, null, 2).replace(/<\/script>/g, '<\/script>')
: '';
const html = `<script type="application/ld+json">${json}</script>`;
return this.sanitizer.bypassSecurityTrustHtml(html);
}
}
可作为 npm package。
如果您想将 <meta>
标签添加到您的页面,请查看 Meta class。您可以将它注入任何组件和 add/remove/update meta
标签。
我正在处理 angular 5 个应用程序,但我在某个时候卡住了。我想在 html 标签中动态添加特定于每个页面的微数据,例如
<html itemscope itemtype="http://schema.org/QAPage">
有什么办法吗?如果有的话请告诉我。
对于结构化数据,google好像推荐ld+json。查看 intro to structured data。如果你决定使用 ld+json 你可以使用这样的东西:
@Component({
selector: 'json-ld',
template: ``,
styleUrls: ['./json-ld.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class JSONLdComponent implements OnInit {
private _json: SafeHtml;
@Input()
@HostBinding('innerHtml')
set json(v: any) {
this._json = this.getSafeHtml(v);
}
get json() {
return this._json;
}
constructor(private sanitizer: DomSanitizer) {}
ngOnInit() {}
private getSafeHtml(value: object) {
const json = value
? JSON.stringify(value, null, 2).replace(/<\/script>/g, '<\/script>')
: '';
const html = `<script type="application/ld+json">${json}</script>`;
return this.sanitizer.bypassSecurityTrustHtml(html);
}
}
可作为 npm package。
如果您想将 <meta>
标签添加到您的页面,请查看 Meta class。您可以将它注入任何组件和 add/remove/update meta
标签。