CODEWITHSUNDEEP
angular
zuyi
zuyi

Reputation: 489

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

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.

Upvotes: 2

Views: 6452

Answers (2)

David
David

Reputation: 34435

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)

Upvotes: 1

SiddAjmera
SiddAjmera

Reputation: 39432

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.

Upvotes: 2

Related Questions