Configurar

Preencha os detalhes da sua página. Deixe os campos Open Graph e Twitter em branco para herdar dos campos básicos.

SEO básico

URL da página

Título da página

0/60

Meta descrição

0/160

Idioma (html lang)

Robots

Autor

Cor do tema

Open Graph

Tipo OG

Nome do site

Título OG

Descrição OG

URL da imagem OG

Twitter Card

Tipo de cartão

Identificador Twitter/X

URL da imagem Twitter

HTML gerado

Copie essas tags no elemento head da sua página.

head-meta.html

<!-- Basic SEO -->
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="index, follow">
<meta name="theme-color" content="#0F172A">

<!-- Open Graph -->
<meta property="og:type" content="website">

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">

10 linhas

Seu robots.txt está pronto — mas é apenas um dos 99+ sinais SEO.

Executar auditoria gratuita →

O que são meta tags e por que elas importam?

Meta tags são elementos HTML dentro do <head> de uma página que descrevem o documento para máquinas: mecanismos de busca, plataformas sociais, navegadores e sistemas operacionais. O corpo de uma página é o que os humanos veem; o head é o que bots, crawlers e integrações de plataforma leem. As meta tags determinam como sua página é indexada, como ela aparece em links compartilhados, qual cor a interface do navegador móvel assume e se o dispositivo interpreta números de telefone e endereços de e-mail como links clicáveis.

A maioria das meta tags se enquadra em um de quatro papéis. Tags técnicas como charset e viewport informam ao navegador como analisar e organizar o documento; sem elas, a renderização quebra de formas previsíveis. Tags de SEO como title, description, canonical, robots e hreflang informam aos mecanismos de busca o que é a página e como tratá-la em seu índice. Tags sociais como a família og: do Open Graph e a família twitter: do Twitter Card controlam como a página é renderizada quando sua URL é colada em um chat, post ou link compartilhado. Tags de branding e UX como theme-color, apple-touch-icon e format-detection controlam como a página se integra ao sistema operacional do dispositivo.

A história é em camadas. A especificação HTML 4 original definiu <meta> para pares genéricos de nome-valor. O Open Graph foi publicado pelo Facebook em 2010 para fornecer às plataformas de compartilhamento uma forma padronizada de extrair uma prévia limpa. O Twitter Card veio em 2012 com seu próprio namespace porque o Open Graph sozinho não atendia às variações de produto do Twitter. Apple, Microsoft e a comunidade PWA adicionaram suas próprias famílias de tags para ícones, interface móvel e aprimoramento progressivo. O resultado é uma seção head que pode chegar a quarenta linhas em uma página bem tagueada, cada tag servindo a um consumidor específico.

O impacto no mundo real se acumula. Um canonical ausente divide o equity de links entre URLs duplicadas. Uma og:image ausente ou errada transforma links compartilhados em blobs sem estilo que são ignorados ao rolar. Um viewport ausente faz a página renderizar com largura de desktop em um celular, ativando a penalidade de compatibilidade móvel do Google e destruindo os Core Web Vitals. Nenhum desses problemas é catastrófico sozinho, mas juntos deixam tráfego e engajamento significativos na mesa.

Como usar este gerador

O formulário é agrupado por família de tags, então você pode preencher apenas as seções de que precisa sem rolar por campos irrelevantes.

Etapa 1 — Preencha o núcleo de SEO. Insira o título da página, a meta descrição, a URL canonical e o idioma. Esses quatro campos cobrem as tags que afetam rankings de busca e taxa de cliques, então mesmo uma configuração mínima de meta tags deve preenchê-los.

Etapa 2 — Adicione prévias sociais. Defina o título, a descrição e a URL da imagem do Open Graph. O gerador os copia tanto para as tags og: quanto para as twitter: por padrão, já que 90% das páginas querem o mesmo conteúdo em ambas. Substitua os campos do Twitter apenas quando tiver uma variante específica para essa plataforma.

Etapa 3 — Copie o resultado e cole no seu <head>. O gerador produz HTML5 válido, ordenado com charset e viewport primeiro, depois tags de SEO, depois tags sociais, depois branding. Cole o bloco antes de qualquer folha de estilo ou script externo para evitar que recursos que bloqueiam a renderização atrasem as meta informações.

A taxonomia completa de meta tags

Uma página moderna se beneficia de muito mais tags do que o título e a descrição que a maioria dos tutoriais mostra. Abaixo está a ordem de prioridade para um head limpo e completo.

Técnicas (devem vir primeiro)

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

charset deve aparecer nos primeiros 1024 bytes do documento. Se aparecer depois, o navegador pode já ter começado a analisar em uma codificação padrão e precisar reiniciar, custando tempo e arriscando bugs de exibição com caracteres não-ASCII. viewport controla como os navegadores móveis calculam o layout inicial. Sem ele, dispositivos móveis renderizam a página com largura de desktop e dão zoom para caber, quebrando alvos de toque e ativando a penalidade de compatibilidade móvel que o Google aplica desde a atualização mobile de 2015.

Núcleo de SEO

<title>Palavra-chave Principal — Marca</title>
<meta name="description" content="Um resumo de 150-160 caracteres que inclui a palavra-chave e um chamado à ação.">
<link rel="canonical" href="https://example.com/caminho-da-pagina">
<meta name="robots" content="index, follow">
<link rel="alternate" hreflang="pt" href="https://example.com/pt/pagina">
<link rel="alternate" hreflang="en" href="https://example.com/en/page">

A tag title é o sinal de SEO na página com maior peso e o título do snippet nos resultados de busca. A description não afeta diretamente o ranking, mas influencia a taxa de cliques. O canonical desambigua URLs duplicadas criadas por parâmetros de rastreamento, ordens de classificação ou paginação. A meta tag robots substitui o robots.txt para a página específica quando você quer permitir o rastreamento, mas bloquear a indexação. O hreflang diz ao Google qual variante de idioma e região servir aos usuários em diferentes buscas, e é necessário para que o SEO internacional funcione corretamente.

A cascata de títulos

Três campos de título diferentes controlam três superfícies diferentes. A tag <title> preenche o snippet nos resultados de busca e a aba do navegador. <meta property="og:title"> preenche os cards de prévia do Facebook, LinkedIn e Slack. <meta name="twitter:title"> preenche o Twitter Card. Por padrão, defina todos os três com a mesma string. Substitua og:title quando quiser uma versão mais longa e otimizada para compartilhamento (o Facebook permite cerca de 88 caracteres antes de truncar, muito mais do que os 60 do Google). Substitua twitter:title quando quiser texto específico para a plataforma voltado ao público nativo do Twitter.

Open Graph (compartilhamento)

<meta property="og:type" content="website">
<meta property="og:title" content="Título da página para compartilhamentos sociais">
<meta property="og:description" content="Descrição para compartilhamentos sociais.">
<meta property="og:url" content="https://example.com/pagina">
<meta property="og:image" content="https://example.com/og.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:site_name" content="Exemplo">
<meta property="og:locale" content="pt_BR">

As dimensões da imagem importam. Facebook, LinkedIn e a maioria dos outros consumidores Open Graph esperam uma imagem de 1200 por 630 com proporção 1,91:1. Enviar uma imagem menor faz a plataforma recorrer a um layout de miniatura pequena em vez de um card hero. Enviar uma imagem com proporção incorreta causa recorte que frequentemente corta texto ou rostos. As dicas de largura e altura permitem que os crawlers reservem espaço e carreguem de forma assíncrona, evitando uma mudança de layout na prévia.

Twitter Card (compartilhamento)

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Título da página para o Twitter">
<meta name="twitter:description" content="Descrição para o Twitter.">
<meta name="twitter:image" content="https://example.com/twitter.png">
<meta name="twitter:site" content="@seuperfil">

Escolha summary_large_image para um layout hero (a maioria das páginas de marketing e artigos) e summary para um card compacto (conteúdo leve). O Twitter prefere uma imagem de 1200 por 675, ligeiramente mais larga que os 1200 por 630 do Open Graph. Se reutilizar sua imagem do Open Graph, o resultado ainda funciona, mas uma imagem específica para o Twitter preenche o card sem letterboxing.

Branding e UX (frequentemente esquecidos)

<meta name="theme-color" content="#0F172A">
<meta name="color-scheme" content="light dark">
<meta name="format-detection" content="telephone=no">
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

theme-color pinta o chrome do navegador no Android e a barra de status em PWAs. color-scheme diz ao navegador para renderizar barras de rolagem e controles de formulário em modo escuro ou claro correspondente. format-detection com telephone=no impede que o iOS Safari transforme automaticamente strings de dígitos com formato de número de telefone em links tel:, o que é essencial para números de fatura, IDs de pedido e qualquer número de sete a onze dígitos que não seja realmente um telefone. Os links de ícone cobrem favicons de aba no desktop, ícones de tela inicial no iOS e ícones adaptativos no Android.

Erros comuns que prejudicam SEO e compartilhamentos

Canonical incorreto apontando para outra página. Uma tag canonical que aponta para uma URL diferente diz ao Google que a URL atual é uma duplicata e consolida os sinais para o destino. Páginas que deveriam ranquear somem da busca porque seu canonical aponta para outro lugar por engano. Sempre use auto-referência, a menos que a página seja genuinamente uma duplicata.

og:image ausente ou subdimensionada. Uma og:image ausente deixa a plataforma escolher algo arbitrário do corpo da página, frequentemente um logo ou ícone. Uma imagem muito pequena (abaixo de 600 pixels de largura) rebaixa a prévia para um layout de miniatura pequena. Ambos matam o engajamento em links compartilhados e são fáceis de corrigir.

Descrições idênticas em todas as páginas. Descrições em template que variam apenas pelo título da página sinalizam conteúdo de baixo esforço. O Google rotineiramente as substitui por texto do corpo, o que significa que a descrição que você levou tempo escrevendo nunca aparece. Cada página precisa de uma descrição única vinculada à intenção daquela página.

Charset declarado tarde. Uma tag charset abaixo dos primeiros 1024 bytes aciona uma reinicialização de codificação em alguns navegadores. O resultado é um breve flash de caracteres mal codificados antes de a página ser repintada. Sempre coloque <meta charset="utf-8"> como o primeiro filho do head.

Meta tag robots e cabeçalho X-Robots-Tag fora de sincronia. Quando o cabeçalho HTTP define noindex e a meta tag define index, a diretiva mais restritiva vence e a página não é indexada. Audite as duas camadas em uma única passagem quando uma página misteriosamente não aparece na busca.

theme-color definido como branco em um site com identidade escura. O comportamento padrão do navegador pinta a barra de endereço de branco na maioria dos dispositivos Android. Um site com cabeçalho azul-marinho escuro e barra de endereço branca parece quebrado no celular. Definir theme-color para a cor da marca é uma alteração de uma linha que melhora significativamente a qualidade percebida.

Twitter Card sem site ou creator. Omitir twitter:site e twitter:creator remove a linha de atribuição do card e impede o Twitter de associar os compartilhamentos à sua conta. Ambos os campos recebem um handle do Twitter incluindo o @ e devem ser definidos em todas as páginas.

Casos de borda que ninguém menciona

Meta tags interagem com cabeçalhos de resposta HTTP, e os cabeçalhos geralmente vencem. X-Robots-Tag: noindex na resposta substitui qualquer <meta name="robots" content="index"> na página. Cabeçalhos Content-Security-Policy podem bloquear o carregamento de og:image no crawler de prévia, especialmente quando a imagem fica em um domínio diferente. Referrer-Policy definido como no-referrer remove o referrer que os crawlers do Open Graph às vezes usam para verificar a requisição, fazendo com que algumas plataformas se recusem a renderizar a prévia completamente. Quando as meta tags parecem corretas no código-fonte, mas a página não se comporta como esperado, audite os cabeçalhos de resposta em seguida.

Gerador de Meta Tags Gratuito