BrowserTools
Início / Validadores / Pré-visualização de links

Pré-visualização de links

Vê como fica um link para a tua página quando é partilhado nas redes sociais e na pesquisa, e corrige as etiquetas em falta.

Mantido por BrowserTools · Última atualização 2026-09-29

A carregar Pré-visualização de links… Se nada acontecer, ativa o JavaScript.

Quando alguém cola um link no WhatsApp, no Slack ou numa publicação do LinkedIn, a aplicação vai buscar a página em segundo plano e monta um pequeno cartão a partir de meia dúzia de etiquetas no head: og:title, og:description, og:image e og:url do protocolo Open Graph, e twitter:card para o X. Se essas etiquetas faltarem, forem demasiado longas ou apontarem para um caminho relativo, o cartão sai como um URL nu, um título com a cauda "| Nome da empresa" ou uma imagem cortada no sítio errado. Esta ferramenta mostra-te o resultado antes de publicares. Cola o código-fonte da página (ou só a secção head) e ela lê todas as meta tags com o próprio analisador de HTML do navegador, descobre que valor cada plataforma vai usar e desenha lado a lado um cartão de pré-visualização para a pesquisa do Google, Facebook, X, LinkedIn, WhatsApp, Slack e Discord.

Perguntas frequentes

Porque não posso simplesmente escrever o meu URL?
Uma página web não pode ir buscar outro site, porque as regras de mesma origem do navegador o impedem, a não ser que esse site o autorize explicitamente, e muito poucos o fazem. Contornar isso exigiria um servidor que descarregasse a página por ti, e este site faz tudo de propósito no teu dispositivo. Abre a tua página, usa Ver código-fonte da página (Ctrl+U ou Cmd+Option+U), copia e cola aqui. Só a secção head interessa, por isso podes colar apenas essa parte.
Qual é o melhor tamanho para a og:image?
1200 por 630 píxeis, uma proporção de 1,91:1, é o tamanho que o Facebook recomenda e funciona bem no LinkedIn, WhatsApp, Slack e Discord. O X corta os cartões grandes em 2:1, por isso afasta texto importante e caras das margens de cima e de baixo. Imagens com menos de 600 píxeis de largura aparecem como miniatura quadrada pequena em várias plataformas, e o Facebook ignora imagens abaixo de 200 por 200. Usa JPG ou PNG com menos de cerca de 300 KB se te importa o WhatsApp, e nunca SVG.
De que etiquetas preciso mesmo?
Para um cartão fiável em todo o lado: og:title, og:description, og:image (URL absoluto), og:url (o endereço canónico) e twitter:card com o valor summary_large_image. og:type, og:site_name, og:image:width, og:image:height e og:image:alt são extras recomendados. O X lê as etiquetas Open Graph como alternativa, por isso twitter:title, twitter:description e twitter:image só são precisas quando queres outro texto ou outra imagem no X.
Porque é que o Google mostra um título diferente do Facebook?
A pesquisa do Google não usa o Open Graph. Monta o resultado a partir do elemento title do HTML e da meta description, e pode reescrever qualquer um deles se achar que outra parte da página a descreve melhor. As aplicações sociais preferem og:title e og:description. É por isso que a pré-visualização do Google lê aqui o elemento title, enquanto os outros cartões leem os valores Open Graph.
Corrigi as etiquetas mas o Facebook ou o LinkedIn continuam a mostrar a pré-visualização antiga. Porquê?
As plataformas guardam as pré-visualizações em cache, muitas vezes durante dias ou semanas. O Sharing Debugger do Facebook e o Post Inspector do LinkedIn deixam-te introduzir o URL e forçar uma nova leitura. O X atualiza a cache sozinho, normalmente dentro de uma semana. O WhatsApp e o Slack guardam em cache por conversa, por isso partilhar o link com um parâmetro como ?v=2 é uma forma rápida de ver a versão nova.
Porque é que og:image e og:url têm de ser URLs absolutos?
Os leitores destas plataformas tratam as etiquetas como texto simples e muitos não resolvem caminhos em relação ao endereço da página. Um valor como /images/card.jpg pode funcionar numa plataforma e falhar em silêncio noutra. Usa o endereço completo, a começar por https://. A ferramenta assinala valores relativos e sem protocolo e, se indicares o URL da página, escreve a versão absoluta resolvida no bloco de etiquetas corrigido.
As pré-visualizações são exatas ao píxel?
São aproximações próximas do aspeto atual de cada plataforma, desenhadas com os estilos deste site, para poderes avaliar o comprimento do texto, o corte da imagem e os elementos que aparecem. As aplicações reais mudam de design com frequência, e o corte do texto depende da largura do ecrã, da letra e da língua. Os limites usados (cerca de 60 caracteres nos títulos do Google, 160 nas descrições, 600 píxeis para imagens grandes) seguem as indicações publicadas pelas plataformas e o comportamento observado.
O meu HTML ou a minha imagem são enviados para algum lado?
Não. O HTML é analisado com o DOMParser do próprio navegador, que nunca corre scripts nem carrega imagens ou folhas de estilo do código colado. Uma imagem carregada é mostrada a partir de um URL de objeto local e nunca sai do teu dispositivo. A página não faz nenhum pedido ao teu site nem a qualquer rede social.

Sobre Pré-visualização de links

A página não consegue ir buscar o teu URL por ti: os navegadores bloqueiam esse tipo de pedido entre sites, e este site mantém tudo no teu dispositivo, por isso também nunca contacta o teu servidor. Isso significa que as imagens remotas não são descarregadas. Os cartões mostram um marcador com o endereço da imagem e, se carregares o ficheiro da imagem, vês como cada aplicação a corta, 1,91:1 nos cartões grandes, 2:1 no X e quadrada nas miniaturas pequenas, com o tamanho real em píxeis e o peso do ficheiro. Se ainda estás a desenhar a página, muda para o formulário e escreve diretamente o título, a descrição, o URL e o endereço da imagem, e acompanha os contadores à medida que te aproximas dos limites.

Por baixo das pré-visualizações, uma lista de verificações explica o que correria mal e porquê: etiquetas Open Graph em falta, um valor de twitter:card que o X não reconhece, títulos acima dos cerca de 60 caracteres do Google, descrições com mais de 160, URLs relativos ou sem protocolo, imagens SVG que nenhuma aplicação mostra, imagens com menos de 600 píxeis de largura que passam a miniatura pequena, etiquetas duplicadas que cada aplicação resolve à sua maneira e etiquetas fora do head, onde alguns leitores já deixaram de ler. No fim, gera um bloco de etiquetas limpo e corrigido, com URLs absolutos, dimensões da imagem declaradas e os atributos certos, pronto a copiar para o teu modelo. Quando as novas etiquetas estiverem publicadas, lembra-te de que o Facebook, o LinkedIn e o X guardam as pré-visualizações em cache, por isso usa as ferramentas de depuração deles para forçar uma nova leitura.

O Open Graph nasceu para um botão Gosto

O Facebook apresentou o protocolo Open Graph na sua conferência de programadores f8, em abril de 2010, juntamente com o botão Gosto que qualquer site podia incorporar. A ideia era transformar páginas web comuns em objetos do grafo social do Facebook: uma página sobre um filme podia declarar-se como filme, com título, imagem e URL canónico, e pôr-lhe um Gosto ligava-te a esse objeto tal como a uma página de fãs.

O protocolo foi pensado para ser simples de propósito, e foi buscar o atributo property ao RDFa para que os editores só tivessem de acrescentar algumas meta tags. Foi essa simplicidade que o levou muito para lá do Facebook. O Twitter lançou os seus Cards em 2012, mas escolheu recorrer aos valores Open Graph quando faltavam as etiquetas twitter:, e mais tarde o LinkedIn, o Pinterest, o Slack, o Discord, o WhatsApp, o iMessage e o Telegram passaram todos a ler as mesmas etiquetas og:. Hoje, um padrão criado para alimentar um único botão decide discretamente o aspeto de quase todos os links partilhados na internet.

Ferramentas relacionadas

Analisador de URL

Divide um endereço web nas suas partes: domínio, caminho, parâmetros e mais.

Gerador de llms.txt e robots.txt para IA

Cria um ficheiro llms.txt que explica o teu site aos assistentes de IA e regras de robots.txt para permitir ou bloquear os crawlers de IA.

Gerador de favicon

Transforma qualquer imagem nos pequenos ícones de site de que os navegadores precisam, em todos os tamanhos.

Formatador de SQL

Arruma uma consulta SQL para que seja fácil de ler, ou compacta-a numa só linha.
Apoiar