Softonic

Gerador de Meta Tags

Etapa 1 / 3
SEO básico
0/60
0/160
Robots
Próximo

Preencha um formulário, título da página, descrição, URL canônica, imagem social, autor, nome do site, conta do Twitter, e o gerador emite um bloco pronto para colar de meta tags cobrindo os fundamentos de SEO, Open Graph (para Facebook, LinkedIn, Discord, Slack), Twitter Card, favicon/icon touch da Apple, e JSON-LD opcional do Schema.org para Artigo ou Produto. Útil quando você está configurando um site estático manualmente ou adicionando metadados a um CMS que expõe apenas um editor de <head> bruto.

Como construir o snippet do cabeçalho

  1. 1

    Insira os metadados da página

    Título, descrição, URL canônica, autor, nome do site.

  2. 2

    Adicione a URL da imagem social

    Usada para `og:image` e `twitter:image`. 1200×630 é ideal.

  3. 3

    Escolha opções

    Tipo de cartão do Twitter, diretrizes de robôs, cor do tema, tipo do Schema.org.

  4. 4

    Copie a saída

    Um bloco de tags HTML `<meta>` pronto para colar entre `<head>...</head>`.

O que o gerador produz

<!-- Meta Primária -->
<title>Título da Página, Nome do Site</title>
<meta name="description" content="Um resumo de 150 caracteres do conteúdo da página.">
<link rel="canonical" href="https://example.com/page">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="index, follow">

<!-- Open Graph -->
<meta property="og:type" content="article">
<meta property="og:url" content="https://example.com/page">
<meta property="og:title" content="Título da Página">
<meta property="og:description" content="Mesma descrição ou uma otimizada para social">
<meta property="og:image" content="https://example.com/og-image.jpg">
<meta property="og:site_name" content="Nome do Site">

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@siteaccount">
<meta name="twitter:creator" content="@authoraccount">
<meta name="twitter:title" content="Título da Página">
<meta name="twitter:description" content="Descrição">
<meta name="twitter:image" content="https://example.com/og-image.jpg">

<!-- Ícones -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<meta name="theme-color" content="#0b5ed7">

Orientação campo a campo

  • Título: 50–60 caracteres. Inclua a palavra-chave principal. Coloque a marca no final: Título da Página, Marca.
  • Descrição: 140–160 caracteres. Lê-se bem isoladamente. Evite textos padrão que se repetem em várias páginas.
  • Canônica: URL absoluta, incluindo https://. Corresponde a og:url.
  • Imagem OG: mínimo de 1200×630 px (a proporção preferida pelo Facebook 1.91:1). JPG ou PNG. Abaixo de 8 MB.
  • Cartão do Twitter: summary_large_image se você tiver uma boa imagem; summary para miniatura pequena.
  • Robôs: index, follow para páginas públicas; noindex, nofollow para conteúdo de teste ou raso.

Extras opcionais

  • JSON-LD para Artigo ou Produto permite que o Google exiba resultados ricos (autor, data de publicação, preço, estrelas de avaliação).
  • theme-color colore o chrome do navegador no Android Chrome e iOS Safari.
  • og:locale para sites multilíngues (por exemplo, en_US, es_ES).
  • Extras de og:type=article: article:published_time, article:author, article:section, article:tag.

Erros comuns que este gerador previne

  • Esquecer a tag de viewport. Sua página é exibida na largura de desktop em dispositivos móveis, nível de zoom 0.3.
  • Títulos diferentes em <title>, og:title e twitter:title. Cartões de compartilhamento inconsistentes.
  • URLs de imagem relativas em og:image. O Facebook não consegue resolvê-las; o cartão não é renderizado.
  • Faltando og:type. Funciona com valores padrão, mas o Facebook fica mais feliz com um valor explícito.

Perguntas frequentes

Tecnicamente, o Twitter recorre ao Open Graph se suas próprias tags estiverem ausentes, então se você definir apenas OG, o Twitter ainda renderizará um cartão. Adicionar tags específicas do Twitter permite personalizar a experiência (por exemplo, proporção de imagem diferente).

1200×630 px (1.91:1). Facebook e LinkedIn exibem isso em tamanho total; o Twitter corta para o cartão de resumo. Não coloque conteúdo crítico nas bordas, os 60% centrais são a zona segura.

Não. As páginas classificam bem sem ele. JSON-LD permite recursos de resultados ricos (cartões de receita, acordeões de FAQ, listagens de produtos) quando o tipo de conteúdo corresponde a um esquema do Schema.org. Adicione onde for apropriado.

Entre <head> e </head> no seu HTML, antes de quaisquer folhas de estilo ou scripts externos que possam atrasar o parser ao alcançá-los.

Não. Tudo é gerado localmente no seu navegador.

Ferramentas relacionadas

Referência da Tabela ASCII

Tabela ASCII completa de 0 a 127 com valores decimais, hexadecimais, octais e binários e notação de referência numérica HTML, incluindo NUL, LF e DEL.

Referência de Caracteres HTML

Lista pesquisável de entidades HTML, seus códigos nomeados e numéricos, e uma cópia com um clique para caracteres e símbolos especiais.

Referência de atalhos de teclado

Pesquise atalhos padrão documentados do VS Code, Chrome e Bash com GNU Readline no macOS, Windows e Linux.

Gerador de EditorConfig

Gere um arquivo .editorconfig com suas regras de estilo e tamanho de indentação, fim de linha, charset e espaços em branco para formatação consistente entre IDEs e editores.

Validador de Email

Valide um endereço de email: verificação de sintaxe RFC 5322, consulta de registro MX em tempo real, além de detalhes de parte local, domínio e comprimento. Nenhum email é enviado.

Conversor de Tamanho de Arquivo

Converta entre bytes, KB, MB, GB, TB e as unidades binárias IEC (KiB, MiB, GiB, TiB), combinando decimal e binário como preferir.

Ferramenta disponível em outros idiomas