Como usar o Gerador de Meta Tags
Preencha os campos e o código HTML é atualizado em tempo real. Copie e cole diretamente na seção <head> do seu site.
Tags geradas
O gerador produz três conjuntos de tags: meta tags padrão (title, description, author, canonical), Open Graph (og:title, og:description, og:image, og:url) para redes sociais como Facebook e LinkedIn, e Twitter Cards (twitter:card, twitter:title, twitter:description, twitter:image) para compartilhamentos no X/Twitter.
Boas práticas
O título ideal tem entre 50–60 caracteres e a descrição entre 120–160 caracteres para evitar truncamento nos resultados de busca. A imagem Open Graph deve ter proporção 1.91:1 (ex: 1200×630 px) para exibição ideal em compartilhamentos sociais.
Quando usar e quando não usar
O uso natural é a página feita fora do CMS principal: o hotsite de Black Friday, a landing da campanha de aniversário, a página de cadastro de um sorteio. São páginas que nascem às pressas, costumam ir ao ar sem Open Graph e acabam compartilhadas no WhatsApp como um link cru, sem imagem nem título.
Se a página está em WordPress com Yoast ou Rank Math, ou em uma plataforma de e-commerce que já gera essas tags, não cole o bloco por cima. Tags duplicadas deixam duas versões de og:title no mesmo <head>, e não há garantia de qual delas a rede social vai ler. Nesses casos, preencha os campos do próprio plugin. Para milhares de páginas de produto, o caminho também é o template, não esta ferramenta.
Exemplo: landing da Semana do Pet de uma rede de farmácias
Dados fictícios. Título com 56 caracteres, descrição abaixo de 160, URL canônica, imagem de 1200 × 630 px e autor preenchidos. Saída gerada:
<!-- Meta Tags padrão -->
<title>Semana do Pet: rações com até 30% off | Drogaria Exemplo</title>
<meta name="description" content="Rações, areia e antipulgas com desconto em todas as lojas e no app até domingo. Retire em 2 horas na farmácia mais perto de você." />
<meta name="author" content="Drogaria Exemplo" />
<link rel="canonical" href="https://www.drogariaexemplo.com.br/semana-do-pet" />
<!-- Open Graph (Facebook, LinkedIn) -->
<meta property="og:type" content="website" />
<meta property="og:title" content="Semana do Pet: rações com até 30% off | Drogaria Exemplo" />
<meta property="og:description" content="Rações, areia e antipulgas com desconto em todas as lojas e no app até domingo. Retire em 2 horas na farmácia mais perto de você." />
<meta property="og:url" content="https://www.drogariaexemplo.com.br/semana-do-pet" />
<meta property="og:image" content="https://www.drogariaexemplo.com.br/img/og-semana-do-pet.jpg" />
<!-- Twitter Cards -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Semana do Pet: rações com até 30% off | Drogaria Exemplo" />
<meta name="twitter:description" content="Rações, areia e antipulgas com desconto em todas as lojas e no app até domingo. Retire em 2 horas na farmácia mais perto de você." />
<meta name="twitter:image" content="https://www.drogariaexemplo.com.br/img/og-semana-do-pet.jpg" />Repare que título, descrição e imagem aparecem três vezes, uma para cada consumidor: o buscador lê title e description, Facebook, LinkedIn e WhatsApp leem as tags og:, e o X lê as twitter:. Se a imagem não for preenchida, as linhas de imagem simplesmente não são geradas.
Como o bloco é gerado
O HTML é refeito no navegador a cada alteração, e só aparece quando há título ou descrição. Cada linha é incluída apenas se o campo correspondente estiver preenchido. Antes de entrar no atributo, o texto passa por uma função que troca &, aspas duplas, < e > pelas entidades HTML, para que uma aspa no título não feche o atributo e quebre o <head>.
Dois valores são fixos: og:type sai sempre como website e twitter:card sempre como summary_large_image, o formato de imagem grande. Os contadores abaixo dos campos mostram quantos caracteres foram digitados, e os campos param de aceitar texto em 70 caracteres (título) e 160 (descrição).
Limitações
- Não há pré-visualização de como o link vai aparecer no Google ou no WhatsApp. Para conferir o Open Graph publicado, use o depurador de compartilhamento do Facebook.
- A ferramenta não verifica se a imagem existe, se tem 1200 × 630 px ou se a URL canônica é absoluta.
- Ficam de fora
og:site_name,og:locale, as dimensões da imagem,robotsehreflang. Acrescente à mão quando precisar. og:typeé semprewebsite; página de artigo ou de produto pede outro tipo.- O contador mede caracteres, e o Google corta o título pela largura em pixels. Um título de 60 caracteres cheio de letras largas pode ser truncado antes.
Privacidade
Tudo acontece no navegador: título, descrição e URL de uma campanha ainda não lançada não são enviados ao servidor. O site mede a visita com Google Analytics, sem capturar o que é digitado.
Para continuar
Meta Tags em Landing Pages de Promoção trata do ciclo de vida da página temporária, do lançamento ao noindex, e SEO para E-commerce de Construção mostra como URL e metadados trabalham juntos em catálogo grande. Antes de gerar as tags, defina a URL com o Gerador de Slug; depois, monte os links de divulgação com o Gerador de UTM.
Perguntas frequentes
Qual o tamanho ideal do title e da meta description?
Como referência, título entre 50 e 60 caracteres e descrição entre 120 e 160. O Google corta pela largura em pixels, não pela contagem exata, então coloque a informação principal (produto, oferta, prazo) no começo.
Qual o tamanho da imagem Open Graph?
1200 × 630 pixels, proporção de aproximadamente 1,91:1. É o formato que Facebook, LinkedIn e WhatsApp exibem como imagem grande. Evite texto pequeno perto das bordas, porque alguns aplicativos recortam a imagem.
Por que o WhatsApp continua mostrando o preview antigo?
Aplicativos e redes guardam em cache a prévia de um link já compartilhado. Publique as tags antes do primeiro disparo. Se precisar trocar depois, use o depurador de compartilhamento do Facebook para forçar nova leitura; para o WhatsApp, um parâmetro novo na URL faz o link ser lido como endereço diferente.
Preciso de Twitter Card se já tenho Open Graph?
O X usa as tags Open Graph como alternativa para título, descrição e imagem, mas é a tag twitter:card que define o formato do cartão. Sem ela, o link tende a aparecer no formato pequeno. Por isso o bloco gerado inclui as duas famílias.
A meta keywords ainda ajuda no SEO?
Não no Google, que anunciou em 2009 que ignora a meta keywords para ranqueamento. Por isso esta ferramenta não gera essa tag.