CODEWITHSUNDEEP
angularclient-sidemeta-tagsangular-universalserver-side-rendering
Tatenda
Tatenda

Reputation: 699

Dynamic Meta Tags For Social Sharing Angular 6+ Universal

I guess this question has been asked too many times because I have gone through almost every possible question that deals with this.

My Need Simplified: I would like to create social share buttons for my website that uses Angular 7 and has universal properly setup.

Detail: I am looking for a solution that allows me to dynamically update Meta Tags for Facebook, Twitter and other social media platforms in such a way that when I click the share button I should share content that is specific to the current article in view. Important: The data for these meta tags is obtained by making an API call thus the solution cannot include hard-coded data.

Tried Solution: I tried the solution of using Meta from '@angular/platform-browser' but the result is that it updates the tags after the DOM has already been rendered.

My component's ngOnInit has the following: 

this.musicService.getTrackInfo(track._id)
                .subscribe(track => {  
            this.metaService.setTag('og:title', track.name);
            this.metaService.setTag('og:type', 'music.song'); });

Research Made:

Similar Unresolved Issues:

Could someone please provide a full, step by step solution for this issue and also explanations to why the current way of using Meta is not working.

Upvotes: 4

Views: 3595

Answers (2)

user2502767
user2502767

Reputation: 328

STEP 1: Set up your default tags in your main index.html page

<meta name="og:title" content="Website Title" />
<meta name="og:site_name" content="Website Name" />
<meta name="og:description" content="Your default website description goes here" />
<meta name="og:image" content="https://www.example.com/images/social/default.jpg" />
<meta name="og:type" content="website" />
<meta name="og:url" content="https://www.example.com" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Website Title" />
<meta name="twitter:description" content="Your default website description goes here" />
<meta name="twitter:image" content="https://www.example.com/images/social/default.jpg" />

STEP 2: Add the following code into your component for a page you want to alter the meta tags for 

//Add this to your imports in your component
import {Meta, Title} from '@angular/platform-browser';

//Angular component add a constructor
pageTitle = "About Us";
pageDesc = "This is a page about us";
pageSocialImage = "https://www.example.com/images/social/aboutus.jpg";

constructor(private titleService:Title, private meta: Meta) {
  this.titleService.setTitle(this.pageTitle);

  this.meta.updateTag({ name: 'description', content: this.pageDesc },`name='description'`); //The second parameter IS NECESSARY to do the update
  this.meta.updateTag({ name: 'og:title', content: this.pageTitle },`name='og:title'`);
  this.meta.updateTag({ name: 'og:description', content: this.pageDesc },`name='og:description'`);
  this.meta.updateTag({ name: 'og:image', content: this.pageSocialImage },`name='og:image'`);
  this.meta.updateTag({ name: 'og:url', content: "https://www.example.org/about-us" },`name='og:url'`);
  this.meta.updateTag({ name: 'twitter:title', content: this.pageTitle },`name='twitter:title'`);
  this.meta.updateTag({ name: 'twitter:description', content: this.pageDesc },`name='twitter:description'`);
  this.meta.updateTag({ name: 'twitter:image', content: this.pageSocialImage },`name='twitter:image'`);
}

Don't run the code snippet. I didn't wire it all up. Just give this a go and then inspect the DOM with your browsers dev tools to see the meta tags switch as you change routes.

Here's where I got the help: https://www.digitalocean.com/community/tutorials/angular-meta-tags

Upvotes: 0

Jon Jansson
Jon Jansson

Reputation: 1

It does work for me using updateTag. In index.html I've added all tags without value i.e.

<meta name="description" content="">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="">
<meta name="twitter:description" content="">
<meta name="twitter:image" content="">

Also I'm adding the dynamic values like this:

this.meta.updateTag({
        name: 'twitter:description', content: *value from api*
      });

Upvotes: 0

Related Questions