Sharing links should preview your site!
I used to think it was magic, turns out it is just HTML tags. Now Facebook will now preview my website’s URL link in a pretty way with a description, a title, and an image to help convince people to click!
Step One: Add the HTML tags
There are three tags you need that map directly to the image, the title, and the description. These special fields need to have a particular label and it is that that Facebook and others scrape for.
<!-- Social-sharing URL Previews config -->
<!-- Using png instead of webp as it is more widely supported --><meta property="og:image" content="/iPhone-XS-MAX.png" />
The tag that is important here is the
og:image tag and you want to use an image type/format that is widely used — png and jpeg are good bets.
content="everyhour - the honest way to track your time and
Same story here — you need the
"Struggling with time? everyhour helps you easily record
what you do - motivating you to not waste time,prioritise what is
important, and to find better balance"
Shock once again — you need the
Optional URL property
You may also have a preferred URL you want people to actually navigate to — say maybe a specific landing page for when someone shares a link to another person, or to give a nudge to https (though this is not a good way to do this).
This is specified with another
<meta property="og:url" content="https://www.everyhour.xyz" />
Step Two: Check that Facebook hasn’t cached your site
Facebook does cache these and stores them. It can in fact give you information like the number of likes your URL has gotten too!
There will be times that you may want to change your copy or image but that change isn’t happening in Facebook — this is why.
You can force a new scrape and hence update your details here:
Sharing Debugger - Facebook for Developers
Sharing Debugger lets you preview how your content will look when it's shared to Facebook and debug any issues with…
Most social media sites have these :
Get insights into how your content shows up on LinkedIn with Post Inspector.
Step three: Send the link out!
Pure and simple — you are done. Start sharing the link.
Follow me for more little tips as I learn and build everyhour.xyz!