Meta Tag Generator: criar meta tags SEO

O que é o Meta Tag Generator?

Eu uso essa ferramenta toda vez que vou publicar uma página nova e quero ver como ela vai aparecer de fato no Google, no Facebook e no Twitter antes de subir. A ferramenta produz o bloco HTML completo de meta tags (SEO básico, Open Graph, Twitter Card) e renderiza prévias pixel-perfect de cada plataforma lado a lado. Você preenche a aba Input, copia da Output e confere na Preview.

Funcionalidades principais

A ferramenta gera três blocos de tags a partir de um único conjunto de inputs. O bloco SEO básico cobre <meta name="title">, <meta name="description">, <meta name="keywords">, <meta name="author">, <meta name="robots"> e <link rel="canonical">. O bloco Open Graph cobre og:title, og:description, og:type, og:url, og:image, og:site_name e og:locale, com opções de tipo para website, article, product, video e music. O bloco Twitter Card cobre twitter:card, twitter:site, twitter:creator, twitter:title, twitter:description e twitter:image, suportando cards Summary e Summary Large Image.

Os contadores de caracteres guiam você até os comprimentos certos. Title mostra atual/60 e fica verde na faixa de 30–60, amarelo abaixo de 30, vermelho acima de 60. Description usa o mesmo esquema com alvo de 120–160. Três prévias ao vivo se atualizam enquanto você digita: uma prévia Google SERP usando o azul real de link (#1a0dab), URL em verde (#006621) e descrição em cinza (#545454); uma prévia Facebook que renderiza o card 1.91:1 com a imagem OG fornecida; e uma prévia Twitter Card que alterna entre Summary e Summary Large Image conforme sua configuração.

O dropdown Robots oferece as quatro combinações de diretivas padrão: index, follow (default), index, nofollow, noindex, follow e noindex, nofollow. A aba Output divide Basic, Open Graph e Twitter em seções separadas com botões de cópia individuais, mais um Copy All para o bloco combinado.

Como usar o Meta Tag Generator

Passo 1: preencha a aba Input

Abra o Em breve: Meta Tag Generator. A ferramenta abre na aba Input, que tem três seções.

Seção SEO básico:

• Title: o título da sua página. O contador de caracteres atualiza em tempo real. Mantenha entre 30–60 caracteres (verde) para evitar truncamento em resultados de busca. Exemplo: TrailMaster Pro Hiking Boots - Waterproof, Vibram Sole (53 caracteres, verde).
• Description: sua meta description. Mire em 120–160 caracteres (faixa verde) para exibição completa. Exemplo: TrailMaster Pro boots combine a Vibram outsole with Gore-Tex waterproofing for serious hikers and trail runners. Free shipping over $75. (137 caracteres, verde).
• Keywords: palavras-chave separadas por vírgula. Buscadores modernos ignoram bastante essa tag, mas incluí-la não prejudica. Exemplo: hiking boots, trail running, waterproof boots, vibram outsole.
• Author: nome de autor opcional.
• Robots: escolha entre as quatro combinações de diretivas robots. Deixe index, follow para conteúdo público. Use noindex, nofollow para páginas privadas, áreas de admin ou conteúdo duplicado que você não quer indexado.
• Canonical URL: a URL preferida para esta página. Insira a URL absoluta completa (ex.: https://example.com/products/trailmaster-pro).

Passo 2: configure as tags Open Graph

Role até a seção Open Graph:

• OG Type: selecione "website" para páginas iniciais e gerais, "article" para posts de blog, "product" para páginas de e-commerce.
• OG Site Name: o nome de exibição do seu site (ex.: "TrailMaster Outdoor Gear").
• OG Image: a URL completa da imagem de compartilhamento social. O Facebook recomenda 1200×630 pixels. Se você fornecer uma URL acessível, a prévia do Facebook renderiza a imagem real.
• OG URL: a URL canônica para Open Graph, normalmente igual à sua canonical URL.

Passo 3: configure as tags Twitter Card

Role até a seção Twitter Cards:

• Twitter Card Type: "Summary" mostra um thumbnail quadrado pequeno. "Summary Large Image" mostra uma imagem 2:1 grande, melhor escolha para a maioria de conteúdo com ativos visuais.
• Twitter Site: o nome de usuário Twitter/X do site (ex.: @trailmaster).
• Twitter Creator: o nome de usuário Twitter/X do autor do conteúdo.

Passo 4: revise a aba Output

Clique na aba Output. Três seções mostram as tags geradas:

Exemplo de tags básicas:

<meta name="title" content="TrailMaster Pro Hiking Boots - Waterproof, Vibram Sole" />
<meta name="description" content="TrailMaster Pro boots combine a Vibram outsole with Gore-Tex waterproofing for serious hikers and trail runners. Free shipping over $75." />
<meta name="keywords" content="hiking boots, trail running, waterproof boots, vibram outsole" />
<meta name="robots" content="index, follow" />
<link rel="canonical" href="https://example.com/products/trailmaster-pro" />

Exemplo de tags Open Graph:

<meta property="og:type" content="product" />
<meta property="og:url" content="https://example.com/products/trailmaster-pro" />
<meta property="og:title" content="TrailMaster Pro Hiking Boots - Waterproof, Vibram Sole" />
<meta property="og:description" content="TrailMaster Pro boots combine a Vibram outsole..." />
<meta property="og:image" content="https://example.com/images/trailmaster-og.jpg" />
<meta property="og:site_name" content="TrailMaster Outdoor Gear" />
<meta property="og:locale" content="en_US" />

Clique em Copy All para obter o bloco completo de tags pronto para colar no seu <head>.

Passo 5: verifique na aba Preview

Mude para a aba Preview. Três prévias ao vivo são renderizadas simultaneamente:

• Prévia Google SERP: mostra o title em azul, a URL canônica em verde e a description truncada em duas linhas em cinza. Corresponde ao formato de resultado de busca em desktop. Se seu title passar de 60 caracteres, ele será truncado visualmente aqui, um sinal claro para encurtá-lo.
• Prévia card Facebook: mostra a imagem OG (se fornecida e carregável), domínio do site em maiúsculas, title em negrito e description.
• Prévia Twitter Card: mostra o formato twitter:card (Small ou Large Image), o domínio URL, title e description. A imagem da prévia vem de twitterImage se definido, com fallback para ogImage.

Exemplos práticos

Exemplo 1: post de blog

Para um post de blog intitulado "10 Best Hikes in the Scottish Highlands":

• Title: 10 Best Hikes in the Scottish Highlands - Complete Guide (53 chars, verde)
• Description: The 10 most rewarding hiking routes in the Scottish Highlands, from Ben Nevis to the Isle of Skye. Trail grades, maps, and kit lists included. (143 chars, verde)
• OG Type: article
• Robots: index, follow

A prévia SERP confirma que o title cabe sem truncamento e a description preenche as duas linhas disponíveis.

Exemplo 2: página de produto e-commerce

Para uma página de produto, o OG type é definido como "product" e uma URL de imagem é fornecida. A prévia do Facebook renderiza a imagem do produto na proporção 1.91:1 com nome do site, title do produto e description. A Twitter Large Image Card mostra a mesma imagem com crop 2:1.

Exemplo 3: página de staging privada

Para uma página de ambiente staging não pronta para indexação, defina Robots como noindex, nofollow. O output gerado inclui <meta name="robots" content="noindex, nofollow" />, dizendo aos crawlers de buscadores para não indexar nem seguir links nessa página, mesmo se a descobrirem.

Dicas e melhores práticas

• Combine OG URL e canonical URL: use a mesma URL absoluta para og:url e a tag canonical <link>. Divergências podem fazer com que o compartilhamento social referencie a URL errada.
• Tamanho do title e truncamento: o Google trunca titles que renderizam mais largos que aproximadamente 600px em resultados desktop. O alvo de 30–60 caracteres é um proxy confiável; verde significa que você está dentro de limites seguros.
• Dimensões da imagem OG: a ferramenta gera a tag og:image para qualquer URL fornecida, mas não valida dimensões da imagem. Use uma imagem 1200×630 pixels para Facebook e 1200×600 para Twitter Large Image Cards.
• twitter:image faz fallback para og:image: na aba Preview, a Twitter Card usa seu twitter:image se fornecido, caso contrário usa og:image. Defina um twitter:image separado apenas se quiser imagens sociais diferentes por plataforma.
• Tag meta keywords: a tag <meta name="keywords"> é gerada mas é amplamente ignorada por Google e Bing desde 2009. Inclua-a por completude mas não invista tempo otimizando-a.

Problemas comuns e solução

O contador do title está vermelho mas a description está bem: o title passou de 60 caracteres. Encurte ou mova detalhes para a description. O contador do title mostra atual/60 (long) em vermelho como indicador claro.

O contador da description está amarelo: a description está abaixo de 120 caracteres. O Google pode substituí-la pelo seu próprio snippet do conteúdo da página. Adicione 20–40 caracteres a mais de conteúdo relevante.

A imagem OG não aparece na prévia do Facebook: a aba Preview carrega a URL real da imagem em uma tag <img>. Se a URL não for publicamente acessível do seu navegador (ex.: URL de desenvolvimento local), a área da imagem mostra o placeholder "No image". A tag é gerada corretamente no output mesmo assim.

A prévia do Twitter mostra só um card pequeno mesmo com imagem grande: o Twitter Card Type está definido como "Summary" em vez de "Summary Large Image". Mude o dropdown Twitter Card Type para "Summary Large Image" para ver a prévia 2:1.

Tags geradas aparecem vazias na aba Output: preencha pelo menos title e description na aba Input. O output só inclui campos não vazios; um campo title vazio não produz tag title.

Privacidade e segurança

Meta Tag Generator roda inteiramente no seu navegador. A geração de tags usa o hook useMemo do React para computar o output reativamente a partir do seu input, sem ida ao servidor. Se você fornecer uma URL de imagem OG, a aba Preview carrega essa imagem diretamente da URL fonte sem proxy. Membros Supporter podem salvar e restaurar presets nomeados usando armazenamento IndexedDB local.

Perguntas frequentes

Quais os comprimentos ideais de caracteres para title e description?

A ferramenta usa 30–60 caracteres para title (faixa verde) e 120–160 caracteres para description (faixa verde). Eles correspondem aos limites típicos de largura em pixels renderizados que o Google usa para snippets SERP. Titles abaixo de 30 caracteres (amarelo) podem ser considerados magros; acima de 60 (vermelho) podem ser truncados. Descriptions abaixo de 120 (amarelo) podem fazer o Google usar seu próprio extrato; acima de 160 (vermelho) serão truncadas.

A ferramenta gera todas as propriedades Open Graph?

A ferramenta gera as tags OG principais: og:type, og:url, og:title, og:description, og:image, og:site_name e og:locale. Ela não gera tags específicas de artigo como article:published_time ou específicas de produto como product:price. Para essas, adicione manualmente após copiar o output gerado.

Quais valores OG locale estão disponíveis?

A locale OG default é en_US. O campo locale é entrada de texto onde você pode digitar qualquer código locale válido (ex.: fr_FR, de_DE, ja_JP). A ferramenta não restringe esse campo a um dropdown.

Quais tipos de Twitter Card a ferramenta suporta?

A ferramenta gera summary (thumbnail quadrado pequeno, title, description e nome do site) e summary_large_image (imagem 2:1 em largura total com title, description e nome do site). Ela não suporta os tipos depreciados app e player.

Posso copiar só as tags Open Graph sem as SEO básicas?

Sim. A aba Output mostra três seções separadas (Basic, Open Graph, Twitter), cada uma com seu próprio botão de cópia. Clique no botão de cópia da seção Open Graph para copiar só essas tags. Use "Copy All" para tudo combinado.

Como adiciono as tags geradas ao meu site?

Cole as tags copiadas dentro da seção <head> do seu HTML. Se você usa um CMS como WordPress, Shopify ou Webflow, cole no campo de código <head> customizado nas configurações do tema ou use um plugin SEO que aceite meta tags customizadas. Para frameworks como Next.js, cole no componente <Head> ou use a API metadata.

Ferramentas relacionadas

• Em breve: Analisador SEO de Página: audite as meta tags atuais, estrutura de headings e sinais SEO on-page de uma página existente para identificar lacunas que suas novas meta tags devem cobrir.
• Em breve: Prévia SERP: ferramenta dedicada de prévia SERP para ajustes finos da exibição de title e description antes e depois de atualizar suas meta tags.
• Em breve: Gerador de Schema: adicione marcação de dados estruturados junto com suas meta tags para habilitar resultados ricos no Google Search para artigos, produtos, eventos e mais.

Experimente o Meta Tag Generator agora: Em breve: Glyph Widgets Meta Tag Generator