Gerador de meta tags
Preencha os dados da página e copie o HTML pronto para o head: tags de título, descrição, canonical, robots, Open Graph e Twitter Card.
Funciona inteiramente no seu navegador
Campos vazios ficam de fora do resultado. As prévias são simulações feitas a partir do seu texto; elas nunca carregam o endereço da sua imagem, e os buscadores e redes sociais reais vão formatar tudo do jeito deles.
Como gerar meta tags
- Informe o título e a descrição da página. Os contadores dão uma ideia aproximada de quanto de cada um costuma aparecer.
- Adicione um endereço canônico, as opções de robots e os campos de Open Graph e Twitter de que precisar. Avisos indicam endereços que não são URLs
https://completas. - Confira as simulações de busca e de rede social, depois clique em Copiar HTML e cole as tags dentro do
<head>da sua página.
Para que serve cada tag
Um gerador de meta tags começa pelo básico: o <title> e a meta description são o que normalmente forma um resultado de busca. O link canônico diz aos buscadores qual endereço é o principal quando a mesma página pode ser acessada de várias formas, como com parâmetros de rastreamento. A tag robots só é necessária quando você quer mudar o padrão, que é indexar a página e seguir os links dela.
As tags Open Graph foram criadas para prévias de links e hoje são lidas pela maioria dos aplicativos de mensagens e redes sociais. Título, descrição, imagem e URL são as quatro mais importantes; og:image:alt dá à imagem uma descrição em texto, e og:type normalmente é website ou article. A tag de card do X escolhe entre uma miniatura quadrada pequena (summary) e uma imagem larga (summary_large_image).
O texto é escapado à medida que é escrito, então um e comercial vira & e uma aspa dupla vira ". Isso mantém a página válida e impede que aspas soltas encerrem um atributo antes da hora. Confira a página pronta com uma prévia de compartilhamento real antes de confiar nela, porque cada site guarda em cache a prévia que buscou primeiro.
Dicas
- Conte caracteres com mais precisão no Contador de caracteres.
- Crie um endereço limpo para a URL canônica com o Gerador de slug.
- Organize o head em que você vai colar as tags com Formatar e embelezar HTML.
Perguntas frequentes
Qual deve ser o tamanho de um título ou descrição?
Não há limite fixo. Os buscadores cortam o texto pela largura em pixels, não por caracteres, e podem reescrevê-lo. Como referência aproximada, títulos de cerca de 50 a 60 caracteres e descrições de cerca de 150 a 160 caracteres costumam aparecer inteiros. Os contadores daqui são uma orientação, não regras.
Preciso de tags Open Graph e do Twitter?
Muitas vezes, só de Open Graph. O X (Twitter) lê o título, a descrição e a imagem do Open Graph quando as tags dele estão ausentes, mas ainda precisa de twitter:card para escolher o layout do card. Adicione twitter:site se quiser que a conta seja creditada.
Por que og:image precisa ser um endereço completo?
As redes sociais baixam a imagem a partir dos próprios servidores, então um caminho relativo como /img/card.png não tem como ser resolvido. Use uma URL https:// absoluta. Um tamanho de card comum é 1200 por 630 pixels.
O que a opção de robots faz?
noindex pede aos buscadores que não listem a página, e nofollow pede que não sigam os links dela. O padrão para uma página sem tag robots é index e follow, então escolher esses dois não gera tag nenhuma.
Os caracteres especiais são escapados?
Sim. E comerciais, sinais de menor e maior e aspas duplas no seu texto são convertidos em entidades HTML, então um título como Q&A "live" não consegue escapar do atributo nem adicionar marcação à página.
Algo é enviado a um servidor ou a minha imagem é carregada?
Não. As tags são montadas no seu navegador, e o endereço da imagem só aparece como texto na simulação de rede social, nunca é requisitado. As redes sociais vão buscá-la depois, quando alguém compartilhar a página.