Select an image to appear beside site description

**NickyE** · 09 February 2016, 09:24 PM

Hi, this is a basic thing but I just cannot find the info I am looking for.

I've tried searching Xara Web Designer help, and searching through the forums.Wrong keywords?

Anyway, i just pasted a link to my new site on FB. Beside the description is a blank box, rather than any kind of image relating to my site. How can I select the image that will appear alongside my site description?

Thanks!

**NickyE** · 10 February 2016, 04:05 AM

Click image for larger version.

Name: blank image box.jpg
Views: 108
Size: 49.2 KB
ID: 111754

This might make my question a little clearer. How do I get an image to appear inside the white box? Thanks in advance.

**pauland** · 10 February 2016, 07:48 AM

http://stackoverflow.com/questions/6693499/how-can-i-set-a-website-image-that-will-show-as-preview-on-facebook

Perhaps Xara should be supporting this..

**Spitsoor** · 10 February 2016, 03:50 PM

I was wondering the same and by accident stumbled upon the open graph metatags.
I too think that Xara should implement those in the file like it does the favicon.
Just put in any photo/bitmap and name it. Or because you need more than one line of code for OG, make some kind of metatag generator we can fill out.
That would make this so much easier.

I am glad to say that all my sites now have their own open graph which shows in any link shared on facebook or google+

**NickyE** · 10 February 2016, 07:35 PM

I might need some hand-holding for this one. My coding is borderline. I have managed to plug in Google Analytics and an HTML Placeholder and that's about as good as I get. If I could have a little more information on how to go about using open graph metatags, that would be great

**Spitsoor** · 10 February 2016, 09:05 PM

K.

select your image, upload it to your www and copy the following and place it in the <head> section of your site:

<meta property="og:title" content="--company motto or something, no name--" />
<meta property="og:type" content="website" />
<meta property="og:url" content="---http://yourdomain.com---" />
<meta property="og:image" content="---your image url---" />
<meta property="og:site_name" content="---the name of your site/company---" />
<meta property="og:description" content="---a short description of your company, max two sentences---" />

fill in all from --- to --- with your own tags.
that should help you along just fine.
there's more tags available for a twitter card etc, but this is what you need for facebook etc.

It should show something like this one:

Click image for larger version.

Name: hekmanss.jpg
Views: 111
Size: 81.4 KB
ID: 111776

**NickyE** · 11 February 2016, 07:22 PM

Thank you Spitsoor, I'll give this a go.

**NickyE** · 11 February 2016, 09:35 PM

Have I done everything right?
1. I created a unique image that I would like to appear on FB links etc, which doesn't actually appear in that same form on my site.
2. I uploaded it to my www, and then hid it behind my page background so that it isn't visible to visitors, to the page
(will this make it too hard for Facebook to find it? is there another way to do it? ie upload a photo to a photo-sharing site and copy the URL from there?)
3. I pasted and filled in the blanks in the Open Graph Metatag, kindly supplied by Spitsoor
3. I published my site
4. I tested it on FB
5. No luck. The new pic has not appeared, though I understand it could take some time to filter through. Or maybe my method of hiding it on the Page Background is my undoing. Turns out that since I started this thread, Facebook has gone and switched to a head-and-shoulders pic of myself as its image of choice. Oh great. Now it looks like I'm on a big ego trip

This process has created a new question for me. Which overrides which? The description in Web Properties -> Website -> (Description Box), vs the description in Web Properties -> Website -> HTML Code (head)?

Thanks again for all your awesome help

PS code is below

<meta property="og:title" content="A Little Imagination Goes a Long Way" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://www.monkeypants.com.au" />
<meta property="og:image" content="http://www.monkeypants.com.au/mpmthumb" />
<meta property="og:site_name" content="Monkey Pants Media" />
<meta property="og:description" content="Creative, energetic film and graphic design in Port Stephens, Newcastle and the Hunter" />

**Spitsoor** · 11 February 2016, 10:45 PM

Originally Posted by NickyE

Have I done everything right?
1. I created a unique image that I would like to appear on FB links etc, which doesn't actually appear in that same form on my site.
2. I uploaded it to my www, and then hid it behind my page background so that it isn't visible to visitors, to the page
(will this make it too hard for Facebook to find it? is there another way to do it? ie upload a photo to a photo-sharing site and copy the URL from there?)
3. I pasted and filled in the blanks in the Open Graph Metatag, kindly supplied by Spitsoor
3. I published my site
4. I tested it on FB
5. No luck. The new pic has not appeared, though I understand it could take some time to filter through. Or maybe my method of hiding it on the Page Background is my undoing. Turns out that since I started this thread, Facebook has gone and switched to a head-and-shoulders pic of myself as its image of choice. Oh great. Now it looks like I'm on a big ego trip

This process has created a new question for me. Which overrides which? The description in Web Properties -> Website -> (Description Box), vs the description in Web Properties -> Website -> HTML Code (head)?

Thanks again for all your awesome help

PS code is below

<meta property="og:title" content="A Little Imagination Goes a Long Way" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://www.monkeypants.com.au" />
<meta property="og:image" content="http://www.monkeypants.com.au/mpmthumb" /> ← that won't work....you have to specify the filetype i.e.: mpmthumb.jpg or mpmthumb.png
furthermore, you do not have to hide it in your page, because it's in the www section of your server, not in the html_files folder of your site, so no chance of it being deleted when publishing your site. Rest looks just fine!
<meta property="og:site_name" content="Monkey Pants Media" />
<meta property="og:description" content="Creative, energetic film and graphic design in Port Stephens, Newcastle and the Hunter" />

grtz, Spitsoor

**NickyE** · 11 February 2016, 11:09 PM

Originally Posted by Spitsoor

K.

select your image, upload it to your www ]

I misinterpreted this and understood it to mean "import the image." I'm not sure how to upload to my www? A quick search of the Help menu didn't throw up any answers.