Visualizador de Meta Tags e Open Graph
Pré-visualize e audite Meta Tags SEO, Open Graph e Twitter Cards em tempo real: truncamento SERP a 600px, Safe-Zone 1.91:1 e exportação de código Next.js.
Ferramentas OnlineEntradas de Metadados Sincronizadas
Ligação bidirecional em tempo real com auditoria de largura em píxeis
O Google Search Console recomenda títulos descritivos (>30 caracteres, ≤600px), etiquetas Meta Description únicas (>70 caracteres, ≤960px) e imagens de alta resolução 1200×630px (1.91:1) para Google Discover e cartões sociais.
Omni-Deck Multiplataforma
Réplicas CSS 1:1 de produção com injeção dinâmica de reticências (...)
Auscultadores Sem Fios Pro Studio com Cancelamento de Ruído...
Experimente áudio espacial sem perdas, bateria de 60 horas e cancelamento ativo de ruído híbrido adaptativo. Projetados para estúdio e conforto diário.
Exportador de Código para Frameworks Modernos
Snippets de metadados prontos para produção atualizados a cada milissegundo
export const metadata = {
title: 'Auscultadores Sem Fios Pro Studio com Cancelamento de Ruído | AudioTech',
description: 'Experimente áudio espacial sem perdas, bateria de 60 horas e cancelamento ativo de ruído híbrido adaptativo. Projetados para estúdio e conforto diário.',
alternates: {
canonical: 'https://store.example.com/audio/pro-studio-wireless-headphones',
},
openGraph: {
title: 'Auscultadores Sem Fios Pro Studio com Cancelamento de Ruído | AudioTech',
description: 'Experimente áudio espacial sem perdas, bateria de 60 horas e cancelamento ativo de ruído híbrido adaptativo. Projetados para estúdio e conforto diário.',
url: 'https://store.example.com/audio/pro-studio-wireless-headphones',
siteName: 'AudioTech Store',
type: 'website',
images: [
{
url: 'https://store.example.com/assets/og-pro-studio-1200x630.jpg',
width: 1200,
height: 630,
alt: 'Auscultadores Sem Fios Pro Studio com Cancelamento de Ruído | AudioTech',
},
],
},
twitter: {
card: 'summary_large_image',
title: 'Auscultadores Sem Fios Pro Studio com Cancelamento de Ruído | AudioTech',
description: 'Experimente áudio espacial sem perdas, bateria de 60 horas e cancelamento ativo de ruído híbrido adaptativo. Projetados para estúdio e conforto diário.',
images: ['https://store.example.com/assets/og-pro-studio-1200x630.jpg'],
},
};Como Auditar Meta Tags e Cartões Open Graph
Fluxo de trabalho passo a passo para otimizar a taxa de cliques (CTR) nos motores de pesquisa e redes sociais
Crie um Título SERP Seguro em Píxeis
Escreva o seu título e acompanhe o Auditor de Truncamento em Píxeis. Mantenha o título entre 30 e 60 caracteres e abaixo de 600 píxeis para evitar cortes com "...".
Otimize a Meta Description para Mobile e Desktop
Coloque a sua proposta de valor principal nos primeiros 120 caracteres (680px) para dispositivos móveis e estenda até 155–160 caracteres (960px) para desktop.
Verifique a Safe-Zone da Imagem (1.91:1)
Ative a grelha Safe-Zone para inspecionar o corte CSS object-fit: cover. Mantenha textos e logótipos dentro da área central segura de 80%.
Inspecione os 5 Canais do Omni-Deck
Alterne entre Google SERP, Facebook (60/65 caracteres), X Twitter Card (70/200 caracteres), LinkedIn (119 caracteres) e Slack/Discord.
Valide o Emblema de Conformidade Google
Garanta que todos os indicadores Google Search Console estão verdes: Título > 30 caracteres, Meta Description > 70 caracteres e imagem 1200×630px.
Exporte para Next.js 14+, React ou HTML
Selecione a sua stack no Exportador de Código e copie o objeto export const metadata, o bloco React Helmet ou as etiquetas HTML clássicas com um clique.
Perguntas Frequentes (SEO em Português, Diacríticos, pt_PT / pt_BR e Open Graph)
Guia técnico sobre acentuação lusófona, configuração regional og:locale, partilha no WhatsApp e Next.js 14+
Q:Como os sinais diacríticos do português (ã, õ, ç, á, ê, ô) e as palavras longas afetam o limite de 600 píxeis no Google?
No Google SERP, o limite real do título é de 600 píxeis em fonte proporcional Arial 20px e não um número fixo de caracteres. Embora caracteres com til ou cedilha (ã, õ, ç) tenham a mesma largura em píxeis que as letras base, os títulos em português com iniciais maiúsculas podem atingir os 600px logo aos 53–56 caracteres.
Q:Qual é a diferença entre configurar og:locale="pt_PT" e og:locale="pt_BR" em plataformas lusófonas?
A propriedade og:locale informa as redes sociais sobre a variante linguística principal da página (pt_PT ou pt_BR). Em plataformas internacionais, deve definir o locale principal da rota atual e declarar a outra variante em og:locale:alternate, em total sincronia com os atributos hreflang="pt-PT" e hreflang="pt-BR".
Q:Como garantir que a miniatura og:image (1200×630px) aparece instantaneamente no WhatsApp, Facebook e LinkedIn?
Utilize sempre um URL absoluto com HTTPS, proporção 1.91:1 (1200×630 píxeis), formato otimizado (JPG/WebP abaixo de 300 KB) e inclua as propriedades og:image:width="1200" e og:image:height="630". Isto garante que o primeiro utilizador a partilhar o link vê a imagem imediatamente.
Q:Por que motivo o Facebook corta a og:description aos ~65 caracteres enquanto o Google Desktop permite ~160 caracteres?
Nos cartões modernos do feed do Facebook, a bandeja inferior destaca o og:title em negrito (~60 caracteres) e reserva apenas uma linha curta (~65 caracteres) para a og:description. Por isso, coloque sempre a mensagem principal no título e na imagem.
Q:Como funciona a grelha Safe-Zone 1.91:1 contra o corte automático CSS object-fit: cover?
Quando uma imagem quadrada (1:1) ou vertical (9:16) é usada num cartão social 1.91:1, as plataformas cortam até 47% da altura nas margens superior e inferior. Manter o logótipo e o texto dentro da zona segura central de 960×504 píxeis impede qualquer corte acidental.
Q:Os títulos e URLs testados neste visualizador estão protegidos em conformidade com o RGPD e a LGPD?
Sim, a 100%. Todo o processamento de píxeis, simulação de proporções e exportação de código para Next.js 14+, React Helmet e HTML ocorre exclusivamente no seu navegador (Client-Side), sem qualquer transmissão de dados para servidores externos.
- Wpx(S): Largura acumulada em píxeis da cadeia S, calculada através das larguras proporcionais dos glifos ω20px(ci) e do fator tipográfico κfont.
- ROG: Proporção canónica Open Graph (1200 × 630 píxeis ≈ 1.91:1) necessária para a apresentação de cartões sociais sem cortes.
- Δcrop: Percentagem vertical cortada pela propriedade CSS
object-fit: coverquando a proporção de origem Rsource < 1.91.
O que é Visualizador de Meta Tags e Open Graph?
Um dos problemas mais frustrantes na publicação web ocorre quando partilha uma página nova numa rede social e a plataforma guarda em memória cache um título cortado ou uma imagem desformatada, recusando-se a atualizar a miniatura durante dias. Este validador preventivo elimina esse risco de raiz. Permite-lhe simular localmente a leitura que os robôs de indexação farão da sua página, garantindo que os textos respeitam a barreira dos 600 píxeis da pesquisa Google e que os elementos gráficos cumprem a proporção exata de 1.91:1, fornecendo o código final pronto para colar no seu projeto antes do lançamento oficial.
Cenário Prático: Lançamento de um Portal de Notícias
Um programador web em Lisboa está a finalizar o desenvolvimento de um novo portal de notícias desportivas. É imperativo que os artigos partilhados nas redes sociais apresentem fotografias de grande formato perfeitamente enquadradas para atrair leitores. Ele cola o título de uma notícia de última hora, o resumo e a hiperligação da fotografia de capa nos campos sincronizados. A matriz de verificação alerta-o imediatamente que o título excede os limites de visualização nos ecrãs de telemóvel. Após encurtar o texto, ele analisa a pré-visualização para confirmar que o rosto do jogador na fotografia não sofre cortes laterais. Por fim, acede à secção de exportação e copia o código limpo diretamente para o sistema do jornal.
Painel de Controlo de Otimização
| Módulo do Sistema | Função Técnica | Vantagem Operacional |
|---|---|---|
| Auditor de Corte (600px) | Mede a largura exata em píxeis dos títulos e descrições. | Impede que as suas manchetes principais fiquem incompletas na pesquisa Google. |
| Grelha de Enquadramento (1.91:1) | Sobrepõe linhas de corte virtuais sobre as imagens de destaque. | Garante que elementos importantes da fotografia não desapareçam na partilha. |
| Simulador Multi-Plataforma | Cria réplicas exatas dos cartões de partilha para computador e telemóvel. | Permite testar e corrigir o aspeto visual antes que as redes sociais guardem o link em cache. |
| Exportador de Código Limpo | Gera a sintaxe de programação pronta para sistemas web modernos. | Poupa tempo à equipa técnica e evita falhas de estrutura no código da página. |
História e Origem
Na génese da internet comercial, em meados dos anos 90, as etiquetas de cabeçalho foram a primeira forma de os criadores de sites informarem os motores de busca sobre o tema das suas páginas. A famosa etiqueta de palavras-chave foi durante muito tempo o segredo do posicionamento web, até que o uso abusivo levou os motores de busca a ignorá-la oficialmente em 2009. A verdadeira revolução na partilha de conteúdos ocorreu em 2010, quando as redes sociais introduziram protocolos gráficos dedicados. Esta tecnologia transformou simples hiperligações azuis em cartões visuais interativos, obrigando os programadores a otimizar tanto para robôs de pesquisa como para algoritmos sociais.