wake-up-neo.net

wie man einen kanonischen Link in Winkel 5 hinzufügt

So fügen Sie den kanonischen Link in Winkel 5 dynamisch hinzu

<link rel="canonical" href="http://foobar.com/gotcah"/>
5
sai kiran

Ich habe die Lösung, Link-Service (ex: link.service.ts) erstellen und den folgenden Code einfügen:

import { Injectable, Optional, RendererFactory2, ViewEncapsulation, Inject } from '@angular/core';
import { DOCUMENT } from '@angular/platform-browser';

@Injectable()
export class LinkService {

constructor(
    private rendererFactory: RendererFactory2,
    @Inject(DOCUMENT) private document
) {
}

/**
 * Inject the State into the bottom of the <head>
 */
addTag(tag: LinkDefinition, forceCreation?: boolean) {

    try {
        const renderer = this.rendererFactory.createRenderer(this.document, {
            id: '-1',
            encapsulation: ViewEncapsulation.None,
            styles: [],
            data: {}
        });

        const link = renderer.createElement('link');
        const head = this.document.head;
        const selector = this._parseSelector(tag);

        if (head === null) {
            throw new Error('<head> not found within DOCUMENT.');
        }

        Object.keys(tag).forEach((prop: string) => {
            return renderer.setAttribute(link, prop, tag[prop]);
        });

        // [TODO]: get them to update the existing one (if it exists) ?
        renderer.appendChild(head, link);

    } catch (e) {
        console.error('Error within linkService : ', e);
    }
}

private _parseSelector(tag: LinkDefinition): string {
    // Possibly re-work this
    const attr: string = tag.rel ? 'rel' : 'hreflang';
    return `${attr}="${tag[attr]}"`;
}
}

 export declare type LinkDefinition = {
  charset?: string;
  crossorigin?: string;
  href?: string;
  hreflang?: string;
  media?: string;
  rel?: string;
  rev?: string;
  sizes?: string;
  target?: string;
  type?: string;
} & {
    [prop: string]: string;
};

importservice in der Komponente:

import { LinkService } from '../link.service';

constructor(private linkService: LinkService) {

this.linkService.addTag( { rel: 'canonical', href: 'url here'} );
}

bitte beziehen Sie sich auf den folgenden Link:

https://github.com/angular/angular/issues/15776

1
sai kiran

Angesichts des gleichen Problems suchte ich herum und fand eine Anleitung, wie das geht:

https://www.concretepage.com/angular/angular-title-service-and-canonical-url

Es verwendet zwar Angular 6, aber ich denke, dass es mit 5 rückwärts kompatibel ist.

Grundsätzlich wird vorgeschlagen, einen Service (SEOService) zu erstellen, um die Erstellung der kanonischen Verbindung an jedem beliebigen Ort zu erleichtern. Es fügt das Angular DOCUMENT-Objekt in den Service ein und erstellt das kanonische Link-Element als HTMLLinkElement.

Es ist darauf zu achten, dass die Lösung vorrendering-/serverseitig gerendert wird. Wenn Sie also die SEO Ihrer Seiten in Ihrer Anwendung besser steuern möchten, glaube ich, dass dies genau das ist, was Sie möchten.

Hier ist eine minimale Umschreibung des Dienstes aus dem Artikel:

seo.service.ts

import { Injectable, Inject } from '@angular/core';
import { DOCUMENT } from '@angular/common';

@Injectable({
  providedIn: 'root'
})
export class SeoService { 

  constructor(@Inject(DOCUMENT) private doc) {}

  createLinkForCanonicalURL() {
     let link: HTMLLinkElement = this.doc.createElement('link');
     link.setAttribute('rel', 'canonical');
     this.doc.head.appendChild(link);
     link.setAttribute('href', this.doc.URL);
   }
} 

Und hier ist die Komponente, die den Service verbraucht, neu geschrieben:

data.component.ts

import { Component, OnInit } from '@angular/core';
import { SeoService } from './seo.service';

@Component({
  selector: 'app-data',
  templateUrl: './data.component.html'
})
export class DataComponent implements OnInit {

  constructor(private seoService: SEOService) { }

  ngOnInit() {
    this.createLinkForCanonicalURL();
  }

  createLinkForCanonicalURL() {
    this.seoService.createLinkForCanonicalURL();
  } 
}

Die createLinkForCanonicalURL()-Methode kann einfach einen optionalen Parameter der URL übernehmen, den Sie als kanonische Referenz für die Seite verwenden möchten, um vollständige Kontrolle zu erhalten.

5