Angular uygulamasında meta etiketlerini kolayca kullanabileceğimiz, Angular'ın bize sunduğu meta servisini nasıl kullanabiliriz küçük bir örnek ile bunu anlatacağım.


İlk önce örneğimizde kullanacağımız componentlerimizi oluşturalım;

ng g c components/home
ng g c components/about
ng g c components/references
ng g c components/contact


app-routing.module.ts;

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: 'references', component: ReferencesComponent },
  { path: 'contact', component: ContactComponent }
];


Şimdi meta servisimizi oluşturalım;

ng g s services/seo

spec dosyasını (unit test için) istemiyorsanız komutun sonuna --spec false yazabilirsiniz.


Şimdi gelelim bu servis dosyamızın içinde neler yapacağımıza. Meta ve Title'ı @angular/platform-browser içerisinden import edeceğiz ve iki tane method yazacağız. Bu methodlardan bir tanesi title değiştirmek için biride meta etiketleri için olacak. Hiç uzatmadan bunları yapalım.


seo.service.ts;

import { Injectable } from '@angular/core';
import { Meta, Title } from '@angular/platform-browser';

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

  constructor(
    private title: Title,
    private meta: Meta
  ) { }

  updateTitle(title: string) {
    this.title.setTitle(title);
  }

  updateMeta(name: string, content: string) {
    this.meta.updateTag({ name, content });
  }

}


Şimdi bu servisi kullanalım;


home.component.ts;

import { SeoService } from '../../services/seo.service';

constructor(
  private seoService: SeoService
) { }

ngOnInit() {
  this.seoService.updateTitle('Anasayfa');
  this.seoService.updateMeta('description', 'Anasayfa açıklamasıdır.');
}



about.component.ts;

import { SeoService } from '../../services/seo.service';

constructor(
  private seoService: SeoService
) { }

ngOnInit() {
  this.seoService.updateTitle('Hakkımızda');
  this.seoService.updateMeta('description', 'Hakkımızda sayfası açıklamasıdır.');
}


Diğer componentler içinde bu şekilde kullanabilirsiniz. Ve sonucumuz şu şekilde olacaktır;





updateMeta methodumuza name parametresi olarak keywords göndererek veya hangi meta name i kullanmak istiyorsanız onu göndererek sorunsuz kullanabilirsiniz.


Bu örneğimizi şu iki linkten inceleyebilirsiniz;


Bu kullanım sayfa kaynağında tabiki görünmeyecektir ve seo için tek başına bu yeterli değildir. Bunun için daha ileri seviye olan Angular Universal kullanmanız gerekir. Angular'da seo ve angular universal kullanımı başlıklı yazımdan bunuda inceleyebilirsiniz.


Umarım faydalı olur.