O erro 404 Not Found indica que o servidor não conseguiu encontrar o recurso solicitado. Para o navegador, isso significa que a URL não é reconhecida.

Requisições 404 provocam frustração ao usuário e podem levar a mau desempenho do website. Além disso, as ferramentas de busca rastreiam e indexam páginas inexistentes e, consequentemente, o ranqueamento do website é impactado negativamente. Com tudo, podemos evitar buscas por requisições inacessíveis usando alguns métodos.

1. Verificar regularmente os links
Pode parecer trivial, mas as causas mais comuns para erros 404 são páginas que foram movidas ou deletadas e URLs digitadas incorretamente. Por isso, você pode utilizar ferramentas gratuitas como Google Search Console e Screaming Frog SEO Spider para validar links quebrados e Soft 404s (recursos não existentes que ainda sim retornam um status de sucesso 200).

2. Validar URLs
Antes de fazer a requisição, valide se a URL é correta. Mesmo que isso não garanta que o recurso solicitado não exista, pode prevenir erros óbvios. Para validar uma URL, existe a interface URL do Javascript. Nela é possível validar a estrutura da URL, o protocolo, domínio ou extensão do arquivo requisitado.

Ademais, pode ser feita a verificação da existência de um recurso antes de fazer uma requisição GET utilizando o método HEAD. Ele retorna apenas os cabeçalhos, sem o corpo da resposta, o que permite saber se o recurso existe sem o baixar.

async function fileExists(url) {
  try {
    const response = await fetch(url, { method: 'HEAD' });
    return response.ok;
  } catch (error) {
    console.error('Erro ao verificar a existência do arquivo:', error);
    return false;
  }
}

fileExists('https://example.com/file.jpg').then(exists => {
  if (exists) {
    console.log('Arquivo existe.');
  } else {
    console.log('Arquivo não encontrado.');
  }
});

3. Avalie as restrições do site
Não se esqueça de verificar se os arquivos HTML, CSS, JavaScript e outros recursos tenham permissões de leitura e execução corretas para os usuários. Também verifique se não há restrições de acesso indevidas nas configurações do servidor web que possam impedir o acesso a determinados arquivos ou diretórios.

Configurações como AllowOverride e Require all granted podem causar problemas se não estiverem corretamente configuradas.

4. Limpe o cache

O cache armazena cópias de recursos do site para que, ao visitar o mesmo site novamente, o navegador possa carregar esses recursos mais rapidamente. Entretanto, se o recurso de um site retorna o erro 404, essa resposta também pode ser armazenada no cache. Então, mesmo que esse recurso seja corrigido no servidor, o usuário ainda pode receber o erro 404. Para resolver esse problema, podemos trabalhar a configuração do cabeçalho HTTP.

Você pode definir Cache-control: no-store para impedir que uma resposta seja armazenada, ou Cache-Control: no-cache para forçar o navegador a verificar com o servidor antes de usar uma versão do cache. Você também pode configurar o cabeçalho Expires com o tempo na qual a resposta será expirada.

5. Se o recurso está ausente, lide com isso graciosamente

Ao invés de deixar o usuário encontrar um erro 404, configure redirecionamentos para páginas alternativas com o erro e sugira outros serviços. Além disso, caso um serviço tenha sido movido ou renomeado, configure um redirecionamento 301 (permanente) ou 302 (temporário) para a nova URL.

Conclusão
Erros 404 impactam negativamente a experiência do usuário e a credibilidade da sua aplicação e o SEO. Como dev, ao lidar graciosamente com erros 404, você demonstra compromisso com a qualidade e a usabilidade, o que fortalece a confiança dos clientes no seu trabalho e no produto que você está desenvolvendo.