So I don’t know if thits the right way to say it! Im trying to have the image on my website shared on facebook! What i mean by that is: for example if i share a links and there is an artwork in that page I want facebook or twitter to recognize it the same way as if you share a youtube video or a song from itunes for example. Right now I only can share the link with no picture! Any thoughts?
Facebook will let you share a page but it does not always look very good. The easiest way is to just do this manually. You have to follow this order for it to work correctly.
- Add some text to your post.
- Add the image you want.
- Add the link to your page below the the text.
There are facebook adds and some other services that will create post but it will cost you something.
Casey
Ah yes this actually works for facebook but not for twitter 
I think what you need is Facebook Opengraph and Twitter card details added to your site. You can generate code by clicking on the relevant sections in the link and it should work in theory if you add it to the header in the page settings. A linked image will need to be uploaded to the server somewhere. https://webcode.tools
I’ve not tried this in Blocs yet, but my guess is you copy the output from that website and go to page settings inside Blocs. Click the button where it says Add Code and then select the Header before pasting in that window and save the changes. In theory that should work but you’ll need to add an image on the server and link to that inside the code.
My hope is that Blocs 3 will bring us something that makes this process easier to understand and implement.
Will do! Thank you so much! I hope the same to because Imagine to do this to a website with more than 20 pages!
If you saved this as a text file and added it as a project attachment under project settings that should in theory apply site wide, but you would have to test that. The downside is that you would lose the flexibility that comes from doing this on a each page, where you could change the image and associated text.
Really I think we need a bric or some kind of option that makes it easier to manage with less guessing.
Do you think it will be possible? For example as my page is for a record label, It mean I will have to fill the form for each page release:
Fill in required fields.
Title
URL
Number of Musicians
Musician 1 URL *
- Provide a URL to the musician’s Facebook profile or a page with open graph data of type profile.
Number of Songs
Song 1 URL **
** Provide a URL to a page with open graph data of type music.song.
Number of Images
Image 1 URL
And if I do it only once on the text file then facebook will see the picture that is linked on the txt file right?
If you do it using the text file I would expect to see the exact same result for every page. That may be fine, but in some cases you want a separate image and description for each page in which case you should create them one by one in the page settings.
Imagine your website is for you as a web designer. You might have one page for web hosting services and another for SEO. Unless you are happy to have a very generic image and description that covers everything it would be better to treat these separately.
It’s hard to know reliably what Facebook will do and it may change over time. OpenGraph images are best at specific sizes. This is something you need to test and not leave to guesswork.
Ok! Im putting the code at each single page as each artwork is different! Question: How long does it take for facebook to recognise the pictures? Still nothing happens when I share the link!
I just used the facebook debug tool https://developers.facebook.com/tools/debug/sharing/ and is telling me this: The ‘og:image’ property should be explicitly provided, even if a value can be inferred from other tags.
The following required properties are missing: og:url, og:type, og:title, og:image, og:description, fb:app_id
What does it mean?
It means you should link to a specific image that is correctly defined as an opengraph image. I can’t add the code here, because it doesn’t show up properly. Check out the attachment for guidance.
opengraph.txt.zip (813 Bytes)
It should either be immediate or fairly fast.
did you create it with the website you told me? what Generator did you used?
I’ve done this in the past using Rapidweaver and just copied some of the code from one of my web pages. There are probably different ways of doing this depending on how much detail you want to include.
I found this online https://megatags.co/#generate-tags and it works very good 
Thank you so much for pointing this info to me 
Nice find. I’m really hoping Blocs 3 will bring us some kind of built in functionality for this. When using Rapidweaver with Foundation I can simply drop in a stack for this task, then fill in the various parts like name, description and image. This is then exported to the website.
That would be awesome! @Norm do you think you could take this into consideration? also the removing the html for the url would be great 