CodeBlogLogo CodeBlog

 [Facebook] Renderizar imagens na primeira ação de Curtir ou Compartilhar

[Facebook] Renderizar imagens na primeira ação de Curtir ou Compartilhar

O rastreador precisa ver uma imagem pelo menos uma vez antes que ela possa ser renderizada. Isso significa que a primeira pessoa que compartilhar um conteúdo não verá uma imagem renderizada

8492
Allain Estevam

Ao tentar compartilhar seus posts no Facebook a imagem não aparece e não mostrava a imagem logo de imediato.

Fui pesquisar o assunto na documentação do facebook que diz o seguinte:

 

Armazenar a imagem em cache previamente


Quando o conteúdo for compartilhado pela primeira vez, o rastreador do Facebook extrairá e armazenará em cache os metadados do URL compartilhado. O rastreador precisa ver uma imagem pelo menos uma vez antes que ela possa ser renderizada. Isso significa que a primeira pessoa que compartilhar um conteúdo não verá uma imagem renderizada:

 

Há duas maneiras de evitar isso e renderizar imagens na primeira ação de Curtir ou Compartilhar:

1. Armazenar a imagem em cache previamente com o Depurador de compartilhamento
Execute o URL por meio do depurador de URL para localizar previamente metadados da página. Você também deverá fazer isso se atualizar a imagem de um conteúdo.

 

2. Usar as marcações do Open Graph og:image:width e og:image:height
O uso dessas marcações especificará as dimensões da imagem para o rastreador para que ele possa renderizá-la imediatamente sem ter que baixá-la e processá-la de maneira assíncrona.

 

 

Para nós, o melhor seria usar a dica 2, para não ter que ficar sempre usando a url do depurador para fazer isso, o que seria inviável para o site com muitos posts.

Então resolvi implementar um código com a dica número 2, e a principio funcionou perfeitamente. Segue o exemplo abaixo:



$OgImage = getimagesize('https://www.codeblog.com.br/themes/codeblog/images/default.jpg');

if ($OgImage['mime']) {
echo '';
}

if ($OgImage[0]) {
echo '';
}

if ($OgImage[1]) {
echo '';
}
?>

Logo após os meus novos posts renderizaram a imagem instantaneamente ao compartilhar o post pela primeira vez. =)

 

Faça a implementação em seu site e resolva esse probelma de vez! 

Espero que essa dica tenha sido útil para você. Qualquer dúvida deixe nos comentários abaixo.

 

 

COMENTÁRIOS

Posts Relacionados!