Imagebox: Regras e Exemplos de Infobox de Imagem

Um imagebox emparelha uma imagem com uma explicação focada para que os leitores as processem como uma única unidade editorial. A imagem pode carregar evidências que o texto interpreta, ou pode ilustrar uma ideia que o texto explica completamente. O autor deve declarar qual função ela desempenha porque essa escolha controla o texto, o texto alternativo, a legenda, os dados estruturados e se o elemento ainda funciona sem visão.

Esta é a variante de imagem como conteúdo: a data e o status visíveis são evidências, enquanto o texto adjacente interpreta sua relação. Se a imagem fosse meramente um calendário decorativo, o texto precisaria apresentar todo o ponto sobre atualização de forma independente e a imagem usaria texto alternativo vazio.

Por que este elemento é importante

Os leitores não processam automaticamente uma imagem e um parágrafo distante como uma única ideia. Quando uma imagem aparece sem uma relação textual explícita, eles precisam decidir o que inspecionar, por que isso importa e se apoia a afirmação ao redor. Um imagebox reduz essa incerteza colocando um elemento visual e uma explicação dentro de um limite claro. O título nomeia o ponto; a imagem o mostra; o texto diz ao leitor o que notar ou compreender.

O benefício psicológico é a atenção conjunta: o design direciona a atenção para um objeto visual enquanto o texto estabelece sua relevância. Um recorte de gráfico pode sugerir uma alta, volatilidade ou um limite de data; a explicação adjacente seleciona a leitura relevante.

A extraibilidade por máquina é a capacidade do software de isolar uma unidade de conteúdo sem perder a relação entre suas partes. Um imagebox semântico expõe uma imagem, descrição acessível, legenda, título, explicação e função declarada da imagem em um único contêiner. O texto ainda deve conter a afirmação: a visão computacional não deve ser a única rota para um número, instrução, limitação ou conclusão.

As regras de escrita de elementos governam a sintaxe de diretiva compartilhada, mapeamento de corpo, caminhos e precedência. Esta página tem precedência onde define a distinção específica do imagebox entre conteúdo e ilustração, seus campos permitidos e seu limite de uma imagem.

Quando usar

Use um imagebox quando uma imagem e uma explicação têm uma relação direta e necessária e nenhuma delas merece uma seção autônoma completa. Usos fortes incluem um recorte focado de interface emparelhado com uma interpretação, um detalhe de produto emparelhado com uma explicação de por que afeta o ajuste, uma foto de processo emparelhada com uma regra de controle de qualidade, ou uma ilustração conceitual simples emparelhada com uma explicação concisa.

Primeiro decida se a imagem é conteúdo ou ilustração:

• Imagem de conteúdo: o leitor deve inspecionar a imagem para verificar uma afirmação, identificar uma funcionalidade, comparar um estado ou compreender um fato visual. O texto nomeia o detalhe relevante e explica seu significado. O texto alternativo é significativo e uma legenda normalmente está presente.
• Imagem ilustrativa: a imagem reforça tom, memória ou compreensão, mas o texto adjacente fornece a afirmação completa. Remover a imagem torna o bloco menos envolvente, não menos preciso. O texto alternativo é vazio a menos que a própria ilustração comunique informações adicionais.

Use o teste de remoção. Se uma solicitação de imagem falha e remove evidências ou torna a explicação incompleta, declare role=content. Se remove apenas reforço visual, declare role=illustration.

Casos limítrofes são comuns:

• Use uma imagem autônoma quando o visual precisa da largura total de leitura e o texto apenas a identifica.
• Use uma captura de tela anotada quando os leitores precisam localizar múltiplas regiões da interface.
• Use uma tabela para critérios de comparação repetidos, um diagrama para um sistema ou sequência, e uma galeria para imagens pares.
• Use prosa comum quando o visual meramente repete uma frase.

Não use um imagebox para fazer uma seção fraca parecer projetada. Uma foto de banco de imagens de pessoas apontando para um laptop não explica “colaboração”, e um robô genérico não torna uma afirmação sobre inteligência artificial mais concreta. Se a imagem puder ser trocada por uma imagem não relacionada sem alterar o texto, a dupla não tem contrato editorial.

Onde posicionar

Coloque o imagebox imediatamente após o parágrafo que introduz a afirmação ou conceito que ele desenvolve. Em um procedimento, coloque-o após a ação e antes de sua verificação de sucesso, para que a evidência visual não interrompa a instrução.

Ele pode ficar diretamente abaixo de um H2 apenas quando seu título interno for mais específico. Mantenha uma citação ou qualificação junto à afirmação que ela limita; nunca insira o imagebox entre elas.

Ele não deve ficar diretamente ao lado de outro imagebox, galeria, figura de largura total, vídeo, tabela ou infobox de duas colunas. Insira interpretação entre contêineres visuais, combine pares verdadeiros, ou crie subseções separadas.

Não o coloque dentro de um marcador, etapa, destaque, célula de tabela, acordeão ou cartão clicável. Não coloque uma chamada para ação dentro do bloco ou entre sua imagem e explicação.

No desktop, a imagem pode aparecer antes ou depois do texto. No mobile, preserve uma ordem previsível de fonte, teclado e leitor de tela; não dependa de reordenação CSS conflitante.

Anatomia

A anatomia é definida pelo significado, não por cor, sombra ou largura de coluna.

1. Contêiner: Agrupa exatamente uma figura e uma explicação como uma única unidade editorial.
2. Imagem: Mostra evidências ou fornece ilustração de acordo com a função declarada.
3. Texto alternativo: Comunica o propósito visual relevante para uma imagem de conteúdo; é vazio para uma ilustração decorativa redundante.
4. Legenda: Identifica o que uma imagem de conteúdo mostra e fornece contexto essencial como estado, data ou escala.
5. Título: Declara a percepção ou assunto, não o nome do arquivo ou um rótulo genérico como “Exemplo”.
6. Explicação: Diz ao leitor o que notar, por que isso importa e qualquer limitação na interpretação.
7. Crédito: Nomeia o criador ou fonte quando direitos, proveniência ou política editorial o exige.
8. Ordem de leitura: Preserva uma relação coerente entre figura e texto quando duas colunas se reduzem a uma.

A explicação deve se referir ao assunto diretamente, em vez de usar coordenadas como “a imagem à esquerda”. A posição muda entre pontos de quebra, traduções e sindicação. “O status desatualizado e a data de atualização identificam o alvo da revisão” permanece verdadeiro em qualquer lugar.

Exemplos de design

O sistema de design suporta quatro combinações de função e posição. Nenhuma altera os requisitos de conteúdo.

Imagem de conteúdo, imagem no início

Use esta configuração padrão quando os leitores devem inspecionar a evidência antes da interpretação.

Imagem de conteúdo, imagem no final

Use esta quando a explicação deve estabelecer uma lente antes da evidência.

Ilustração, imagem no início

Use esta quando um visual específico do conceito melhora o reconhecimento enquanto o texto carrega o significado completo.

Ilustração, imagem no final

Use esta quando a explicação é primária e a ilustração atua como um fechamento visual.

Comportamento em viewport estreito

Cada variante torna-se uma coluna sem rolagem horizontal ou cortes que alterem o significado. A legenda permanece anexada à sua figura.

Parâmetros

O contrato de conteúdo separa o significado editorial da apresentação. Proporções de largura, espaçamentos, bordas, fundos, raio, sombras e pontos de quebra pertencem ao renderizador.

Publique src somente após o asset existir. Uma captura pendente usa um comentário de screenshot e screenshotsPending = true. role não tem padrão porque tratar evidência silenciosamente como decoração cria uma falha de acessibilidade.

O primeiro título do corpo torna-se title; tudo após ele torna-se content. O corpo permite parágrafos, ênfase, código inline e um link contextual. Ele rejeita listas, títulos aninhados, tabelas, mídia, botões, formulários, citações, acordeões e componentes.

Sintaxe e exemplos de código

As três notações preservam a mesma função, imagem, título, explicação, legenda, crédito e ordem de leitura. Estes são contratos de adaptador portáveis; eles não implicam que um shortcode ou bloco local registrado já exista.

Diretiva Markdown portável

:::imagebox{src="/cdn-assets/seo-playbook/examples/freshness-status.png" role=content position=image-start alt="Linha do relatório de atualização mostrando um status desatualizado ao lado de uma data de atualização de 12 de fevereiro de 2026" caption="O status desatualizado é avaliado em relação à data de atualização registrada."}
## Veja por que a página precisa de revisão

A data de atualização visível explica por que a auditoria classificou esta URL como desatualizada. Verifique se a página mudou desde essa data antes de atribuir uma reescrita.
:::

O caminho de exemplo demonstra apenas a sintaxe. A validação em produção deve rejeitá-lo até que o asset exista.

Shortcode Hugo

{{< imagebox src="/cdn-assets/seo-playbook/examples/freshness-status.png" role="content" position="image-start" alt="Linha do relatório de atualização mostrando um status desatualizado ao lado de uma data de atualização de 12 de fevereiro de 2026" caption="O status desatualizado é avaliado em relação à data de atualização registrada." >}}
## Veja por que a página precisa de revisão

A data de atualização visível explica por que a auditoria classificou esta URL como desatualizada. Verifique se a página mudou desde essa data antes de atribuir uma reescrita.
{{< /imagebox >}}

O adaptador usa apenas parâmetros nomeados. Até ser registrado, use um <figure> semântico seguido de prosa. O adaptador valida o asset e preserva o mapeamento do corpo da diretiva.

Bloco WordPress

<!-- wp:amicited/imagebox {"src":"/cdn-assets/seo-playbook/examples/freshness-status.png","role":"content","position":"image-start","alt":"Linha do relatório de atualização mostrando um status desatualizado ao lado de uma data de atualização de 12 de fevereiro de 2026","caption":"O status desatualizado é avaliado em relação à data de atualização registrada."} -->
<figure class="wp-block-image">
  <img src="/cdn-assets/seo-playbook/examples/freshness-status.png" alt="Linha do relatório de atualização mostrando um status desatualizado ao lado de uma data de atualização de 12 de fevereiro de 2026">
  <figcaption>O status desatualizado é avaliado em relação à data de atualização registrada.</figcaption>
</figure>
<div class="imagebox__content">
  <h2>Veja por que a página precisa de revisão</h2>
  <p>A data de atualização visível explica por que a auditoria classificou esta URL como desatualizada. Verifique se a página mudou desde essa data antes de atribuir uma reescrita.</p>
</div>
<!-- /wp:amicited/imagebox -->

O WordPress deve expor um campo de Mídia e uma região de texto restrita. Se indisponível, use blocos nativos de Imagem, Título e Parágrafo; preserve o significado mesmo sem layout lado a lado.

Exemplos

Bom exemplo: a imagem é evidência

Isso funciona porque a imagem prova dois detalhes físicos e o texto explica sua consequência operacional. O título declara a percepção, a legenda identifica a evidência visível e a explicação permanece específica sem tentar inventariar a fotografia inteira.

Mau exemplo: decoração genérica apresentada como prova

Trabalhe de forma mais inteligente com dados claros Imagem: uma pessoa genérica sorrindo para um laptop ao lado de gráficos coloridos. Nossa plataforma inovadora transforma dados em insights acionáveis para que cada equipe possa desbloquear melhores decisões e alcançar mais.

Isso falha porque nenhuma das metades contribui com informação verificável. A imagem poderia anunciar qualquer produto de software, enquanto o texto contém resultados amplos sem um mecanismo, detalhe de interface, restrição ou exemplo. A dupla cria destaque visual, mas nenhum significado que um leitor ou máquina possa extrair. Substitua por um estado de produto focado e uma explicação de uma decisão que ele suporta, ou remova o imagebox e escreva a afirmação como prosa comum com evidência.

Marcação Schema e acessibilidade

Um imagebox não tem um tipo Schema.org dedicado. Seu texto permanece parte da entidade da página que o contém. Uma imagem de conteúdo pode ser um ImageObject quando tem um contentUrl estável, legenda precisa, dimensões e metadados de crédito ou licença exigidos. Ilustrações decorativas não precisam de uma entidade separada.

O schema no nível da página pode referenciar a mesma imagem representativa. Uma foto de detalhe de produto pode alimentar a propriedade image do produto visível, mas um recorte de gráfico não se torna Dataset e uma captura de tela não se torna SoftwareApplication.

Use um <figure> e <figcaption> mais uma região explicativa rotulada. Defina width e height intrínsecos; a saída responsiva não deve rolar horizontalmente ou cortar o detalhe nomeado.

O texto alternativo nomeia o assunto relevante, estado e detalhe decisivo de uma imagem de conteúdo. Não comece com “imagem de”, não duplique a legenda nem insira palavras-chave. Ilustrações redundantes usam alt=""; omitir o atributo pode expor o nome do arquivo.

Não dependa apenas de posição, cor ou pixels. Repita números decisivos, rótulos, avisos e conclusões em texto. Mantenha links acessíveis por teclado, nunca torne todo o bloco um link, preserve a ordem original e teste com zoom de 200%.

Regras de escrita

Escreva a explicação antes de selecionar a imagem, depois escolha o recorte mais estreito que preserve o contexto necessário.

• Escreva um título de 3 a 10 palavras que declare a percepção, assunto ou relação. Evite “Imagem”, “Visão geral”, “Saiba mais” e “Veja em ação”.
• Mantenha o texto explicativo entre 40 e 140 palavras em um ou dois parágrafos. O elemento suporta um ponto, não um miniartigo.
• Mantenha as legendas entre 5 e 25 palavras. Identifique o que é mostrado e o contexto necessário para interpretá-lo; coloque o raciocínio no corpo.
• Use de 40 a 180 caracteres para texto alternativo significativo, com 250 como máximo absoluto. Prefira precisão a preencher o intervalo.
• Inclua exatamente uma imagem e no máximo um link de texto contextual. Vincule apenas quando um destino aprofundar materialmente a explicação.
• Use uma voz e tempo verbal consistentes em título, legenda e corpo. Prefira substantivos e verbos concretos a adjetivos promocionais.
• Declare a limitação junto à interpretação quando a imagem mostra apenas um estado, data, recorte, dispositivo ou exemplo.

Nunca coloque uma lista, tabela, depoimento, preço, formulário, mídia, download, botão, instrução de múltiplas etapas, aviso legal ou chamada para ação dentro. Não use duas imagens, incorpore texto essencial em pixels, exponha dados de clientes ou publique arte com direitos desconhecidos.

Evite escrever “como você pode ver”. Um leitor pode não ver a imagem, e mesmo um leitor vidente precisa saber qual observação é importante. Afirme diretamente: “A trava de encaixe fica nivelada quando o conector está totalmente inserido.”

Tipos de post que o utilizam

As linhas abaixo são orientadas pelo postTypes do front matter. “Uso” descreve uma função adequada, não um requisito para forçar um imagebox em toda página.

Checklist de QA

Antes da publicação, verifique o elemento completo:

• A imagem e a explicação fazem um ponto e pertencem a uma única unidade editorial.
• role está explicitamente como content ou illustration, escolhido com o teste de remoção.
• O arquivo de origem existe, está aprovado e não usa dados privados, direitos desconhecidos ou asset placeholder.
• O título declara a percepção em 3 a 10 palavras e o corpo a explica em 40 a 140 palavras.
• Uma imagem de conteúdo tem texto alternativo significativo e legenda concisa; uma ilustração redundante usa texto alt vazio.
• O texto afirma todo número, rótulo, instrução, aviso e conclusão decisivos que não podem depender da visão.
• A legenda identifica a imagem sem duplicar o corpo ou o texto alternativo.
• Qualquer link de criador, fonte, licença ou crédito exigido está preciso e visível.
• O bloco contém uma imagem, uma explicação e no máximo um link de texto contextual.
• Não contém lista aninhada, tabela, mídia, botão, formulário, chamada para ação ou cartão interativo.
• Não substitui uma captura de tela anotada, comparação, diagrama, galeria ou figura de largura total mais adequados.
• Os layouts desktop e mobile preservam a ordem semântica de origem, anexo da legenda e ordem de teclado.
• O recorte significativo sobrevive a redimensionamento responsivo, zoom de 200% e falha de carregamento de imagem.
• Largura e altura reservam espaço, enquanto carregamento preguiçoso não atrasa uma imagem acima da dobra.
• Dados estruturados, se emitidos, correspondem ao conteúdo visível e não descrevem decoração como uma entidade separada.
• Os mapeamentos Markdown portável, Hugo e WordPress retêm a mesma função, campos e significado.

FAQ

O template da academia renderiza as cinco perguntas revisadas armazenadas no front matter [[faq]] desta página. Elas cobrem o teste de conteúdo versus ilustração, texto alternativo decorativo, escopo descritivo, chamadas para ação e schema ImageObject.

Um imagebox é bem-sucedido quando o leitor pode responder duas perguntas imediatamente: “O que esta imagem contribui?” e “Por que essa contribuição é importante aqui?” Se qualquer resposta for vaga, fortaleça a relação ou remova o bloco.