Imagem do link da postagem no Facebook

95

Quando alguém publica um link no Facebook, um script geralmente verifica esse link em busca de qualquer imagem e exibe uma miniatura rápida ao lado da postagem. Porém, para certos URLs (incluindo o meu), o FB não parece pegar nada, apesar de haver uma série de imagens naquela página.

Eu li que o FB prefere a tag rel "image_src" para a imagem que o usuário deseja especificar, mas isso também não gera essa miniatura para o meu site.

Meu url vai direto para o DNS e não é encaminhado, então não imagino que esse seja o problema também.

Alguém tem uma ideia de por que o FB não consegue gerar miniaturas do meu site?

facebook  thumbnails 
— GEOCHET
fonte
Ajudaria se nos desse um link para o seu site (ou outro que não funcione) - pode provocar algumas ideias.
— Nick Fortescue
Aqui você pode ver como funciona! Eu o construo usando PHP + jQuery. O código-fonte está disponível para download. Espero que goste! lab.leocardz.com/facebook-link-preview-php--jquery
— Leonardo Cardoso
e se você quiser fazer o mesmo no google plus, aqui está o melhor link de referência que pude encontrar: stackoverflow.com/questions/7985398/…
— cregox
— dcorking

Respostas:

119

A maneira mais fácil é usar uma tag de link:

<link rel="image_src" href="http://stackoverflow.com/images/logo.gif" />

Mas há outras coisas que você pode adicionar ao seu site para torná-lo mais amigável para as mídias sociais:

Open Graph Tags

Tags Open Graph são tags que você adiciona ao <head>do seu site para descrever a entidade que sua página representa, seja uma banda, restaurante, blog ou qualquer outra coisa.

Uma tag Open Graph se parece com isto:

<meta property="og:tag name" content="tag value"/>

Se você usar tags Open Graph, os seis a seguir são necessários:

  • og:title - O título da entidade.
  • og:type- O tipo de entidade. Você deve selecionar um tipo na lista de tipos de Open Graph.
  • og:image- O URL para uma imagem que representa a entidade. As imagens devem ter pelo menos 50 pixels por 50 pixels. Imagens quadradas funcionam melhor, mas você pode usar imagens até três vezes mais largas do que altas.
  • og:url- O URL canônico e permanente da página que representa a entidade. Quando você usa tags Open Graph, o botão Like posta um link para o em og:urlvez da URL no código do botão Like.
  • og:site_name - Um nome legível para o seu site, por exemplo, "IMDb".
  • fb:adminsou fb:app_id- Uma lista separada por vírgulas dos IDs do Facebook dos administradores da página ou um ID do aplicativo da plataforma do Facebook. No mínimo, inclua apenas seu próprio ID do Facebook.

Mais informações sobre tags Open Graph e detalhes sobre Administração de sua página podem ser encontradas na documentação do protocolo Open Graph.

http://developers.facebook.com/docs/reference/plugins/like

— WyrdNEXUS
fonte
5
Recebi este erro da ferramenta lint. All the images referenced by og:image must be at least 200px in both dimensions. Please check all the images with tag og:image in the given url and ensure that it meets the minimum specification.. Just an fyi
— Trevor
Eu adicionei tags og em meu código e quando testei com a ferramenta de depuração de objetos og do Facebook, ele me mostra as informações corretas conforme salvei em tags og, mas quando tento vincular a página em minha conta fb, ele mostra o cópia em cache apenas. Quanto tempo o fb mantém a cópia em cache? Existe alguma outra maneira de liberar a cópia em cache?
— KAsh
Só para informá-lo, a única maneira de adicionar uma imagem a uma postagem ao usar AppLinks ( applinks.org ) no aplicativo do Facebook é usar a tag <link>, usando uma tag <meta> com og: image NÃO funcionará .
— emerino
Este tem uma lista de tipos etc, e tem algumas outras informações úteis.
— Wilf
61

Sei que essa pergunta é antiga, mas recentemente lidei exatamente com o mesmo problema e continuei pensando nele por algumas semanas. Várias pesquisas no Google resultaram em muitas informações úteis, mas a maioria delas estava focada em tags Open Graph, que eu não estava interessado em usar. Acontece que meu site teve vários problemas, mas aqui estão alguns dos princípios básicos.

  1. Como disse EightyEight, certifique-se de que seu HTML é válido - e o mesmo vale para seu javascript e código do lado do servidor (PHP, ASP, etc.). Eu tive um pequeno erro de PHP em um trecho de código que estava sendo executado como uma chamada separada para o servidor da página principal. Devido a uma série de coincidências bizarras, aquele código estava gerando um erro 500 - mas SOMENTE para o IE6 e mecanismos de análise estrita como o validador W3C e o rastreador de página do Facebook. O problema não apareceu em navegadores modernos (Chrome 4, FF 3.5, IE 8, etc), então não o vi imediatamente, mas clientes mais antigos / mais rígidos mostravam 500 todas as vezes e esse era o principal motivo do FB não ser não está rastreando nossa página (quando todo o resto parecia estar correto).

  2. Com relação à resposta de Randy, ele está correto que o Facebook manterá uma cópia antiga em cache de sua página muito depois de você atualizá-la. O FB afirma que só aguenta 24 horas, mas experimentei tempos muito mais longos do que isso. Felizmente, o FB lançou sua ferramenta "URL Linter" que irá mostrar a você uma prévia de como sua página aparecerá quando compartilhada no FB, e forçará o FB a atualizar instantaneamente o cache de sua página. Esta foi uma ferramenta de salvamento. Você pode encontrá-lo em http://developers.facebook.com/tools/lint/

  3. Em relação à ferramenta URL Linter, esteja ciente de que cada variação de um URL é armazenada em cache separadamente no Facebook, portanto, "www.example.com" não é o mesmo que "example.com". Além disso, a capitalização exclusiva também é armazenada, portanto, "ExampleOne.com" não é o mesmo que "exampleone.com". (Isso gerou muita confusão entre meu cliente e eu, quando percebi que o cache havia sido atualizado perfeitamente e o cliente alegou que não estava vendo as atualizações. Acontece que eu estava olhando em exampleone.com e tinha usado O Linter para atualizar o cache, mas eles estavam procurando em exampleOne.com, que eu não tinha enviado ao Linter. Como resultado, acabei enviando algumas variações do URL ao Linter apenas para cobrir as bases.)

  4. O conselho da WyrdNEXUS para usar a tag de link image_src é perfeito. Isso permite que você tenha certeza de que o FB está copiando a melhor imagem possível para sua página. Existem algumas orientações sobre quais especificações o arquivo de imagem deve ter, mas usei com sucesso uma imagem quadrada de 128px e vi uma imagem de 130x97 também passar. Aqui está a documentação oficial do Facebook em http://developers.facebook.com/docs/reference/plugins/like/ :

    As imagens devem ter pelo menos 50 pixels por 50 pixels. Imagens quadradas funcionam melhor, mas você pode usar imagens até três vezes mais largas do que altas.

    Obviamente, o FB irá redimensionar uma imagem grande para você, mas você quase sempre obterá melhores resultados se redimensioná-la antes.

  5. Com relação ao link de Mike Cooper para o artigo eHow, evite usar a etapa 1 desse artigo. Foi um conselho válido quando o artigo foi escrito e quando Mike postou o link, mas agora é melhor usar a ferramenta URL Linter para visualizar como sua página aparecerá quando for compartilhada. Usando o Linter, você não fará com que o FB armazene em cache uma cópia (potencialmente) ruim da página antes de ter a chance de ajustá-la.

— OneRuler
fonte
Eu estava lutando por dias e não tinha minha miniatura atualizada corretamente. A ferramenta Linter do Facebook resolveu meu problema imediatamente - fez o Facebook atualizar seu cache! Hooray!
— Hady
Muito obrigado por essa ferramenta linter. Alguns posts no meu blog mostravam imagens, outros não apesar de ser um site baseado em banco de dados. Colocar a URL da página ofensiva na URL Linter forçou-o a armazenar a imagem em cache! Woo-HOO!
— Kristina Childs
4
A ferramenta lint mudou de nome. agora é apenas depurar : developers.facebook.com/tools/debug - pelo que posso dizer, esta é a versão tl; dr de tudo isso: basta usar a ferramenta!
— cregox
11

Para alterar o Título, a Descrição e a Imagem, precisamos adicionar algumas meta tags sob a tag head.

PASSO 1: adicione meta tags sob a tag head

<html>
<head>
<meta property="og:url" content="http://www.test.com/" />
<meta property="og:image" content="http://www.test.com/img/fb-logo.png" />
<meta property="og:title" content="Prepaid Phone Cards, low rates for International calls with Lucky Prepay" />
<meta property="og:description" content="Cheap prepaid Phone Cards. Low rates for international calls anywhere in the world." />

PRÓXIMA ETAPA: Clique no link abaixo https://developers.facebook.com/tools/debug

Adicione o seu URL na caixa de texto (por exemplo, http://www.test.com/ ) onde você mencionou as tags. Clique no botão DEBUG.

Está feito.

Você pode verificar aqui https://www.facebook.com/sharer/sharer.php?u=http://www.test.com/

No url acima, u = link do seu site

DESFRUTAR !!!!

— Gaurav123
fonte
Não poste exatamente a mesma resposta para várias perguntas: ou não é um bom ajuste para todas ou as perguntas são duplicatas que devem ser sinalizadas / fechadas como tal.
— kleopatra de
Olá Kleopatra, Estava pensando em postar a resposta para ajudar outras pessoas. Eu acho que seu ponto é totalmente válido. Eu vou cuidar disso. Obrigado amigo
— Gaurav123 de
@ Gaurav123 o link de teste está morto. No entanto, verifiquei enviando uma mensagem para mim mesma no Facebook. Muito obrigado pela resposta muito útil!
— gsamaras
2

Na verdade, se você já tentou vincular essa página no Facebook ANTES de adicionar o link "image_src", o Facebook continuará usando a cópia em cache antiga e nem mesmo verá suas alterações. Tente modificar o URL removendo ou adicionando o 'www', ou duplique sua página para testá-la.

— Randy
fonte
1

Percebi que o Facebook não pega miniaturas de sites que começam com https, talvez seja o seu caso?

— raRaRa
fonte
1

tive o mesmo problema e descobri que a etiqueta de fechamento da minha cabeça estava no lugar errado

— Diego
fonte
0

Pergunta antiga, mas recentemente eu parecia estar tendo o mesmo problema com imagens em miniatura do meu link não aparecendo nas atualizações de status no Facebook. Eu posto para muitos clientes e isso é relativamente novo.

O FB não parece mais gostar de URLs longos - se você usar um encurtador de URL, como goo.gl ou bitly.com, a miniatura do seu link / postagem aparecerá na atualização do FB.

— Karen Kouf
fonte
0

Tente usar algo assim:

<link rel="image_src" href="http://yoursite.com/graphics/yourimage.jpg" /link>`

Parece funcionar bem no Firefox, contanto que você use um caminho completo para sua imagem.

O problema é que ele é verticalmente compensado para baixo por algum motivo. A imagem é 200 x 200, conforme recomendado em algum lugar que li.

— user2494810
fonte
Pretendo postar o código de uma tag de link que não foi postada porque sou estúpido. Desculpe.
— user2494810
-1

Se você usou qualquer plug-in para seo, verifique primeiro as configurações do plug-in seo. Em seguida, descubra a configuração do Noindex se Ativar mídia para Noindex e desative-a.

— Milon Patowary
fonte
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.