Como Criar Meta Tags SEO (2026): Guia Completo com Exemplos Prontos
Meta tags são o ponto com maior ROI em SEO on-page: uma boa meta description pode dobrar o CTR sem mexer no conteúdo; um Open Graph bem configurado multiplica compartilhamento em rede social. Este guia cobre todas as essenciais, com código pronto pra copiar em Next.js, WordPress e HTML puro.
Por Vitor Morais
Fundador do MochaLabz ·
Gere meta tags em segundos
Title, description, Open Graph e Twitter Card otimizados — prontos para copiar.
Usar gerador →Meta tags são o conjunto de instruções invisíveis dentro do <head> do HTML que dizem a navegadores, buscadores e redes sociais como tratar sua página. Não aparecem para o usuário diretamente, mas controlam tudo: como o link aparece no Google, como o preview fica no WhatsApp, se a página é indexada, se o Chrome escurece a barra de status no tema. Uma página sem meta tags bem feitas é como um livro sem capa e contracapa — existe, mas ninguém sabe o que tem dentro.
Este guia cobre as meta tags que importam em 2026, com código pronto pra copiar, implementação em diferentes stacks e o que abandonar (spoiler: meta keywords).
As três meta tags obrigatórias
Toda página web precisa de pelo menos:
1. Charset
Deve ser a primeira tag dentro do <head>. Sem ela, o navegador chuta a codificação — o que dá errado em português com acentos.
<meta charset="UTF-8">2. Viewport
Essencial para responsividade. Sem ela, o Chrome mobile renderiza a página em 980 pixels e encolhe — visual quebra.
<meta name="viewport" content="width=device-width, initial-scale=1">3. Title
Aparece na aba do navegador, no SERP e no preview de compartilhamento. Limite prático: 50–60 caracteres.
<title>Como Criar Meta Tags SEO (2026): Guia Completo</title>Contexto
Meta description: o elemento de maior CTR
Os dois renglons de texto cinza abaixo do title no SERP. Não afeta ranqueamento direto, mas é o que decide se o usuário clica. Limite: 140–155 caracteres para caber sem truncar.
<meta
name="description"
content="Guia completo de meta tags SEO: title, description,
Open Graph, Twitter Card, canonical e schema.org — com
código pronto para copiar."
/>Fórmula de meta description que converte
- Primeira frase: promessa clara do que a página entrega.
- Segunda frase: detalha ou lista elementos que geram curiosidade.
- Palavra-chave principal nas primeiras 60 palavras.
- Chamada implícita à ação (“veja os exemplos”, “aprenda”, “aplique hoje”).
Meta robots: controle de indexação
Define se a página deve ser indexada e seus links seguidos. Os valores mais usados:
| Critério | O que faz | Quando usar |
|---|---|---|
| index, follow | Indexar e seguir links (padrão) | Páginas públicas |
| noindex | Não indexar | Páginas de obrigado, filtros, search |
| nofollow | Não seguir links | Comentários não moderados |
| noindex, nofollow | Não indexar e não seguir | Área privada, staging |
| noarchive | Não mostrar cache no Google | Conteúdo que muda frequente |
| noimageindex | Não indexar imagens | Fotos privadas embutidas |
<meta name="robots" content="index, follow">
<meta name="robots" content="noindex, nofollow">
<meta name="robots" content="max-snippet:160, max-image-preview:large">Atenção
noindex no robots.txt é interpretado de forma diferente de noindex na meta tag. Meta tag é o caminho correto para desindexar uma página específica. Nunca combine com Disallow no robots.txt (se o bot não consegue rastrear, não lê a meta tag e continua indexando).Canonical: resolvendo duplicação
Quando o mesmo conteúdo aparece em múltiplas URLs (www vs não-www, com/sem barra final, com/sem parâmetros de tracking), canonical diz ao Google qual é a URL preferida.
<link rel="canonical" href="https://seusite.com/artigo-principal">Use sempre URL absoluta. Aponte para a URL que você quer ranqueada. Casos comuns:
- Página com parâmetros UTM (canonical aponta pra versão sem UTM).
- Conteúdo syndicado em vários sites (canonical aponta pro original).
- Paginação (canonical pode apontar pra primeira página ou ser self-referential em cada).
- E-commerce com variantes (canonical aponta pra variante padrão).
Open Graph: preview em redes sociais
Criado pelo Facebook em 2010, hoje respeitado por LinkedIn, WhatsApp, Telegram, Discord, Slack, iMessage e muito mais. Sem OG, o preview fica quebrado ou mostra dados aleatórios.
<meta property="og:type" content="article">
<meta property="og:title" content="Como Criar Meta Tags SEO (2026)">
<meta property="og:description" content="Guia completo de meta tags com código pronto.">
<meta property="og:url" content="https://seusite.com/meta-tags-seo">
<meta property="og:image" content="https://seusite.com/og/meta-tags.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:site_name" content="MochaLabz">
<meta property="og:locale" content="pt_BR">Dica
Twitter Card (X Card): preview em X
Protocolo paralelo do Twitter/X. Se não definir, o X cai pra Open Graph — o que funciona mas é subotimal. Vale a explicitude.
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@seuperfil">
<meta name="twitter:creator" content="@autor">
<meta name="twitter:title" content="Como Criar Meta Tags SEO (2026)">
<meta name="twitter:description" content="Guia completo com código pronto.">
<meta name="twitter:image" content="https://seusite.com/og/meta-tags.png">
<meta name="twitter:image:alt" content="Capa sobre meta tags SEO">Schema.org: rich snippets e AI Overviews
Schema.org é marcação estruturada que informa ao Google (e às IAs) tipo de conteúdo, autor, data, rating. Habilita rich snippets no SERP (estrelas, FAQ expansível, preço). Em 2026, também alimenta respostas em AI Overviews.
Formato recomendado: JSON-LD dentro de <script type=“application/ld+json”>.
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "Como Criar Meta Tags SEO (2026)",
"description": "Guia completo de meta tags...",
"image": "https://seusite.com/og/meta-tags.png",
"author": {
"@type": "Person",
"name": "Vitor Morais"
},
"publisher": {
"@type": "Organization",
"name": "MochaLabz",
"logo": {
"@type": "ImageObject",
"url": "https://seusite.com/logo.png"
}
},
"datePublished": "2026-04-17",
"dateModified": "2026-04-17"
}
</script>Outras meta tags úteis
Theme color (Chrome mobile)
<meta name="theme-color" content="#3B82F6">
<meta name="theme-color" content="#1E293B" media="(prefers-color-scheme: dark)">Apple touch icon
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">Hreflang (multi-idioma)
<link rel="alternate" hreflang="pt-BR" href="https://seusite.com/">
<link rel="alternate" hreflang="en" href="https://seusite.com/en/">
<link rel="alternate" hreflang="es" href="https://seusite.com/es/">
<link rel="alternate" hreflang="x-default" href="https://seusite.com/">Prefetch/preconnect
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="dns-prefetch" href="https://www.google-analytics.com">Template completo mínimo
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Como Criar Meta Tags SEO (2026) | MochaLabz</title>
<meta name="description" content="Guia completo com código pronto pra copiar.">
<link rel="canonical" href="https://seusite.com/meta-tags-seo">
<meta name="robots" content="index, follow">
<!-- Open Graph -->
<meta property="og:type" content="article">
<meta property="og:title" content="Como Criar Meta Tags SEO (2026)">
<meta property="og:description" content="Guia completo com código pronto.">
<meta property="og:image" content="https://seusite.com/og/meta-tags.png">
<meta property="og:url" content="https://seusite.com/meta-tags-seo">
<!-- Twitter/X -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Como Criar Meta Tags SEO (2026)">
<meta name="twitter:description" content="Guia completo com código pronto.">
<meta name="twitter:image" content="https://seusite.com/og/meta-tags.png">
<!-- Favicon e tema -->
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<meta name="theme-color" content="#3B82F6">
</head>
<body>
<!-- conteúdo -->
</body>
</html>Implementação em Next.js (App Router)
// app/meta-tags-seo/page.tsx
import type { Metadata } from "next";
export const metadata: Metadata = {
title: "Como Criar Meta Tags SEO (2026) | MochaLabz",
description: "Guia completo com código pronto pra copiar.",
keywords: ["meta tags", "seo", "open graph"],
alternates: {
canonical: "https://seusite.com/meta-tags-seo",
languages: {
"en-US": "https://seusite.com/en/meta-tags-seo",
},
},
openGraph: {
type: "article",
title: "Como Criar Meta Tags SEO (2026)",
description: "Guia completo com código pronto.",
images: [
{
url: "https://seusite.com/og/meta-tags.png",
width: 1200,
height: 630,
},
],
locale: "pt_BR",
siteName: "MochaLabz",
},
twitter: {
card: "summary_large_image",
title: "Como Criar Meta Tags SEO (2026)",
description: "Guia completo com código pronto.",
creator: "@seuperfil",
},
robots: {
index: true,
follow: true,
googleBot: {
"max-image-preview": "large",
},
},
};Implementação em WordPress
Plugins cobrem 95% do caso. Yoast SEO e Rank Math adicionam painel abaixo do editor com campos para title, description, OG, Twitter Card. Schema.org é gerado automaticamente. Evite configurar meta tags manualmente em WordPress — plugin faz melhor e mantém consistência.
Implementação em HTML puro / site estático
Se usa Astro, Hugo, Eleventy, Jekyll: cada um tem sistema de layouts que injeta meta tags por página. Evite hardcode; parametrize via frontmatter. Exemplo em Astro:
---
// src/layouts/BaseLayout.astro
const { title, description, image, canonical } = Astro.props;
---
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{title}</title>
<meta name="description" content={description}>
<link rel="canonical" href={canonical}>
<meta property="og:title" content={title}>
<meta property="og:description" content={description}>
<meta property="og:image" content={image}>
</head>Validação: como saber se está tudo certo
- Google Rich Results Test: valida schema.org, detecta erros de marcação.
- Facebook Sharing Debugger: preview real de OG tags em Facebook e LinkedIn; força refresh de cache.
- Twitter Card Validator: preview real para X (pode exigir login atualizado em 2025).
- LinkedIn Post Inspector: preview específico de LinkedIn.
- Google Search Console: relatório de Melhorias mostra erros de marcação após indexação.
- Lighthouse: auditoria de SEO faz checklist automático básico.
Erros clássicos
- Title e description iguais em várias páginas: canibalização de ranqueamento e indexação confusa.
- og:image com dimensões erradas: preview quebra ou fica minúsculo em LinkedIn.
- og:image não pública: URL atrás de autenticação, CDN que bloqueia bots ou redirecionamento.
- Canonical apontando pra si mesmo em página paginada: pode perder autoridade.
- Canonical com URL relativa: sempre use absoluta com protocolo.
- Esquecer charset ou colocar depois da title: acentos quebram.
- Meta keywords: zero benefício, risco de parecer spam.
- Description longa demais (acima de 300 chars): Google trunca e pode reescrever.
Dinâmica vs estática: quando cada uma importa
| Critério | Quando usar |
|---|---|
| Estáticas | Landing pages, páginas institucionais, homepage |
| Dinâmicas por template | Blog (cada post), produto (cada SKU), categoria (cada listing) |
| Dinâmicas por idioma | Sites multi-idioma com hreflang |
| Dinâmicas por usuário | Raro; só em perfis públicos |
Checklist antes de publicar uma página
- Title entre 50–60 caracteres com keyword principal?
- Meta description entre 140–155 caracteres?
- Canonical absoluto e correto?
- Open Graph completo (type, title, description, image, url)?
- og:image 1200×630 público e renderiza bem em preview?
- Twitter Card configurado (mínimo: card, title, description, image)?
- Schema.org relevante ao tipo de conteúdo?
- Meta robots correto (index/noindex consciente)?
- Charset e viewport presentes e no topo?
- Validado em Rich Results Test, Facebook Debugger, Twitter Validator?
Meta tags em uma frase
Meta tags são as instruções invisíveis que decidem como sua página é vista no Google, compartilhada em redes e indexada no índice de busca. Cinco minutos configurando bem cada página entregam ganhos de CTR e alcance que duram anos. Um dos investimentos com maior relação custo-benefício em SEO.
Perguntas frequentes
Meta tags ainda importam em 2026?+
Muito. Title e meta description continuam sendo os elementos com maior impacto em CTR no SERP. Open Graph e Twitter Card controlam o preview em redes sociais. Canonical resolve conteúdo duplicado. Schema.org alimenta rich snippets e agora AI Overviews. Meta tags são SEO on-page puro e seguem nos top 5 sinais algorítmicos em 2026.
Onde as meta tags ficam no HTML?+
Todas dentro da tag <head>, antes do fechamento </head>. Algumas (title, meta description, charset, viewport) são obrigatórias; outras (Open Graph, Twitter Card, schema.org) são opcionais mas muito recomendadas. A ordem não importa para crawlers; importa para legibilidade humana em code review — agrupe por função.
Quantas meta tags são obrigatórias?+
Três são fundamentais: <title>, <meta charset> e <meta viewport>. Uma quarta, <meta description>, não é obrigatória pelo Google mas é de facto esperada — sem ela, o algoritmo monta um snippet random. Em 2026, também é praticamente obrigatório ter Open Graph para compartilhamentos em rede social e canonical em sites com múltiplas URLs pro mesmo conteúdo.
Preciso de meta keywords?+
Não. A meta keywords foi útil nos anos 2000 mas o Google a ignora desde 2009 e Bing confirma ignorar desde 2014. Pior: listar keywords pode sinalizar tentativa de keyword stuffing. Pode manter para outros buscadores menores (Yandex, Baidu), mas em 2026 o custo supera o benefício em 99% dos casos. Remova das suas templates.
Qual a diferença entre title tag e Open Graph title?+
Title tag (<title>) aparece no SERP do Google e na aba do navegador. Open Graph title (<meta property='og:title'>) aparece em compartilhamentos em Facebook, LinkedIn, WhatsApp. Podem ser iguais, mas costumam variar: title pode priorizar keywords SEO; OG title pode ser mais direto/emocional para o leitor em rede social. Sempre tenha os dois.
Como testar se minhas meta tags estão corretas?+
Quatro ferramentas cobrem tudo. (1) View Source do navegador (Ctrl+U) para inspeção básica. (2) Google Rich Results Test para schema.org e estrutura. (3) Facebook Sharing Debugger para Open Graph. (4) Twitter Card Validator (via card validator ou X Dev Portal). Rode os quatro antes de publicar páginas importantes.
Meta tags funcionam em Single Page Apps (SPA)?+
Parcialmente. SPAs sem renderização server-side (React puro, Vue puro) têm meta tags apenas no HTML inicial — mudanças dinâmicas via react-helmet ou equivalente funcionam para navegador mas crawlers podem ignorar. Para SEO sério, use SSR ou SSG: Next.js, Remix, Nuxt, SvelteKit. Todos permitem meta tags únicas por página e são lidas corretamente pelo Googlebot.
Meta charset ainda é necessário se eu uso UTF-8 em todo lugar?+
Sim. <meta charset='UTF-8'> deve ser a PRIMEIRA tag dentro do <head>. Sem ela, o navegador tenta detectar a codificação dos primeiros 1024 bytes; pode acertar, pode errar. Especialmente em português com acentos, caracteres podem aparecer como ? ou �. Adicionar a meta charset é zero custo e evita bugs visíveis em 100% dos casos.
Artigos relacionados
Title Tag SEO (2026): O Que É, Como Escrever e Aumentar CTR no Google
Guia completo da title tag: anatomia, tamanho ideal, fórmulas que aumentam CTR, por que o Google reescreve títulos e implementação em WordPress, Next.js e e-commerce.
Open Graph Protocol: Guia Completo 2026 (Facebook, LinkedIn, WhatsApp)
Guia definitivo de Open Graph: tags essenciais, og:type por tipo de conteúdo, dimensões corretas de og:image por rede, implementação em Next.js/WordPress/HTML puro, debug por plataforma e os 7 erros que destroem o preview.
Twitter Cards / X Cards: Guia Completo de Configuração e Validação (2026)
Configure Twitter/X Cards corretamente: summary, summary_large_image, app, player, dimensões por tipo, fallback Open Graph, implementação em Next.js e WordPress, validação e os 10 erros mais comuns.
Meta Description: Como Escrever para Aumentar o CTR no Google (2026)
Aprenda tamanho ideal por device, fórmula que converte, gatilhos psicológicos comprovados, exemplos fraco vs forte e por que o Google reescreve sua description (e o que fazer).