Gerador de Meta Tag
Gere meta tags SEO, Open Graph e Twitter Card para o seu site.
Sobre as meta tags
As meta tags fornecem metadados sobre sua página HTML. Elas ajudam os motores de busca a entenderem seu conteúdo, controlam como suas páginas aparecem nos resultados de busca e definem a pré-visualização dos links nas redes sociais. Um conjunto bem otimizado de meta tags pode melhorar a taxa de cliques da busca e do compartilhamento social. Mantenha os títulos abaixo de 60 caracteres e as descrições abaixo de 160 caracteres para exibição ideal nos resultados de busca.
As quatro famílias de metadados <head>
O <head> de uma página HTML moderna leva tipicamente metadados em quatro grupos, cada um a servir um público diferente:
- Bases do documento, o que qualquer navegador precisa:
<title>,<meta charset="utf-8">,<meta name="viewport">,<meta name="description">. - Directivas SEO, o que os crawlers dos motores de busca lêem:
<meta name="robots">,<link rel="canonical">, o título da página que acaba como link no SERP. - Open Graph, o que Facebook, LinkedIn, Slack, Discord, iMessage e a maior parte dos outros clientes de partilha de links renderizam:
og:title,og:description,og:image,og:url,og:type,og:site_name. - Twitter Card, o que o X / Twitter renderiza para links partilhados, com fallback para tags OG quando ausentes:
twitter:card,twitter:title,twitter:image,twitter:site,twitter:creator.
Este gerador emite as quatro famílias a partir de um único formulário. A saída é colada directamente no <head> de qualquer ficheiro HTML: colar, guardar, fazer deploy. Para um aprofundamento específico do Open Graph, a ferramenta dedicada Visualização do Open Graph mostra renderizações em tempo real nas plataformas.
Título e descrição: que comprimento devem ter?
O Google Search Central é directo na resposta: não há um máximo rígido. Os snippets são simplesmente truncados para encaixar na largura do dispositivo. As regras de 60 caracteres no título e 160 na descrição são convenções da indústria derivadas do truncamento por largura em píxeis observado nos SERPs do Google (~580 píxeis em desktop). Na prática:
- Título, apontar para 50–60 caracteres. As maiúsculas largas (W, M, A maiúsculo) consomem mais espaço em píxeis que as letras estreitas (i, l, t), por isso dois títulos de 60 caracteres podem renderizar com larguras visíveis muito diferentes.
- Descrição, 150–160 caracteres em desktop, ~120 em móvel. Coloque a informação chave no início para que sobreviva ao truncamento móvel.
- O comprimento não afecta o ranking; só afecta quanto do snippet um pesquisador vê antes de clicar.
A tag meta robots: o que controla realmente
Ao contrário da obsoleta tag keywords (ver abaixo), <meta name="robots"> está bem viva; o Google suporta-a explicitamente. Valores comuns:
index, follow, o predefinido. A página pode aparecer na busca; os crawlers seguem os seus links.noindex, excluir esta página dos resultados de busca. Útil para páginas de agradecimento, ferramentas internas, arquivos paginados, páginas de resultados de busca, e qualquer outra coisa que não queira a competir com o seu conteúdo real.nofollow, não seguir os links desta página. Raramente é a escolha certa ao nível de página inteira; normalmente aplicado por link viarel="nofollow".noindex, nofollow, ambos. A postura de privacidade mais forte para uma página acessível publicamente.noarchive, não mostrar cópia em cache nos resultados de busca.nosnippet, não mostrar snippet de descrição, apenas o título.
Para overrides específicos do Google, use <meta name="googlebot"> com os mesmos valores. Note que noindex também pode ser expresso como cabeçalho HTTP X-Robots-Tag, que é o sítio certo para PDFs, imagens e outros recursos não-HTML onde não pode adicionar uma meta tag.
Por que as URLs canónicas importam
<link rel="canonical"> diz aos motores de busca qual a versão de uma página é a «oficial» quando várias URLs servem conteúdo idêntico ou quase idêntico. Casos comuns que precisam de canónica:
- Barra final ou não (
/pagevs/page/). - HTTP vs HTTPS (redireccionamentos legacy às vezes deixam ambos indexáveis).
- WWW vs apex (
www.example.comvsexample.com). - Parâmetros de tracking (
?utm_source=...,?ref=...) a produzir intermináveis URLs «diferentes». - Paginação, ordenações, parâmetros de filtro que produzem o mesmo conteúdo em ordem diferente.
- Conteúdo sindicado republicado em vários sites (a canónica aponta para o original).
Sem uma canónica, o Google escolhe uma versão por si próprio e pode escolher a errada. A URL canónica deve ser absoluta (https:// completo) e deve corresponder exactamente à URL que quer indexada.
Tags que pode saltar em 2026
<meta name="keywords">, o Google declarou explicitamente desde Setembro de 2009 que não usa a meta tag keywords como sinal de ranking. O Bing foi mais longe: trata o enchimento excessivo de palavras-chave nesta tag como sinal de spam. Incluí-la não prejudica o SEO mas também não ajuda; o campo existe neste gerador para utilizadores cujos templates corporativos ainda a esperam.<meta http-equiv="refresh">para redireccionamentos, use redireccionamentos HTTP 301/302 adequados a partir do servidor em vez disso. O meta refresh atrasa o redireccionamento e confunde algumas ferramentas de acessibilidade.<meta http-equiv="X-UA-Compatible">, necessária apenas para compatibilidade com Internet Explorer, o que já não é uma preocupação.<meta name="revisit-after">, nunca honrada por crawlers principais. Puro culto de carga.<meta name="generator">, apenas informativa; diz ao mundo o que construiu o seu site. Por vezes um sinal de segurança que vale a pena remover.
As duas tags que cada página realmente precisa
Para além de <title> e <meta name="description">, duas tags são inegociáveis para uma página web moderna:
<meta charset="UTF-8">, deve aparecer dentro dos primeiros 1024 bytes do documento, idealmente como primeiro filho de<head>. O HTML Living Standard exige-a para o tratamento correcto de caracteres. Sem ela, os navegadores podem adivinhar a codificação e errar, sobretudo em escritas não-latinas.<meta name="viewport" content="width=device-width, initial-scale=1">, diz aos navegadores móveis para renderizarem a página à largura real do dispositivo em vez de fazerem zoom out a partir de um layout de desktop fictício de 980 píxeis. Sem ela, cada utilizador móvel vê uma versão minúscula com zoom out da sua página, quase inutilizável.
Open Graph e Twitter Cards em breve
Um resumo curto; para o aprofundamento, use a ferramenta Visualização do Open Graph. As quatro tags OG necessárias segundo ogp.me: og:title, og:type, og:image, og:url. Opcionais mas recomendadas: og:description, og:site_name. Dimensões da imagem: 1200×630 (1,91:1) é o tamanho mais seguro entre plataformas.
Para X / Twitter: inclua twitter:card = summary_large_image (o card moderno de largura total) e o X recorre às tags OG para tudo o resto se as tags específicas do Twitter estiverem ausentes. A pré-visualização autónoma do Twitter Card Validator foi removida pelo X em 2 de Agosto de 2022; verifique colando a URL no Tweet Composer em vez disso.
Os dados estruturados são outro trabalho
Os dados estruturados JSON-LD (com vocabulários schema.org) são o que alimenta os resultados ricos do Google: cards de receita, info de produto com classificação por estrelas, snippets FAQ na busca, breadcrumbs. É distinto das meta tags e vive num bloco <script type="application/ld+json">, não numa tag <meta>. Ambos são recomendados; um não substitui o outro. As meta tags controlam o título / descrição / share-card básicos; os dados estruturados desbloqueiam os formatos mais ricos.
Erros comuns
- Incluir
meta keywordsna expectativa de benefício SEO. O Google anunciou em 2009 que não a usa. Vinte e tal anos depois ainda está em templates antigos; remova ou ignore. - Esquecer
<link rel="canonical">. Se a sua URL tem parâmetros de tracking ou versões alternativas, o Google escolhe uma por si próprio. Sem canónica, a versão escolhida pode não ser aquela com todos os seus links de entrada. - Títulos diferentes em
<title>,og:titleetwitter:title. Não é tecnicamente errado, mas é inconsistente. O predefinido limpo é um único título partilhado pelos três. - Logo genérico do site como
og:imageem cada página. Cada página merece uma imagem única ligada ao seu conteúdo; usar um único logo em todo o site produz pré-visualizações de partilha aborrecidas. - Falta de meta
viewportem páginas direccionadas a móvel. Os navegadores móveis renderizam a página com largura de desktop fictícia e fazem zoom out. A experiência de utilizador é horrível. - Usar
<meta http-equiv="refresh">para redireccionamentos. HTTP 301/302 do servidor é a forma certa; o meta refresh é mais lento e hostil à acessibilidade, e muitos crawlers tratam-no de forma inconsistente para efeitos de ranking. - Título mais longo que ~580 píxeis (~60 caracteres de largura). Truncado pelo Google com reticências; a parte truncada não é visível aos pesquisadores.
- Esquecer que single-page apps precisam de meta tags renderizadas no servidor ou pré-renderizadas. Muitos crawlers de redes sociais (Facebook, LinkedIn, Slack, Discord) não executam JavaScript. As tags escritas por JS no cliente não lhes serão visíveis.
Perguntas frequentes
A tag meta keywords ainda ajuda o SEO?
Não. Matt Cutts do Google anunciou em Setembro de 2009 que <meta name="keywords"> não é usada como sinal de ranking. O Bing trata o enchimento excessivo de palavras-chave nesta tag como sinal de spam. O campo é incluído neste gerador para compatibilidade com templates e fluxos CMS antigos que ainda a esperam; é seguro deixar em branco.
Qual a diferença entre meta description e OG description?
O HTML <meta name="description"> é o que os motores de busca usam como snippet por baixo do título da sua página nos resultados. A Open Graph og:description é o que os cards de partilha das redes sociais mostram. Podem ser o mesmo texto (e normalmente são) mas pode escrever versões diferentes se o seu público de busca e o seu público social esperam enquadramentos diferentes.
O meu JavaScript escreve as meta tags depois do carregamento da página. Está bem?
Para o crawler principal do Google (Googlebot), sim; o Googlebot renderiza JavaScript e vê as meta tags pós-renderização. Para os crawlers das redes sociais (Facebook, LinkedIn, Slack, Discord, WhatsApp), geralmente não; a maioria não executa JavaScript e só vê o HTML inicial. Se o seu site é uma single-page app, precisa de renderização no servidor, pré-renderização ou de um serviço como Prerender.io para garantir que os crawlers das redes sociais vêem as meta tags certas.
Onde exactamente vão estas tags?
Dentro do <head> do seu HTML, idealmente perto do topo. <meta charset> deve estar nos primeiros 1024 bytes. <meta name="viewport"> imediatamente a seguir. Depois <title>, <meta name="description">, robots, canonical, tags OG, tags Twitter. A ordem dentro do <head> não importa para SEO uma vez que o charset e o viewport estejam suficientemente cedo.
Devo preocupar-me com a tag meta refresh por motivos de segurança?
Não é um risco de segurança em si, mas é um padrão pobre. Os redireccionamentos HTTP 301/302 do lado do servidor são mais rápidos, tratam correctamente os cabeçalhos referrer e são mais amigáveis com a acessibilidade. Use o meta refresh apenas quando não tem controlo no servidor sobre redireccionamentos (um host estático tipo GitHub Pages sem config de redireccionamentos).
As minhas meta tags são enviadas para um servidor?
Não. O gerador corre inteiramente no seu navegador. Os seus campos de título, descrição, URL e imagem ficam na sua máquina; o snippet de saída é composto localmente e copiado para a sua área de transferência a pedido. Isto importa porque tags em rascunho contêm muitas vezes URLs de páginas não publicadas, nomes internos de produtos ou cópia de marketing pré-lançamento que não quer que passe por um servidor de terceiros.
Ferramentas relacionadas
Pré-visualização Open Graph
Pré-visualize a aparência do seu link no Facebook, Twitter e LinkedIn. Gere tags OG.
Gerador de robots.txt
Construa um arquivo robots.txt com regras user-agent, caminhos allow/disallow, sitemaps e atrasos de crawl.
Gerador de slug URL
Transforme qualquer texto em um slug limpo e adequado para URLs. Lida com acentos, caracteres especiais e mais.