OG picture in various sizes
I own meta with og: image on a website in the size of 300x110px;
Until then everything is fine, 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 that the share image is small, in Whatsapp for example, the image gets cropped.
Is there any way to display another og: image when the box where it will display will be smaller?
Or any way I say that in each sharing display the og: image is of such size.
1 answers
I did a few tests and noticed that anywhere you share a link with OpenGraph the images should always have equal width and height, whether large or small.
What can be done is set in the header the 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 on to the user the image, thus being able to define with a algorithm when it is in Whatsapp it will be a file with the image and when it is in Facebook it will be another with the same image.
Thus 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>
...