متا تگ های HTML ، فرا داده (metadata) را برای صفحات HTML فراهم میکند.در Angular 4 ، یک سرویس به نام “Meta” وجود دارد که برای گرفتن و اضافه کردن متا تگ ها از آن استفاده می شود در این مقاله درباره ی نحوه ی استفاده از این سرویس و متا تگ های get/set HTML در angular 4 صحبت خواهیم کرد.

همان طور که میدانید فرا داده ها (Metadata) در صفحه نشان داده نمی شوند المان های Meta معمولا برای مشخص کردن توضیحات صفحه  ، کلمات کلیدی ، نویسنده ، آخرین تغییرات و برای دیگرفرا داده ها استفاده میشوند.فرا داده ها توسط مروگر (درباره ی نحوه نمایش محتوی یا بارگذاری صفحه) ، موتور های جست و جو(کامات کلیدی)،یا دیگر وب سرویس ها ، استفاده میشوند . تگ های متا نقش بسیار مهمی در SEO دارند. در Angular 4 ، یک سرویس به نام “Meta” وجود دارد که برای گرفتن و اضافه کردن متا تگ ها از آن استفاده می شود. این سرویس می تواند به شما کمک کند که متا تگ های مربوطه را بر اساس مسیرهای فعال تنظیم کنید این سرویس به نوبه خود روی SEO وبسایت شما تاثیر می گذارد.

نحوه قرار دادن متا تگ های HTML در Angular 4

استفاده از سرویس Meta انگولار 4 بسیار آسان است . این سرویس حاوی متد ها و نام ها یی است که آنقدر ساده هستند اصلا نیازی به توضیح ندارند.با یک مثال شما را با همه ی متد های آن آشنا میکنیم

addTag

addTags

getTag

getTags

updateTag

removeTag

removeTagElement

ما باید این سرویس را از @angular/platform-browser وارد (import) کنیم و آن را در یک کامپوننت یا در یک سرویس شما تزریق کنیم مثل :

import { Meta } from '@angular/platform-browser';

addTag

هدف این متد از روی نامش هم مشخص است . از این متد برای اضافه کردن تگ های متا استفاده میشود

import { Component } from '@angular/core';
import { Meta } from '@angular/platform-browser';

@Component({
  selector: 'my-app',
  templateUrl: './home.html',
})

export class HomeComponent {
 constructor(private meta: Meta) {
    this.meta.addTag({ name: 'description', content: 'How to use Angular 4 meta service' });
    this.meta.addTag({ name: 'author', content: 'talkingdotnet' });
    this.meta.addTag({ name: 'keywords', content: 'Angular, Meta Service' });
  }
}

addTags

متد addTag ، متا تگ ها را یکی یکی اضافه میکند ، اما با استفاده از متد addTags شما می توانید یکجا ، چندین متا تگ را اضافه کنید.

import { Component } from '@angular/core';
import { Meta } from '@angular/platform-browser';

@Component({
  selector: 'my-app',
  templateUrl: './home.html',
})

export class HomeComponent {
 constructor(private meta: Meta) {
    this.meta.addTags([
      {name: 'description', content: 'How to use Angular 4 meta service'},
      {name: 'author', content: 'talkingdotnet'},
      {name: 'keywords', content: 'Angular, Meta Service'}
    ]);
  }

هر دو متد addTag و addTags یک پارامتر دومی دارند (forceCreation) که از جنس bool می باشد.مقدار true یا false این پارامتر نشان دهنده این است که تگ حتی اگر از قبل موجود است ولی  باز باید ایجاد شود

import { Component } from '@angular/core';
import { Meta } from '@angular/platform-browser';

@Component({
  selector: 'my-app',
  templateUrl: './home.html',
})

export class HomeComponent {
 constructor(private meta: Meta) {
    this.meta.addTag({ name: 'description', content: 'How to use Angular 4 meta service' });
    this.meta.addTag({ name: 'description', content: 'How to use Angular 4 meta service' },true);
    this.meta.addTag({ name: 'author', content: 'talkingdotnet' });
    this.meta.addTag({ name: 'author', content: 'talkingdotnet' });
  }
}

و در زیر HTML تولید میشود

این جا ، تگ متایی که نام (description) دارد دوباره اضافه شد . چون که force creation را روی true گذاشته ایم

getTag

متد getTag مقدار متا تگ را بر میگرداند . این متد رشته یک selector attribute (('name=author')) را میگیرد و یک HTMLMetaElement را برمی گرداند . مثال زیر را ببینید

import { Component } from '@angular/core';
import { Meta } from '@angular/platform-browser';

@Component({
  selector: 'my-app',
  templateUrl: './home.html',
})

export class HomeComponent {
 constructor(private meta: Meta) {
    this.meta.addTag({ name: 'description', content: 'How to use Angular 4 meta service' });
    this.meta.addTag({ name: 'author', content: 'talkingdotnet' });
    const author = this.meta.getTag('name=author');
    console.log(author.content); //talkingdotnet
  }
}

getTags

شبیه getTag میباشد ، متد getTags  رشته یکattribute selector  (('name=author')) را میگیرد و یک آرایه ای از HTMLMetaElement را برمیگرداند

import { Component } from '@angular/core';
import { Meta } from '@angular/platform-browser';

@Component({
  selector: 'my-app',
  templateUrl: './home.html',
})

export class HomeComponent {
 constructor(private meta: Meta) {
    this.meta.addTag({ name: 'description', content: 'How to use Angular 4 meta service' });
    this.meta.addTag({ name: 'author', content: 'talkingdotnet' });
    this.meta.addTag({ name: 'author', content: 'Other Author' }, true);
    const author = this.meta.getTags('name=author');
    console.log(author[0]); //<meta name="author" content="talkingdotnet">
    console.log(author[1]); //<meta name="author" content="Other Author">
  }
}

updateTag

این متد محتوای(content) هر تگ موجود را آپدیت میکند

this.meta.addTag({ name: 'description', content: 'How to use Angular 4 meta service' });
this.meta.updateTag({ name: 'description', content: 'Angular 4 meta service' });

در اینجا، محتوای(content) متا تگِ با نام description ، آپدیت شد در این جا به “Angular 4 meta service” تغییر پیدا کرد.

removeTag

این متد یک attribute selector میگیرد و تگ را حذف میکند . در یک برنامه ی واقعی ، گاهی وضعیت هایی وجود دارند که شما باید این کار را انجام دهید . اگر نیاز به این کار بود ، شما میتوانید از این متد برای حذف هر متا تگی استفاده کنید

this.meta.addTag({ name: 'author', content: 'talkingdotnet' });
this.meta.removeTag('name="author"'); 

removeTagElement

این متد شبیه removeTag می باشد ، متد removeTagElement هم متا تگ حذف میکند اما این متد به جای گرفتن یک انتخابگر بصورت رشته ای (string selector)،  بصورت مستقیم HTMLTagElement را به عنوان ورودی میگیرد

this.meta.addTag({ name: 'author', content: 'talkingdotnet' });
const author = this.meta.getTag('name=author');
this.meta.removeTagElement(author); 

در این جا ، ابتدا متا تگ author را از طریق متد getTag گرفتیم و آن را به removeTagElement پاس دادیم تا آن را حذف کند

نتیجه گیری

سرویس Meta انگولار 4 ، به شما امکان اضافه کردن ، آپدیت کردن ، گرفتن (get) ، و حذف متا تگ ها را می دهد. این سرویس درساخت متا تگ های داینامیک بر اساس مسیر های فعال برنامه ی انگولار به منظور SEO بهتر ، کمک میکند.