Angular 4 – Update Meta tags dynamically for Facebook (Open graph)

by

Open Graph OG Tags must be within the sourcecode!

You need to provide a static html page containing the the open graph tags like og:image og:title and og:description in the html sourcecode, since facebook, twitter and co a just scraping the plain html without rendering it through javascript. Angular dynamically updates the dom through js and therefore the crawlers just get the initial index.html.

There are several ways to serve an html containing open graph
tags ans solve your issue:

  • Serverside rendering with angular universal
  • use an proxy rendering your page
  • overwriting index.html on the fly replacing og tags
  • serving static html pages (not sure if this is supported by angular)

I guess you already use something like ngx-meta to add og tags?

Angular Universal – Server Side Rendering with meta tags in Angular 2/3/4/5

I guess server-side rendering is the most appropriate way to solve your issue. For this you can host a node server or use eg. AWS Lambda. The disadvantage with this, your app has to be actively hosted and can not be served statically anymore. Anyways this seems to be the best way since it also is improves SEO. Angular Universal is the term to search for:

Angular Universal Prerendering on build

You can also prerender specific routes on the build process and serve angular as a static app with multiple prerendered index.html files. If you only have few static routes this works perfectly fine. Thinking of more generic routes with dynamic parts, this is not the solution. Go for server side rendering. The angular universal boilerplate also contains an example for this. See prerender.ts

Alternative Solutions

Prerendering Angular with a proxy to provide OG Tags

If you like to avoid implementing serverside / prerendering during the build process (setting up angular universal sometimes is a pain for not good structured apps.) you can try to use a proxy service prerendering you page. Take a look at eg. prerender.io.

Overwriting index.html

Redirect all requests to an script which overwrites the og:tags. Eg. Using PHP and .htaccess to overwrite og tags this is possible with modern environments too. Eg. you could use cloudfront / api gateway and a lambda function. Have not seen an example for this though.

Facebook Cache and Open Graph Debugging

Be aware that caches may still have cached the open graph information from their first crawl. Ensure your source code is the lastest and all caches, reverse proxies like nginxx, cloudfront are cleared.

Use Facebook Debugger to debug open graph caches and clear facebook opengraph cache

More Related Contents:

  1. How do I share data between components in Angular 2?
  2. Could not find module “@angular-devkit/build-angular”
  3. Angular how to get the multiple checkbox values?
  4. How to add font-awesome to Angular 2 + CLI project
  5. How to watch for form changes in Angular
  6. Ionic 2 Form goes up when keyboard shows
  7. Angular EXCEPTION: No provider for Http
  8. how to use track by inside ngFor angular 2
  9. No provider for AngularFireDatabase, AngularFireAuth
  10. Is there a way to remove unused imports and declarations from Angular 2+? [closed]
  11. Using a directive to add class to host element [duplicate]
  12. TS2531: Object is possibly ‘null’
  13. How to use Dependency Injection (DI) correctly in Angular2?
  14. ng2 – dynamically creating a component based on a template
  15. angular-i18n work-around for translations in code?
  16. Get access to FormControl from the custom form component in Angular
  17. How do I navigate to a sibling route?
  18. Trigger update of component view from service – No Provider for ChangeDetectorRef
  19. TypeError: You provided an invalid object where a stream was expected. You can provide an Observable, Promise, Array, or Iterable
  20. What is the meaning of question mark in expressions in Angular 2?
  21. Merging http observables using forkjoin
  22. tap() isn’t triggered in RXJS Pipe
  23. What is the difference between declarations, providers, and import in NgModule?
  24. TypeScript-‘s Angular Framework Error – “There is no directive with exportAs set to ngForm”
  25. How to return observable from subscribe
  26. Limit input field to two decimal places – Angular 5
  27. How to create and download text/Json File with dynamic content using angular 2+
  28. Angular4 Load external html page in a div
  29. FormControl.detectchanges – why use distinctUntilChanged?
  30. How to use angular2 built-in date pipe in services and directives script files [duplicate]

Leave a Comment