Pré-visualização de Open Graph e cartão social
Pré-visualize como um link se expande em cartão social no X, LinkedIn, Slack, Discord e Facebook a partir de um título, uma descrição, uma URL de imagem e uma URL de página.
Pré-visualização de Open Graph e cartão social — A Pré-visualização de Open Graph e cartão social mostra como seu link ficará ao ser compartilhado em plataformas sociais. Digite um título, uma descrição, uma URL de imagem e uma URL de página e, em seguida, alterne entre X, LinkedIn, Slack, Discord e Facebook para ver uma maquete ao vivo do cartão de link de cada um. Tudo é renderizado no seu navegador — seu texto nunca é enviado, e a URL da imagem é carregada diretamente do seu host para a pré-visualização, sem passar pelos nossos servidores.
O que é Pré-visualização de Open Graph e cartão social?
Esta é uma ferramenta visual de pré-visualização de cartões Open Graph (OG) e sociais. As meta tags do Open Graph e do Twitter Card informam às plataformas qual título, resumo e imagem exibir quando alguém compartilha seu link, e esta ferramenta reconstrói esse cartão de link para que você possa verificá-lo antes de publicar. Profissionais de marketing, redatores de conteúdo e desenvolvedores a usam ao lançar um post de blog, uma landing page ou uma página de produto para confirmar que o título não fica truncado, a imagem preenche o quadro e o domínio aparece corretamente. Escolha uma plataforma com o controle segmentado para ver seu layout específico: X, Facebook e LinkedIn renderizam uma grande imagem de banner com o título e a descrição abaixo, enquanto Slack e Discord mostram um cartão compacto com uma barra de destaque, o domínio e uma miniatura pequena. A linha do domínio é deduzida automaticamente da URL da página. Ela apenas simula o cartão a partir dos valores que você insere — não rastreia sua página ao vivo nem lê suas meta tags existentes.
Como usar Pré-visualização de Open Graph e cartão social
- Insira o título da página que deve aparecer como título do cartão.
- Escreva a descrição (a linha de resumo exibida abaixo do título).
- Cole uma URL de imagem absoluta (idealmente 1200×630) para carregar a imagem da pré-visualização.
- Insira a URL da página — o domínio exibido no cartão é deduzido dela.
- Alterne entre X, LinkedIn, Slack, Discord e Facebook para comparar o layout de cada plataforma.
- Ajuste o título e a descrição até que nada fique truncado e o cartão fique bom.
Exemplos
Cartão de post de blog
O título 'How to Bake Sourdough', uma descrição curta, uma imagem og.png e a URL https://blog.example.com/sourdough são renderizados como um grande cartão de banner no X, com o domínio blog.example.com acima do título.
Expansão no Slack/Discord
Ao mudar para o Slack, os mesmos valores aparecem como um cartão compacto com uma barra de destaque à esquerda, o domínio, o título e uma pequena miniatura quadrada à direita.
Imagem ausente
Deixe a URL da imagem em branco e a pré-visualização mostra um quadro de espaço reservado na proporção correta para que você ainda possa avaliar o espaçamento e o layout do texto.
Perguntas frequentes
- Quais plataformas posso pré-visualizar?
- Cinco: X (Twitter), LinkedIn, Slack, Discord e Facebook. X, Facebook e LinkedIn são desenhados como cartões de banner com imagem grande, enquanto Slack e Discord usam o estilo de expansão compacto com uma barra de destaque e uma miniatura pequena. Use o seletor de plataforma para alternar entre elas instantaneamente.
- Ela lê as tags Open Graph da minha página ao vivo?
- Não. Ela não rastreia nem busca sua página e não analisa suas meta tags existentes. Ela monta o cartão apenas a partir do título, da descrição, da URL de imagem e da URL de página que você digita, portanto é uma pré-visualização hipotética, e não um validador de uma página publicada.
- De onde vem a imagem da pré-visualização?
- A imagem é carregada diretamente pelo seu navegador a partir da URL de imagem que você insere — ela vai do host da própria imagem até o seu navegador, sem passar pelos nossos servidores. Se a imagem não aparecer, verifique se a URL é absoluta (começa com https://) e está publicamente acessível.
- Por que meu título ou descrição fica cortado no cartão?
- As plataformas sociais truncam títulos e descrições longos, e a pré-visualização imita isso limitando as linhas. Se o texto for cortado aqui, provavelmente também será cortado ao compartilhar, então encurte-o até caber.
- Meus dados são enviados a um servidor?
- Não. O título, a descrição e as URLs que você digita permanecem no seu navegador e nunca são enviados, registrados ou armazenados por nós. A única solicitação externa é o seu navegador buscar a imagem de pré-visualização na URL que você fornece, o que é um comportamento normal do navegador.
Ferramentas relacionadas
Gerador de tags hreflang
Gera tags link hreflang para uma página multilíngue a partir de uma lista de pares de idioma e URL, com um x-default opcional e uma tag autorreferente.
Gerador de JSON-LD
Gere dados estruturados JSON-LD válidos para os esquemas Article, Product, FAQPage, HowTo, LocalBusiness, Event, Recipe, BreadcrumbList e Organization a partir de um formulário simples.
Verificador de densidade de palavras-chave
Analise qualquer texto para contar a frequência das palavras e a densidade de palavras-chave como frases de 1, 2 ou 3 palavras, com um aviso de superotimização.
Gerador de meta tags
Gere meta tags de SEO, Open Graph e Twitter Card para a sua página a partir de um título, descrição, URL canônica, imagem, nome do site e tipo de cartão.