Querendo saber o que são imagens decorativas e como elas impactam o SEO?
Imagens decorativas precisam ser tratadas de forma diferente de outros tipos de imagem.
A boa notícia é que é muito fácil lidar corretamente com imagens decorativas.
Neste Artigo
- O que são Imagens Decorativas?
- Imagens Informativas vs. Decorativas: Qual a Diferença?
- O que é Texto Alternativo (Alt Text)?
- Texto Alternativo para Imagens Decorativas
- Texto Alternativo para Imagens Informativas
- More SEO tips: Image File Names and Sizes
- Web Page SEO: Get More Visitors
- How is Alt Text Written in HTML?
O que são Imagens Decorativas?
Uma imagem decorativa é uma imagem que não fornece nenhuma informação relevante.
Por exemplo, uma foto de banco de imagens de livros empilhados é uma imagem decorativa comumente encontrada em sites de educação.
Embora imagens decorativas raramente adicionem valor informativo, elas podem aprimorar o estilo de um site e contribuir para o prazer do usuário em uma página.
Por exemplo, revistas e jornais literários podem usar imagens de banco de imagens ou ilustrações personalizadas para adicionar um toque visual às páginas.
Aqui, a imagem decorativa pode ser atraente e falar principalmente à imaginação.
A página "Sobre nós" da revista Nautilus é um bom exemplo. Ela promete "uma viagem pelas maravilhas do universo", e uma ilustração onírica atrai o leitor.
Imagens Informativas vs. Decorativas: Qual a Diferença?
A principal diferença entre imagens decorativas e informativas é que estas últimas fornecem informações relacionadas ao tópico de uma página.
Exemplos de imagens informativas incluem:
- Fotos de eventos noticiosos, como um protesto ou cena de crime.
- Diagramas e gráficos que ampliam pontos feitos em um artigo.
- Imagens de um lugar, pessoa ou coisa discutida no artigo.
Imagens informativas também são chamadas de imagens funcionais.
Imagens informativas ajudam os usuários a verificar a precisão do texto e, em alguns casos, a aprofundar os detalhes.
Mas, como vimos com o exemplo da Nautilus, parece incorreto afirmar que imagens decorativas não transmitem *nenhuma* informação, pois elas podem evocar visualmente um humor e definir expectativas.
No entanto, podemos dizer que imagens decorativas não fornecem nenhuma informação que já não esteja presente no texto.
Esses dois tipos de imagens também são tratados de forma diferente em SEO.
Para entender como e por quê, vamos revisitar o significado de texto alternativo.
O que é Texto Alternativo (Alt Text)?
Texto alternativo é um texto que descreve uma imagem.
Existem 2 propósitos para o texto alternativo:
- Motores de busca leem e indexam o texto alternativo e isso os ajuda a entender o conteúdo da imagem.
- O texto alternativo é lido em voz alta por leitores de tela, dispositivos usados por pessoas com deficiências.
Texto alternativo também é chamado de tag alt. Esta é uma referência ao HTML que sistemas de gerenciamento de conteúdo como o WordPress adicionam automaticamente às imagens.
Texto Alternativo para Imagens Decorativas
Lidar com texto alternativo para imagens decorativas é fácil: deixá-lo em branco é considerada a melhor prática.
Veja como fazer isso para garantir que o campo esteja em branco:
- Faça login no WordPress
- Navegue até qualquer página da web onde você tenha uma imagem.
- Em seguida, clique na imagem para abrir as configurações de imagem do WordPress na barra lateral direita.
É aí que você verá o Campo de Texto Alternativo.
Deixá-lo em branco significa apenas que você não precisa adicionar nenhum texto alternativo.
Ao deixá-lo em branco, leitores de tela pularão a imagem decorativa. Isso proporciona uma melhor experiência ao usuário para deficientes visuais, pois descrever essa imagem não agregaria valor.
Imagine um leitor de tela lendo em voz alta,
- “pessoas apontando para sites”
- “imagem verde decorativa” ou,
- “ilustração para artigo de site”
Entediante, né?
Agora vamos ver como o tratamento de texto alternativo para imagens informativas é diferente
Leitores de tela são uma das muitas tecnologias assistivas usadas por pessoas com deficiência.
Texto Alternativo para Imagens Informativas
Como exemplo, usaremos um artigo sobre um modelo de estratégia digital criado por Avinash Kaushik.
Kaushik é um conhecido visionário de marketing. Como o artigo é focado em seu trabalho, adicionamos uma foto dele.
E este é o texto alternativo que adicionamos: “avinash kaushik palestrando em uma conferência.”
A foto de Kaushik não fornece muita informação, então você pode estar se perguntando: “Por que não tratá-la como uma imagem decorativa?” Poderíamos. Mas Kaushik é central para o artigo. E queremos que os motores de busca indexem este texto alternativo.
Dessa forma, usuários que pesquisam por “Avinash Kaushik” podem encontrar esta foto e clicar no artigo.
Agora vamos analisar 2 problemas de imagem que podem afetar o SEO.
Mais dicas de SEO: Nomes e Tamanhos de Arquivos de Imagem
Garantir que o nome e o tamanho do seu arquivo de imagem estejam otimizados pode melhorar seu SEO.
Vamos analisar primeiro os nomes dos arquivos.
Nomes de Arquivos de Imagem vs. Tipos de Arquivo
Antes de mergulharmos, é útil saber que um nome de arquivo de imagem é diferente do tipo de arquivo de imagem. O tipo de arquivo é expresso como uma “extensão” – um pequeno trecho de texto que aparece automaticamente no final do nome de um arquivo de imagem.
Por exemplo, Nome-da-foto.jpg
Isso nos diz que o nome do arquivo é “nome-da-foto” e está no formato de arquivo jpg.
Se esta imagem estivesse no formato png, ficaria assim: Nome-da-foto.png.
A extensão é uma pequena informação que indica em qual formato o arquivo está.
Existem muitos tipos de formatos de imagem digital, como .webp e .svg. Não é necessário entendê-los todos porque esta extensão será adicionada automaticamente.
Como Otimizar Nomes de Arquivos de Imagem
Como os motores de busca também leem os nomes dos arquivos de imagem, certifique-se de que os seus sejam claros e descritivos.
Arquivos de imagem com nomes ruins são vagos, como estes:
- 1100073658.jpg
- Homem-se-exercitando.jpg
Bons títulos de imagem devem ser específicos e descrever a imagem.
Por exemplo, digamos que você esteja escrevendo um artigo sobre como os recrutas constroem sua forma física antes de serem enviados para o Centro de Treinamento Básico do Corpo de Fuzileiros Navais dos EUA.
Sua imagem mostra um recrutador real praticando exercícios de prancha. Em vez de homem-se-exercitando.jpg, você poderia nomear sua imagem como recruta-fuzileiro-fazendo-prancha.jpg.
Nomes de arquivos para imagens decorativas geralmente são menos específicos porque são usados para evocar um humor ou senso de marca. Por exemplo, a imagem decorativa de Nautilus acima é chamada veiculo-maravilha.jpg.
Se você estiver compartilhando uma obra de arte, o título da obra é um nome de arquivo de imagem adequado.
Saiba mais em nosso artigo sobre SEO de nomes de arquivos de imagem.
Cuidado: Publicar imagens para as quais você não tem licença pode resultar em multas pesadas. Nos EUA, essas multas podem chegar a US$ 150 mil por uso da imagem.
Tamanho do Arquivo de Imagem
Como tamanhos de arquivo grandes podem fazer sua página carregar lentamente, considere usar um plugin do WordPress que otimizará automaticamente suas imagens para velocidade.
Plugins como WP Rocket são fáceis de instalar e usar.
Dica profissional: O tamanho do arquivo da sua imagem e o tamanho de exibição da imagem são 2 coisas diferentes. É possível reduzir o tamanho da imagem e ela ainda ser exibida como uma imagem de alta resolução e pronta para Retina.
SEO de Página da Web: Obtenha Mais Visitantes
Imagens informativas e decorativas podem ajudar você a engajar os visitantes do site. E o texto alternativo para imagens informativas pode atrair tráfego dos motores de busca.
Mas há mais no SEO do que apenas o texto alternativo da imagem.
É aqui que um plugin como All in One SEO (AIOSEO) entra em jogo.
Projetado para ser fácil de usar para iniciantes, ele fornece a maior parte do que você precisa para SEO (além do conteúdo).
Este é um plugin estabelecido com milhares de avaliações 5 estrelas no WordPress.org. Mais de 3 milhões de usuários o baixaram.
Veja como funciona.
Classifique mais alto: Todos querem que seu conteúdo tenha uma classificação mais alta, mas aprender SEO leva tempo. É aqui que o AIOSEO é fundamental. Ele analisa seu conteúdo e diz exatamente o que fazer para otimizá-lo para SEO.
À medida que você age sobre a recomendação, sua pontuação TruSEO aumenta.
Tenha uma ótima aparência nos resultados de pesquisa: O plugin facilita a qualificação de suas páginas da web para serem exibidas como rich snippets. Você pode pensar em rich snippets como exibições de motores de busca superdeliciosas.
Veja como é um snippet de pesquisa padrão:
E aqui está um snippet avançado.
Sem necessidade de código: O All in One SEO cuida de várias funções técnicas automaticamente. Por exemplo, ele gerará automaticamente sitemaps XML e RSS. Esses sitemaps notificam os mecanismos de busca sobre suas alterações ou novo conteúdo.
Não se esqueça de planejar as conversões
Enquanto você se esforça para gerar mais tráfego, certifique-se de definir quais ações você deseja que os visitantes do site realizem.
Usamos o OptinMonster para criar pop-ups de intenção de saída. Esses pop-ups aparecem quando as pessoas estão prestes a sair do seu site.
O OptinMonster é de baixo custo e eficaz.
Como o texto alternativo é escrito em HTML?
Aqueles de vocês que estão curiosos sobre a representação HTML do texto alternativo acharão o seguinte útil.
A sintaxe para texto alternativo é a seguinte:
<img alt="your alt text goes here">Note que alt é uma propriedade do elemento de imagem HTML e o que quer que seja colocado entre as aspas é o valor da propriedade.
<img alt="baseball player sliding into homebase">As tags Img também conterão a origem (src) (URL) da imagem, por exemplo:
<img src="/baseball-player-scoring.png/" alt="baseball player sliding into homebase">Quando o campo de texto alternativo está em branco, é chamado de texto alternativo nulo e se parece com isto em HTML.
<img src="/baseball-player-scoring.png/" alt="">Isso também é chamado de atributo alt vazio.
Dica: Descubra como visualizar o código de qualquer página da web.
Perguntas e Respostas sobre Imagens
Tem mais perguntas sobre como algumas imagens servem a propósitos decorativos, texto alternativo ou acessibilidade? Respondemos a algumas perguntas comuns abaixo.
Se você tiver uma pergunta adicional, por favor, deixe uma nota na seção de comentários.
As imagens de fundo são consideradas imagens decorativas?
Sim, imagens de fundo, conforme definido pela propriedade background-image em CSS, são consideradas decorativas. Nesses casos, o código CSS do site geralmente designará uma classe cujo atributo alt é sempre deixado em branco.
O que é acessibilidade na web?
Acessibilidade na web é um conjunto de práticas e padrões tecnológicos projetados para facilitar que pessoas com deficiência naveguem e consumam conteúdo em um site. As Diretrizes de Conteúdo de Acessibilidade na Web (WCAG) descrevem as melhores práticas para desenvolvedores web, mas iniciantes podem querer começar com os fundamentos.
Embora tornar um site acessível não impacte diretamente o SEO, a acessibilidade coaduna com um bom SEO. É por isso que um site otimizado para acessibilidade pode ter uma classificação mais alta nos resultados de pesquisa.
Quais são as diretrizes de acessibilidade na web?
O documento de diretrizes de acessibilidade na web estabeleceu diretrizes para tornar os sites mais fáceis de acessar para pessoas com deficiência. Desenvolvidas pela Web Accessibility Initiative (WAI), as Diretrizes de Conteúdo de Acessibilidade na Web (WCAG) estão em constante aprimoramento.
As diretrizes aderem a 4 princípios, definidos como Perceptível, Operável, Compreensível e Robusto.
A Web Accessibility Initiative faz parte do World Wide Web Consortium (W3).
Depois de Imagens Decorativas . . .
Esperamos que esta postagem tenha ajudado você a entender o que são imagens decorativas e por que é uma boa prática deixar o texto alternativo em branco.
Em seguida, saiba mais sobre SEO de imagens e como as imagens podem ser úteis na criação de conteúdo escaneável.
Se você achou este artigo útil, por favor, inscreva-se em nosso Canal do YouTube. Você encontrará muitos outros tutoriais úteis lá. Você também pode nos seguir no X (Twitter), LinkedIn ou Facebook para ficar por dentro.
Quer Experimentar o AIOSEO Gratuitamente?
Digite o URL do seu site WordPress para instalar o AIOSEO Lite.
Aviso: Nosso conteúdo é apoiado pelo leitor. Isso significa que se você clicar em alguns de nossos links, poderemos ganhar uma comissão. Recomendamos apenas produtos que acreditamos que agregarão valor aos nossos leitores.
