Dynamic og:image angular2

Question

We want to share an url pointing to an Angular 2 on social networks. For example Facebook and Skype.

on our website, at this url is displayed a dynamic picture depending on the actual URL parameters and query strings we set.

For example, going to http://oursite.com/#/show/5448sd84f8d4sf8 will display /images/5448sd84f8d4sf8.png.

By sharing a link, it seems both Facebook and Skype use 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 explain below: linking our url would show

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

And then how to make sure Facebook and Skype for example to actually parse the dynamic image?

Answer 1

You can use Angular's Meta service to modify the 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 also got this same issue. Angular 2 browser application is running on client side. to fix this issue we need handle this form server side, when the request came from the client. (simple update response with og meta tags)

there are several options:

• go for Angular Universal : bit difficult approach

• simple handle this through URL rewriting (web server) : this what I used

this is my web config for url rewrite : I took dynamic og image name from query 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>