when someone send a link of a website in facebook, sometimes it shows the hero image of the website.Like this:
How can i set that for my website?
Add a comment
|
2 Answers
This image is fetched from the OG:IMAGE tag from Open Graph protocol.
You may define an image by displaying this tag in your page :
<meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg" />
Note that you need to define the image URL in the content attribute. You may use a plugin like Yoast SEO to define it in any page or post.
I uses these values, placed in the <head> area of your code (shown for FaceBook and Twitter):
<meta property= "og:url" content="https://www.example.com/" />
<meta property= "og:type" content="website" />
<meta property= "og:title" content="My Really Great Site" />
<meta property= "og:image" content="https://www.example.com/images/logo-01.jpg" />
<meta property="og:description" content="There is fun stuff in here" />
<meta property="og:site_name" content="This is my site name">
<meta property="fb:app_id" content="396219604329863" />
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="My Really Great Site" />
<meta name="twitter:description" content="There is fun stuff in here" />
<meta name="twitter:url" content="https://www.example.com/" />
<meta name="twitter:image" content="https://www.example.com/images/logo-01.jpg">
Adjust the values for your site.
To check what FB sees, use this link: https://developers.facebook.com/tools/debug/ .
answered Mar 4, 2020 at 3:34
