How to customize your website's link preview when it's shared: Step by Step

I once was able to customize the thumbnail and message for my Blogger page whenever it was shared via text message, Facebook Messenger, Facebook Post, etc., by using an open graph generator.

I'm going to show you how to do it with a Xara website.

1. Go to https://smallseotools.com/open-graph-generator/

2. Enter your information, then copy your generated code

3. In Xara, go to Utilities>Web Properties>"Website" Tab>"HTML Code (head)" Button: then paste it into the dialog box after you click the button
Attachment 124825

4. Click "OK" then "Apply"

5. Re-publish the website with your new code.

6. Go to https://developers.facebook.com/tools/debug/ to clear Facebook's cache of your old preview, just enter your site's URL and click "Debug".
The new preview won't apply on Facebook unless you do this, but it seems to work just fine with every other service I've tried. (I'd do it anyway . . .)

7. Test your new site preview: share it on Facebook messenger, WhatsApp, text message or whatever service you commonly use.

This is my result:
Attachment 124823

Peace be with you,

Braden.

Thanks again for this.

You too Gary.

You've helped me in the past, I'm just happy I can give something back to you and the community.

Speaking of which, is there any way you can make this thread sticky so people can access it?

I looked all over the internet and the forum for a specific Xara tutorial and couldn't find one.

Being lazy, I cheated.

I copied your code and edited the URLs to suit my test site.
I didn't bother with the Facebook Developers bit as I was curious to see how long it took to organically show. It worked basically instantly.
I don't do the social media thing at all, so I only have my daughters FB account to test it on, so can't comment on other platforms.

Of course I made an oblong graphic which FB cut into a square. Then I made it too detailed and it looked horrid. Simple and bold looks good.

Can you explain what this does for a Website? I read what was at the site but still not sure what this is actually doing for a Website.

Ray

For the website itself, it's does absolutely nothing.

But when you share the website, most devices these days will display a website preview (a picture), a message, and a title.

If you DON'T customize this, the device will decide what picture from your site is displayed and in what message.

If it can't find a picture, it might just choose to display a cog and wrench symbol, which looks TERRIBLE.

If you've created the most eye catching site ever seen by man, but upon being shared, it displays a random preview with no message and a picture that doesn't make any sense in light of your brand or even worse a symbol that makes your site appear to still be under construction, it can seriously damage the amount of people who will actually click to view your amazing site.

Basically, it's for advertising.