7

Já vi muito tutorial ensinando a personalizar tela de erro 404, mas apenas em CMS como Wordpress, queria saber como eu faço pra estilizar uma página de erro 404*(not found)*, pra que o usuário veja um página bonita, no caso de um link quebrado, ou por qualquer que seja o motivo.

Como faria pra que o navegador abrisse essa minha página 404.html por exemplo em caso de um erro 404?

0

2 Respostas 2

11

Uma página de erro é como qualquer outra página do seu site, e pode ser criada com as ferramentas tradicionais que você está acostumado, usando HTML, CSS, e mesmo JS se quiser.

Tenha em mente que pela natureza da página, você pode não se limitar a apenas avisar do erro ocorrido. Pelo contrário, é muito mais interessante que, a partir da página de erro, o usuário possa ter a navegação básica para encontrar o que precisa e quem sabe até uma pesquisa automática, como este 404 do php.net, melhorando em muito a experiência do usuário e valorizando o site.

Note alguns detalhes importantes a seguir:


O cabeçalho de status do HTTP

Uma característica importante das páginas de erro, é o cabeçalho HTTP correto. Quando um servidor web envia uma página de erro, há uma informação que é passada ao browser, que é o header de status. Esse cabeçalho não aparece no código-fonte da página, mas é enviado como parte do protocolo HTTP. O status normal é 200, mas em caso de erro ou outras condições especiais, este valor muda.

É importante que o status seja sempre enviado corretamente, pois é através dele que os navegadores, e principalmente os engines de pesquisa como Duck Duck Go, Google, Bing e outros se orientam para indexar corretamente seu site.


Certo, mas como faço para mostrar a página de erro?

Agora entramos no universo dos servidores HTTP. Quando você digita um endereço, como https://pt.stackoverflow.com/a/20739/70, o navegador de internet faz uma requisição de DNS para saber quem é o host responsável pelo endereço pt.stackoverflow.com. Assim que descobre o IP deste host, o navegador faz uma requisição HTTP pedindo o recurso de nome /a/20739/70. Nesta hora, o aplicativo que está servindo as páginas vai utilizar sua metodologia interna para ver se o recurso está disponível, e caso não esteja, ele usará uma página de erro pré-configurada.

Finalmente, para que você possa mostrar a sua nova e criativa página, precisa configurar o servidor para que ele saiba onde ela está. Assim, vamos para a configuração dos servidores HTTP mais comuns:


Configurando o Apache

Esta não pretende ser uma explicação demais detalhada, a ponto de substituir a documentação do Apache, mas é um ponto de partida. Normalmente ao instalar o Apache, há um arquivo de configuração, geralmente com o nome httpd.conf. Neste arquivo, há várias linhas como esta, correspondentes às páginas de erro padrão:

ErrorDocument 404 /404.html

Para utilizar sua página personalizada, basta alterar o caminho /404.html para o local onde você colocou a sua nova página de erro.

Caso você não vá alterar as páginas de erro de todos os sites, mas apenas de alguns, ou mesmo caso não tenha acesso à configuração do Apache, uma saída é criar e/ou modificar um arquivo texto de nome .htaccess (na versão linux) na raiz do site desejado, e incluir os erros personalizados neste arquivo utilizando a sintaxe mencionada, como neste exemplo:

ErrorDocument 404 /meus_erros/erro404.html
ErrorDocument 500 /meus_erros/erro500.html
...

Assim, ao reiniciar o Apache ou recarregar sua configuração, seus erros personalizados devem passar a funcionar no lugar dos originais.

Há vários fatores que influenciam nestas configurações, para maiores detalhes, consulte a documentação do Apache.


Configurando o IIS

No IIS 5.0 a configuração pode ser feita diretamente pelo snap-in do IIS, selecionando o site ou diretório desejado, e clicando em "Propriedades". Em seguida, basta escolher "Erros personalizados", selecionar o erro que deseja alterar, e "Editar propriedades". Aí pode escolher "Arquivo", e apontar o HTML personalizado que criou.

Alternativamente, neste último passo, em vez de "Arquivo" pode escolher "URL", e apontar para um caminho dentro do seu site, caso a página esteja dentro da estrutura de hospedagem. Exemplo /meus_erros/erro404.htm

No IIS 7.5 a solução é parecida, mas o caminho é abrir o IIS Manager, escolher o site desejado, e selecionar o ícone "Páginas de erro .NET", e na barra de ações, clicar na opção de editar, e escolher "ligado". Na tela de edição há um lugar para uma página de erro "geral", e para personalizar individualmente os erros, ainda na barra de ações há o link "Adicionar", para que você escolha o erro desejado e o caminho do respectivo html.


Erros HTTP mais comuns:

Você pode ver uma lista bastante extensa na Wikipedia, mas eis alguns dos erros mais comuns para se personalizar:

  • 401 Não autorizado
    Semelhante ao 403, mas especificamente para uso quando a autenticação é possível, mas não foi fornecida ou reconhecida.

  • 403 Proibido
    O pedido foi um pedido legal, mas o servidor está se recusando a responder. Por exemplo, ao se tentar visualizar uma pasta protegida.

  • 404 Não encontrado
    O clássico "Not found", página não encontrada.

  • 500 Erro interno do servidor
    Indica um erro do servidor ao processar a solicitação. Na grande maioria dos casos está relacionada as permissões dos arquivos ou pastas do software ou script que o usuário tenta acessar, ou mesmo problemas na configuração do servidor web.

1

Você deve criar uma configuração para isso. Você pode colocar esta configuração no seu server web (Apache, Nginx...), ou colocar essa configuração na própria aplicação: você irá verificar se o usuário tentou acessar uma url válida, senão você manda exibir o 404.html. Quando se constrói uma aplicação web, é bem comum utilizar algum Framework (Zend, Symphony, Cake...), e eles já possuem tudo prontinho para você apenas se preocupar com o HTML e CSS desta página. Senão, você terá que fazer este redirecionamento manualmente. Como você colocou a tag PHP na pergunta, imagino que esteja fazendo um site com PHP, certo? Bem, você deve ter algum lugar para colocar as rotas(urls válidas) do site, certo? Está utilizando algum framework? Está fazendo tudo "na mão"?

Se você utiliza um framework como AngularJS ou EmberJS, no caso de estar criando uma aplicação JS, pode fazer esta verificação no cliente mesmo, e não no servidor.

Bem, dê mais detalhes da sua aplicação, assim é mais fácil dar o caminho =)

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .