when someone send a link of a website in facebook, sometimes it shows the hero image of the website.Like this:image 1

How can i set that for my website?

2 Answers 2


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/ .

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.