Pular para o conteúdo

Banners OG

Plugin WordPress que gera banners Open Graph 1200 × 630 no próprio admin e publica a imagem como og:image. Com WooCommerce, cada produto ganha o próprio banner.

Papel
Autor
Onde
Projeto open source
Período
08/2026
Stack
PHP · JavaScript · WordPress · html2canvas

Desafio

Todo post, página e categoria precisa de uma imagem para aparecer bem quando é compartilhado. A ideia era gerar essa imagem no próprio WordPress, sem serviço externo e sem GD ou Imagick no servidor.

  • Banner de 1200 × 630, publicado como og:image.
  • Nenhuma marca presa no código: paleta, fontes, logo e símbolo vêm das configurações.
  • Com Yoast, Rank Math, AIOSEO ou SEOPress ativo, o banner ainda precisa chegar às meta tags.

Abordagem

O banner é montado em HTML e CSS e vira imagem no navegador, com html2canvas. O arquivo sobe como upload multipart, e o PHP só valida e grava.

  • Ao salvar o post, o banner é gerado de novo e substitui o anterior.
  • Quatro layouts genéricos (cover, feature, article e profile), mais o product com WooCommerce.
  • Layout novo entra por filtro no PHP e por BannersOG.registerTemplate() no JS, sem mexer no plugin.
  • Com plugin de SEO ativo, as tags próprias saem e o banner vai para ele pelos filtros públicos de cada um.

Resultado

A versão 2.4.0 cobre todo post type público, as categorias e as tags, e vem traduzida para pt-BR. O CI roda PHPCS, PHPStan nível 6 e a checagem de versão.

  • No WooCommerce, o banner do produto traz foto, preço e categoria.
  • Em site com offload de uploads (S3 e afins), o banner é gravado como attachment.
  • A tela Diagnóstico mostra onde o banner foi gravado e o status HTTP da URL publicada.
  • Licença GPL-2.0-or-later.

Contato

Quer trocar uma ideia? Bora conversar.

Gosto de conversar sobre IA aplicada, PHP e arquitetura de software, seja para trocar experiência, falar de um projeto ou de uma proposta.

joliveiracode@gmail.com

// download iniciado

Currículo a caminho.

O PDF está baixando. Se quiser trocar uma ideia sobre IA aplicada, PHP ou arquitetura, é só chamar.