I have a goal 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 image right;
The problem is this: When I share the website in places where the sharing image is small, in Whatsapp for example, the image is cut off.
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 on each sharing display the og: image is of such size.
I've done some testing and noticed that anywhere you share a link with OpenGraph images should always have the same width and height, whether large or small.
What can be done is to set the width and height in the header, but I believe this goes for 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 on to the user the image, so being able to define with an algorithm when it is in Whatsapp will be one file with the image and when it is in Facebook will be another with the same image.
So you could separate 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>
...