Welcome to TalkGraphics.com
Results 1 to 6 of 6
  1. #1
    Join Date
    Aug 2019
    Location
    Tulsa, Oklahoma, USA
    Posts
    115

    Default 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
    Click image for larger version. 

Name:	bandicam 2019-08-18 11-46-22-999.jpg 
Views:	158 
Size:	69.1 KB 
ID:	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:
    Click image for larger version. 

Name:	bandicam 2019-08-18 11-40-10-557.jpg 
Views:	158 
Size:	35.6 KB 
ID:	124823

    Peace be with you,

    Braden.

  2. #2
    Join Date
    Aug 2000
    Location
    Placitas, New Mexico, USA
    Posts
    41,486

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

    Thanks again for this.

  3. #3
    Join Date
    Aug 2019
    Location
    Tulsa, Oklahoma, USA
    Posts
    115

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

    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.

  4. #4
    Join Date
    Dec 2018
    Location
    Australia
    Posts
    1,740

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

    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.

  5. #5
    Join Date
    Jul 2015
    Location
    Currently New York State
    Posts
    774

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

    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

  6. #6
    Join Date
    Aug 2019
    Location
    Tulsa, Oklahoma, USA
    Posts
    115

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

    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.

 

 

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •