Gerar imagens de cartão do Twitter com uma API
Uma imagem de cartão do Twitter (X) é a pré-visualização grande exibida quando um link é partilhado no X. A FastOG gera-a dinamicamente a 1200×630 e sinaliza summary_large_image, para que cada página receba um cartão X adequado sem criar uma imagem manualmente.
O que a imagem do cartão do Twitter precisa
O X lê as tags Open Graph e renderiza um cartão summary_large_image quando a página contém links twitter:card = summary_large_image. A imagem é renderizada a 1200×630. O FastOG produz exatamente isso, e você aponta twitter:image para o mesmo URL dinâmico que og:image.
Como configurar um cartão dinâmico do Twitter
Gere o seu URL FastOG uma vez e, em seguida, defina as meta tags OG e do Twitter para esse mesmo URL.
<meta property="og:image" content="https://fastog.com/api/v1/og?template=default&title=My+Post&key=sk_...&s=...">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="My Post">
<meta name="twitter:image" content="https://fastog.com/api/v1/og?template=default&title=My+Post&key=sk_...&s=...">
O mesmo URL funciona para ambas as tags. O X recorre a
og:imagesetwitter:imageestiver ausente, mas definir ambas é inofensivo e explícito.
Dicas para o validador de cartões do X
| Verificação | Detalhe |
|---|---|
| URL pública | A imagem tem de ser acessível pelo X sem autenticação |
| Tamanho / formato do ficheiro | Mantenha abaixo de 5 MB; PNG é o ideal para cartões com texto |
| Cache | O X faz cache de forma agressiva — use o Card Validator para forçar uma atualização |
| URLs assinados | Os URLs com assinatura de conteúdo do FastOG apenas limitam a primeira renderização; os cartões em cache permanecem válidos |
FAQ
Preciso de imagens separadas para o X e para o Open Graph?
Não. O X lê a mesma imagem de 1200×630. Esta página existe porque as tags twitter:card corretas são fáceis de errar.
Porque é que o meu cartão do X não é atualizado depois de alterar o título?
O X armazena em cache o cartão antigo. Abra o Validador de Cartões do X, cole o URL e faça novamente o scraping.
O FastOG trata também das meta tags do twitter?
O FastOG gera a imagem; você ainda adiciona as meta tags twitter:card e twitter:image à sua página (como mostrado acima). O nosso gerador gratuito de Meta Tags Open Graph escreve todas as tags por si.