Как добавить метатег в индекс. html динамически с данными в angular?

Question

Я хочу поделиться контентом в Facebook с заголовком, изображением и описанием. Для этого мне нужно динамически добавить метатег в index. html. Я перепробовал все возможные аспекты, но это не работает. Описание, изображение не отображаются после публикации в Facebook. Я искал много решений, но у меня не получилось. Есть ли кто-нибудь, чтобы помочь мне избавиться от этой проблемы? спасибо заранее

Answer 1

Вы можете использовать услуги SEO, предоставляемые Angular: Заголовок и Мета из @angular/platform-browser.

Сначала вам нужно будет добавить некоторые данные в ваши маршруты, например:

const routes: Routes = [
  {
    path: '', component: AboutComponent,
    data: {
      title: 'About',
      metatags: {
        'og:description': `your description here`,
        'twitter:description': `your description`,
         keywords: `your keywords here`
      }
    }
  }
];

Затем внутри вашего метода ngOnInit вашего app.component.ts файла вы будете отслеживать события маршрутизатора и для каждого события NavigationEnd (означает новый страница достигнута) вы обновите свои теги и заголовок, следуя данным, указанным в ваших маршрутах:

ngOnInit() {
    // Change page title on navigation  based on route data
    this.router.events
      .pipe(
        filter(event => event instanceof NavigationEnd),
        map(() => {
          let route = this.activatedRoute;
          while (route.firstChild) {
            route = route.firstChild;
          }
          return route;
        }),
        filter(route => route.outlet === 'primary'),
        mergeMap(route => route.data)
      )
      .subscribe(event => {
        const title = event['title'];
        if (title) {
          const _title = `${environment.appName} | `;
          this.titleService.setTitle(_title);
          this.metaService.updateTag({ name: 'title', content: _title });
        }

        const tags = event['metatags'];
        if (tags) {
          for (const tag in tags) {
            this.metaService.updateTag({ property: tag, content: tags[tag] });
          }
        }
      });
  }

Но для некоторых данных, загружаемых динамически, например, для указанного продукта, вы можете добавить этот код внутри компонента вашей страницы product-details.component.ts :

 ngOnInit() {
    this.product$ = this.activatedRoute.data.pipe(
      switchMap((data) => this.activatedRoute.paramMap.pipe(
        // get the requested id in url to fetch the correct document
        switchMap((params) => this.productService.getProduct(params.get('id'))),
        tap((product: Product) => {
          const _title = `${environment.appName} | ${product.name}`;
          this.titleService.setTitle(_title);
          this.metaService.updateTag({ name: 'title', content: _title });
          this.metaService.updateTag({ name: 'description', content: product.description});
        }),
      )));

  }

Et voilà.

Но вам, вероятно, потребуется добавить Angular Universal в ваш проект, потому что не весь поиск боты могут анализировать одностраничное приложение, например Angular.