I have a site at carlcooper.co.uk In the site I have a file called logo.png... and the line to bring it up is... <div align="center"><img src="images/logo.png" width="200" height="63" alt="Site Logo"/> </div> When I add the site link to something like facebook etc. the link comes up fine, but I'd like the logo to be displayed, but instead it shows any other random image from the page... Is there a way to use that logo file as the dominant image for all links? Thanks, and a Happy New Year...
Add these HTML meta tags in the <head><head> <meta property="og:image" content="[url to image]" /> <meta property="og:title" content="[page name]" /> <meta property="og:description" content="[content description]" />
TECHNICALLY you only need og:image, the latter two are (idiotic pointless) redunancies to your <title> tag and <meta name="description"> -- hence why 99%+ of the people using those other two crap the exact same content into them. I would suggest only including those if you want the text for the link or the description of it DIFFERENT from the contents of your <title> and <meta> -- otherwise they're just a waste of bandwidth.
I have changed this.... <meta property="og:image" content="https://www.carlcooper.co.uk/images/logo.png"/> <meta name="twitter:image" content="https://www.carlcooper.co.uk/images/logo.png"/> It still opens up a random image from the site when I link
Beware sometimes if they have an image 'cached' for the page, they'll ignore your og setting for a week or two. PARTICULARLY if you screwed around with cache-control settings on your image files. ANOTHER reason I consider the whole "dick around with cache-control settings for static files" thing to be hoodoo-voodoo bullshit.
For facebook you need to resubmit your site to their debugger: https://developers.facebook.com/tools/debug/ It will clear the old caches and start showing your new image. Or you can wait as it was suggested.
I am trying all these... the debugger shows everything is right, but it also shows that it's going to its going to display the wrong image, before it does it even shows that it knows which file I want to show, just so it can mug me off that little bit more...
They often reject images with alpha transparency, and they often dislike images that are not close to square on aspect. you should aim for somewhere between 1:1 to 16:9 aspect. In fact facebook recommend 1200x630 (19:10), and most places suggest from experience 1200x1200. I have noticed that anything under 800 wide is automatically rejected. Their ignoring a 200x63 .png with alpha transparency? Not entirely surprising. Could also be the engine they use for parsing the page when you share is giving up on specific pages given the HTML is such a gibberish non-semantic wreck with nonsensical use of numbered headings, run-on sentences masquerading as menus, classes doing <cite>'s job, blocking scripts inside <head> before you even have the charset meta, overstuffed keywords meta (should be 7 or 8 single words or proper names that exist between <body> and </body>, don't just blindly stuff it with crap playing word jumble!), invalid/gibberish robots meta (THERE IS NO SUCH THING AS INDEX OR FOLLOW!!! You want it indexed or followed, don't use the META!), lack of media targets, goofy scripted animation for NOTHING of value that could interfere with usability, lists around things that are neither bullet points nor brief selections, needlessly cryptic presentational classes, <figure> around things that are not mathematical or scientific figures, scripttard only <form> that doesn't even have an actual <form> or scripting off fallbacks... It's a laundry list of how not to build a website, so it's not entirely a surprise something like this might go bits-up face-down on you.