Gerador de meta tags

O <head> de uma página carrega três conjuntos de metadados que se sobrepõem — as tags básicas que os buscadores leem, o Open Graph para compartilhamento em redes sociais e os Twitter Cards — e os três repetem quase as mesmas informações, em três grafias ligeiramente diferentes. O gerador acima preenche os três a partir de um único conjunto de campos.

Como funciona

Preencha os campos que você tiver: todos são opcionais, e os campos vazios são omitidos em vez de gerar uma tag vazia. A saída é um bloco pronto para colar, agrupado em quatro seções:

Básicas — <title>, <meta name="description">, uma diretiva robots montada a partir das opções de indexação e de seguir links, e <link rel="canonical"> a partir da URL da página.

Open Graph — og:type (sempre website), além de og:title, og:description, og:url, og:site_name e og:image para os campos que você preencheu.

Twitter — twitter:card, que vira summary_large_image automaticamente quando você informa uma imagem e fica em summary quando não informa, além de twitter:site, twitter:title, twitter:description e twitter:image. Se você digitar o usuário sem o @ inicial, ele é adicionado.

Outras — theme-color, que colore a interface do navegador no celular.

Todos os valores de atributo passam por escape de HTML, então um "e comercial" ou aspas no título geram uma marcação válida, e não uma tag quebrada. Nada é enviado para lugar nenhum; a geração acontece inteiramente no seu navegador.

Acertando o conteúdo

Título: cerca de 50–60 caracteres. Acima disso os resultados de busca cortam o texto, e o corte depende da largura em pixels, não da contagem de caracteres — um título em maiúsculas é cortado mais cedo. Coloque primeiro as palavras que diferenciam a página e o nome do site por último.

Descrição: cerca de 150–160 caracteres. Ela não é fator de ranqueamento, mas é o texto de venda do resultado: escreva para uma pessoa que está decidindo se vai clicar. O Google costuma ignorá-la e gerar o próprio snippet a partir da página; isso é normal, não um defeito.

URL canônica: absoluta e autorreferente. Uma página deve se declarar canônica, a menos que seja de fato uma duplicata de outra URL. URLs canônicas relativas são permitidas, mas são uma fonte conhecida de erros; use a forma completa com https://.

Imagem: URL absoluta e grande o suficiente. Imagens de Open Graph devem ter pelo menos 1200×630 para aparecer como card grande. Um caminho relativo não será resolvido quando um crawler remoto buscar a página, e uma imagem protegida por autenticação simplesmente não será exibida.

Robots: noindex é uma instrução forte. As opções geram index, follow ou noindex, nofollow. Colocar noindex em uma página que já ranqueia tira essa página dos resultados, e a tag precisa continuar acessível ao crawler para que a instrução seja lida — bloquear a página no robots.txt ao mesmo tempo impede que o crawler chegue a ler o noindex.

Onde colocar

Essas tags ficam no <head> do HTML renderizado, antes de qualquer conteúdo. Se as suas páginas são geradas por um framework, use a API de metadados dele em vez de colar tags cruas em um template: assim as tags acompanham a rota, recebem os valores certos em cada página e não podem ficar dessincronizadas do conteúdo. Esta ferramenta é mais útil para uma página estática, uma landing page fora da sua aplicação ou para conferir se o bloco que o seu framework produz tem tudo o que deveria.

As regras estruturais do head do documento — o que pode aparecer ali e por que <title> é obrigatório — são abordadas no guia o essencial do HTML5. Se a página é servida por uma camada de views renderizada no servidor, Spring MVC mostra onde fica, no caminho da requisição, o template responsável pelo head.

Ferramentas relacionadas

Para ver como o link vai aparecer de fato quando for compartilhado, cole o bloco gerado na pré-visualização de Open Graph, que lê as tags de volta e renderiza uma simulação do card. Para organizar a marcação ao redor, use o formatador de HTML.