添加LD + JSON腳本標記

我曾嘗試過許多棘手的方式，如Renderer2或ɵDomAdapter， script標籤在HTML，整合良好，但加載與結構化數據的URL時，谷歌工具， ld + json腳本沒有呈現！添加LD + JSON腳本標記

有沒有辦法讓谷歌渲染頁面加載組件後？

2017-10-18 Wassim Ben Amor

我猜想Google的SDTT根本不會執行JavaScript。或者你有一個例子，它的工作原理？ – unor

在另一個項目中，它可以很好地處理Renderer2，[link]（https://imgur.com/a/ZFQTC），Google解析注入的js腳本非常好。 –

有幾種方法可以實現這一點。下面的代碼是我提出的最佳解決方案。這個例子也適用於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

來源

2017-11-15 04:54:06

添加LD + JSON腳本標記

回答

相關問題