Page 1 of 1
*SOLVED* What makes this image show up in preview-thumbnail?
Posted: Sun Dec 15, 2019 11:29 pm
by etcbbu
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.
Re: What makes this image show up in preview-thumbnail?
Posted: Mon Dec 16, 2019 6:48 am
by Pablo
You can set the Facebook image in Page Properties -> Meta Tags -> Open Graph
Re: What makes this image show up in preview-thumbnail?
Posted: Mon Dec 16, 2019 6:58 pm
by etcbbu
So, is that something for which you for-sure have to use that facebook-ID (on their end) to be able to use?
Re: What makes this image show up in preview-thumbnail?
Posted: Mon Dec 16, 2019 7:06 pm
by Pablo
I am not sure if that is a requirement. Did you try without it?
Re: What makes this image show up in preview-thumbnail?
Posted: Mon Dec 16, 2019 7:26 pm
by etcbbu
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..?
Re: What makes this image show up in preview-thumbnail?
Posted: Mon Dec 16, 2019 9:21 pm
by crispy68
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.
Re: What makes this image show up in preview-thumbnail?
Posted: Mon Dec 16, 2019 9:46 pm
by etcbbu
Will the location be the https:// ... .jpg --that is--literally the path and filename of the exact .JPG file I'd *like* to use?
Re: What makes this image show up in preview-thumbnail?
Posted: Mon Dec 16, 2019 9:50 pm
by crispy68
yes
Re: What makes this image show up in preview-thumbnail?
Posted: Mon Dec 16, 2019 10:21 pm
by etcbbu
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..?
Re: What makes this image show up in preview-thumbnail?
Posted: Mon Dec 16, 2019 10:37 pm
by crispy68
Checking the scraper it looks correct to me.
There are 2 other tags you need to add.
Re: What makes this image show up in preview-thumbnail?
Posted: Mon Dec 16, 2019 10:49 pm
by etcbbu
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
