Meta data and the index.html page

[tonygg]

For some time I have not been able to figure out why sometimes Facebook gets the right image for our home page in posts and sometimes it does not. I have just used the facebook meta tag debugger tool (https://developers.facebook.com/tools/debug/og/object/) and it cannot see the correct brochure home page meta tags when the home page being viewed is: www.secretgardenquilting.co.uk/index.html rather than just www.secretgardenquilting.co.uk.

The meta tags are correctly setup for the brochure home page (www.secretgardenquilting.co.uk) and the same ones appear on the index.html variant. However Facebook does not seem to like them/use them (as seen in the debug tool). For reference they are:

<meta property="og:site_name" content="Secret Garden Quilting UK"/>
<meta itemprop="name" content="Secret Garden Quilting" />
<meta itemprop="description" content="Quilting fabric UK shop with hundreds of quilting fabrics fat quarters, patchwork fabric off the bolt, quilt fabric bundles, Batik fabric, Fat quarter bundles, Jelly Rolls, Charm packs, Quilting Kits, from Moda, Makower, Lecien, Stof and more."" />
<meta itemprop="image" content="http://www.secretgardenquilting.co.uk/acatalog/SGQ_Home_Page_Social.png" >
<link rel="canonical" href="http://www.secretgardenquilting.co.uk/" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://www.secretgardenquilting.co.uk/"/>
<meta property="og:title" content="Secret Garden Quilting" />
<meta property="og:description" content="Quilting fabric UK shop with hundreds of quilting fabrics fat quarters, patchwork fabric off the bolt, quilt fabric bundles, Batik fabric, Fat quarter bundles, Jelly Rolls, Charm packs, Quilting Kits, from Moda, Makower, Lecien, Stof and more."" />
<meta property="og:image" content="http://www.secretgardenquilting.co.uk/acatalog/SGQ_Home_Page_Social.png" >
<link href="acatalog/actinic.css" rel="stylesheet" type="text/css">
<link rel="shortcut icon" href="http://www.secretgardenquilting.co.uk/acatalog/favicon.ico" type="image/x-icon" /><style type="text/css">

I was hoping someone could either:

1. let me know how to redirect the index.html page to the www.secretgardenquilting.co.uk page so there is no time that people stay on the index.html page or;

2. help me out with the block if statement I need to generate the meta tags facebook would like for this page.

Many thanks

Tony

[peblaco]

You can set a .htaccess on the server to redirect index.html to the root domain name. Facebook was not picking up the correct image in SellerDeck 2013 on product pages and it helped to add <figure> tags around the image although note that is a HTML5 tag and SellerDeck 2013 by default does not have a HTML5 doctype, see here.

[tonygg]

Thanks for the quick response. I was struggling to find these posts.

The issue I think is mainly to do with the image file. Facebook seems to get most of the rest of the information correct by deduction (I guess).

I know of one issue on the products which is if the image file name has spaces in it then facebook like returns an error (in the pop up). I thought it worked for my newer products where I had images with no spaces in the file name. However on rechecking it seems to be a bit random. All appear to have no spaces but some give the space error, some show blank images in the pop up and some show my logo in the pop up. That's very odd.

A white space example is:

Indicates that a URL property has whitespace characters, which is not allowed.: URL 'http://www.secretgardenquilting.co.uk/acatalog/Antique_Flower_Cherry_Red_Small_ Rose_Scatter_I31126-30_300px.jpg' for property 'og:image:url' of the object at 'http://www.secretgardenquilting.co.uk/acatalog/Lecien_Antique_Flower_Cherry_Red_Small_Rose_Scatter_I31126-30.html' is invalid because it contains whitespace characters.

But I cannot see any white space characters at all in this one. I maybe going mad!

I am using facebook (twitter, G+ and pinterest directly). I see from the posts 2 possible changes:

1. putting the <figure> and </figure> around all the images I want to use on the site (single page and the sections + homepage where I created a special image for social media posts)

2. changing my og-image tag for products from:

<meta property="og:image" content="<actinic:variable name="CatalogURL" /><actinic:variable name="ProductImageFileNameRaw" />" />

to:

<meta property="og:image" content="<actinic:variable name="CatalogURL" encoding="perl" selectable="false" /><actinic:variable name="ProductImageFileName" />" />

I also noticed the URL meta tag was different. Mine is:

<meta property="og:url" content="<actinic:variable name="CatalogURL" /><actinic:variable name="ProductPageName" />" />

and in the post it is:

<meta property="og:url" content="<actinic:block php="true">echo '<actinic:variable name="CatalogURL" encoding="perl" selectable="false" />' . basename('<actinic:variable name="ProductPageName" encoding="perl" selectable="false" />');</actinic:block>" />
</actinic:block>

Please may I ask for some guidance. Should I change all 3 things?

Many thanks

Tony

[peblaco]

Your white space character problem, there seems to be a space before the word "Rose". You could try both changes. Add a <figure> and </figure> tag around the images in the layouts and if you are using the single product pages feature change the open graph variables for product pages URL and image.

[tonygg]

oops. Very sorry I am going blind!

I will change both on images and let you know.

Do you know if the URL change is useful? I cannot see any problem with my current URLs.

Thanks once again

Tony

[peblaco]

I used the different code for the single product page URLs and images as I think it was not generating the correct URL's in the source code. I have not checked your code or site but it is what I found worked. However as mentioned on the other topic even with open graph tags and figure tags worked most of the time, occasionally it did not seem to pick up the details for some reason.

[tonygg]

Hi. I tried putting in all these changes. The <figure> put in a large border/padding around my images so I put it live on our test site. I put the other 2 changes lice on both test and production site. The example is:

TEST Site: http://www.hertfordshireosteopath.co..._20531-36.html

LIVE: http://www.secretgardenquilting.co.u..._20531-36.html

In both cases when you click on like the pop up has no image. However if you add a comment in the like pop up box it posts the correct image to your facebook page.

The facebook debug tool seems to show correct data including image being collected but in the like preview shows no image.

I guess I am not sure what this tells me or where to go next. Very odd!

Many thanks Tony

[peblaco]

The Share button loads the image and information correctly, however the Like button doesn't. The Figure tag adding margin you can try adding a CSS style: figure {margin:0;}