Angular4 Social Media Facebook share page with details

Question

Where is the catch:

1. Nginx as serving Angular 4 app
2. Angular 4 meta tags only reads from base href on FB request path

Angular path can be (example): https://domain.pa/book/12/Book name

Nginx is simple setup:

root /home/web/dist;
index index.html index.htm;
location / {
expires -1;
try_files $uri $uri/ /index.html;
autoindex on;
}

In Angular App I have write service that works with:

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

On every page I update meta-tags for Facebook:

this.meta.updateTag({ property: 'og:type', content: 'article' });
this.meta.updateTag({ property: 'og:site_name', content: 'AdriaOffer' });
this.meta.updateTag({ property: 'og:title', content: config.title });
this.meta.updateTag({ property: 'og:description', content: config.description });
this.meta.updateTag({ property: 'og:image', content: config.image });
this.meta.updateTag({ property: 'og:url', content: config.slug });

and it works well when I change page meta tags are changed. Really don't know where to look at, and how to serve meta-data for Facebook Share plug-in. Maybe you had some similar issue for SEO single-page web application.

Answer 1

Your project is not detected by the bots because it is PreRender . If you want the boots to see your content, you should do a Server Side Rendering (SSR).

You should use Angular Universal or (my recomended) Rendertron .

Answer 2

I have been using a combination of angular + prerender since angular versión 1 and this has been my recommendation until I gave a new chance to angular universal.

The first time I tried to setup angular universal the documentation was very confused but Know there is an official documentation

https://angular.io/guide/universal