Angular 4 - update meta tags dynamically for Facebook (Open graph)

Question

How to dynamically add / update meta tags so that they are selected in the Facebook / WhatsApp sharing dialog?

I upgraded my angular 2 application to angular 4 to use the meta service to dynamically add / update meta tags after retrieving data in the component from the API.

While in my component, I have

this.metaService.updateTag({ property: 'og:title', content: pageTitle }); this.metaService.updateTag({ property: 'og:url', 'www.domain.com/page' }); this.metaService.updateTag({ property: 'og:image', content: coverUrl, itemprop: 'image' }); this.metaService.updateTag({ property: 'og:image:url', content: coverUrl, itemprop: 'image' }); this.metaService.updateTag({ property: 'og:image:type', content: 'image/png' }); 

I use updateTag because I already added static tags with default values. This code successfully updates meta tag values ​​when they are validated.

I know it makes sense that the Facebook / Whatsapp debugger tools do not execute any javascript, so it will never be executed in their environment.

I use https://developers.facebook.com/tools/debug/ and it always selects the default tag values, which makes sense.

My question is: how to get around so that Facebook / Whatsapp dynamically selects updated tag values? I use Angular 4 and load all the data through API calls, so it is not possible to get any data before the page loads and the script runs.

Answer 1

Open Graph OG Tags must be inside the source code!

You need to provide a static HTML page containing open graph tags, such as og: image, og: title and og: description in the html source code, since facebook, twitter and co just clear the regular html without displaying it through javascript. Angular dynamically updates dom via js, and so the crawlers just get the original index.html.

There are several ways to serve html pages that contain tags with an open graph, and solve your problem:

• Server rendering with angular universal
• use proxy rendering of your page
• overwrites index.html on the fly, replacing og tags
• serving static html pages (not sure if angular supports this)

I assume you are already using something like ngx-meta to add og tags?

Angular Universal - Server-side rendering with meta tags in Angular 2/3/4/5

I think server-side rendering is the most appropriate way to solve your problem. To do this, you can host the site server or use, for example. AWS Lambda. The disadvantage of this is that your application must be actively hosted and can no longer be served statically. In any case, this seems to be the best way, since it also improves SEO. Angular Universal is the term to search for:

• Corner universal
• Corner Universal Starter
• Universal angular PWA with server rendering without a server with aws lambda template

Universal Angular Prerendering during assembly

You can also pre-process specific routes during the build process and use angular as a static application with several pre-processed index.html files. If you have only a few static routes, this works great. Thinking of more general routes with dynamic parts, this is not a solution. Go to the server side of the render. The corner generic template also contains an example for this. See prerender.ts

Alternative solutions

Angular pre-rendering with proxy for providing OG tags

If you want to avoid implementing server / pre-rendering during the build process (setting up angular universal is sometimes a problem for not-well-structured applications.), You can try using a proxy service that pre-renders your page. Take a look at for example. prerender.io .

Overwriting index.html

Redirect all requests to a script that overwrites the og: tags. For instance. Using PHP and .htaccess to rewrite og tags is also possible in modern environments. For instance. You can use cloud front / API gateway and lambda function. I have not seen an example for this yet.

Facebook cache and open graph debugging

Keep in mind that caches may still have cached open chart information on the first scan. Make sure your source code is the latest, and all caches, reverse proxies, such as nginxx, cloudfront, are cleared.

Use the Facebook debugger to debug open graph caches and clear the Facebook open graph cache

Answer 2

Try this (using fb API: v2.12):

 FB.ui({ method: 'share_open_graph', action_type: 'og.shares', action_properties: JSON.stringify({ object : { 'og:url': 'url', // your url to share 'og:title': 'title', 'og:site_name':'site_name', 'og:description':'description', 'og:image': 'image Url',// 'og:image:width':'250',//size of image in pixel 'og:image:height':'257' } }) }, function(response){ console.log("response is ",response); }); 

Answer 3

If you are using Angular 4, why not create a server page page using Angular Universal - this way you can programmatically create HEAD tags before the page is loaded by the browser

https://universal.angular.io/

Answer 4

Try prerender.io

Allows your Javascript site to crawl search engines perfectly.

Answer 5

In corner 6, the dynamic meta tag is not reflected in index.html

So the only way to get dynamic meta content is with .htaccess.

If you want to render the dynamic content you need, use .htaccess.

RewriteCond% {HTTP_USER_AGENT} facebookexternalhit / 1.1 | Twitterbot | Pinterest | linkedinbot | Whatsapp | Viber | SkypeUriPreview | Google * Fragment [NC, OR]

For more information:

https://gist.github.com/thoop/8072354

https://www.winhelp.info/create-browser-whitelist-with-htaccess.html

Answer 6

As of 2018/19, And if your main goal is SEO (or, perhaps, more “SMO” - Optimization in social networks - since Googlebot does an excellent job evaluating JavaScript, but most bots on social networks do not) maybe your preferred BSO solution should not be Angular Universal, but something that uses a headless browser.

This falls into the category of “proxies” from Manuel’s answer, but since I haven’t seen them publish two (one and a half) really good solutions here:

Rendertron

It is supported by the Google Chrome team itself and is just a great endpoint for rendering your application and returning it.

Rendora

Like Rendertron, but there is middleware in it (that is, where and how you decide which requests will be processed and which are not), it is already built-in and also comes with some more advanced but convenient features, such as caching . Therefore, it is really very close to the goal of "zero configuration is needed" and even easier to configure than Rendertron.

puppeteer

Backed by the Google Chrome team (and actually used by Rendertron), Puppeteer provides a host-based, high-level API for Chrome without a head. So if previous projects are difficult for you, you can probably implement a suitable solution using Puppeteer, but obviously it will be more work than just using Rendertron or Rendora.

Compared to Angular Universal, these solutions have a huge advantage: your application project can remain completely independent of the SSR tool you use (it can even use any technology other than Angular). And this, obviously, gives you not only great flexibility for your own code, but also for choosing packages, since you do not need to worry about whether they are compatible with Angular Universal or not. Their downside may be a slight decrease in performance, but if you're just targeting bots, it probably won't matter. And if you use Rendora caching, this may not even be true, and you may have an increase in performance. However, if this were comparable to the performance increase that you can achieve with Angular Universal, I don't know. But keep in mind that when we talk about increasing performance from the SSR, we always only talk about the loading time of the first page. Therefore, as a rule, the importance of this is not too high, since your users will interact much more with your application after its first download. If they don’t do this, and you have mostly anonymous users who just check one page and then leave, you will probably not create a PWA, but a classic web page first ...

TL Dr just look at Rendora and Rendertron, they may be what you are looking for, and will get you there very quickly and easily.