Está se perguntando o que são imagens decorativas e como elas afetam o SEO?
As 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 é Alt Text (texto alternativo)?
- Texto alternativo para imagens decorativas
- Texto alternativo para imagens informativas
- Mais dicas de SEO: Nomes e tamanhos de arquivos de imagem
- SEO de páginas da Web: Obter mais visitantes
- Como o texto alternativo é escrito em 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 estoque de livros empilhados é uma imagem decorativa comumente encontrada em sites de educação.
Embora as imagens decorativas raramente agreguem valor às informações, elas podem aprimorar o estilo de um site e contribuir para que o usuário desfrute de uma página.
Por exemplo, revistas e jornais literários podem usar imagens de estoque ou ilustrações personalizadas para dar 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 às maravilhas do universo", e uma ilustração em forma de sonho atrai o leitor.
Imagens informativas vs. decorativas: Qual é a diferença?
A principal diferença entre imagens decorativas e informativas é que as ú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 uma cena de crime.
- Diagramas e gráficos que ampliam os pontos apresentados em um artigo.
- Imagens de um lugar, pessoa ou objeto discutido no artigo.
As imagens informativas também são chamadas de imagens funcionais.
As imagens informativas ajudam os usuários a verificar a precisão do texto e, em alguns casos, a se aprofundar nos detalhes.
Mas, como vimos no exemplo do Nautilus, parece incorreto afirmar que as imagens decorativas não transmitem nenhuma informação, pois elas podem evocar visualmente um clima e definir expectativas.
Entretanto, podemos dizer que as imagens decorativas não fornecem nenhuma informação que 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 que, vamos revisar o significado do texto alternativo.
O que é Alt Text (texto alternativo)?
O texto alternativo é o texto que descreve uma imagem.
Há duas finalidades para o texto alternativo:
- Os mecanismos de pesquisa leem e indexam o texto alternativo e isso os ajuda a entender o conteúdo da imagem.
- O texto alternativo é lido em voz alta pelos leitores de tela, dispositivos usados por pessoas com deficiências.
O texto alternativo também é chamado de alt tag. Trata-se de uma referência ao HTML que os sistemas de gerenciamento de conteúdo, como o WordPress, adicionam automaticamente às imagens.
Texto alternativo para imagens decorativas
O manuseio do texto alternativo para imagens decorativas é fácil: deixá-lo em branco é considerado uma prática recomendada.
Veja como fazer isso para garantir que o campo esteja em branco:
- Faça login no WordPress
- Navegue até qualquer página da Web em que 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 Alt Text.
Deixá-lo em branco significa apenas que você não precisa adicionar nenhum texto alternativo.
Ao deixá-la em branco, os leitores de tela pularãoa imagem decorativa. Isso proporciona uma experiência de usuário melhor para os deficientes visuais, pois a descrição dessa imagem não teria valor algum.
Imagine um leitor de tela lendo em voz alta,
- "pessoas apontando para sites"
- "imagem verde decorativa", ou,
- "ilustração para artigo de site"
Chato, não é?
Agora vamos ver como o tratamento do texto alternativo para imagens informativas é diferente
Os leitores de tela são uma das muitas tecnologias assistivas usadas por pessoas com deficiências.
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 do marketing. Como o artigo se concentra em seu trabalho, adicionamos uma foto dele.
E este é o texto alternativo que adicionamos: "avinash kaushik falando em uma conferência".
A foto de Kaushik não fornece muitas informações, então você deve estar se perguntando: "Por que não tratá-la como uma imagem decorativa?" Poderíamos. Mas Kaushik é fundamental para o artigo. E queremos que os mecanismos de pesquisa indexem esse texto alternativo.
Dessa forma, os usuários que pesquisarem por "Avinash Kaushik" poderão encontrar essa foto e clicar no artigo.
Agora vamos analisar dois problemas de imagem que podem afetar o SEO.
Mais dicas de SEO: Nomes e tamanhos de arquivos de imagem
Certificar-se de que o nome e o tamanho do arquivo de imagem estejam otimizados pode melhorar seu SEO.
Vamos examinar primeiro os nomes de arquivos.
Nomes de arquivos de imagem vs. tipos de arquivos
Antes de começarmos, é importante saber que o nome de um 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 é "photo-name" (nome da foto) e que está no formato jpg.
Se essa imagem estivesse no formato png, ela teria a seguinte aparência: Nome da foto.png.
A extensão é uma pequena informação que indica o formato do arquivo.
Há muitos tipos de formatos de imagem digital, como .webp e .svg. Não é necessário entender todos eles, pois essa extensão será adicionada automaticamente.
Como otimizar os nomes dos arquivos de imagem
Como os mecanismos de pesquisa também leem os nomes dos arquivos de imagem, certifique-se de que os seus sejam claros e descritivos.
Arquivos de imagem mal nomeados 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 desenvolvem seu condicionamento físico antes de serem enviados para o Campo de Treinamento do Corpo de Fuzileiros Navais dos EUA.
Sua imagem mostra um recruta praticando exercícios de prancha. Em vez de man-exercising.jpg, você poderia intitular sua imagem marine-recruit-holding-plank.jpg.
Os nomes de arquivos para imagens decorativas geralmente são menos específicos porque são usados para evocar um clima ou um senso de marca. Por exemplo, a imagem decorativa do Nautilus acima é chamada de wonder-vehicle.jpg.
Se estiver compartilhando uma obra de arte, o título da obra de arte é um nome de arquivo de imagem adequado.
Saiba mais em nosso artigo sobre SEO de nome de arquivo de imagem.
Cuidado: A publicação de imagens para as quais você não tem uma licença pode resultar em multas pesadas. Nos Estados Unidos, essas multas podem chegar a US$ 150 mil por uso de imagem.
Tamanho do arquivo de imagem
Como arquivos grandes podem fazer com que sua página seja carregada lentamente, considere usar um plug-in do WordPress que otimize automaticamente suas imagens para aumentar a velocidade.
Plug-ins como o WP Rocket são fáceis de instalar e usar.
Dica profissional: o tamanho do arquivo de imagem e o tamanho de exibição da imagem são duas coisas diferentes. É possível reduzir o tamanho da imagem e fazer com que ela ainda seja exibida como uma imagem de alta resolução, pronta para Retina.
SEO de páginas da Web: Obter mais visitantes
Imagens informativas e decorativas podem ajudá-lo a envolver os visitantes do site. E o texto alternativo para imagens informativas pode atrair tráfego dos mecanismos de pesquisa.
Mas o SEO é mais do que apenas o texto alternativo da imagem.
É nesse ponto que um plug-in como o All in One SEO (AIOSEO) entra em cena.
Projetado para ser fácil de usar para iniciantes, ele fornece quase tudo o que você precisa para SEO (além do conteúdo).
Esse é um plug-in estabelecido com milhares de avaliações de 5 estrelas no WordPress.org. Mais de 3 milhões de usuários fizeram download dele.
Veja como funciona.
Ter uma classificação mais alta: Todos querem que seu conteúdo tenha uma classificação mais alta, mas aprender SEO leva tempo. É nesse ponto que o AIOSEO é fundamental. Ele analisa seu conteúdo e diz exatamente o que fazer para otimizá-lo para SEO.
À medida que você age de acordo com a recomendação, sua pontuação TruSEO aumenta.
Tenha uma ótima aparência nos resultados de pesquisa: O plug-in facilita a qualificação de suas páginas da Web para serem exibidas como rich snippets. Você pode pensar nos rich snippets como exibições de super luxo nos mecanismos de pesquisa.
Veja como é um snippet de pesquisa padrão:
E aqui está um rich snippet.
Não é necessário código: O All in One SEO lida automaticamente com várias funções técnicas. Por exemplo, ele gerará automaticamente sitemaps XML e RSS. Esses sitemaps enviam pings aos mecanismos de pesquisa para informá-los sobre suas alterações ou novos conteúdos.
Não se esqueça de planejar as conversões
Enquanto estiver agindo para obter mais tráfego, não se esqueça de descobrir quais ações você deseja que os visitantes da Web realizem.
Usamos o OptinMonster para criar popups com intenção de saída. Esses pop-ups aparecem quando as pessoas estão se preparando para sair do seu site.
O OptinMonster é econômico e eficaz.
Como o texto alternativo é escrito em HTML?
Aqueles que têm curiosidade sobre a representação HTML do texto alternativo acharão o seguinte útil.
A sintaxe do texto alternativo é a seguinte:
<img alt="your alt text goes here">Observe que alt é uma propriedade de elemento de imagem HTML e o que for colocado entre as aspas é o valor da propriedade.
<img alt="baseball player sliding into homebase">As tags Img também conterão a fonte (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, ele é chamado de texto alternativo nulo e tem a seguinte aparência em HTML.
<img src="/baseball-player-scoring.png/" alt="">Isso também é chamado de atributo alt vazio.
Dica: Saiba como visualizar o código de qualquer página da Web.
Perguntas e respostas sobre a imagem
Tem mais dúvidas sobre como algumas imagens servem para fins decorativos, texto alternativo ou acessibilidade? Respondemos a algumas perguntas comuns abaixo.
Se tiver alguma pergunta adicional, escreva na seção de comentários.
As imagens de fundo são consideradas imagens decorativas?
Sim, as imagens de fundo, conforme definido pela propriedade background-image no CSS, são consideradas decorativas. Nesses casos, o código CSS do site normalmente designa uma classe cujo atributo alt é sempre deixado em branco.
O que é acessibilidade na Web?
A acessibilidade da Web é um conjunto de práticas e padrões tecnológicos criados para facilitar a navegação e o consumo de conteúdo em um site por pessoas com deficiência. As WCAG ( Web Accessibility Content Guidelines, Diretrizes de Conteúdo para Acessibilidade na Web ) descrevem as práticas recomendadas para desenvolvedores da Web, mas os iniciantes podem querer começar com os fundamentos.
Embora tornar um site acessível não tenha impacto direto sobre o SEO, a acessibilidade é coerente 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 da Web?
O documento de diretrizes de acessibilidade da Web estabeleceu diretrizes para facilitar o acesso de pessoas com deficiência aos sites. Desenvolvidas pela Iniciativa de Acessibilidade na Web(WAI), as Diretrizes de Conteúdo de Acessibilidade na Web(WCAG) estão sendo aprimoradas continuamente.
As diretrizes aderem a quatro princípios, definidos como perceptíveis, operáveis, compreensíveis e robustos.
A Iniciativa de Acessibilidade na Web 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 prática recomendada deixar o texto alternativo em branco.
Em seguida, saiba mais sobre SEO de imagem e como as imagens podem ser úteis na criação de conteúdo digitalizável.
Se você achou este artigo útil, inscreva-se em nosso canal do YouTube. Você encontrará muitos outros tutoriais úteis lá. Você também pode nos seguir no X (Twitter), no LinkedIn ou no Facebook para ficar por dentro das novidades.
Quer experimentar o AIOSEO gratuitamente?
Digite o URL do seu site WordPress para instalar o AIOSEO Lite.
Divulgação: Nosso conteúdo é apoiado pelo leitor. Isso significa que, se você clicar em alguns de nossos links, poderemos receber uma comissão. Recomendamos apenas produtos que acreditamos que agregarão valor aos nossos leitores.
