Picture in link preview

Issues related to previewing and publishing your web site.
Post Reply
jjq2r01h
 
 
Posts: 15
Joined: Sun Aug 23, 2020 4:31 pm

Picture in link preview

Post by jjq2r01h » Tue Sep 14, 2021 2:52 pm

Hi
How can I include a picture/image thumbnail in the link preview of my webpage. e.g. when I type the following link in my whatsapp/signal messenger, the link preview shows the title of the article/page and a picture in it even before I have sent the message.

https://www.computing.co.uk/news/403697 ... technology

I want to be able to do the same thing on a website I have built which is

https://www.hanumanchalisa4cruk.org

Any help would be greatly appreciated.

User avatar
crispy68
 
 
Posts: 1685
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Picture in link preview

Post by crispy68 » Tue Sep 14, 2021 3:47 pm

I think you need to look at Open Graph or Rich Snippets using structured Data (schema). You can add these in the page properties under meta tags.

jjq2r01h
 
 
Posts: 15
Joined: Sun Aug 23, 2020 4:31 pm

Re: Picture in link preview

Post by jjq2r01h » Tue Sep 14, 2021 5:29 pm

crispy68 wrote:
Tue Sep 14, 2021 3:47 pm
I think you need to look at Open Graph or Rich Snippets using structured Data (schema). You can add these in the page properties under meta tags.
OK thanks. I will look at the links and see if I can work it out

jjq2r01h
 
 
Posts: 15
Joined: Sun Aug 23, 2020 4:31 pm

Re: Picture in link preview

Post by jjq2r01h » Tue Sep 14, 2021 5:31 pm

BaconFries wrote:
Tue Sep 14, 2021 4:13 pm
See the following
Image
Hi

Sorry can't see anything.

User avatar
crispy68
 
 
Posts: 1685
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Picture in link preview

Post by crispy68 » Tue Sep 14, 2021 6:15 pm

You have to add the path yourself to the image you want to use.

jjq2r01h
 
 
Posts: 15
Joined: Sun Aug 23, 2020 4:31 pm

Re: Picture in link preview

Post by jjq2r01h » Wed Sep 15, 2021 10:21 am

Thank you very much for your help

I have specified the Open Graph and Twitter Card metatags now. My whatsapp and signal messenger on the windows desktop works fine now. It displays the image in the link preview together with the title, description and the website name.

However, when I try it on my ipad and my mobile phone, it only displays the title, description and the website name and not the image. I have 3 breakpoints defined at 970, 768 and 360 pixels.

Any ideas why it would not work on the ipad and mobile phone. Here is my wbs file.

https://1drv.ms/u/s!Ajp8jGjiAz6ShtMWR5Y ... g?e=WiPaxd

Many thanks.

Post Reply