How to display image thumbnail while sharing links of my angular website

Question

I made a website in angular but when i share it on skype or other social media the image thumbnail doesnt show up, nor any text from the website. What do I have to do so that the text from the website and the image thumbnail shows up.

Already answered at https://stackoverflow.com/questions/19778620/provide-an-image-for-whatsapp-link-sharing — ranjeet8082, Jun 19 '19 at 08:12

score 1 · Accepted Answer · answered Jun 19 '19 at 08:07

meta tags are inferred by these Apps in order to do that.

Add meta tags in order to get them. Something like these:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>SiddAjmeraDev</title>
    <base href="/" />

    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta
      name="description"
      content="Siddharth Ajmera is a FullStack JavaScript Developer. He's a Google Developer Expert for Angular and Web Technologies. You can find him anywhere with SiddAjmera."
    />

    <meta property="og:type" content="website" />
    <meta
      property="og:title"
      content="Siddharth Ajmera - FullStack JavaScript Developer"
    />
    <meta
      property="og:description"
      content="Siddharth Ajmera is a FullStack JavaScript Developer. He's a Google Developer Expert for Angular and Web Technologies. You can find him anywhere with SiddAjmera."
    />
    <meta
      property="og:image"
      content="https://firebasestorage.googleapis.com/v0/b/siddajmera-dev.appspot.com/o/Avatar.jpg?alt=media&token=ba992ea4-3198-4971-b4ee-5454ec2b3cbd"
    />
    <meta property="og:url" content="www.siddajmera.dev/" />
    <meta
      property="og:site_name"
      content="Siddharth Ajmera - FullStack JavaScript Developer"
    />

    <meta
      name="twitter:title"
      content="Siddharth Ajmera - FullStack JavaScript Developer"
    />
    <meta
      name="twitter:description"
      content="Siddharth Ajmera is a FullStack JavaScript Developer. He's a Google Developer Expert for Angular and Web Technologies. You can find him anywhere with SiddAjmera."
    />
    <meta
      name="twitter:image"
      content="https://firebasestorage.googleapis.com/v0/b/siddajmera-dev.appspot.com/o/Avatar.jpg?alt=media&token=ba992ea4-3198-4971-b4ee-5454ec2b3cbd"
    />
    <meta name="twitter:site" content="@SiddAjmera" />
    <meta name="”twitter:creator”" content="@SiddAjmera" />

    <meta name="category" content="Education" />

    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" type="image/x-icon" href="favicon.ico" />
  </head>
  <body>
    <app-root></app-root>
  </body>
</html>

Use this Articles for your ref.

Thanks...one question though.. Is adding these in angular front end enough to show the preview of image and description when i share the link or is it compulsory to do angular universal along with this ? — zuyi, Jun 19 '19 at 08:27

David · Answer 2 · 2019-06-19T08:42:23.810

1

You need to add the correct meta using the Meta service a and then implement Angular Universal. By default, angular is a client side framework, which means that it's JS, on the client side (browser), that is building the page and meta.

But most sharebots will not render JS, which mean that when you share your page, the only available html is what's in the index.html file and so they will not see any meta or component content. That's why you need to use server side rendering (with Angular universal) which will render the final html of any page (with components and meta already rendered). This can then be used by bots to get the correct meta and page content (for SEO)

edited Jun 19 '19 at 08:42

answered Jun 19 '19 at 08:15

David

33,444
11
80
118

Is adding meta's in front end enough to show the preview of image and description when i share the link or is it compulsory to do angular universal. – zuyi Jun 19 '19 at 08:32
@zuyi You have to use angular universal, as otherwise most share bots will not render javascript, as explained above – David Jun 19 '19 at 08:33
I am bit confused, I just want that when i share the link on social media the desc and thumb should snow up. Do I need angular universal for that too. I dont care about google or search bots atm. – zuyi Jun 19 '19 at 08:36

How to display image thumbnail while sharing links of my angular website

2 Answers2