Gerador de Meta Tags e Open Graph

As tags que importam para SEO

<title>

O sinal on-page mais importante e o título clicável nos resultados. Coloque o assunto principal primeiro, use um título único por página e termine com a marca. O Google reescreve títulos que considera pouco úteis, longos demais ou cheios de palavras-chave.

meta description

Não é fator de ranqueamento, mas muitas vezes vira o snippet abaixo do título, então influencia os cliques. Resuma a página em 120–160 caracteres com um motivo para a visita.

canonical

<link rel="canonical"> indica a URL preferida quando o mesmo conteúdo pode ser acessado por vários endereços (parâmetros de rastreamento, http e https, barras no final).

robots

noindex tira a página dos resultados; nofollow diz aos robôs para não seguir os links dela. Index, follow é o padrão, então a tag só é escrita quando você muda isso.

viewport & charset

Não são tags de SEO propriamente, mas toda página precisa delas: UTF-8 e um viewport responsivo são pré-requisitos para a indexação mobile-first.

keywords

Ignorada pelo Google e pelo Bing no ranqueamento há mais de uma década. Inclua só se uma busca interna ou outro sistema a lê.

Open Graph: como os links aparecem ao serem compartilhados

Open Graph é o protocolo criado pelo Facebook e hoje lido por quase todas as plataformas: LinkedIn, Slack, Discord, WhatsApp, Telegram, iMessage, Pinterest e muitas outras. As tags essenciais são og:title, og:description, og:image, og:url e og:type; og:site_name e og:locale refinam o card.

A imagem faz ou desfaz o card. Use uma URL absoluta https://, 1200 × 630 pixels (proporção 1,91:1), com menos de 5 MB, em JPEG, PNG ou WebP, e mantenha textos e logos longe das bordas, porque cada plataforma corta de um jeito. As plataformas guardam os cards em cache: depois de mudar as tags, atualize-os com o Sharing Debugger do Facebook, o Post Inspector do LinkedIn ou compartilhando a URL com uma query string.

Cards do Twitter / X

O X lê a própria tag twitter:card para escolher o layout — summary_large_image para imagem em largura total, summary para uma miniatura quadrada pequena — e twitter:site e twitter:creator para os @ do site e do autor. Para título, descrição e imagem, ele recorre às tags Open Graph, por isso o gerador só escreve twitter:title, twitter:description e twitter:image quando o Open Graph está desativado, evitando marcação duplicada.

Hoje o X mostra cards de imagem grande como a imagem com o título sobreposto e o domínio embaixo; descrições aparecem só nos cards summary, e apenas em alguns clientes.

Tamanho do título: caracteres versus pixels

O Google corta títulos pela largura, não pela contagem de caracteres: no desktop o limite é de cerca de 600 pixels numa fonte parecida com Arial de 20 pixels, o que cabe uns 50–60 caracteres dependendo das letras — "WWW" é três vezes mais largo que "iii". O contador mede o título nessa fonte no seu navegador, então reflete as suas palavras de verdade. Descrições são cortadas em cerca de 920 pixels, aproximadamente 155–160 caracteres no desktop e menos no celular.

O corte não é uma penalidade — só esconde o fim do texto —, mas colocar as palavras importantes no começo garante que sejam vistas. Faça o título e a descrição corresponderem ao conteúdo visível; assim o Google tende a mantê-los sem alteração.

Onde colocar as tags

Todas essas tags ficam dentro do elemento <head> da página e precisam estar no HTML que o servidor envia: os robôs de prévia de link não executam JavaScript, então tags adicionadas por código no cliente são invisíveis para Facebook, LinkedIn e X. Em frameworks como Next.js, Nuxt ou Astro, use as APIs de metadados deles para renderizá-las no servidor. Todo valor de atributo passa por escape de HTML, então aspas e "e" comerciais nos seus títulos não quebram a marcação.

Combine isso com um robots.txt que deixe os robôs acessarem suas páginas, um sitemap XML listando suas URLs canônicas e um favicon para que seu resultado mostre o seu ícone.