how to set og:image so Facebook obtains the image I want when the URL is posted

<meta property="og:url" content="http://hbm.bike/" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Houston Bicycle Museum" />
<meta property="og:image" content="http://hbm.bike/hbm_sunshinebikes.jpg" />

I pasted these meta tags in the Web Properties, Website TAB, then the HTML code head.

https://developers.facebook.com/tools/debug
this is what Facebooks says:
"Unknown Image Error Provided og:image URL, http://hbm.bike/hbm_sunshinebikes.jpg encountered an unknown error."

Without these meta tags, Facebook will find one of the first images in the body:
http://hbm.bike/index_htm_files/6226.jpg and use this as the image to embed within a facebook post.
But it seems from testing that some devices, Facebook "scraper" still cannot pick this up always, particularly iphones, so I've decided to specify these meta og: tags.

The only way I can get the scraper to not issue an error is if I specify an image that is actually rendered in the HTML.
http://hbm.bike/hbm_sunshinebikes.jpg I uploaded separately via FTP to my website. Xara recodes all image filenames when I upload or export. So sunshinbikes.jpg is not actually in the HTML code of the website. So this is the meta tag I'm going to use:
<meta property="og:image" content="http://hbm.bike/index_htm_files/6226.jpg" />

Is there a better way to specify an image for when Facebook users use the hbm.bike URL in a post and a nice image dispalys with the URL? Also, is there a way to have Xara not 'variablize an image name? Thank you.

Your post was moderated because you are a new member and links are not permitted to new users (spam prevention). Your links are appropriate, I don't think you are a spammer, and I approved your post. :)

I have no idea what the answer is but someone will post something very soon, I am confident.

Welcome to TalkGraphics

Quote:

---

Originally Posted by mintintegral18

Xara recodes all image filenames when I upload or export. So sunshinbikes.jpg is not actually in the HTML code of the website. So this is the meta tag I'm going to use:
<meta property="og:image" content="http://hbm.bike/index_htm_files/6226.jpg" />

Is there a better way to specify an image for when Facebook users use the hbm.bike URL in a post and a nice image dispalys with the URL? Also, is there a way to have Xara not 'variablize an image name? Thank you.

---

For the image that you wish to use to report as sunshinbikes.jpg, select the image and using Utilities > Names, Name it filename="sunshinbikes". Instead of http://hbm.bike/index_htm_files/6226.jpg, it will now appear as http://hbm.bike/index_htm_files/sunshinbikes.jpg.
Do not include the file extension (,jpg).

Acorn

ok. Thanks for the names advice. Unfortunately, it is not changing the 6226.jog filename. Xara, when publishing the website, does give it an id attribute, img class="xr_ap" id="sunshinebikes" src="index_htm_files/6226.jpg" alt="" title="" style="left:0px;top:185px;width:955px;height:341px ;
I made sure the image was selected in Xara when adding the name to it.

Quote:

---

I made sure the image was selected in Xara when adding the name to it.

---

Easy enough to confirm. Filename=" " has always worked in the past.

Then you did not enter the phrase, filename="sunshinebikes".
If you just enter sunshinebikes, it becomes the ID and not the filename, sunshinebike.jpg [src="index_htm_files/sunshinebike.jpg].

Acorn

OK. So here's what is weird Acorn.

Preview my attached web document.

There are two pairs of objects. One set uses filename=name and the other uses filename="name"

Here's the weird part. The square images do not keep the filename.

The circular objects do keep the name, but since they are the same object there is only one version of the image in the index folder.

And the square images have become part of the HTML and do no exist as images.

Gary, you should wrap phrases with blanks inside quotes but Xara currently handles them correctly.

As the squares are horizontal and rectangular (clipped or unclipped photos with or without contone), HTML can render them as SPANs with background fill.
Xara should provide the style for the background: url("index_htm_files/4@2x.jpg") 0px 0px / 278px 279px no-repeat;, replacing 4@2x with the filename - a Xara fail.

All you need do is make a bitmap copy of the image or feather or rotate or convert to editable shapes and all works as described.

If you make a Bitmap Copy, you need to Name if afterwards.
If you add a Filter, you need to Name if afterwards.
If you Group it to itself or with a small object hidden behind, you need to Name it afterwards.

Acorn

fantastic. I must not have comprehended your first post exactly. Naming it, ......filename="sunshinebikes"...... , now Xara uploads a jpg image to the website and it has a name, of sunshinebikes.jpg. Thanks again.

in Facebook it shows perfect, but when I try to share by WhatsApp the image doesn't show.
any idea please?

I have been struggling with this as well, and I came back again to see if I could get some answers. I got frustrated again because my results just didn't work, so I did a Google search and found a website that is very helpful. Forget all this complicated stuff and just go here... https://anyimage.io/ It takes care of everything for you. This will be so helpful for all of my clients, and I can even do it for them and give them a new link to use on Facebook. Good news for everyone!

Quote:

---

Originally Posted by marjorie

I have been struggling with this as well, and I came back again to see if I could get some answers. I got frustrated again because my results just didn't work, so I did a Google search and found a website that is very helpful. Forget all this complicated stuff and just go here... https://anyimage.io/ It takes care of everything for you. This will be so helpful for all of my clients, and I can even do it for them and give them a new link to use on Facebook. Good news for everyone!

---

Thanks marjorie. Is 10 free cards a month enough for you?

Acorn

Yes, I think 10 per month will work for me. 1. I can reuse the links over and over again. 2. I can have my DIY clients create one themselves. 3. I can create a link for each client when their website is complete, to spread my limits out. 4. And as a last resort and I don't think I will even need it, but I can always use my husband's laptop as well.