Softonic

Prévia do Open Graph

Etapa 1 / 2
Próximo

Digite o título, a descrição, o nome do site, a URL da página e a URL da imagem, e esta ferramenta renderiza ao vivo um cartão de compartilhamento do Facebook e do X (Twitter) que se atualiza a cada tecla. É um ambiente de testes de design para as suas tags Open Graph: nada é buscado nem publicado, então você pode ensaiar o comprimento do título e o recorte da imagem até o cartão ficar certo, e depois copiar o texto para as suas tags og: reais.

Como a prévia é montada

  1. 1

    Digite os campos do cartão

    Título, nome do site, descrição, URL da página e URL da imagem. Cada campo corresponde a uma tag og:.

  2. 2

    Veja os cartões se atualizarem

    As simulações do Facebook e do X são renderizadas novamente enquanto você digita, usando o layout e o truncamento reais de cada plataforma.

  3. 3

    Adicione uma URL de imagem

    Cole um endereço de imagem https absoluto para ver o recorte; deixe vazio e o cartão do Facebook mostra um espaço reservado.

  4. 4

    Copie para as suas tags og:

    Quando o cartão ficar bom de ler, transfira o mesmo título, descrição e imagem para as tags meta da sua página.

No que cada campo se transforma

Campo Tag Open Graph Mostrado no cartão
Título og:title Título em negrito, truncado em uma linha
Descrição og:description Subtítulo cinza, limitado a duas linhas
Nome do site og:site_name Rótulo pequeno acima do título do Facebook
URL og:url O domínio é mostrado; o host o determina
URL da imagem og:image Recortada em 1.91:1 nos dois cartões

A ferramenta extrai o host da URL que você digita, então https://blog.example.com/post mostra blog.example.com no cartão.

Os dois cartões e como eles diferem

  • Facebook mostra a imagem recortada em 1.91:1, depois o domínio em versalete, o título em negrito em uma linha e a descrição em até duas linhas. Sem URL de imagem, ele renderiza um espaço reservado cinza, que é de longe a causa mais comum de um compartilhamento chapado e sem imagem por aí.
  • X (Twitter) mostra um cartão summary_large_image com cantos arredondados: a imagem em um recorte 2:1, o domínio, o título e a descrição embaixo.

Fazer o texto caber

  • Título: mire em 60 a 70 caracteres. O Facebook corta por volta de 88 e o X por volta de 70, então um título dentro de 70 permanece inteiro em todo lugar.
  • Descrição: mantenha abaixo de cerca de 160 caracteres; o cartão limita a duas linhas e descarta o resto.
  • Imagem: projete em 1200 x 630 px para que o recorte 1.91:1 fique limpo, e hospede em uma URL https:// absoluta. Um caminho relativo não vai carregar quando as tags entrarem no ar.
  • Nome do site: curto e só a marca, sem slogan. Ele fica acima do título como um rótulo.

Lista de verificação do dia da publicação

  • [ ] Título abaixo de 70 caracteres
  • [ ] Descrição abaixo de 160 caracteres
  • [ ] A URL da imagem é absoluta (https, não // nem um caminho relativo)
  • [ ] Imagem projetada em 1200 x 630 px, JPG ou PNG
  • [ ] A URL corresponde à canônica que você vai publicar
  • [ ] Texto copiado para as tags og: reais e depois verificado com um validador

Perguntas frequentes

Não. Você digita os campos do cartão manualmente e a ferramenta simula como eles ficariam. É um ambiente de testes de design, não um scraper, então também funciona antes de a página estar no ar. Para ler as tags já presentes em uma página, cole o HTML dessa página no Validador de Open Graph.

Um cartão do Facebook e um cartão de imagem grande do X (Twitter). Eles usam os mesmos valores Open Graph, então um cartão que fica bom de ler aqui é uma boa referência para LinkedIn, Slack, Discord e outros apps que desdobram links a partir das mesmas tags og:, cada um com limites ligeiramente diferentes.

Porque o campo de imagem está vazio, ou a URL que você colou não é um endereço https absoluto funcional. Adicione uma URL de imagem https completa e o recorte aparece na hora. Quando entrar no ar, mantenha o arquivo abaixo de 5 MB e sirva com um content-type público image/*.

Cada plataforma trunca em um ponto diferente (Facebook perto de 88 caracteres, X perto de 70), e o cartão simulado espelha isso. Reduza o título para 60 a 70 caracteres e ele permanecerá inteiro em todas as plataformas.

Ferramentas relacionadas

Verificador de Comprimento de Meta Descrição

Meça uma meta descrição em caracteres e pixels estimados, compare referências editoriais e examine modelos para computador e celular.

Contador de frequência de palavras

Encontre as palavras mais repetidas em qualquer texto, com contagens e percentuais de densidade. Útil para revisão, SEO e auditorias de conteúdo.

Verificador de Hreflang

Verifique localmente anotações hreflang no HTML colado: códigos, URLs completas, duplicatas, posição e autorreferência.

Extrator de Links Externos

Cole um HTML bruto, defina opcionalmente uma URL base e obtenha uma lista limpa e sem duplicatas de todos os links externos http/https do código para auditorias de links e revisões de SEO.

Gerador de Esquema FAQ

Gere marcação JSON-LD FAQPage a partir de pares de perguntas e respostas para qualificar-se para os resultados ricos do Google e colocações em caixas de resposta.

Verificador de URL Canônica

Cole o HTML de uma página e verifique sua tag rel=canonical: está presente, é uma URL absoluta válida, corresponde à URL da página?

Ferramenta disponível em outros idiomas