DevToolPal
PT

Gerador de meta tags

Gere meta tags de SEO, Open Graph e Twitter Card para sua página, com prévia do resultado de busca e do card social.

Roda localmente, nada é enviado

Opções

Dados da página

HTML para o <head>

Prévia

Resultado de busca

example.com
Título da página

Adicione uma descrição para controlar o trecho exibido abaixo do título.

Card social

Sem imagem de compartilhamento
example.comTítulo da página

A imagem não é carregada aqui, então esta página não faz requisições de rede.

O que a ferramenta faz

O gerador de meta tags escreve as tags que vão dentro do <head> de uma página HTML: o <title>, a meta description, palavras-chave e autor, uma diretiva robots, o link canônico, uma cor de tema, as declarações de viewport e charset, o conjunto completo de tags Open Graph (og:title, og:description, og:image, og:url, og:type, og:site_name, og:locale) e as tags de card do X / Twitter.

Enquanto você digita, ela mostra como a página pode aparecer num resultado de busca e num card social, e verifica os erros mais comuns: título com mais de cerca de 60 caracteres, descrição ausente, curta demais ou com mais de cerca de 160 caracteres, URL canônica relativa, imagem sem URL absoluta, ou localidade e cor mal formatadas. Tudo acontece no seu navegador, e a prévia propositalmente não carrega sua imagem, então a página não faz requisições de rede.

Como usar

  1. Preencha os dados da página. Título e descrição são o essencial; os contadores mostram o tamanho em relação aos limites usuais de exibição. Clique em Exemplo para ver um caso completo.
  2. Informe a URL canônica da página e uma imagem de compartilhamento. Um caminho relativo como /images/cover.jpg é resolvido com a URL canônica.
  3. Nas opções, escolha o tipo Open Graph (website para a maioria das páginas, article para posts de blog), o tamanho do card, se os buscadores podem indexar a página e seguir seus links, e quais grupos de tags incluir.
  4. Leia os avisos abaixo do HTML, confira as prévias e copie o HTML para o template da página.

As opções ficam no endereço da página e o formulário no seu navegador, então você pode voltar a ele ou compartilhar um link com as mesmas configurações.

Exemplo

A página de exemplo gera tags como estas (resumido):

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sourdough Bread for Beginners — Step-by-Step Guide</title>
<meta name="description" content="Bake your first sourdough loaf at home: …">
<meta name="robots" content="index, follow">
<link rel="canonical" href="https://example.com/recipes/sourdough-for-beginners">

<!-- Open Graph -->
<meta property="og:type" content="website">
<meta property="og:title" content="Sourdough Bread for Beginners — Step-by-Step Guide">
<meta property="og:image" content="https://example.com/images/sourdough-loaf.jpg">
<meta property="og:locale" content="en_US">

<!-- Twitter / X -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@examplekitchen">

Os valores são escapados como HTML, então aspas e & num título não quebram a marcação, e a localidade en-US é normalizada para o formato en_US que o Open Graph espera.

Dicas

  • Escreva título e descrição únicos para cada página; duplicatas no site deixam os resultados difíceis de distinguir.
  • Coloque as palavras mais importantes no início do título, pois títulos longos são cortados no final.
  • A URL canônica deve ser o endereço exato que você quer indexado, com o protocolo e a forma preferida com ou sem www.
  • Definir robots como noindex tira a página dos resultados, mas só se os rastreadores ainda puderem acessá-la: não a bloqueie também no robots.txt.

Perguntas frequentes

› Quais meta tags realmente importam para SEO?

As mais importantes são o elemento title e a meta description: o título é um sinal de ranqueamento e a manchete do seu resultado, e a descrição costuma virar o trecho exibido abaixo dele. O link canonical diz aos buscadores qual URL é a principal, e robots controla a indexação. Google e Bing ignoram a tag keywords; inclua-a só se outro sistema que você usa a ler.

› O que é Open Graph?

Open Graph é um conjunto de meta tags og:, criado pelo Facebook, que diz às redes sociais e aos apps de mensagem qual título, descrição e imagem mostrar quando alguém compartilha seu link. LinkedIn, Slack, Discord, WhatsApp, Telegram e muitos outros as leem, e o X (Twitter) recorre a elas quando faltam suas próprias tags twitter:.

› Qual deve ser o tamanho da imagem de compartilhamento?

Use 1200 × 630 pixels (proporção de cerca de 1,91:1) para cards grandes, mantenha o conteúdo importante longe das bordas e fique abaixo de alguns megabytes. A URL precisa ser absoluta e pública; um caminho relativo é resolvido com a URL canônica informada.

› Por que o título antigo ainda aparece quando compartilho o link?

As plataformas sociais guardam prévias de links em cache. Depois de atualizar as tags, peça à plataforma para buscar a página de novo com a ferramenta dela, como o Depurador de Compartilhamento do Facebook ou o Post Inspector do LinkedIn, ou acrescente um parâmetro de consulta à URL compartilhada.