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.
html url sharing
asked May 20 '18 at 8:29
The Bang BanditThe Bang Bandit
196
add a comment |
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.
html url sharing
asked May 20 '18 at 8:29
The Bang BanditThe Bang Bandit
196
add a comment |
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.
html url sharing
asked May 20 '18 at 8:29
The Bang BanditThe Bang Bandit
196
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.
html url sharing
html url sharing
asked May 20 '18 at 8:29
The Bang BanditThe Bang Bandit
196
asked May 20 '18 at 8:29
The Bang BanditThe Bang Bandit
196
edited May 21 '18 at 3:16
user9820384
asked May 20 '18 at 8:29
The Bang BanditThe Bang Bandit
196
asked May 20 '18 at 8:29
The Bang BanditThe Bang Bandit
196
asked May 20 '18 at 8:29
The Bang BanditThe Bang Bandit
196
196
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
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).
answered May 20 '18 at 8:46
FinesseFinesse
2,28431731
Does it only work in twitter?
– The Bang Bandit
May 20 '18 at 8:51
@TheBangBandit No. It works at least in Facebook, Twitter, VK.com, OK.ru, Skype, Telegram, Mail.ru, Google+ and WhatsApp.
– Finesse
May 20 '18 at 9:04
add a comment |
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
answered Nov 15 '18 at 8:56
Varun AryaVarun Arya
928
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f50433001%2fhow-to-customize-the-image-shown-when-posting-a-url-of-a-website-on-social-media%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
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).
answered May 20 '18 at 8:46
FinesseFinesse
2,28431731
Does it only work in twitter?
– The Bang Bandit
May 20 '18 at 8:51
@TheBangBandit No. It works at least in Facebook, Twitter, VK.com, OK.ru, Skype, Telegram, Mail.ru, Google+ and WhatsApp.
– Finesse
May 20 '18 at 9:04
add a comment |
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).
answered May 20 '18 at 8:46
FinesseFinesse
2,28431731
Does it only work in twitter?
– The Bang Bandit
May 20 '18 at 8:51
@TheBangBandit No. It works at least in Facebook, Twitter, VK.com, OK.ru, Skype, Telegram, Mail.ru, Google+ and WhatsApp.
– Finesse
May 20 '18 at 9:04
add a comment |
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).
answered May 20 '18 at 8:46
FinesseFinesse
2,28431731
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).
answered May 20 '18 at 8:46
FinesseFinesse
2,28431731
edited May 20 '18 at 9:20
answered May 20 '18 at 8:46
FinesseFinesse
2,28431731
answered May 20 '18 at 8:46
FinesseFinesse
2,28431731
answered May 20 '18 at 8:46
FinesseFinesse
2,28431731
2,28431731
Does it only work in twitter?
– The Bang Bandit
May 20 '18 at 8:51
@TheBangBandit No. It works at least in Facebook, Twitter, VK.com, OK.ru, Skype, Telegram, Mail.ru, Google+ and WhatsApp.
– Finesse
May 20 '18 at 9:04
add a comment |
Does it only work in twitter?
– The Bang Bandit
May 20 '18 at 8:51
@TheBangBandit No. It works at least in Facebook, Twitter, VK.com, OK.ru, Skype, Telegram, Mail.ru, Google+ and WhatsApp.
– Finesse
May 20 '18 at 9:04
Does it only work in twitter?
– The Bang Bandit
May 20 '18 at 8:51
Does it only work in twitter?
– The Bang Bandit
May 20 '18 at 8:51
@TheBangBandit No. It works at least in Facebook, Twitter, VK.com, OK.ru, Skype, Telegram, Mail.ru, Google+ and WhatsApp.
– Finesse
May 20 '18 at 9:04
@TheBangBandit No. It works at least in Facebook, Twitter, VK.com, OK.ru, Skype, Telegram, Mail.ru, Google+ and WhatsApp.
– Finesse
May 20 '18 at 9:04
add a comment |
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
answered Nov 15 '18 at 8:56
Varun AryaVarun Arya
928
add a comment |
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
answered Nov 15 '18 at 8:56
Varun AryaVarun Arya
928
add a comment |
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
answered Nov 15 '18 at 8:56
Varun AryaVarun Arya
928
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
answered Nov 15 '18 at 8:56
Varun AryaVarun Arya
928
answered Nov 15 '18 at 8:56
Varun AryaVarun Arya
928
answered Nov 15 '18 at 8:56
Varun AryaVarun Arya
928
answered Nov 15 '18 at 8:56
Varun AryaVarun Arya
928
928
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f50433001%2fhow-to-customize-the-image-shown-when-posting-a-url-of-a-website-on-social-media%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
