Send your request Join Sii

When creating websites, we want to make our site as attractive to the user as possible. We increase speed, implement friendly user experiences, create an inviting design, and so on and so forth. However, for a user to visit our website at all, he or she needs to be interested. Nowadays everything is about social media. I provide you with a practical tool that can make links to your content more encouraging.

The problem

If you are not using any metatags on your page, it is likely that the link to your Facebook page looks like on the graphic below. It’s because Facebook, Twitter or LinkedIn crawlers don’t really know how to present your content.

Link to some example Facebook page
Fig. 1 Link to some example Facebook page

Doesn’t look appetising, does it? We don’t have a catchy title. Our description says nothing. We don’t even have a beautiful picture to glance at. It’s time to change that!

Popular metatags

Here we can see the most popular metatags:

  • og:title – the title of our page (an ex. Sii Poland),
  • og:type – a type of content we like to share (article, profile, website etc.),
  • og:image – path to a thumbnail image,
  • og:url – URL to our page,
  • og:description – a short explanation of our content,
  • twitter:card – the card type on Twitter, which will be one of “summary”, “summary_large_image”, “app”, or “player”.

If we use those simple metatags, we can achieve something like this:

Link to some example Facebook page after using metatags
Fig. 2 Link to some example Facebook page after using metatags

It looks great, doesn’t it? In the normal case, when not using angular, our list of metatags would look like the one below:

<meta property="og:title" content="IT, engineering and BPO solutions and services – Sii Poland">
<meta property="og:type" content="website" />
<meta property="og:image" content="<https://sii.pl/wp-content/uploads/2020/06/main_page_top_optimized.jpg.webp>">
<meta property="og:url" content="<https://sii.pl>">
<meta property="og:description" content="With over 7 500 Power People, Sii is the top IT, engineering, digital & BPO services vendor in Poland.">
<meta name="twitter:card" content="summary_large_image">

The above code should be added to our index.html file. But this is not the Angular way that we love so much and has one major drawback. It’s static. What if we want our metatags to update on every subpage? Angular Meta comes to the rescue.

Angular Meta syntax sugar

All we have to do is inject the Meta class wherever we need it. I prefer to create a dedicated service responsible for updating our metadata.

So firstly, we need to add import:

import { Meta } from '@angular/platform-browser';

and inject the Meta class into the constructor of our service:

export class MetaService {
  constructor(
    private meta: Meta,
  ) {}
}

Then we create methods to update the metatags:

private setTitle(title: string) {
	this.meta.updateTag({ property: 'og:title', content: title });
}

private setType(type: string) {
	this.meta.updateTag({ property: 'og:type', content: type });
}

private setImage(imageSrc: string) {
	this.meta.updateTag({ property: 'og:image', content: imageSrc });
}

private setUrl(url: string) {
	this.meta.updateTag({ property: 'og:url', content: url });
}

private setDescription(description: string) {
	this.meta.updateTag({ property: 'og:description', content: description });
}

private setCardType(cardType: string) {
	this.meta.updateTag({ name: 'twitter:card', content: cardType });
}

Now we have six methods, each of which set one of the necessary tags. Let’s simplify the use of this with a single public method. But before that, we create an interface to avoid mistakes. So we create a file named metatags.model.ts:

export interface MetaTags{
	title: string;
	type: string;
	imageSrc: string;
	url: string;
	description: string;
	cardType: string;
}

After that, we can use created interface in the new method:

updateMetaTags(metaTags: Metatags) {
    const { title, type, imageSrc, url, description, cardType } = metaTags;

    this.setTitle(title);
    this.setType(type);
    this.setImage(imageSrc);
    this.setUrl(url);
    this.setDescription(description);
    this.setCardType(cardType);
}

Now we can use new service in our component:

export class AppComponent implements OnInit {
  constructor(private metaService: MetaService) {}

  ngOnInit(): void {
    this.metaService.updateMetaTags({
      title: 'IT, engineering and BPO solutions and services – Sii Poland',
      type: 'website',
      imageSrc: '<https://sii.pl/wp-content/uploads/2020/06/main_page_top_optimized.jpg.webp>',
      url: '<https://sii.pl>',
      description: 'With over 7 500 Power People, Sii is the top IT services vendor in Poland.',
      cardType: 'summary_large_image',
    });
  }
}

In the source code of our application, we should now find our metatags, placed in the <HEAD> element:

fragment kodu

Sum up

It doesn’t matter whether you were forced to use metatags by your company’s marketing department or whether you are the one who always takes care of every detail of your application. Metatags are the basis for the presentation of our content on social networks. They should be updated whenever needed to encourage users to visit our site as much as possible.

5/5 ( votes: 13)
Rating:
5/5 ( votes: 13)
Author
Avatar
Hubert Wróblewski

Front-end developer, with a specialization in Angular. For more than 5 years, his passion has been finding the simplest solutions to the most complex topics. He is interested in everything that helps answer the question “How does it work”. Privately, he enjoys spending time outdoors, mainly cycling. His greatest dream is to visit all the countries on all the continents, which he realizes in his spare time.

Leave a comment

Your email address will not be published. Required fields are marked *

You might also like

More articles

Don't miss out

Subscribe to our blog and receive information about the latest posts.

Get an offer

If you have any questions or would like to learn more about our offer, feel free to contact us.

Send your request Send your request

Natalia Competency Center Director

Get an offer

Join Sii

Find the job that's right for you. Check out open positions and apply.

Apply Apply

Paweł Process Owner

Join Sii

SUBMIT

Ta treść jest dostępna tylko w jednej wersji językowej.
Nastąpi przekierowanie do strony głównej.

Czy chcesz opuścić tę stronę?