How do I add a thumbnail to my website so when a user shares the link to Twitter or Facebook it shows the link with the image in HTML and Javascript? So what I exactly want is that when the user shares the link of my website on any social media a thumbnail image es beside it.

I've put a link of what I want below.

How do I add a thumbnail to my website so when a user shares the link to Twitter or Facebook it shows the link with the image in HTML and Javascript? So what I exactly want is that when the user shares the link of my website on any social media a thumbnail image es beside it.

I've put a link of what I want below.

https://twitter./Medium/status/634152899132592128

• javascript
• html
• css
• web
• hyperlink

Share Improve this question Follow edited Aug 20, 2015 at 9:55 KidCoder asked Aug 20, 2015 at 5:50 KidCoderKidCoder 36366 silver badges1818 bronze badges 2

• show your code what you have tried so far ? – Amit singh Commented Aug 20, 2015 at 5:51
• Sorry, I don't know where to begin. – KidCoder Commented Aug 20, 2015 at 5:52

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

Those are called twitter cards and basically, you add <meta> tags to your page to tell Twitter what to show on them.

I think the type of card you are looking for is this one: https://dev.twitter./cards/types/summary-large-image

Here is a snippet with examples how it would work (taken from the docs):

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@nytimes">
<meta name="twitter:creator" content="@SarahMaslinNir">
<meta name="twitter:title" content="Parade of Fans for Houston’s Funeral">
<meta name="twitter:description" content="NEWARK - The guest list and parade of limousines with celebrities emerging from them seemed more suited to a red carpet event in Hollywood or New York than than a gritty stretch of Sussex Avenue near the former site of the James M. Baxter Terrace public housing project here.">
<meta name="twitter:image" content="http://graphics8.nytimes./images/2012/02/19/us/19whitney-span/19whitney-span-articleLarge.jpg">

They even provide you with a service to validate and preview the cards:
https://cards-dev.twitter./validator

---

For Facebook, the <meta> tags are different and are also well documented here: https://developers.facebook./docs/sharing/best-practices#tags

As with Twitter, they also provide a page where you can validate and preview: https://developers.facebook./tools/debug/

Hope that helps!

Facebook will look for

<meta property="og:image" content="http://weekendtrails./screenshot.png" />

U can use this meta tag for facebook. I hope it will work with other sites also