Como usar a meta tag 'og' (Open Graph) para compartilhamento no Facebook

118

O Facebook busca todas as fotos do meu site.

Quero compartilhar apenas uma imagem que está nessa página.

Ouvi falar da ogmetatag, mas não sei como colocá-la.

facebook-opengraph meta Vignesh Babu MD
fonte

Respostas:

355

Usar:

<!-- For Google -->
<meta name="description" content="" />
<meta name="keywords" content="" />

<meta name="author" content="" />
<meta name="copyright" content="" />
<meta name="application-name" content="" />

<!-- For Facebook -->
<meta property="og:title" content="" />
<meta property="og:type" content="article" />
<meta property="og:image" content="" />
<meta property="og:url" content="" />
<meta property="og:description" content="" />

<!-- For Twitter -->
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="" />
<meta name="twitter:description" content="" />
<meta name="twitter:image" content="" />

Preencha o content = "..." de acordo com o conteúdo da sua página.

Para obter mais informações, visite 18 Meta Tags que cada página da Web deve ter em 2013 .

CarlosPinedaT
fonte

Você sabe se a authortag deve ter o nome do autor ou um link para o URL de um perfil?

tobek

Eu acho que ambos são possíveis. Se você quiser que sua imagem de perfil esteja no lado esquerdo de sua postagem na página de pesquisa do google, você deve fornecer o link para seu perfil do google +.

jurihandl

meta tag authorsignifica autor do site ou autor do artigo atual (exemplo no uso em artigo de blog)?

LuiGi,

Esta é uma boa execução? O Google / Facebook / Twitter não encontrará erros com isso?

Jeromie Devera

1) O Facebook lerá a tag <meta name = "author"> e a exibirá na visualização quando alguém compartilhar uma página 2) O Facebook agora tem suporte para <meta property = "article: author"> (detalhes em giannopoulos.net/ 2015/06/20 /… ) e exibirá um link para o seu perfil do Facebook (se você realmente colocou um link para ele no artigo: autor) 3) O Google agora procura dados ricos na forma do que chama de "Rich Snippets" ( developers.google.com/structured-data )

MarkG

O Facebook usa o que é chamado de protocolo Open Graph para decidir o que exibir quando você compartilha um link. O OGP examina sua página e tenta decidir qual conteúdo exibir. Podemos dar uma mão e dizer ao Facebook o que tirar de nossa página.

A maneira como fazemos isso é com og:metatags.

As tags são parecidas com isto -

  <meta property="og:title" content="Stuffed Cookies" />
  <meta property="og:image" content="http://fbwerks.com:8000/zhen/cookie.jpg" />
  <meta property="og:description" content="The Turducken of Cookies" />
  <meta property="og:url" content="http://fbwerks.com:8000/zhen/cookie.html">

Você precisará colocar essas ou meta tags semelhantes no <head>de seu arquivo HTML. Não se esqueça de substituir os seus próprios valores!

Para obter mais informações, você pode ler tudo sobre como o Facebook usa essas metatags em sua documentação. Aqui está um dos tutoriais de lá - https://developers.facebook.com/docs/opengraph/tutorial/

O Facebook nos oferece uma pequena ferramenta excelente para nos ajudar a lidar com essas metatags - você pode usar o Depurador para ver como o Facebook vê seu URL, e ele até lhe dirá se houver problemas com ele.

Uma coisa a ser observada aqui é que toda vez que você fizer uma alteração nas metatags, precisará alimentar a URL por meio do Depurador novamente para que o Facebook apague todos os dados armazenados em cache em seus servidores sobre a sua URL.

Lix
fonte

Estou vendo tags html na minha descrição, você sabe como contornar isso?

Neil de

Construí uma ferramenta para metageração. Ele pré-configura entradas para Facebook, Google+ e Twitter, e você pode usá-lo gratuitamente aqui: http://www.groovymeta.com

Para responder um pouco mais à pergunta, as OGtags (Open Graph) funcionam de maneira semelhante às meta tags e devem ser colocadas na seção HEAD do seu arquivo HTML. Consulte as práticas recomendadas do Facebook para obter mais informações sobre como usar tags OG de maneira eficaz.

Louis Otto
fonte

Obrigado @Mogsdad, expandi minha resposta de acordo.

Louis Otto

Link quebrado, infelizmente!

Vincent Sels de