*SOLVED* What makes this image show up in preview-thumbnail?

etcbbu · Post by **etcbbu** » Sun Dec 15, 2019 11:29 pm

When I put my website

https://www.ktravisj.com

into one of those status-update boxes on Facebook and get ready to post it, at this moment, the image that shows up in the preview thumbnail window is the "Award for Excellence 2017" image.

What makes that show up? I'd rather it be one of the other images on my page. BTW, even though it's pulling that from my index.php of my .com website, that actual image is actually on a MasterPage that I call, within my .WBS document.

Post by **Pablo** » Mon Dec 16, 2019 6:48 am

You can set the Facebook image in Page Properties -> Meta Tags -> Open Graph

etcbbu · Post by **etcbbu** » Mon Dec 16, 2019 6:58 pm

So, is that something for which you for-sure have to use that facebook-ID (on their end) to be able to use?

Post by **Pablo** » Mon Dec 16, 2019 7:06 pm

I am not sure if that is a requirement. Did you try without it?

etcbbu · Post by **etcbbu** » Mon Dec 16, 2019 7:26 pm

I filled out all of the fields on the "Open Graph" dialogue box, except for the two

- "Type"
- "App ID"

fields. I did it both, on the /index.php homepage of my website, and also went ahead and did it on my non-published masterpage in my project that is called and applied on every page of my website.

Then did an "Entire Website" publish.

At *this* time, whenever I try to put the website in the status-update dialogue box on facebook, I still only get that initial "Award for Excellence 2017" image as the preview image. But if I do it on the Laptop-version of facebook.com when I am logged in and try to perform a status update, I'm able to scroll through a few images and I can manually CHOOSE my logo as my thumbnail.

I'd still like to identify why It auto-populates with that "Award for Excellence 2017" image, though. Could it have anything to do with z-order, or alphanumeric/alphabetical-order of the letters used that make up the file-names of the image files that load on the page..?

crispy68 · Post by **crispy68** » Mon Dec 16, 2019 9:21 pm

hey etcbbu,

You need to specify the og:image as the image you want to use otherwise FB 'finds' an image it wants to use. Have you ever used their scraper tool? If not, it is very helpful to see what info FB is using from your site.

Go here and type your URL in.

https://developers.facebook.com/tools/debug/sharing/

you will see that the og:image is set to the business award image you don't want to use. You will need to change this open graph tag to the location of the image you want. Once you do this, go back and 're-scrape' the site to make sure the change has taken effect.

etcbbu · Post by **etcbbu** » Mon Dec 16, 2019 9:46 pm

Will the location be the https:// ... .jpg --that is--literally the path and filename of the exact .JPG file I'd *like* to use?

crispy68 · Post by **crispy68** » Mon Dec 16, 2019 9:50 pm

etcbbu · Post by **etcbbu** » Mon Dec 16, 2019 10:21 pm

I've done what this page said:

https://www.addtoany.com/ext/meta-tags/

where it says,

"If you are coding the meta tags into a page or a theme/template, add the following HTML code, for example, to the <head> section.

<meta property="og:title" content="Example Page">
<meta property="og:image" content="https://example.com/images/image.jpg">
<meta property="og:description" content="This is just an example page.">
<meta property="og:url" content="https://example.com/page.html">
<meta name="twitter:card" content="summary_large_image">"

by going, in my WYSIWYG Web Builder and going to Index Page HTML >> Between <head></head> >> and placing the following:

Code: Select all

<meta property="og:title" content="Travis J Consulting">
<meta property="og:image" content="https://www.ktravisj.com/images/TravisJConsultingRegisteredLogo.jpg">
<meta property="og:description" content="Travis J Consulting Web Design, Social Media, SEO Search Engine Optimization, Web Marketing Better Business Bureau A Plus, Locals Love Us Winner Tyler TX Texas">
<meta property="og:url" content="https://www.ktravisj.com/index.php">

but now when I use the facebook scraper, I get a error, stating

Invalid URL
Provided og:image URL, https:/images/TravisJConsultingRegisteredLogo.jpg was not a valid URL.

Any ideas..?

crispy68 · Post by **crispy68** » Mon Dec 16, 2019 10:37 pm

Checking the scraper it looks correct to me.

There are 2 other tags you need to add.

etcbbu · Post by **etcbbu** » Mon Dec 16, 2019 10:49 pm

Yeah--never mind, I think I got it working. I'm not 100% happy with the cropping they do on this .JPG, and I've been able to manipulate it, some; and I may continue to change it a little more. But at least it's not that other image anymore.

Thanks for the help, @Pablo and @crispy68 ! WYSIWYG Web Builder is the best website builder!

--etcbbu

www.wysiwygwebbuilder.com

SOLVED What makes this image show up in preview-thumbnail?

SOLVED What makes this image show up in preview-thumbnail?

Re: What makes this image show up in preview-thumbnail?

Re: What makes this image show up in preview-thumbnail?

Re: What makes this image show up in preview-thumbnail?

Re: What makes this image show up in preview-thumbnail?

Re: What makes this image show up in preview-thumbnail?

Re: What makes this image show up in preview-thumbnail?

Re: What makes this image show up in preview-thumbnail?

Re: What makes this image show up in preview-thumbnail?

Re: What makes this image show up in preview-thumbnail?

Re: What makes this image show up in preview-thumbnail?