Preview picture for Facebook


#1

Hello,

how can I select/set a certain picture of my index.html page to be the preview picture when embedding a link to the page in Facebook?

Until now I have one picture on my index.html page, but Facebook doesn’t automatically show it as preview picture.

Thank you very much in advance!

Best


#2

This maybe help you:
https://developers.facebook.com/docs/sharing/webmasters


#3

You would need to edit the following code and enter in the head area:

<meta property="og:type" content="website"/>
<meta property="og:title" content="My Sites Title"/>
<meta property="og:image" content="http://mydomain.com/myimage.jpg"/>
<meta property="og:url" content="http://mydomain.com"/>
<meta property="og:description" content="Insert description here"/>
<meta property="og:site_name" content="My Sites Name"/>
<meta property="fb:admins" content="fb_username"/>

Choose an image, save it on your server and link to it above.


#4

@webdeersign yes this is how i do it as well, works great but I have a small tip,
Just create a page IN your project called, og.html
in this page you import your FB or Twitter pics.

So design a picture for FB,
Save it in your assets folder,
Import it in your project,
en then in your og.html page you just insert the picture.

why? because now this og.html page belong to your project, and every time you export and upload your complete project it to your server, the FB picture is in the standart img folder of your Blocks project as well, and you never forget it ( I had that a few times :sweat: )

so it will be:
og:image" content=“http://mydomain.com/img/myimage.jpg

Sandy


#5

@sandy good tip.