Como adicionar incorporações de mídia social ao seu site (abrir meta tags de gráfico)

Você provavelmente já se deparou com essas incorporações muitas vezes sem pensar nisso — sempre que envia a alguém um link em uma plataforma de mídia social ou aplicativo de mensagens, o link se expande para incluir conteúdo do site, geralmente uma imagem , título e descrição. Veja como configurar isso.

O que são metatags de Open Graph?

A configuração dessas incorporações é feita usando < meta > tags, geralmente no cabeçalho do seu site. Há um padrão para eles, originalmente criado no Facebook, chamado de “ o protocolo Open Graph. ”

As tags sempre usarão o seguinte formato, com uma “ propriedade ” valor definido como “ og: ” seguido pelo tipo de tag e um “ conteúdo ” valor definido como o valor de qualquer conteúdo da página:

 < meta property = "og: type" content = "value" / > 

Por exemplo, uma configuração básica para a maioria dos sites se parece com a seguinte:

 < meta property = "og: image" content = "https://i. imgur. com/imagelink. jpg" > < meta property = "og: title" content = "Título do site" / > < meta property = "og: description" content = "Descrição do site" / > < meta property = "og: type" content = "website" / > < meta property = "og: url" content = "https://example. com/" / > 

Isso define a imagem, título & link, descrição e informa aos sites que se trata de um site. Isso resulta em uma incorporação simples como a seguinte:

Publicidade

É um formato simples, mas há algumas opções que a maioria dos sites reconhece. Você pode encontrar a lista completa deles no site do Open Graph, mas cobriremos os mais importantes aqui.

O Twitter reconhecerá as tags OG, mas é importante notar que eles também têm suas próprias tags, que terão prioridade.

 < meta name = "twitter: title" content = "Título do site" > < meta name = "twitter: description" content = "Descrição do site" > < meta name = "twitter: image" content = "https://i. imgur. com/imagelink. jpg" > 

Usando meta tags OG

Primeiro, o título. esta é uma tag extremamente simples, mas necessária para todos. Mesmo que sua incorporação esteja representando um objeto em vez de uma página, ela ainda deve ter um título explicando o que é.

 < meta property = "og: title" content = "Título do site" / > 

Opcionalmente, se o seu título não funcionar, você pode adicionar uma descrição estendida:

 < meta property = "og: description" content = "Descrição do site" / > 

A tag og: type também é muito importante, pois informa aos sites que tipo de conteúdo você está vinculando novamente e como deve ser formatado. Também permite diferentes tipos de parâmetros opcionais, dependendo do tipo. Existem algumas opções diferentes:

• website, que é um padrão básico.
• artigo, que representa uma notícia / postagem de blog e tem os parâmetros opcionais de posted_time, modify_time , autor, seção e tag.
• perfil, que representa um usuário e tem opções para primeiro_nome, sobrenome, nome de usuário e gênero.
• video. other, que representa um vídeo . Também existem tags para filmes e programas de TV, com seus próprios parâmetros.
• Várias tags relacionadas à música, algumas das quais estão na lista de permissões de sites como o Facebook.

Para parâmetros opcionais, você precisa adicionar uma meta propriedade separada com o nome do parâmetro. Por exemplo, configuração de música: duração:

 < meta property = "música: duração" content = "60" / > 

Publicidade

Você também deseja definir a tag de URL para vincular de volta ao seu site.

 < meta property = "og: url" content = "https://example. com/" / > 

Se quiser que uma imagem seja exibida com a sua incorporação, você também precisará definir isso. As imagens têm muitas opções de configuração:

 < meta property = "og: image" content = "https://example. com/ogp. jpg" / > < meta property = "og: image: secure_url" content = "https://secure. example. com/ogp. jpg" / > < meta property = "og: image: type" content = "image / jpeg" / > < meta property = "og: image: width" content = "400" / > < meta property = "og: image: height" content = "300" / > < meta property = "og: image: alt" content = "Uma maçã vermelha brilhante com uma mordida fora" / > 

Existem também as tags og: video e og: audio que funcionam da mesma maneira, mas para vídeo e áudio respectivamente.

Você também pode definir o nome do site manualmente, se o título não revelar isso.

 < meta property = "og: site_name" content = "CloudSavvy IT" / > 

Depuração de metatags

Enviá-los para você mesmo para depurar não é a melhor ideia — muitas plataformas armazenarão a resposta em cache, tornando mais difícil fazer alterações rápidas.

Felizmente, existem algumas ferramentas excelentes, como opengraph. xyz, onde você pode inserir seu link e visualizar a resposta de incorporação para várias plataformas.

Publicidade

Claro, você ainda vai querer enviar o link em cada plataforma para verificar se está funcionando.

Você pode gerar tags dinamicamente?

Claro! As tags são apenas HTML, e a maioria dos frameworks web modernos trata de renderizar HTML dinâmico. Porém, ele precisa estar no cabeçalho, então pode complicar as coisas para alguns frameworks focados em escrever no corpo da página.

No React, você pode fazer isso facilmente com um pacote chamado react-helmet, que vai em seu componente App () principal. É claro que você pode usar a sintaxe JSX padrão para substituir qualquer um dos valores por valores do estado da sua página.

 importar React de "react"; importe o capacete do "capacete de reação"; function App () {return (< main > < Helmet > < title > Example < / title > < meta itemprop = "name" content = "Example" / > < meta property = "og: title" content = "Exemplo" / > < meta itemprop = "descrição" content = "Uma descrição" / > < meta name = "descrição" content = "Uma descrição" / > < meta property = "og: descrição "content =" A description "/ > < meta itemprop =" image "content =" http://example. com/example. png "/ > < meta property =" og: image "content =" http://example. com/example. png "/ > < meta property =" og: url "content =" https://example. com "/ > < meta property = conteúdo" og: type " = "website" / > < / Helmet > < / main >); }

Para WordPress, você pode configurar isso com um plug-in ou adicionar algum PHP ao seu arquivo header. php.

 < meta name = "descrição" content = "<? php if (is_single ()) {single_post_title ('', true);} else {bloginfo ('name'); echo" - " ; bloginfo ('descrição');}? > " / > 

Para outros frameworks, eles provavelmente suportarão metatags de alguma forma, então você vai querer verificar como isso funciona para o seu aplicativo.