Dynamic og: angular2 image

Question

We want to split the URL pointing to Angular 2 on social networks. For example, Facebook and Skype.

on our website, this URL displays a dynamic image depending on the actual parameters of the URL and the query strings that we set.

For example, when going to http://oursite.com/#/show/5448sd84f8d4sf8 will be displayed.

Having shared the link, it seems that Facebook and Skype are using Open Graph meta og:image to display a thumbnail or snapshot of the website:

 <meta name="og:image" content="http://example.com/image.png"> 

Is there a way to set a dynamic og image: depending on the url, as explained below: the link to our url will show

 <meta name="og:image" content="http://oursite.com/images/5448sd84f8d4sf8.png"> 

And then, how do you make sure that Facebook and Skype, for example, actually analyze the dynamic image?

Answer 1

You can use the Angular Meta service to change meta tags:

 import { Title, Meta } from '@angular/platform-browser'; export class MyClass { constructor( private metaService: Meta ) { // Build and change the og:image meta const baseUrl = window.location.protocol + '//' + window.location.hostname; const imageUrl = baseUrl + '/path/to/image.png'; this.metaService.addTag( { property: 'og:image', content: imageUrl } ); // or it it already exists, use this 'updateTag' // this.metaService.updateTag( { property: 'og:image', content: imageUrl } ); } } 

Answer 2

I have the same problem too. Angular 2 browser runs on the client side. To fix this problem, we need to process this side of the form server when the request came from the client. (simple answer to upgrade with og meta tags)

There are several options:

• switch to Angular Universal: a bit complicated approach

• simple handling of this by rewriting the url (web server): this is what I used

this is my web configuration for rewriting the URL: I took the dynamic image file name from the request parameter (..og = [filename])

  <rewrite> <outboundRules rewriteBeforeCache="true"> <rule name="Add tracking script" preCondition="" patternSyntax="ECMAScript"> <match filterByTags="None" pattern="ogimagepath" /> <conditions> <add input="{QUERY_STRING}" pattern="[^]*og=([0-9]+)" /> </conditions> <action type="Rewrite" value="{C:1}" /> </rule> </outboundRules> </rewrite> 

Answer 3

You can use ng2 metadata that is easy to implement.

https://www.npmjs.com/package/ng2-metadata