Google rich result-ის კომპონენტი Angular აპლიკაციისთვის

როგორც იცით, იმისთვის, რომ გუგლის საძიებო სისტემაში ჩვენი გვერდი ლამაზად მეტად ინფორმირებულად გამოჩნდეს საჭიროა schema.org-ის json-ld-ის გამოყენება.

სტრუქტურის ნიმუშების სანახავად შეგიძლიათ გადახვიდეთ მოცემულ ბმულზე

ანგულარ აპლიკაცას არ აქვს პირდაპირი მხარდაჭერა და სწორედ ამიტომ ავაწყე კომპონენტი, რომელიც უზრუნველყოფს დოკუმენტში json-ld-ის ინტეგრაციას.

პირველ რიგში დავაგენერიროთ კომპონენტი

ng g c json-ld

კომპონენტის გენერაციის შემდეგ, ჩვენი კომპონენტი უნდა გამოიყურებოდეს შემდეგნაირად

json-ld.component.ts

import { DOCUMENT } from '@angular/common';
import { AfterViewInit, Component, Inject, Input, Renderer2 } from '@angular/core';

@Component({
  selector: 'app-json-ld',
  templateUrl: './json-ld.component.html',
  styleUrls: ['./json-ld.component.scss']
})
export class JsonLdComponent implements AfterViewInit {

  @Input() data!: any;

  constructor(
    @Inject(DOCUMENT) private _document: Document,
    private _renderer2: Renderer2
  ) { }

  ngAfterViewInit(): void {
    const jsonLdElement: HTMLElement = this._document.querySelector('[type="application/ld+json"]') as HTMLElement;

    if (!jsonLdElement) {
      const script = this._renderer2.createElement('script');
      script.type = `application/ld+json`;
      script.text = JSON.stringify(this.data);
      this._renderer2.appendChild(this._document.head, script);
      return;
    }

    jsonLdElement.innerText = JSON.stringify(this.data);
  }

}

მას შემდეგ რაც კომპონენტს ავაწყობთ ჩვენ უკვე შეგვიძლია მას @Input() დეკორატორის დახმარებით სასურველი კომპონენტიდან გადმოვაწოდოთ ჩვენთვის სასურველი სტრუქტურის json.

მაგალითად წარმოვიდგინოთ, რომ გვაქვს ონლაინ მაღაზია და გვინდა json-ld-ის ინიციალიზაცია მაღაზიის პროდუქტებზე

product.component.ts

import { Component, OnInit } from '@angular/core';
import { Observable, tap } from 'rxjs';
import { ProductService } from '../services/product.service';

interface Product {
  title: string;
  description: string;
  images: string[];
  price: string;
}

@Component({
  selector: 'app-product',
  templateUrl: './product.component.html',
  styleUrls: ['./product.component.scss']
})
export class ProductComponent implements OnInit {

  product$!: Observable<Product>;
  schema!: any;

  constructor(
    private _productService: ProductService
  ) { }

  ngOnInit(): void {
    this.product$ = this._productService.getProduct().pipe(
      tap(product => {
        this.schema = {
          "@context": "https://schema.org/",
          "@type": "Product",
          "name": product.title,
          "img": product.images,
          "description": product.descr.replace(/(<([^>]+)>)/gi, "").slice(0, 145),
          "sku": product.product_id,
          "offers": {
            "@type": "AggregateOffer",
            "offerCount": product.quantity,
            "lowPrice": product.price,
            "highPrice": product.price,
            "priceCurrency": "GEL",
          }
        }
      })
    );
  }

}

product.component.html

<ng-container *ngIf="(product$|async) as product">
    ... თქვენი კოდი
    <app-json-ld [data]="schema"></app-json-ld>
</ng-container>