Como encontrar e corrigir uma imagem quebrada no WordPress

Você provavelmente já viu um ícone de imagem em seu site que se parece com uma imagem rasgada. Essa é uma imagem quebrada e pode afetar negativamente seu site se você não substituí-la .

As imagens são importantes para a maioria dos sites. Entre outras coisas, eles tornam sua página mais atraente, transmitem informações importantes e melhoram sua classificação nos mecanismos de pesquisa.

Portanto, é importante encontrar e corrigir imagens quebradas em seu site assim que você as notar. Neste guia, explicaremos o que é uma imagem quebrada e mostraremos como corrigi-la em seu site WordPress.

Conteúdo:

• O que é uma imagem quebrada?
• Detectando imagens quebradas em seu site
• Como corrigir o problema de imagem quebrada
  • Caminho de arquivo incorreto
  • Verifique os nomes dos arquivos
  • Extensões de arquivo incorretas
  • Use um caminho relativo
  • Certifique-se de que a imagem existe
  • Problemas de transferência
• Conclusão

O que é uma imagem quebrada?

Simplificando, uma imagem quebrada é uma imagem cujo link de origem está indisponível ou corrompido . Quando um usuário rolar para uma seção com uma imagem quebrada em seu site, ele verá o ícone da imagem quebrada. Pode ser devido a um erro ortográfico de URL, caminho de arquivo impróprio ou pode ser um link para um site que não existe mais.

Este é um problema crítico, pois afeta negativamente a experiência do usuário. Quando os usuários encontram imagens ausentes em seu site, eles tendem a deixar seu site para um concorrente.

Como resultado, as taxas de rejeição aumentarão em seu site. Portanto, para evitar que isso aconteça, sempre verifique seu site em busca de imagens quebradas e corrija-as. Vamos ver como fazer isso na próxima seção.

Detectando imagens quebradas em seu site

A maneira mais fácil de detectar imagens quebradas em seu site WordPress é usando um plugin. Um desses plugins é o Broken Link Checker. Com este plugin, você pode verificar os links internos e externos do seu site em busca de links e imagens quebrados.

Após instalar e ativar o plugin, você pode acessar a página de configurações do plugin em Settings >> Link Checker .

O plugin Broken Link Checker verifica seu site em busca de links quebrados. Se houver algum problema, você os verá aqui ou será notificado por e-mail.

O plug-in também oferece a opção de impedir que os mecanismos de pesquisa sigam os links quebrados. Você pode habilitar esta opção para que a imagem quebrada não afete seus rankings de SEO.

Corrigindo imagens quebradas

Existem vários cenários que podem levar à falta de imagens em seu site WordPress. Nesta seção, discutiremos os motivos e como corrigi-los.

Caminho de arquivo incorreto

Ao adicionar imagens ao seu site, o WordPress cria um caminho de arquivo que especifica a localização das imagens. Os navegadores da Web usam o caminho no atributo src da imagem para localizar a imagem. Se o caminho para a imagem estiver incorreto, a imagem não será carregada e não será exibida.

Para corrigir isso, basta localizar a postagem ou página com o ícone da imagem quebrada e substituí-la por uma nova imagem. Para isso, faça login no seu painel e navegue até a página de postagem do WordPress. Em seguida, passe o mouse sobre a postagem com a imagem quebrada e selecione Editar .

No editor de postagem, role até a seção com a imagem quebrada, clique nela e selecione Substituir . Você pode escolher uma imagem da sua biblioteca de mídia ou fazer upload de uma nova imagem.

Depois de substituir a imagem quebrada, clique em Atualizar para salvar suas alterações.

Se você estiver usando o editor clássico, clique na imagem e selecione o ícone Caneta para editar a imagem quebrada.

Aqui, clique no botão Substituir e escolha uma imagem da sua biblioteca de mídia. Por fim, clique em Atualizar para substituir a imagem.

Substituindo imagens HTML personalizadas

Se você adicionou a imagem usando HTML ou CSS personalizado, você precisa verificar se o caminho está correto. Para verificar isso, você precisa verificar o local onde adicionou a imagem. Pode estar no bloco CSS Adicional. Se este for o caso, siga os passos abaixo.

Observação lateral: a substituição de imagens em seu modelo pode ser técnica. Se você é novo no WordPress, você pode ter nossos especialistas para ajudá-lo a corrigir seus problemas de modelo.

Primeiro, faça login no painel do WordPress e vá para Aparência >> Personalizar.

Depois disso, selecione o bloco CSS adicional ou o menu CSS personalizado.

No editor de código, localize a linha de código onde a imagem foi adicionada e destaque o caminho para a imagem. Em seguida, clique com o botão direito do mouse e selecione Ir para o caminho do arquivo …

Se a imagem não estiver disponível, você receberá um erro 404 não encontrado. Você pode simplesmente reenviar a imagem para o seu site e, em seguida, copiar e colar o link para o arquivo aqui.

Para fazer upload da imagem, vá para Mídia >> Adicionar novo . Depois disso, clique em Selecionar arquivos e escolha o arquivo de imagem. Quando o upload for concluído, clique no botão Copiar URL para a área de transferência .

Agora volte para a página do personalizador e substitua o link da imagem quebrada pelo que você acabou de enviar. Por fim, clique em Publicar para salvar suas alterações.

Verifique os nomes dos arquivos

Esta é uma causa comum de problemas de carregamento de imagens. Certifique-se de que a ortografia da imagem seja a mesma da biblioteca de mídia. O erro também pode ser tão pequeno quanto um caractere especial diferente. Digitar um sublinhado (_) em vez de um traço (-) pode resultar em uma imagem quebrada.

Para corrigir esse problema, você precisa comparar o nome do arquivo na postagem ou página com a imagem original na biblioteca de mídia. Para isso, faça login no seu painel do WordPress e vá para Media >> Library .

Agora, use a caixa de pesquisa para encontrar a imagem que deseja comparar. Depois disso, passe o mouse sobre a imagem e selecione Exibir .

Na barra de endereço, você verá o caminho para a imagem. A parte destacada é o nome da imagem como visto abaixo.

Agora vá até o post com a imagem quebrada e verifique o nome do arquivo também. Para isso, abra a página em seu navegador, clique com o botão direito do mouse na imagem quebrada e selecione Abrir imagem em nova guia .

Se houver discrepâncias entre os dois nomes de arquivo, pode ser a causa da não exibição da imagem. Você acabará vendo um erro 404 não encontrado.

Para corrigir esse problema, você precisa editar a postagem com a imagem quebrada e substituir o nome do arquivo errado pelo da biblioteca de mídia.

Depois de corrigir os nomes dos arquivos, você deverá ver a imagem exibida no editor de postagem. Caso contrário, você pode reenviar a imagem e adicioná-la à sua postagem. Certifique-se de atualizar a postagem para salvar suas alterações.

Extensões de arquivo incorretas

Você também deve verificar as extensões de arquivo. Às vezes, o nome do arquivo pode ser digitado corretamente, mas a extensão do arquivo pode estar incorreta. Por exemplo, você pode ter uma imagem carregada como um arquivo .jpg, mas no código, é uma extensão .png. Isso pode causar problemas.

Outro problema comum ocorre com a extensão de imagem “jpg” e “jpeg”. Embora ambos os formatos sejam iguais, você pode encontrar um erro de imagem quebrada se trocar um pelo outro.

Usar um caminho de arquivo relativo

Um caminho relativo é vinculado a um arquivo em relação à URL da página inicial. No WordPress, um caminho relativo retira o nome do domínio e usa apenas o caminho após o domínio.

Portanto, no atributo “src”, em vez de “https://example.com/wp-content/uploads/image.png” , a fonte se torna “/wp-content/uploads/image.png” . E suas imagens funcionarão bem com o link curto.

Um dos benefícios de usar um caminho relativo é que suas imagens funcionarão mesmo se você alterar seu nome de domínio. Esse seria o caso desde que os arquivos ainda estivessem hospedados no mesmo servidor.

Você pode usar um plugin como o plugin Make Paths Relative para forçar o WordPress a usar caminhos relativos para seus arquivos de mídia. O plugin é fácil de instalar e configurar.

Depois de instalar e ativar o plugin, vá para Make Paths Relative >> Settings para abrir a página de configurações do plugin.

Aqui, marque a opção para habilitar caminhos relativos para imagens e clique em Salvar alterações para registrar suas alterações. Agora você poderá exibir imagens em uma página usando caminhos relativos.

Certifique-se de que a imagem existe

Você pode ter vinculado a uma imagem hospedada em um site diferente. Se esse site cair ou mudar para um servidor diferente, as imagens deixarão de existir.

Além disso, vincular diretamente a outro site aumenta o uso do servidor no site do qual você está obtendo a imagem. Se o site host desativar o hotlinking, isso impedirá que sua imagem seja exibida.

Para evitar que isso aconteça, é melhor você enviar todas as imagens para o seu site antes de adicioná-las à página. Além disso, evite usar imagens de sites de terceiros, exceto se você tiver permissão para usá-las.

Problemas de transferência

Este não é um problema comum, mas acontece. Às vezes, seu servidor fica sobrecarregado e não consegue carregar todos os recursos da página com rapidez suficiente antes que a solicitação expire.

Isso acontece principalmente com servidores web baratos. Para resolver isso, você precisa atualizar a capacidade do seu servidor ou migrar para um host confiável.

Você também pode usar um plugin para habilitar o carregamento lento para suas imagens. Ao habilitá-lo, seu servidor só carregará imagens quando o usuário rolar até a seção. Isso liberará os recursos do seu servidor e também acelerará seu site. Você pode saber mais sobre isso em nosso guia de otimização de velocidade .

Resumo – Corrigindo imagens quebradas

Não é incomum que os sites tenham problemas com imagens quebradas ou ausentes, mas é um problema bastante sério que deve ser tratado imediatamente. Se você tiver uma loja online, poderá perder clientes em potencial se os usuários não puderem ver as imagens dos produtos em sua loja.

Neste guia, explicamos algumas das causas de imagens quebradas, bem como dicas de como corrigi-las em sites WordPress.

Corrigir imagens quebradas é uma maneira de reduzir a taxa de rejeição em seu site. Você também precisa otimizar suas imagens para melhorar o desempenho do seu site. Para um tutorial detalhado sobre isso, consulte nosso guia de otimização de imagem.