As Meta Etiquetas Essenciais para Meios Sociais
Estes dias, quase todos os websites encorajam os visitantes a partilhar as suas páginas em meios sociais. Todos vimos os ícones omnipresentes do Facebook e do Twitter, entre outros, apenas a implorar para serem clicados. Isto não surpreende como a partilha através dos meios de comunicação social, a encarnação do boca-a-boca na Internet, é uma das formas mais eficazes para as empresas e indivíduos ganharem consciência.
Quando os utilizadores optam por partilhar estas ligações, cabe ao programador da web certificar-se de que as páginas web associadas estão devidamente preparadas, que é o que vamos ver agora. O Facebook e o Twitter são, de longe, as plataformas de comunicação social mais populares, por isso vamos concentrar-nos naquelas duas.
Partilha no Facebook e Twitter
Facebook oferece aos programadores várias opções sobre como uma página web partilhada aparece na sua linha temporal, dependendo do conteúdo do sítio web. Salvo especificação em contrário, todos os sítios da web têm como padrão o tipo chamado, apropriadamente, “website”, que é o exemplo que vamos utilizar.
Vamos dizer que alguém partilhou a página inicial de uma empresa de viagens fictícia – o Facebook apresenta-a desta forma:
Twitter, também tem múltiplas formas de formatar páginas web partilhadas que aparecem no seu feed, mas vamos olhar para aquele que é bastante semelhante ao exemplo acima do Facebook, que o Twitter chama de “Cartão Sumário com Imagem Grande”:
Como podemos ver, cada um apresenta múltiplos atributos da página Web partilhada:
- uma imagem e título em destaque
- uma descrição
- o nome do domínio
Proprietário <meta> Tags
Como especificamos estes atributos? Com <meta> tags. Quando uma ligação é partilhada, tanto o Facebook como o Twitter raspam a página Web associada e lêem as suas <meta> tags para exibir a informação apropriada.
Facebook usa <meta> tags alavancando o protocolo Open Graph, um sistema de classificação para páginas Web que se estende para além daquelas <meta> tags já definidas em HTML5. Uma lista completa de <meta> tags disponíveis pode ser encontrada no sítio Web Open Graph. Há tantos de entre os quais escolher que pode ser algo intimidante, mas apenas quatro são realmente necessárias:
<meta property="og:title" content="European Travel Destinations"><meta property="og:description" content="Offering tour packages for individuals or groups."><meta property="og:image" content="http://euro-travel-example.com/thumbnail.jpg"><meta property="og:url" content="http://euro-travel-example.com/index.htm">Twitter tem as suas próprias <meta> tags que são semelhantes ao protocolo Open Graph, mas usa o prefixo “twitter” em vez de “og”. Tal como no Facebook, apenas alguns são necessários. O tipo de formato de exibição que solicitamos no Twitter também é especificado:
<meta name="twitter:title" content="European Travel Destinations "><meta name="twitter:description" content=" Offering tour packages for individuals or groups."><meta name="twitter:image" content=" http://euro-travel-example.com/thumbnail.jpg"><meta name="twitter:card" content="summary_large_image">Both Facebook e Twitter oferecem directrizes sobre como utilizar as etiquetas acima indicadas <meta>. São bastante semelhantes entre si, embora possam ser um pouco subjectivos na interpretação. Note-se que, para os nossos propósitos, o Facebook está a referir-se à página Web partilhada quando se utiliza o termo “objecto”:
| >/th>>th>Facebook | ||
|---|---|---|
| Title | O título, manchete ou nome do objecto. | Um título conciso para o conteúdo relacionado. |
| Descrição | Uma breve descrição ou resumo do objecto. | Uma descrição que resume concisamente o conteúdo, conforme apropriado para apresentação dentro de um Tweet. Não deve reutilizar o título como descrição ou utilizar este campo para descrever os serviços gerais fornecidos pelo website. |
| Image | O URL da imagem para o seu objecto. Deve ter pelo menos 600×315 pixels, mas é preferível 1200×630 ou maior (até 5MB). Fique perto de uma relação de aspecto de 1,91:1 para evitar o corte. | Um URL para uma imagem única que represente o conteúdo da página. Não deve utilizar uma imagem genérica, como o logótipo do seu website, foto do autor, ou outra imagem que abranja várias páginas. As imagens para este Cartão devem ter pelo menos 280px de largura, e pelo menos 150px de altura. A imagem deve ter menos de 1MB de tamanho. |
| URL | O URL canónico para a sua página. Este deve ser o URL não decorado, sem variáveis de sessão, parâmetros de identificação do utilizador, ou contadores. |
Desde que estas etiquetas proprietárias <meta> sejam, no final, referentes aos mesmos elementos, seria ideal se houvesse de alguma forma uma forma de reconciliar os dois. Felizmente, existe.
Reconciliar <meta> Tags
Não há mal nenhum em ter múltiplas <meta> tags que parecem redundantes. Demasiadas informações nunca prejudicam ninguém, excepto adicionando alguns bytes extra ao ficheiro HTML.
Mas para os nossos propósitos, e por uma questão de brevidade, podemos aproveitar o facto de que o Twitter nos permite substituir o Open Graph <meta> tags pelos seus próprios. No final, excepto para a necessidade de especificar um formato de exibição, nenhuma das etiquetas personalizadas do Twitter <meta> é necessária. Isto dá-nos o seguinte, que poderia ser considerado como o mínimo de <meta> tags necessárias para tornar uma página web passível de partilha em redes sociais:
<meta property="og:title" content="European Travel Destinations"><meta property="og:description" content="Offering tour packages for individuals or groups."><meta property="og:image" content="http://euro-travel-example.com/thumbnail.jpg"><meta property="og:url" content="http://euro-travel-example.com/index.htm"><meta name="twitter:card" content="summary_large_image">Reconciliar as directrizes para a imagem é simples: seguir a recomendação do Facebook de uma dimensão mínima de 1200×630 pixels e uma relação de aspecto de 1.91:1, mas adere ao requisito de tamanho de ficheiro do Twitter de menos de 1MB.
Validar <meta> Tags
Se houver dúvidas sobre a legitimidade de analisar estas cinco tags, podemos usar o útil Debugger de Partilha do Facebook e o Validador de Cartões do Twitter. Estas duas ferramentas irão raspar qualquer página Web alojada num servidor público para etiquetas relevantes <meta> e mostrar como seria quando partilhada. Também irá listar quaisquer erros e dar sugestões. Então, como nos saímos com o nosso exemplo particular? O Twitter parece estar bem com as coisas, mas o Facebook, por outro lado, lista um item como um aviso:
Isto fornece um segue perfeito para falar sobre…
Social Media Analytics
O que o Facebook está a indicar é que se vai usar a sua ferramenta de análise, a que chamam Domain Insights, deve fornecer o número de identificação único associado à sua conta. O <meta> tag ficaria então algo parecido com isto:
<meta property="fb:app_id" content="your_app_id" />Twitter tem algo semelhante a que chamam Twitter Card Analytics. Para tirar o máximo partido desta ferramenta, o Twitter recomenda a utilização do seguinte <meta> tag que contém o nome de utilizador do Twitter que pretende associar à página Web partilhada:
<meta name="twitter:site" content="@website-username">Keep, no entanto, se não tiver nenhum interesse particular em utilizar estas ferramentas analíticas, então omitir as duas acima mencionadas <meta> tags não tem qualquer efeito na forma como uma página Web partilhada aparece numa linha temporal do Facebook ou num feed do Twitter.
Qualquer outra coisa?
Documentação do Facebook recomenda um adicional <meta> tag, embora não seja necessário. A <meta> tag que denota o nome do sítio Web em que reside a página partilhada:
<meta property="og:site_name" content="European Travel, Inc.">Twitter sugere uma outra <meta> tag também que é recomendada, mas não é exigida:
<meta name="twitter:image:alt" content="Alt text for image">Esta fornece uma descrição de imagem alternativa para aqueles que são deficientes visuais.
Marca Final
Isso deve ser suficiente. Para reiterar, quando se olha para documentação do Facebook e Twitter para partilhar páginas Web, existem muitas outras <meta> tags disponíveis que podem ser usadas para especificar diferentes tipos de conteúdo. Mas, em geral, bastará o seguinte:
<!-- Essential META Tags --><meta property="og:title" content="European Travel Destinations"><meta property="og:description" content="Offering tour packages for individuals or groups."><meta property="og:image" content="http://euro-travel-example.com/thumbnail.jpg"><meta property="og:url" content="http://euro-travel-example.com/index.htm"><meta name="twitter:card" content="summary_large_image"><!-- Non-Essential, But Recommended --><meta property="og:site_name" content="European Travel, Inc."><meta name="twitter:image:alt" content="Alt text for image"><!-- Non-Essential, But Required for Analytics --><meta property="fb:app_id" content="your_app_id" /><meta name="twitter:site" content="@website-username">