Como o Facebook Sharer seleciona Imagens e outros metadados ao compartilhar meu URL?

393

Ao usar o Facebook Sharer, o Facebook oferece ao usuário a opção de usar 1 de algumas imagens extraídas da fonte como uma visualização do link. Como essas imagens são selecionadas e como posso garantir que qualquer imagem em particular na minha página seja sempre incluída nesta lista?

facebook facebook-opengraph facebook-sharer

— Sampson
fonte

Realmente funciona ao usar a propriedade meta, mas é html inválido, o que acho muito estranho! Tente executá-lo através de um validador e você verá. Me surpreende por que diabos eles não conseguem fazer isso funcionar com html válido?

11

consulte developers.facebook.com/docs/opengraph <html xmlns: og = " opengraphprotocol.org/schema " ...

— cope360

3

Dica - depois de fazer as alterações. Execute sua página pelo linter e o Facebook atualizará as miniaturas, etc. para essa página developers.facebook.com/tools/lint

Eu encontrei o seguinte artigo também muito útil: como personalizar o que URL, texto e IMG para compartilhar

— J0ANMM

593

Como digo ao Facebook qual imagem usar quando minha página é compartilhada?

O Facebook tem um conjunto de meta tags de gráfico aberto que ele decide decidir qual imagem exibir.

As chaves para a imagem do Facebook são:

<meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/>
<meta property="og:image:secure_url" content="https://secure.example.com/ogp.jpg" />

e deve estar presente dentro da <head></head>tag na parte superior da sua página.

Se essas tags não estiverem presentes, ele procurará o método mais antigo de especificar uma imagem: <link rel="image_src" href="https://stackoverflow.com/myimage.jpg"/> . Se nenhum dos dois estiver presente, o Facebook analisará o conteúdo da sua página e escolherá imagens da sua página que atendam aos critérios de compartilhamento de imagem: a imagem deve ter pelo menos 200 x 200 pixels, ter uma proporção máxima de 3: 1 e em PNG, Formato JPEG ou GIF.

Posso especificar várias imagens para permitir que o usuário selecione uma imagem?

Sim, você só precisa adicionar várias metatags de imagem na ordem em que deseja que elas apareçam. O usuário receberá uma caixa de diálogo do seletor de imagens:
Seletor de imagens do Facebook

Especifiquei as meta tags de imagem apropriadas. Por que o Facebook não está aceitando as alterações?

Depois que um URL for compartilhado, o rastreador do Facebook, que possui um agente de usuário facebookexternalhit/1.1 (+https://www.facebook.com/externalhit_uatext.php), acessará sua página e armazenará em cache as meta informações. Para forçar os servidores do Facebook para limpar o cache, use o Facebook Url Debugger Ferramenta / Linter que lançou em junho de 2010 para atualizar o cache e solucionar quaisquer problemas de meta tag na sua página.

Além disso, as imagens na página devem estar publicamente acessíveis ao rastreador do Facebook. Você deve especificar os URLs absolutos, como http://example.com/yourimage.jpg, em vez de apenas /yourimage.jpg.

Posso atualizar essas metatags com o código do lado do cliente, como Javascript ou jQuery? Não. Assim como os rastreadores de mecanismos de pesquisa, o raspador do Facebook não executa scripts, portanto, as metatags presentes no download da página são as metatags usadas para a seleção de imagens.

A adição dessas tags faz com que minha página não seja mais validada. Como posso consertar isso?

Você pode adicionar os namespaces necessários do Facebook à sua tag e sua página deve passar na validação:

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:og="http://ogp.me/ns#"
      xmlns:fb="https://www.facebook.com/2008/fbml">

— bkaid
fonte

11

Outro lugar que parece: <link rel="apple-touch-icon" href="...">(É assim que se chega a imagem SO)

— Yarin

2

@ Yarin Não sei se isso é verdade. StackOverflow tem o conjunto de propriedades image_src, que é o que está usando. O nome do arquivo para o ícone de toque da maçã é diferente e não está sendo usado.

— bkaid

3

Posso escolher a ordem da imagem? No meu caso, outras imagens aparecem antes da imagem das meta tags.

— Vicenrele

23

O tamanho mínimo da imagem agora é 200x200px.

— Tr1stan

11

Woot! Eu configurei o tamanho do img para 300px, agora parece funcionar. Obrigado @ Tr1stan

— Urs

37

Ao compartilhar no Facebook, você deve adicionar seu html à seção principal próximas metatags:

<meta property="og:title" content="title" />
<meta property="og:description" content="description" />
<meta property="og:image" content="thumbnail_image" />

E é isso!

Adicione o botão como deveria, de acordo com o que o FB diz.

Toda a informação que você precisa está em www.facebook.com/share/

— Matias
fonte

28

A partir de 2013, se você estiver usando o facebook.com/sharer.php (PHP), basta criar qualquer botão / link como:

<a class="btn" target="_blank" href="http://www.facebook.com/sharer.php?s=100&amp;p[title]=<?php echo urlencode(YOUR_TITLE);?>&amp;p[summary]=<?php echo urlencode(YOUR_PAGE_DESCRIPTION) ?>&amp;p[url]=<?php echo urlencode(YOUR_PAGE_URL); ?>&amp;p[images][0]=<?php echo urlencode(YOUR_LINK_THUMBNAIL); ?>">share on facebook</a>

Parâmetros de consulta de link:

p[title] = Define a page title
p[summary] = An URL description, most likely describing the contents of the page
p[url] = The absolute URL for the page you're sharing 
p[images][0] = The URL of the thumbnail image to be used as post thumbnail on facebook

É muito simples: você não precisa de js ou outras configurações. É apenas um link bruto em HTML. Estilize a tag A da maneira que desejar.

— Antonio Max
fonte

p[images][0]era exatamente o que eu precisava. ogas tags funcionam para compartilhar a mesma imagem, mas preciso compartilhar várias imagens da mesma página.

— thekingoftruth

4

Essa deve ser a nova 'resposta aceita' - tão simples e direta. Obrigado por isso, companheiro.

— 24414 Mike

Antonio, você tem um link de origem sobre o que você mostrou acima? Estou tentando procurar isso em developers.facebook.com, mas não consigo encontrar nada além disso . Por favor ajude.

— Mr_Green

@Mr_Green é sobre isso. Esse recurso foi "descontinuado", mas agora voltou aos documentos oficiais. Enfim, acredito que minha resposta cobre as configurações básicas para que ele funcione.

— Antonio Max

@AntonioMax, por favor, explique o que está s=100no seu post?

— Mr_Green

13

Coloque a seguinte tag no head:

<link rel="image_src" href="/path/to/your/image"/>

Em http://www.facebook.com/share_partners.php

Quanto ao que ele escolhe como padrão na ausência dessa tag, não tenho certeza.

— Matt Bridges
fonte

12

Pela minha experiência, o http://www.facebook.com/sharer.php não usa metatags. Ele usa a string que você passa. Ver abaixo.

http://www.facebook.com/sharer.php?s=100&p[title]=THIS É MEU TÍTULO & p [resumo] = Este é o meu resumo & p [URL] = http: //www.MYURL.com&&p [imagens] [ 0] = http: //www.MYURL.com/img/IMAGEADDRESS

As metatags funcionam com os botões de gostar / enviar do desenvolvedor do Facebook, assim como as outras informações do Open Graph. Portanto, se você usar um dos elementos reais do Facebook, como os comentários e outros, tudo ficará vinculado ao material do Open Graph.

ATUALIZAÇÃO: Existem duas maneiras de usar o compartilhador * observe os valores? S versus o valor? U na string de consulta
1 ==> STRING: http://www.facebook.com/sharer.php?s + conteúdo acima
~ ~> Irá puxar informações da string.
2 ==> URL: http://www.facebook.com/sharer.php?u=url em que url é igual a um URL real
~~> Raspará a página fornecida no valor do url
~~> Você pode testar os valores aqui: https://developers.facebook.com/tools/debug

— Jason Lydon
fonte

Muito útil. Obrigado! : D

— Aaron Gray

Existe alguma maneira legal de usar esse compartilhador em outro site para obter o conteúdo de um URL? Eu não sei muito sobre facebook API e outras coisas ...

— Lyth

Tente usar a opção de URL. Se a página tiver tags OG, o FB as raspará. Teste a página que você deseja usar aqui: developers.facebook.com/tools/debug

— Jason Lydon

11

Maneira antiga, não funciona mais:

<link rel="image_src" href="http://yoururl/yourimage"/>

Nova maneira relatada, também não funciona:

<meta property="og:image" content="http://yoururl/yourimage"/>

Funcionou aleatoriamente durante o primeiro dia em que o implementei, e não funcionou desde então.

A página do Facebook nointer, um utilitário que inspeciona sua página, informa que tudo está correto e exibe a miniatura que eu selecionei ... apenas que a página share.php em si não parece estar funcionando. Tem que haver um bug no Facebook, que eles aparentemente não se importam em consertar, pois todos os relatórios de bugs referentes a esse problema que eu já vi no sistema dizem resolver ou corrigir.

— theo
fonte

Eu também estou tendo este problema. O linter não relata erros e mostra minha imagem corretamente, mas quando clico no botão de compartilhamento no meu site, não há absolutamente nenhuma imagem na interface de compartilhamento.

— Luke Griffiths

image_src não funciona mais para o Facebook, mas alguns serviços ainda usá-lo (clientes telegrama, etc)

— Andres SK

10

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

PASSO 1:
Adicionar metatags 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ÓXIMO PASSO:
Clique no link abaixo
https://developers.facebook.com/tools/debug

Adicione 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

APROVEITAR !!!!

— Gaurav123
fonte

O depurador foi útil.

— precisa saber é o seguinte

2

Para HTTPS seguro

<meta property="og:image:secure_url" content="https://image.path.png" />

— Stefan Michev
fonte

1

Eu tive esse problema e o corrigi com a sugestão de manuel-84. Usar uma imagem de 400x400px funcionou muito bem, enquanto minha imagem menor nunca apareceu no compartilhador.

Observe que o Facebook recomenda uma imagem quadrada mínima de 200px como a tag og: image: https://developers.facebook.com/docs/opengraph/howtos/maximizing-distribution-media-content/#tags

— William
fonte

1

Foi o que funcionou para mim: coloquei a imagem em miniatura desejada na página logo após a tag e a deixei pequena demais para ser vista.

<img src="imagename.jpg" width="1" height="1" />

Não testei com altura 0 e largura 0, mas provavelmente ainda funcionará .. Isso não garante que o usuário selecione essa imagem.

TAMBÉM parece que o Facebook armazena em cache as miniaturas da sua página e nem sempre verifica se há novas. Tente adicionar isso a outra página do site e você verá que funciona.

— daniel bernal
fonte

11

após a tag - você quer dizer: "após a tag BODY"?

— Alexis Wilke

Sim, acredito que é isso que eles querem dizer. Eu fiz isso em um site há muito tempo, mas usei em style="display:none;"vez de configurá-lo para 1x1 pixels.

— 24514 Mike

1

Use a caixa de diálogo de feed do Facebook em vez da caixa de diálogo de compartilhamento para mostrar imagens personalizadas

Exemplo:

https://www.facebook.com/dialog/feed?app_id=1389892087910588
&redirect_uri=https://scotch.io
&link=https://scotch.io
&picture=http://placekitten.com/500/500
&caption=This%20is%20the%20caption
&description=This%20is%20the%20description

— kittu
fonte

0

Não consegui que o Facebook escolhesse a imagem certa em uma postagem específica, então fiz o que é descrito nesta página:

/webapps/18468/adding-meta-tags-to-individual-blogger-posts

Em outras palavras, algo como isto:

<b:if cond='data:blog.url == "http://urlofyourpost.com"'>
  <meta content='http://urlofyourimage.png' property='og:image'/>
 </b:if>

Basicamente, você codificará uma instrução if no HTML do seu site para fazer com que ele altere o meta conteúdo do que quer que você tenha alterado para essa postagem. É uma solução confusa, mas funciona.

— Michelle Glauser
fonte