CODEWITHSUNDEEP
htmlurlsharing
The Bang Bandit
The Bang Bandit

Reputation: 43

How to customize the Image shown when posting a URL of a website on Social Media sites

I have seen that when we put a url of a website, an image appears for that URL. Examples include social media sites Like Google+, Facebook, Instagram. I need to know how to add such an image to my website. Is there a certain tag Or script that should be applied to show that image?

When I share my website link I don't get such a one. I need to know why and how to do it.

Upvotes: 2

Views: 6997

Answers (2)

Varun Arya
Varun Arya

Reputation: 345

OG tags are used by these social sites as below:

Site info OG tags Start

<meta property="og:site_name" content="$site_name" />
<meta property="og:url" content="$site_url" />
<meta property="og:type" content="website" />
<meta name="title" property="og:title" content="$the_title" />
<meta name="image" property="og:image" content="$site_logo"/>
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1024">
<meta property="og:image:height" content="1024">
<meta name="description" property="og:description" content="$site_description" />
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" description="@username" />
<meta name="twitter:title" content="$the_title" />
<meta name="twitter:description" content="$site_description" />
<meta name="twitter:image:src" content="$site_logo">
<meta name="twitter:domain" content="$site_url">

Site info OG tags End

Upvotes: 4

Finesse
Finesse

Reputation: 10801

Add the following tags to the <head> section of the HTML code of the page you need to share:

<link rel="image_src" href="{image}" />
<meta name="twitter:image" property="og:image" content="{image}" />

And replace {image} with the URL of the page image.

When you add the tags, Social Media sites can still share the page without an image. It happens because sites cache pages data. You need to wait the cache to be cleaned or clean it manually (some sites, e.g. Facebook, provide this possibility; it is a topic for another question).

Upvotes: 2

Related Questions