მეტა სერვისი Angular აპლიკაციისთვის

როდესაც ანგულარის აპლიკაციას ვაწყობთ, იმითვის, რომ ჩვენი საიტი გუგლში და სოციალურ ქსელებში ლამაზად და ინფორმაციულად გამოჩნდეს გაზიარებისას, საჭიროა სწორი meta თეგების გაწერა, სწორედ ამიტომ გადავწყვიტე სტანდარტულად დამეწერა სერვისი, რომელიც ჩემს ყველა დაწერილ აპლიკაციაში მაქვს გამოყენებული.

index.html-ის მომზადება

<!doctype html>
<html lang="ka">

<head>
  <meta charset="utf-8">
  <title>თქვენი საიტის სათაური</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- fav icon -->
  <link rel="icon" type="image/png" href="./assets/icons/logo.png">
  <!-- open graph meta tags -->
  <meta name="og:type" content="website" />
  <meta name="og:title" content="" />
  <meta name="og:description" content="" />
  <meta name="og:url" content="" />
  <meta name="og:image" content="" />
  <meta name="image" content="" />
  <!-- twitter meta tags -->
  <meta name="twitter:card" content="" />
  <meta name="twitter:site" content="" />
  <meta name="twitter:creator" content="" />
  <meta name="twitter:description" content="" />
  <meta name="twitter:url" content="" />
  <meta name="twitter:image" content="" />
</head>
...

როგორც ნახეთ index.html-ში წინასწარ გავამზადეთ ყველა მეტა თეგი content="" ცარიელი ატრიბუტით, რათა მომავალში აღარ დაგვჭირდეს ანგულარის აპლიკაციიდან ამ თეგების გენერაცია.

გენერაციის მაგივრად ჩვენ უბრალოდ განვაახლებთ მათ შიგთავსს კონკრეტული გვერდებიდან გამომდინარე.

შემდეგ ეტაპზე ვაგენერირებთ meta სერვისს

ng g s meta

სერვისის გენერაციის შემდეგ უკვე შეგიძლიათ გამოიყენოთ ჩემი კოდის ნიმუში

meta.service.ts

import { Injectable } from '@angular/core';
import { Meta, Title } from '@angular/platform-browser';
import { Router } from '@angular/router';
import { environment } from 'src/environments/environment';

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

  constructor(
    private _title: Title,
    private _meta: Meta,
    private _router: Router
  ) {
  }

  update(
    title: string,
    description: any,
    img?: string
  ) {
    /* page title */
    this._title.setTitle(title);
    /* meta tags */
    this._meta.updateTag({name: 'description', content: `${description.replace(/(<([^>]+)>)/gi, "").slice(0, 145)}...`});
    this._meta.updateTag({name: 'author', content: `Val Do`});
    /* open graph */
    this._meta.updateTag({ name: 'og:title', content: title });
    this._meta.updateTag({ name: 'og:description', content: `${description.replace(/(<([^>]+)>)/gi, "").slice(0, 145)}...` });
    this._meta.updateTag({ name: 'og:url', content:`${environment.baseUrl}/${this._router.url.slice(1)}` });
    this._meta.updateTag({ name: 'og:image', content: img || `${environment.baseUrl}/assets/social.jpg` });
    this._meta.updateTag({ name: 'image', property: 'og:image', content: img || `${environment.baseUrl}/assets/social.jpg` });
    /* twitter */
    this._meta.updateTag({ name: 'twitter:card', content: 'summary_large_image' });
    this._meta.updateTag({ name: 'twitter:site', content: '@va1_do' });
    this._meta.updateTag({ name: 'twitter:creator', content: '@va1_do' });
    this._meta.updateTag({ name: 'twitter:title', content: title });
    this._meta.updateTag({ name: 'twitter:description', content: `${description.replace(/(<([^>]+)>)/gi, "").slice(0, 145)}...` });
    this._meta.updateTag({ name: 'twitter:url', content:`${environment.baseUrl}/${this._router.url.slice(1)}` });
    this._meta.updateTag({ name: 'twitter:image', content: img ||`${environment.baseUrl}/assets/social.jpg` });
  }
}

meta.service.ts ფაილში გვაქვს 1 მეთოდი update(title: string, description: any, img?:string), მოცემულ მეთოდს გადმოეცემა 2 ძირითადი და 1 არა ძირითადი პარამეტრი ესენია:

title - გვერდის სათაური
description - გვერდის აღწერა
img? - გვერდის სურათი

როგორც ზემოთ ავღნიშნე img პარამეტრი არაა საჭირო პარამეტრი, იმ შემთხვევაში თუ პარამეტრი არ გადმოეცემა შეგიძლიათ მიუთითოთ რაიმე სტანდარტული სურათი თქვენი აპლიკაციისთვის, რომელიც იქნება პროექტის assets/ დირექტორიაში

როგორც მეტა სერვისიდან ჩანს ვიყენებ javascript-ის .replace() მეთოდს, რომელსაც გადავცემ regex-ს რომელიც უზრუნველყოფს თეგების სინტაქსის ამოღებას კონკრეტული ტექსტიდან, იმ შემთხვევაში თუ თქვენ description-პარამეტრში გადმოეცით ტექსტი, რომელიც შეიცავს html თეგებს, ასევე ვიყენებ .slice(0, 145) მეთოდს რომელიც გადმოცემული ტექსტიდან ამოიღებს მხოლოდ მაქსიმუმ 145 სიმბოლოს, რაც ზოგადად description ტექსტის მაქსიმალური სიმბოლოების რაოდენობაა.

app.component.ts

გამოყენების მაგალითი

import { Component, OnInit } from '@angular/core';
import { MetaService } from './meta.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit{
  constructor(
    private _metaService: MetaService
  ) {}

  ngOnInit(): void {
    this._metaService.update(
      'თქვენი გვერდის სათაური',
      'თქვენი გვერდის აღწერა',
      'თქვენი გვერდის ფოტოს მისამართი path/img'
    )
  }

}

პ.ს.

იმისთვის, რომ meta სერვისმა იმუშაოს სოციალურ ქსელებში აუცილებელია თქვენი პალიკაცია იყენებდეს Angular universal-ს ანუ server side rendering-ს