Como posso definir uma imagem de site que será exibida como visualização no Facebook?

156

Quando você compartilha um link no facebook, ele encontra automaticamente imagens no site e escolhe aleatoriamente uma como uma visualização. Como você pode influenciar a imagem de visualização? Quando uma pessoa compartilha o link do site em seu facebook?

image facebook preview Marca
fonte

Respostas:

234

1. Inclua a extensão de espaço para nome XML Open Graph na sua declaração HTML

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:fb="http://ogp.me/ns/fb#">

2. Dentro de seu <head></head>uso, a seguinte metatag para definir a imagem que você deseja usar

<meta property="og:image" content="fully_qualified_image_url_here" />

Leia mais sobre o protocolo de gráfico aberto aqui.

Depois de fazer o acima, use o "Depurador de Objetos" do Facebook se a imagem não aparecer corretamente. Observe também que a primeira vez que compartilhada ainda não será exibida, a menos que altura e largura também sejam especificadas, consulte Compartilhar no Facebook - Miniatura não exibida pela primeira vez

Shef
fonte
2
@ Martin Eu não estou ciente. Talvez eles o façam, mas não o vejo mencionado nos Documentos do Open Graph Protocol . Experimente o Depurador para ver se os valores em cache são mostrados para o seu site. Parece haver outra pergunta no SO, intitulada Facebook Open Graph, que não limpa o cache relacionado a esse problema.
Shef
7
Comentário por @KDog: Tendo problemas? Verifique seus códigos na ferramenta de depuração do facebook. Imagem, título e corpo do cache do Facebook. Alterei o título ao adicionar xml ao meu site e, por criar acidentalmente alguns erros de validação, nada foi alterado na visualização de compartilhamento do Facebook. O Facebook usou um cache válido em vez de mostrar os novos dados inválidos. Consegui resolver esses erros usando developers.facebook.com/tools/debug . Depois disso, meu novo título e imagens serão exibidos imediatamente.
Jeremy Thompson
3
@ ScotterMonkey: Sim, esse é o comportamento esperado. Você pode dizer ao FB qual conteúdo usar. BTW, você pode adicionar múltiplos <meta property="og:image" content="your_image_here" />entre o headelemento para poder escolher quando publicar no FB.
Shef 21/03
2
Perdeu essa coisa com fb na declaração html. Salvou o meu dia! (mesmo que este seja um post de três anos). Muito obrigado!
bestprogrammerintheworld 30/01
17
o link de conteúdo é um URL real - não um link relativo que eu descobri. ou seja http://mywebsite.com.au/Images/prettypic.png, não #/Images/prettypic.png
JumpingJezza 16/04
4

Observe também que, se você possui o wordpress, role para baixo até a parte inferior da página da web no modo de edição e selecione "imagem em destaque" (canto inferior direito da tela).

davea0511
fonte
1

Se você estiver usando o Weebly , comece visualizando o site publicado e clicando com o botão direito do mouse na imagem para Copiar endereço da imagem. Em Weebly, vá para Editar site, páginas, clique na página que deseja usar, Configurações de SEO, em Código do cabeçalho, digite o código da resposta de Shef:

<meta property="og:image" content="/uploads/..." />

apenas substituindo / uploads / ... pelo endereço da imagem copiada. Clique em Publicar para aplicar a alteração.

Você pode pular a parte da resposta de Shef sobre o espaço para nome, porque isso já está definido por padrão no Weebly.

krubo
fonte