We're a group of developers, an build online tools for programmers. One issue we had was that our tool URL's were appearing in text instead of an image, while shared in chat apps like WhatsApp, Skype or Telegram.
This tool reads your meta tags and generates a preview. And also gives suggestions about which meta tags to improve for a better preview image.
@bentossell@r_oosterhof Twitter has so many different views for a website preview (wide, vertical, stretched etc) that we decided to simplify and skip Twitter for now.
But if you follow the feedback messages for each meta tag - and your preview looks good in all preview windows - it will probably will also look fine in Twitter.
Also take note that it sometimes takes a couple of days for Twitter to interpret (or refresh in case of an image update) your "og:image" meta tag.
@r_oosterhof I used to run promoted tweets for a telco here in the UK so all too familiar with the different sizes... but I think for this audience that Twitter may become a highly requested feature :) it has my vote haha.
It is just the place I share most I guess!
Great hunt! This is an important tool for anyone who wants to be sure his site is viewed correctly from different chat applications. Very nice. Good luck guys!
This is a brilliant idea. Most developers don't think about the social metadata. It does more than people think. LinkedIn is the worst offender because it's so difficult to understand how they display the data and it's almost impossible to clear it. Facebook is pretty good with their explanation. Remember folks, these apps aren't just pre-fetching the usual info - they're pre-fetching metadata that you specifically tag for these sites/apps. I'm not even sure these guys explain it well enough. It's not what a "WebView" displays, it's what the "cards" and social network websites show.
it's cool. Simple but very efficient . I was missing og tags on my website and was not aware of it.
Suggestion: When any og tag (say image) is missing after user search for its website, you can add some dummy image and highlight it to display its effects.
Hi Ben, thanks for your feedback. That captcha window is a one time appearance to whitelist your IP address. It's to protect our resources because we get over 10,000 URL driven requests a day by spambots, thinking our toolbox is a URL submit service.
However, if you use the client forms by Javascript, we detect that you are a human visitor and we'll not show the captcha window at all.
@r_oosterhof I've taken another look at your site and I have a recommendation - if my understand is correct that is. You should explain to developers that your tool checks the social metadata that's used to display the preview of the sites when a link is posted inside an app. LinkedIn on the desktop version for example, may display more information than say, the new HipChat cards.
@paul__walsh Hi Paul, yes indeed, there are still a lot of exceptions related to the device people use to share or view their links. We've tried to simplify this by showing the most common preview for each platform.
If users follow the recommendations on top of the page - with advise for each meta tag - the website preview should look fine in general. And thank you for the HipChat suggestion, I'm looking into it right now!
Nice tool, very useful.
My advice is to improve the previews considering AJAX application that use HTML snapshot. All crawlers use hash fragment for that.
Thanks and compliments.
Replies
Browser Specs
Makerpad
Browser Specs
Makerpad
Browser Specs
Makerpad
Makerpad
Trusted News
StartupYar
Browser Specs
Makerpad
Trusted News
Browser Specs
Readinity