As verdadeiras vantagens do 'OpenGraph' e 'Twitter Cards' para webmasters

O uso de meta tags é o meio mais comum e fácil para gerar tráfego no seu site, fórum ou blog. Depois de muito tempo estudando estes maníacos ocultos do HTML, finalmente, é fácil saber o verdadeiro propósito do OpenGraph do Facebook ou do Twitter Cards para webmasters.
Se você é curioso, e está duvidando a capacidade de seu site crescer, então, saiba que o impulso que este recurso oferecer é muito maior do que imagina.

Para os que não conhecem este pequeno e poderoso recurso, é nada mais e nada menos do que uma forma mais fácil de evitar postagens demoradas. Sim, esta é a história mais resumida que você pode ler. Para outros que querem saber mais... Bem, vamos explicar.

OpenGraph - Facebook Connect

Imagina-se que tudo o que vem do Facebook é mágico e vantajoso, e estes é um dos meios que o Facebook encontrou de apoiar os webmasters a publicarem sua marca. Esse apoio aos webmasters, é feito por meta-tags. Se você nunca soube ou viu falar nisso, então, que tal acompanhar o nosso artigo sobre As meta-tags.

OpenGraph visa apenas facilitar o modo que suas postagens são exibidas numa determinada página da rede social. Por exemplo, se o site não conter o OpenGraph, quando uma postagem for compartilhada na sua página ou em seu perfil, nada de mais vai ser mostrado, e sim apenas a URL do link que foi compartilhado.

Com o OpenGraph, quando adiciona o link, ele exibe várias miniaturas de acordo com a página que está compartilhando. Este processo é mais atencioso com blogs ou sites de notícia, que podem usar este procedimento para incorporar imagens da postagem como miniatura. Você pode entender o exemplo olhando a imagem que mencionamos acima.

Como posso adicionar ao meu site?

Antes de começar, você precisa acessar a página do OpenGraph no Facebook caso queira entender melhor: facebook.com/developers/opengraph Depois disso, é preciso que você entenda que o OpenGraph é composto com META-TAGs, e por isso, ele só pode ser adicionado (quando usado por META) no cabeçalho da página, ou, em outras palavras, .

< meta property="og:title" content="TITLULO" >
< meta property="og:type" content="website" >
< meta property="og:url" content="URL_DO_SITE">
< meta property="og:image" content="IMAGEM_DO_SITE">OBS: Tire os espaços antes da abertura do código.


Ok... Depois de ver isso, vamos no cabeçalho e antes de finalizar o mesmo, basta incluir as METAs mencionadas acima. Então, antes do head

Adicione as Metas que mencionamos. Em seguida, altere os valores que estão dentro do "content" para os dados do seu site. Depois que o fizer, salve o documento da sua página, e vá ao Facebook, na sua página ou no seu perfil e cole a URL da página que adicionou o OpenGraph.

Depois de um tempinho, o Facebook vai lhe fornecer as miniaturas da sua página, ou, em específico, a miniatura que definiu no content da META:

Vale lembrar, que isso pode demorar um pouco. O Facebook costuma (com seu sistema super "sônico"), ler o que está na sua página primeiro, e depois, enviar a miniatura para a postagem. Se não funcionar de imediato, aguarde alguns minutos e tente de novo.

Para blogs, é importante que você use o OpenGraph automático. Como assim? Simples!! Aqui no blog ShiftActif, temos o OpenGraph automático que é gerado de acordo com os dados do artigo, assim, não é extremamente preciso de que, tenhamos que definir uma META específica para cada artigo, pois, ela se gera sozinha.

Se usa o sistema BLOGGER, então, é hora de conhecer e aplicar este novo recurso. Caso queira, então, adicione os códigos mencionados no Github: "OpenGraph for Blogger"

Twitter Cards - Twitter

A competição começa aqui, sabia? O Twitter também desenvolveu este recurso para melhorar o desempenho das postagens e páginas com os usuários do Twitter. Acesse a central com a documentação do recurso: Twitter Cards Documentation

Apesar do Twitter Cards ser basicamente a mesma coisa, então, você já sabe o que tens que fazer.
Normalmente, os webmasters preferem adicionar o twitter cardas logo após o OpenGraph. A verdade é que não existe uma especificação, desde que, tudo seja aberto e fechado de acordo com as leis do HTML (que toda tag aberta, deve ser fechada).








Seguindo a mesma lógica e raciocínio do OpenGraph, ele tem uma opção legal. O 'twitter.site' é o nome do usuário no Twitter. Não, não é URL do seu site!

Lembre-se, de adicionar o Twitter Cards depois da tag HEAD do seu documento, ou, antes do fechamento do HEAD. Ela segue o mesmo exemplo do Facebook, que cria miniatura automática com o título, nome do usuário, descrição e imagem.

É bem simples, pois, quando adiciona uma URL, ela pode aparecer sem graça, mas, se acessar o link do post, verá que o Twitter Cards funciona direitinho. :D

RESUMINDO...

Tanto o Twitter Cards quanto OpenGraph, são recursos extremamente valiosos para ajudá-lo com SEO do site. Tenha em mente, que ter um usuário no Twitter e Facebook para publicações exige tempo, e muita paciência. Estude um pouco mais sobre publicidade, e seu site será um sucesso!