Core Version - 9.2.4
Can anyone guide me please on page previews from hyperlinks?
I paste a page link in WhatsApp, but I only get a preview of the page name and site name as text. I would like to see the page thumbnail if possible please?
Many thanks, Dean.
Open graph tag
Open graph tags are used for sharing messages on social media platforms like Facebook. If you want to pass information from a blog like the featured image and a snippet, you will use the open graph tag. These tags effectively tell social media platforms the type of information you want to display when you share a link from your website.
You’ve likely already seen some open graph tags in action. Any time you share a link from a website on social media, it automatically generates a preview. This preview is created through the open graph tag. There are many open graph tags you can choose from, but they will appear in the head HTML as
<meta property=”og:xx”>
Your options for what you can put in an open graph include:
<meta property=”og:title”> <meta property=”og:description”> <meta property=”og:type”> <meta property=”og:image”> <meta property=”og:url”> <meta property=”og:site_name”>
The title defines the webpage and its subject matter. You can make your open graph title the same as your meta title or change it depending on your social media audience. Meanwhile, the description acts similarly to a meta description, while the type defines the type of content. For example, the type could refer to a song, pdf, or image.
Additionally, the open graph image tag tells social media platforms which image you want to pull in from the web page to serve as the post’s image, and the URL defines the URL of the page you’re sharing. If you want to display the name of your website, you can do so using the site name tag, but it’s not usually an important property for social media users.
Wow thank you for you fast reply, that sounds exactly what i need!
so my next challenge is how to implement that. I found this page which i can see you authored: Adding OpenGraph tags to your theme or site :: Concrete CMS
Can I use this code on my site without having to customize it?
Yes you can. I would make the images pull from a site wide attribute just to make it nicer and editable
Ive tried the code thanks, and used the facebook debugging page.
It all seems to work but despite applying a unique link for the image, its pulling the site logo instead, and Ive also notice the scale of the logo is at full res so massive?
Doesn’t seem to work on WhatsApp though?
Place your image in the root of your site and use the following og:meta tags to display it.
<meta property="og:image" content="https://YOUR_DOMAIN/YOUR_IMAGE.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
Hi guys, and thanks for all your help.
I actually found this website which helps write the code for me, and having used it, it all works perfectly.
Happy Days! 