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
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
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 https://developers.facebook.com/tools/debug/
This is a good site for resizing your images to the correct proportions https://sproutsocial.com/landscape
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!
