OG image in several sizes

Asked

Viewed 695 times

0

I have meta with og:image on a website in the size of 300x110px;

So far so good, I share the website on social networks like Facebook and others and it pulls the picture straight;

The problem is this: when I share the website in places that the sharing image is small, on Whatsapp for example, the image is cropped.

Is there any way to display another og:image when the box where it will display will be smaller?

Or some way I say that in each sharing display og:image is of such size.

1 answer

0

I did some tests and noticed that anywhere you share a link with Opengraph images should always have equal width and height, whether large or small.

What can be done is to set the header to width and height, but I believe this goes from each APP:

<meta property="og:image" content="www.meusite.com.br/imagem.jpg">
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image:width" content="300"> /** PIXELS **/
<meta property="og:image:height" content="300"> /** PIXELS **/

Then what can be seen is to create a PHP that registers the useragent to see if it is p Whatsapp that will actually read and pass the image to the user, so can set with an algorithm when it is in Whatsapp will be a file with the image and when it is in the Facebook will be another with the same image.

So I could sort by types of social networks:

<html>
<head>
<?php
$op = []; //iniciar array
//Código com condições que verifique o app ou rede social usada
//$op[0] vai a URL da imagem no tamanho adequado
//$op[1] a largura especificada
//$op[2] a altura especificada
//$op[3] MIME-TYPE
echo "<meta property=\"og:image\" content=\"".$op[0].".jpg\">\n";
echo "<meta property=\"og:image:type\" content=\"image/".$op[3]."\">\n";
echo "<meta property=\"og:image:width\" content=\"".$op[1]."\">\n";
echo "<meta property=\"og:image:height\" content=\"".$op[2]."\">\n";
?>
<head>
...

Browser other questions tagged

You are not signed in. Login or sign up in order to post.