Como usar: Gerador de Meta Tags
- Digite o título da página, a meta description e a URL canônica. Os contadores avisam antes que o Google corte o texto.
- Preencha a imagem do Open Graph, o nome do site e o idioma, e escolha um tipo de card do X — as prévias do Google, Facebook e X são atualizadas enquanto você digita.
- Defina as diretivas de robots, a cor do tema e os caminhos dos ícones, se precisar.
- Copie a saída <head> completo para um site feito à mão, ou troque para código personalizado do Webflow e receba apenas as tags que o Webflow não gera pelas configurações.
O que são meta tags?
Meta tags são elementos HTML no <head> de uma página que descrevem a página para navegadores, mecanismos de busca e redes sociais. Elas não aparecem na página em si, mas definem como ela aparece nos resultados do Google, como um link é exibido no Slack, LinkedIn ou WhatsApp, se a página pode ser indexada e como ela se adapta em um celular.
As tags que realmente importam
| Tag | Usada por | Função |
|---|---|---|
<title> | Google, abas do navegador | O título clicável nos resultados de busca — um sinal de relevância confirmado. |
meta description | Google, Bing | Frequentemente usada como trecho abaixo do título; afeta o clique, não o ranqueamento. |
link rel="canonical" | Google, Bing | Indica a URL preferida quando o mesmo conteúdo está acessível em vários endereços (parâmetros, barras no final, http/https). |
meta robots | Todos os principais rastreadores | noindex tira a página dos resultados; max-image-preview:large permite miniaturas grandes de imagem no Discover. |
og:* | Facebook, LinkedIn, Slack, Discord, iMessage… | O protocolo Open Graph — título, descrição, imagem e tipo de um link compartilhado. |
twitter:* | X | Layout do card (summary ou summary_large_image) e atribuição de conta; usa as tags og: como alternativa. |
viewport, charset | Navegadores | Escala correta em celulares e codificação de texto. |
A antiga tag meta keywords não é gerada de propósito: o Google a ignora há mais de uma década, e ela só revela sua estratégia de palavras-chave para a concorrência.
Erros comuns que este gerador evita
- URLs relativas no og:image. Os raspadores das redes sociais precisam de uma URL absoluta com
https://. Adicioneog:image:widtheog:image:heightpara que a imagem apareça já no primeiro compartilhamento, e não só depois de uma nova leitura. - Noindex junto com canonical. Apontar um canonical para outra URL e, ao mesmo tempo, definir
noindexenvia sinais contraditórios; escolha um dos dois. - Aspas não escapadas. Um
"dentro de uma descrição quebra o atributo. Todos os valores são escapados em HTML na saída. - Tags duplicadas. Plataformas como Webflow, plugins de SEO do WordPress e Shopify já geram muitas tags. Adicionar outro
<title>ouog:imagemanualmente deixa os rastreadores adivinhando qual vale.
Webflow: campos de configuração vs código personalizado
O Webflow gera automaticamente título, descrição, título/descrição/imagem do Open Graph, canonical, charset e viewport a partir das configurações da Página e do Site, então colar um head completo no código personalizado duplicaria essas tags. Escolha código personalizado do Webflow acima e a saída terá apenas o que o Webflow não consegue definir nativamente — diretivas de robots, theme-color, og:site_name, og:locale, identificadores de conta no X e links extras de ícones. Em páginas de template de CMS, a mesma caixa de código personalizado aceita campos do CMS. Depois de publicar, verifique a saída real com o Meta Tag Checker e o Open Graph Checker, ou crie uma imagem de compartilhamento com o OG Image Generator.
Também pesquisado como: meta tags open graph, gerador open graph, gerador twitter card, meta tags html, tags de seo, tags head html, meta tags redes sociais, meta tags webflow.
Ferramentas que combinam com: Gerador de Meta Tags
- Preview de SERP — Escreva a tag title e a meta description e veja exatamente onde o Google provavelmente vai cortar o texto — medido em pixels, não só em caracteres, no desktop e no mobile.
- Gerador de favicons — Crie um pacote completo de favicons a partir de um logotipo, uma letra ou um emoji: um arquivo favicon.ico com vários tamanhos, o ícone de toque da Apple, ícones para Android/PWA, um webclip do Webflow, o manifesto da web e as tags HTML para colar.
- Gerador de marcação de esquema — Escolha um tipo de esquema, preencha o formulário e copie o JSON-LD pronto para colar.
- Guia explicativo sobre o robots.txt — As regras do robots.txt são curtas, mas fáceis de interpretar mal.
Perguntas frequentes
Meta tags ainda importam para o SEO?
Qual deve ser o tamanho de uma imagem Open Graph?
Preciso das tags Open Graph e do Twitter?
og:title, og:description e og:image como alternativa, então basta adicionar twitter:card (e, opcionalmente, twitter:site) às tags Open Graph.