WebsiteBuilder: Specify the Image Used by Facebook for Shares and Likes

  • 1
  • 1
  • Article
  • Updated 3 days ago
Hello,

If you want to specify what image is used when someone shares/posts/likes your website on Facebook you can add this snippet of code to the tag:

<meta property="og:image" content="http://www.domain.com/image.jpg"/>

We need to replace the image url with the image you wish to use. 
Make sure you have already uploaded your image and published it.
Your picture will look best if it is square and at least 600 pixels wide
You just need to change the URL in the code to the address of the published image you want to use.
After you've added the code there and published you will need to run your website URL through the Facebook Debugger so they will crawl the site and make the update.

Facebook Debugger

To clarify, the code above will go into the Advanced settings in WebsiteBuilder . Even if there's other code in there already, that is ok.  Just scroll to the bottom of the existing text/code and then paste in the new code.  



1. Add the image to an image gallery, place it anywhere on the page and publish the site. 
(this gallery does not need to stay on the website, it will only display temporarily to get the image url)

2. Visit the published site, open the image, right click on the image and select copy image address. 

3. Paste this url into the code. Remove the current "url" and replace it with the info that was copied. 

<meta property="og:image" content="http://www.domain.com/image.jpg"/>

4. Place the tag into the advanced settings. Under manage>advanced> site meta tags. 

5. Publish. Once you are finished you can remove the image gallery from the site.
Photo of Homestead FAQ

Homestead FAQ, Employee

  • 43,696 Points 20k badge 2x thumb

Posted 4 months ago

  • 1
  • 1
Photo of ToycrafterDave

ToycrafterDave

  • 60 Points
I followed these directions. I got this warning from Facebook: Provided og:image URL, https://storage.googleapis.com/wzsitethumbnails/site-49484794/800x500.jpg could not be processed as an image because it has an invalid content type.

Photo of Michelle C

Michelle C, Employee

  • 36,922 Points 20k badge 2x thumb
That may be the incorrect image address. It should reference a photo when the link is clicked on.
What page is this image published to on the site? I can take a look. 
Photo of Jonathan T.

Jonathan T.

  • 6,844 Points 5k badge 2x thumb
What's the easiest way to track down the image link? I was also having the same issue as above.
Photo of Michelle C

Michelle C, Employee

  • 37,392 Points 20k badge 2x thumb
Add the image to an image galley and publish, then open the image on the live site and right click selecting copy image address. 
Photo of Jonathan T.

Jonathan T.

  • 6,844 Points 5k badge 2x thumb
Ok, I'm still having the same issue at ToycrafterDave above. Even when I do that, it defaults to this and  this is NOT the link I put in the code. 
Photo of Michelle C

Michelle C, Employee

  • 37,392 Points 20k badge 2x thumb
Odd, I can try to extract the URL, that does look a little different than it usually would. What image do you want to use and what site is it on?
(Edited)
Photo of Michelle C

Michelle C, Employee

  • 37,392 Points 20k badge 2x thumb
It is entered correct. The warning message can be disregarded. When I test the debugger it shows the correct image.


Also, when I go to share the link it shows the correct image as well. It is good to go. 

Photo of Jonathan T.

Jonathan T.

  • 6,844 Points 5k badge 2x thumb
Thank you
Photo of Scott5679

Scott5679

  • 330 Points 250 badge 2x thumb
That's awesome.

Quick question.. is there a way to have different images appear for different pages?
Photo of Michelle C

Michelle C, Employee

  • 37,392 Points 20k badge 2x thumb
Hello Scott, 

You can set up different tags per page. To do so the OG tag would need to be changed in the header of each page.
Photo of Scott5679

Scott5679

  • 330 Points 250 badge 2x thumb
Thanks Michelle :)
Photo of Michelle C

Michelle C, Employee

  • 37,392 Points 20k badge 2x thumb
You are welcome. 
Photo of Jennifer8077

Jennifer8077

  • 422 Points 250 badge 2x thumb
Having some difficulty.  What is the url address for the logo on the top of my website castellanomusic.net?
Photo of Michelle C

Michelle C, Employee

  • 37,392 Points 20k badge 2x thumb
The image will first need to be added to an image gallery and published. Click on the image from the published site to open it. Then right click and select copy image address. 
Photo of Jennifer8077

Jennifer8077

  • 422 Points 250 badge 2x thumb
I imported the image into the image gallary and then put it on the site.  I saved it and published it. 

When I right click on it, I have no such option for copy image address.
Photo of Michelle C

Michelle C, Employee

  • 37,392 Points 20k badge 2x thumb
Perfect, after it is published in the gallery click on the image to expand it, opening the image in the gallery. From this window right click and you will see copy image address.

(Edited)
Photo of Jennifer8077

Jennifer8077

  • 422 Points 250 badge 2x thumb
Uh I am not seeing any of that.  I can only place the image or delete it.
Photo of Michelle C

Michelle C, Employee

  • 37,392 Points 20k badge 2x thumb
This will be done from the published website. 
Photo of Jennifer8077

Jennifer8077

  • 422 Points 250 badge 2x thumb
This is what I see when I try to post the link to the website to social media. 
(Edited)
Photo of Michelle C

Michelle C, Employee

  • 37,392 Points 20k badge 2x thumb
I ran the url through the debugger https://developers.facebook.com/tools/debug and it does preview the correct image now. Also when I go to share it, its showing. It may have taken a few minutes to debug but you are all set. 
Photo of Wendy8827

Wendy8827

  • 216 Points 100 badge 2x thumb
I am having the same issues with my site www.seasonscounselingwnc.com. Please help, I'd like for the little leaf to show as my pic. I made an image gallery, inserted it, published it, then added it's location to the settings, but it still shows in FB debugger as something else. 

Provided og:image URL, https://storage.googleapis.com/wzsitethumbnails/site-49649513/800x500.jpg could not be processed as an image because it has an invalid content type.

I changed this but it's not updating.


(Edited)
Photo of Michelle C

Michelle C, Employee

  • 37,392 Points 20k badge 2x thumb
Hello Wendy8827,

The og image tag is added to the site properly, however, the builder is having issues reading and displaying the code. I have added a this to a ticket and it should be getting resolved soon. Thanks for understanding.