{"id":20617,"date":"2023-04-11T05:00:00","date_gmt":"2023-04-11T03:00:00","guid":{"rendered":"https:\/\/sii.pl\/blog\/?p=20617"},"modified":"2024-07-22T15:03:17","modified_gmt":"2024-07-22T13:03:17","slug":"make-your-shared-content-more-attractive-on-social-networks-with-angular-meta","status":"publish","type":"post","link":"https:\/\/sii.pl\/blog\/en\/make-your-shared-content-more-attractive-on-social-networks-with-angular-meta\/","title":{"rendered":"Make your shared content more attractive on social networks with Angular Meta"},"content":{"rendered":"\n<p>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.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>The problem<\/strong><\/h2>\n\n\n\n<p>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\u2019s because Facebook, Twitter or LinkedIn crawlers don\u2019t really know how to present your content.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/03\/1-12.png\"><img decoding=\"async\" width=\"624\" height=\"109\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/03\/1-12.png\" alt=\"Link to some example Facebook page\" class=\"wp-image-20618\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/03\/1-12.png 624w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/03\/1-12-300x52.png 300w\" sizes=\"(max-width: 624px) 100vw, 624px\" \/><\/a><figcaption>Fig. 1 Link to some example Facebook page<\/figcaption><\/figure><\/div>\n\n\n\n<p>Doesn&#8217;t look appetising, does it? We don\u2019t have a catchy title. Our description says nothing. We don\u2019t even have a beautiful picture to glance at. It\u2019s time to change that!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Popular metatags<\/strong><\/h2>\n\n\n\n<p>Here we can see the most popular metatags:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>og:title \u2013 the title of our page (an ex. Sii Poland),<\/li><li>og:type \u2013 a type of content we like to share (article, profile, website etc.),<\/li><li>og:image \u2013 path to a thumbnail image,<\/li><li>og:url \u2013 URL to our page,<\/li><li>og:description \u2013 a short explanation of our content,<\/li><li>twitter:card \u2013 the card type on Twitter, which will be one of \u201csummary\u201d, \u201csummary_large_image\u201d, \u201capp\u201d, or \u201cplayer\u201d.<\/li><\/ul>\n\n\n\n<p>If we use those simple metatags, we can achieve something like this:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full is-resized\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/03\/2-8.png\"><img decoding=\"async\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/03\/2-8.png\" alt=\"Link to some example Facebook page after using metatags\" class=\"wp-image-20620\" width=\"623\" height=\"438\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/03\/2-8.png 624w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/03\/2-8-300x211.png 300w\" sizes=\"(max-width: 623px) 100vw, 623px\" \/><\/a><figcaption>Fig. 2 Link to some example Facebook page after using metatags<\/figcaption><\/figure><\/div>\n\n\n\n<p>It looks great, doesn&#8217;t it? In the normal case, when not using angular, our list of metatags would look like the one below:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n&amp;lt;meta property=&quot;og:title&quot; content=&quot;IT, engineering and BPO solutions and services \u2013 Sii Poland&quot;&gt;\n&amp;lt;meta property=&quot;og:type&quot; content=&quot;website&quot; \/&gt;\n&amp;lt;meta property=&quot;og:image&quot; content=&quot;&amp;lt;https:\/\/sii.pl\/wp-content\/uploads\/2020\/06\/main_page_top_optimized.jpg.webp&gt;&quot;&gt;\n&amp;lt;meta property=&quot;og:url&quot; content=&quot;&amp;lt;https:\/\/sii.pl&gt;&quot;&gt;\n&amp;lt;meta property=&quot;og:description&quot; content=&quot;With over 7 500 Power People, Sii is the top IT, engineering, digital &amp;amp; BPO services vendor in Poland.&quot;&gt;\n&amp;lt;meta name=&quot;twitter:card&quot; content=&quot;summary_large_image&quot;&gt;\n<\/pre><\/div>\n\n\n<p>The above code should be added to our <em>index.html file<\/em>. But this is not the Angular way that we love so much and has one major drawback. It\u2019s static. What if we want our metatags to update on every subpage? <strong>Angular Meta comes to the rescue<\/strong>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Angular Meta syntax sugar<\/strong><\/h2>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>So firstly, we need to add import:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nimport { Meta } from &#039;@angular\/platform-browser&#039;;\n<\/pre><\/div>\n\n\n<p>and inject the Meta class into the constructor of our service:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nexport class MetaService {\n  constructor(\n    private meta: Meta,\n  ) {}\n}\n<\/pre><\/div>\n\n\n<p>Then we create methods to update the metatags:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nprivate setTitle(title: string) {\n\tthis.meta.updateTag({ property: &#039;og:title&#039;, content: title });\n}\n\nprivate setType(type: string) {\n\tthis.meta.updateTag({ property: &#039;og:type&#039;, content: type });\n}\n\nprivate setImage(imageSrc: string) {\n\tthis.meta.updateTag({ property: &#039;og:image&#039;, content: imageSrc });\n}\n\nprivate setUrl(url: string) {\n\tthis.meta.updateTag({ property: &#039;og:url&#039;, content: url });\n}\n\nprivate setDescription(description: string) {\n\tthis.meta.updateTag({ property: &#039;og:description&#039;, content: description });\n}\n\nprivate setCardType(cardType: string) {\n\tthis.meta.updateTag({ name: &#039;twitter:card&#039;, content: cardType });\n}\n<\/pre><\/div>\n\n\n<p>Now we have six methods, each of which set one of the necessary tags. Let&#8217;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 <em>metatags.model.ts:<\/em><\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nexport interface MetaTags{\n\ttitle: string;\n\ttype: string;\n\timageSrc: string;\n\turl: string;\n\tdescription: string;\n\tcardType: string;\n}\n<\/pre><\/div>\n\n\n<p>After that, we can use created interface in the new method:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nupdateMetaTags(metaTags: Metatags) {\n    const { title, type, imageSrc, url, description, cardType } = metaTags;\n\n    this.setTitle(title);\n    this.setType(type);\n    this.setImage(imageSrc);\n    this.setUrl(url);\n    this.setDescription(description);\n    this.setCardType(cardType);\n}\n<\/pre><\/div>\n\n\n<p>Now we can use new service in our component:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nexport class AppComponent implements OnInit {\n  constructor(private metaService: MetaService) {}\n\n  ngOnInit(): void {\n    this.metaService.updateMetaTags({\n      title: &#039;IT, engineering and BPO solutions and services \u2013 Sii Poland&#039;,\n      type: &#039;website&#039;,\n      imageSrc: &#039;&amp;lt;https:\/\/sii.pl\/wp-content\/uploads\/2020\/06\/main_page_top_optimized.jpg.webp&gt;&#039;,\n      url: &#039;&amp;lt;https:\/\/sii.pl&gt;&#039;,\n      description: &#039;With over 7 500 Power People, Sii is the top IT services vendor in Poland.&#039;,\n      cardType: &#039;summary_large_image&#039;,\n    });\n  }\n}\n<\/pre><\/div>\n\n\n<p>In the source code of our application, we should now find our metatags, placed in the &lt;HEAD&gt; element:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/03\/3-8.png\"><img decoding=\"async\" width=\"1024\" height=\"136\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/03\/3-8-1024x136.png\" alt=\"fragment kodu\" class=\"wp-image-20624\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/03\/3-8-1024x136.png 1024w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/03\/3-8-300x40.png 300w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/03\/3-8-768x102.png 768w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/03\/3-8.png 1104w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Sum up<\/strong><\/h2>\n\n\n\n<p>It doesn&#8217;t matter whether you were forced to use metatags by your company&#8217;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.<\/p>\n\n\n<div class=\"kk-star-ratings kksr-auto kksr-align-left kksr-valign-bottom\"\n    data-payload='{&quot;align&quot;:&quot;left&quot;,&quot;id&quot;:&quot;20617&quot;,&quot;slug&quot;:&quot;default&quot;,&quot;valign&quot;:&quot;bottom&quot;,&quot;ignore&quot;:&quot;&quot;,&quot;reference&quot;:&quot;auto&quot;,&quot;class&quot;:&quot;&quot;,&quot;count&quot;:&quot;13&quot;,&quot;legendonly&quot;:&quot;&quot;,&quot;readonly&quot;:&quot;&quot;,&quot;score&quot;:&quot;5&quot;,&quot;starsonly&quot;:&quot;&quot;,&quot;best&quot;:&quot;5&quot;,&quot;gap&quot;:&quot;11&quot;,&quot;greet&quot;:&quot;&quot;,&quot;legend&quot;:&quot;5\\\/5 ( votes: 13)&quot;,&quot;size&quot;:&quot;18&quot;,&quot;title&quot;:&quot;Make your shared content more attractive on social networks with Angular Meta&quot;,&quot;width&quot;:&quot;139.5&quot;,&quot;_legend&quot;:&quot;{score}\\\/{best} ( {votes}: {count})&quot;,&quot;font_factor&quot;:&quot;1.25&quot;}'>\n            \n<div class=\"kksr-stars\">\n    \n<div class=\"kksr-stars-inactive\">\n            <div class=\"kksr-star\" data-star=\"1\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"2\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"3\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"4\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"5\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n    <\/div>\n    \n<div class=\"kksr-stars-active\" style=\"width: 139.5px;\">\n            <div class=\"kksr-star\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n    <\/div>\n<\/div>\n                \n\n<div class=\"kksr-legend\" style=\"font-size: 14.4px;\">\n            5\/5 ( votes: 13)    <\/div>\n    <\/div>\n","protected":false},"excerpt":{"rendered":"<p>When creating websites, we want to make our site as attractive to the user as possible. We increase speed, implement &hellip; <a class=\"continued-btn\" href=\"https:\/\/sii.pl\/blog\/en\/make-your-shared-content-more-attractive-on-social-networks-with-angular-meta\/\">Continued<\/a><\/p>\n","protected":false},"author":494,"featured_media":20627,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_editorskit_title_hidden":false,"_editorskit_reading_time":3,"_editorskit_is_block_options_detached":false,"_editorskit_block_options_position":"{}","inline_featured_image":false,"footnotes":""},"categories":[1320],"tags":[2622,1668,1519,1422],"class_list":["post-20617","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-hard-development","tag-digital-en","tag-meta","tag-marketing-2","tag-angular-en"],"acf":[],"aioseo_notices":[],"republish_history":[],"featured_media_url":"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/03\/Make-your-shared-content-more-attractive-on-social-networks-with-Angular-Meta.jpg","category_names":["Hard development"],"_links":{"self":[{"href":"https:\/\/sii.pl\/blog\/en\/wp-json\/wp\/v2\/posts\/20617"}],"collection":[{"href":"https:\/\/sii.pl\/blog\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sii.pl\/blog\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sii.pl\/blog\/en\/wp-json\/wp\/v2\/users\/494"}],"replies":[{"embeddable":true,"href":"https:\/\/sii.pl\/blog\/en\/wp-json\/wp\/v2\/comments?post=20617"}],"version-history":[{"count":3,"href":"https:\/\/sii.pl\/blog\/en\/wp-json\/wp\/v2\/posts\/20617\/revisions"}],"predecessor-version":[{"id":20887,"href":"https:\/\/sii.pl\/blog\/en\/wp-json\/wp\/v2\/posts\/20617\/revisions\/20887"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sii.pl\/blog\/en\/wp-json\/wp\/v2\/media\/20627"}],"wp:attachment":[{"href":"https:\/\/sii.pl\/blog\/en\/wp-json\/wp\/v2\/media?parent=20617"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sii.pl\/blog\/en\/wp-json\/wp\/v2\/categories?post=20617"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sii.pl\/blog\/en\/wp-json\/wp\/v2\/tags?post=20617"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}