在 Angular2 组件模板中添加 ld+json 脚本标签答案

【问题标题】：Adding ld+json script tags in Angular2 component template在 Angular2 组件模板中添加 ld+json 脚本标签
【发布时间】：2018-03-30 15:13:35
【问题描述】：

我尝试了太多棘手的方法，如 Renderer2 或 ɵDomAdapter， script 标签很好地集成在html中，但是当使用谷歌的结构化数据工具加载 url 时， ld+json 脚本未渲染！

有没有办法让google在加载组件后渲染页面？

【问题讨论】：

我猜 Google 的 SDTT 根本不执行 JavaScript。或者你有一个例子吗？
在另一个项目中它可以很好地与 Renderer2, link 一起工作，谷歌很好地解析了注入的 js 脚本..

标签： javascript angular seo

【解决方案1】：

有几种方法可以实现这一点。下面的代码是我想出的最佳解决方案。这个例子也适用于 Angular Universal。

import { Component, OnInit } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Component({
  selector: 'app-root',
  template: '<div [innerHTML]="jsonLD"></div>'
})
export class JsonLdComponent implements OnChanges {
  jsonLD: SafeHtml;
  constructor(private sanitizer: DomSanitizer) { }

  ngOnInit(changes: SimpleChanges) {
    const json = {
      "@context": "http://schema.org",
      "@type": "Organization",
      "url": "https://google.com",
      "name": "Google",
      "contactPoint": {
        "@type": "ContactPoint",
        "telephone": "+1-000-000-0000",
        "contactType": "Customer service"
      }
    };

    // Basically telling Angular this content is safe to directly inject into the dom with no sanitization
    this.jsonLD = this.getSafeHTML(json);
  }

  getSafeHTML(value: {}) {
    const json = JSON.stringify(value, null, 2);
    const html = `${json}`;
    // Inject to inner html without Angular stripping out content
    return this.sanitizer.bypassSecurityTrustHtml(html);
  }
}

我在这里https://coryrylan.com/blog/angular-seo-with-schema-and-json-ld的这篇博文中详细介绍了

我也采用了这种技术并将其包装到一个 npm 包中以制作它更可重用。 https://github.com/coryrylan/ngx-json-ld

【讨论】：

我们可以添加隐藏此 div 不显示在网页
上吗？它会起作用吗？
这里我们期待的是脚本而不是 div
这个插入和 div 而不是脚本标签

【解决方案2】：

我在 Angular 9 TypeScript 中使用了这个变体

import { Component, OnInit } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Component({
    selector: 'app-schema-org',
    template: '<div [innerHTML]="jsonLD"></div>',
})
export class SchemaOrgComponent implements OnInit {
    jsonLD: SafeHtml;
    constructor(private sanitizer: DomSanitizer) { }

    ngOnInit() {
        const json = {
            '@context': 'http://schema.org',
            '@type': 'Organization',
            'url': 'https://google.com',
            'name': 'Google',
            'contactPoint': {
                '@type': 'ContactPoint',
                'telephone': '+1-000-000-0000',
                'contactType': 'Customer service',
            },
        };

        // Basically telling Angular this content is safe to directly inject into the dom with no sanitization
        this.jsonLD = this.getSafeHTML(json);
    }

    getSafeHTML(value: {}) {
        const json = JSON.stringify(value, null, 2);
        const html = `<script type="application/ld+json">${json}</script>`;
        // Inject to inner html without Angular stripping out content
        return this.sanitizer.bypassSecurityTrustHtml(html);
    }
}

然后叫它<app-schema-org></app-schema-org>

对我来说，上面的示例 (https://stackoverflow.com/a/47299603/5155484) 没有任何意义，因为它导入 OnInit 并实现 OnChange 并使用带有参数的 ngOnInit 进行更改。

这是我的工作固定示例。

【讨论】：

这个插入和 div 而不是脚本标签