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
This maybe help you:
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.
@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 
)
so it will be:
og:image" content=“http://mydomain.com/img/myimage.jpg”
Sandy
@sandy good tip.
This is an old post and I am not a programmer, yet I’m still going to ask for help.
I made the og page, but I’m having a hard time finding the header where I edit the following code
<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"/>
Can you point me in the right direction to where I can read about editing the head area?
And then I assume I insert photo brics in the og page and it will show as a website preview picture?
Thanks in advance.
Bill
OK I’ll walk you through it. You don’t have a specific OG page. Each page has it’s own data.
Go to the page settings and click on the add code button. A window will pop up and your code goes in there.
From there here code will be edited to look something like this:
<meta property="og:type" content="website"/><meta property="og:title" content="Advanced Website SEO Services"/><meta property="og:image" content="https://example.uk/hotlink-ok/example-Opengraph.jpg"/><meta property="og:url" content="https://example.uk/advanced-seo-services/"/><meta property="og:description" content="Advanced SEO services from Example Web Design that will boost your web ranking"/> <meta property="og:site_name" content="Example Web Design"/> <meta property="fb:admins" content="yourfacebookpageid"/>
Your image should be hosted remotely somewhere on the server without using a bric. I always put them in a folder called hotlink-ok out of habit because I’ve used Cloudflare, which suggests that name for their own services, but you can call it what you like otherwise. The important bit is simply that it is a url full path that takes you directly to the image.
The rest should be fairly easy to work out, but always test it with Facebook developer tools to see how it looks Sharing Debugger - Meta for Developers
This is a good site for resizing your images to the correct proportions Social Media Image Resizing Tool | Landscape by Sprout Social
PS I always call the preview image file opengraph or something similar, just so it is easy to separate from twitter images in the same folder when checking on the server.
Thank you!
I’ll follow the instructions and return with questions - but hopefully not!
Hi, where do you put this code please?
Could you show screen grabs of example/s?
Sorry I’m not a coder
In Blocs 3 you would put it in the header section of the page settings. In Blocs 4 it is much easier and there is a specific feature for this with no need to code.
Lets hear how to use that Blocs 4 feature. 
Just fill in the text, drop in the image(s), select Twitter, Facebook or both and publish.
I have done it in project settings, but with so many trials and errors… I have no clue how I got it to work. I do remember I had to create a Facebook developer account.
Hi @Flashman think I’ve sussed it mate.
When I ran the test it said it was missing a fb:app_id
Not setup one of these before but think I’ve made it work.
Cheers
I’ve had this before with Facebook also when using code where the preview image doesn’t appear. It went away for me after running the page through their debugger Sharing Debugger - Meta for Developers and scraping the link a couple times.
For Facebook images that would appear in posts I am not sure that size you showed is correct. That could be causing some difficulty as well.
From memory you shouldn’t need the fb:app_id and that’s a false error. A blog post from Yoast seems to confirm that:
Hi!
In the meantime, is there a solution for the facebook display image for blocs 4 - storing it in the page settings doesn’t work!
Many thanks in advance 
Phil
In Blocs 4 you have a page setting area for social cards, at least in the plus version I have that makes it all very easy. You should still be able to set all of this manually with code though in the page settings header area as I did in the past. Link to an image on your server.
Did you re scrape the page with FB? FB cache that information it will take some time to update unless you tell Facebook to re look at the page.
Thanks…The Sharing Debugger helped me a lot! I just can’t adjust the size of the displayed logo in FB. Normally I rule that over display 100% ? Or do you have to take it like the FB preview shows?
Danke…Der Sharing Debugger hat mir sehr geholfen! Die Größe des dargestellten Logos in FB anzupassen bekomme ich nur nicht hin. Normal Regel ich das über Anzeige 100% ? Oder muss man das so nehmen wie es die FB-Vorschau anzeigt?
