web-dev-qa-db-ja.com

angular 5に正準リンクを追加する方法

angular 5に正規リンクを動的に追加する方法

<link rel="canonical" href="http://foobar.com/gotcah"/>
angularangular5meta-tagscanonical-link
6
sai kiran

私は解決策を得て、リンクサービス（例：link.service.ts）を作成し、以下のコードを貼り付けます：

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;
};

コンポーネントのインポートサービス：

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

constructor(private linkService: LinkService) {

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

以下のリンクを参照してください：

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

2
sai kiran

同じ問題に直面して、私は周りを検索し、これを行う方法のガイドを見つけました：

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

Angular 6を使用していますが、5との下位互換性があると思います。

それは基本的に、それが挿入されるところはどこでも正規リンクの作成を容易にするためのサービス（SEOService）を作成することを提案します。 Angular DOCUMENTオブジェクトをサービスに挿入し、正規リンク要素をHTMLLinkElementとして作成します。

ソリューションがプリレンダリング/サーバーサイドレンダリングに対応していることに注意してください。アプリケーションのページのSEOをより適切に制御したい場合は、これが必要だと思います。

以下は、記事からのサービスの最小限の書き直しです。

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);
   }
} 
_

そして、これはサービスを消費するコンポーネントの書き直しです：

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();
  } 
}
_

createLinkForCanonicalURL()メソッドに、フルコントロールのために、ページの正規の参照として必要なURLのオプションのパラメーターを指定するだけで済みます。

8
Andreas Lorenzen

これはAngular 8または9に適用され、正規URLをサイトのすべてのページに追加します。

  1. 正規サービスを作成します。
// shared/canonical/canonical.service.ts


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

@Injectable({
  providedIn: 'root'
})
export class CanonicalService {
  constructor(@Inject(DOCUMENT) private dom) {}

  setCanonicalURL(url?: string) {
    const canURL = url == undefined ? this.dom.URL : url;
    const link: HTMLLinkElement = this.dom.createElement('link');
    link.setAttribute('rel', 'canonical');
    this.dom.head.appendChild(link);
    link.setAttribute('href', canURL);
  }
}
  1. 正規サービスを参照し、アプリコンポーネントで呼び出します
// app.component.ts
import { CanonicalService } from './shared/services/canonical/canonical.service';
...

ngOnInit() {
  this.canonicalService.setCanonicalURL();
}
...
1
andimiya

正規リンクを動的に追加する場合は、次のような単純なmoveToHeadディレクティブを作成します。

_@Directive({
  selector: '[appMoveToHead]'
})
export class MoveToHeadDirective implements OnDestroy, OnInit {

  constructor(private renderer: Renderer2, 
              private elRef: ElementRef, 
              @Inject(DOCUMENT) private document: Document) {

  }

ngOnInit(): void {
    this.renderer.appendChild(this.document.head, this.elRef.nativeElement);
    this.renderer.removeAttribute(this.elRef.nativeElement, 'appmovetohead');
  }

  ngOnDestroy(): void {
    this.renderer.removeChild(this.document.head, this.elRef.nativeElement);
  }
}

_

ここでは、ユーザーが別のページに移動したときに、正規タグをDOMから削除しています。これは、MoveToHeadディレクティブのngOnDestroy()で行います。したがって、前の正規タグが新しいページに存在するケースが処理されます。

使用法：任意のcomponent.tsで

_canonicalLink:string;
constructor(private sanitizer: DomSanitizer) { }
//In oninit or when your data is ready, generate canonical link
ngOnInit() {

    this.blogsService.getBlog(this.blogId).subscribe(data => {
       let canLink = "https://example.com/blog/"+data.blogId;
       // You can use pipe for sanitizing but lets do it here
       this.canonicalLink = this.sanitizer.bypassSecurityTrustResourceUrl(canLink);
    });
}
_

任意のcomponent.htmlテンプレートで：

_<div *ngIf="canonicalLink">
  <link  rel="canonical" appMoveToHead [attr.href]="canonicalLink" />
</div>

<div>
  <!-- Other template html -->
</div>
_

このようにして、データバインディングやその他すべてのものを使用し、meta、linkなどをテンプレートの他の要素と同じように扱うことができます。例えば-

_<link rel="amphtml" moveToHead [attr.href]="ampUrl">
_

この方法はAngular Universal（SSR）でも機能します。

以下のリンクを参照してください-

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

1
Darshan Devrai