ERRO 404 personalizado no Blogger

sexta-feira, 30 de março de 2012

E não foi só o atributo NoFollow que o Blogger inseriu como melhoria. Hoje falaremos na possibilidade de personalizar seu blog no Blogger quando alguém tentar encontrar uma página que não existe mais dentro do blog. Deseja saber como e porque personalizar uma página de erro interno? Continue lendo.
Conforme falado no artigo 'Avesso - a nova parceria do Arruma Blog' sobre os códigos que cada página o foco hoje é o código 404 que representa mensagem de erro de página não encontrada. Você se lembra qual o número do código que a página retorna (mas não mostra em tela) ao navegador quando você clica em um link e ela abre o conteúdo com sucesso? [Escreva um comentário].

Personalizar uma página de erro interno, seja ele o 404 ou algum outro não é uma novidade no mundo web. Grandes portais já fazem isso a um bom tempo e há vários motivos para tal, vejamos alguns:
- Demostra que o dono do site, blog ou portal, tem uma dedicação em tentar ajudar o leitor a buscar o que ele quer ou ainda informar o que fez acontecer o erro;
- Mostra que o erro em questão, realmente está acontecendo dentro do domínio do site;
- Possibilita o webmaster (administrador do site) corrigir o erro da melhor forma possível;

A mensagem que o Blogger exibia antes quando a página não era encontrada era muito genérica ( algo como 'A página que você está procurando não existe neste blog' ) e isso desagrada qualquer dono de blog. A possibilidade de escrever coisas mais legais e textos para ajudar o leitor sem dúvida é fascinante. Ninguém quer perder um leitor ou visitante certo?

COMO ENCONTRO O LOCAL PARA COMEÇAR A DEFINIÇÃO?
Logado em sua conta Blogger, clique no nome do blog de sua escolha. Acesse a opção Configurações depois Preferências de pesquisa. Localize "Página não encontrada" personalizada depois clique em editar.

Este é o local onde você vai inserir o código para o leitor ler e entender o erro.

COMO CRIO O CÓDIGO PARA INSERIR NESTE CAMPO?
Sem pânico. Há muitas formas de fazer isso e a melhor é pague para o Arruma Blog fazer usar o editor de texto do seu próprio blog. Ainda não entendeu? Então abra uma outra aba (um novo guia ou página em outras palavras), comece a escrever e adicionar uma imagem caso queira dar um visual mais legal para sua página de erro.
Recomendamos se coloque no lugar do visitante ou leitor:
- Porque vim parar aqui nesta página?
- O que ela significa?
- O que fazer agora que não encontrei aquele artigo que parecia O melhor?
- Que ruim, quero reclamar deste erro!
- Estou sem vontade de ler cada item da coluna lateral... acho que vou sair daqui e ver outra coisa.

Qual a sua função como blogueiro? Não permitir que o leitor / visitante sinta raiva de você ou do seu blog, explicar o erro e seu possível motivo, dar uma nova chance a ele de fazer nova busca, de ler coisas novas e apresentar soluções alternativas dele continuar no seu blog.
Como fazer isso então? Por meio de uma boa página de erro 404 personalizada!
Recomendo o uso de algumas 'regras' na criação desta página, são elas:
- Seja simpático com o leitor.
- Pedir desculpa por ele não ter encontrado o que queria é ótimo.
- Mostrar que ele pode fazer outras coisas para tentar encontrar a página como por exemplo fornecer a caixa de busca de artigos pelo seguinte código:

<!-- caixa de busca by Arruma Blog -->
<form action='/search' id='searchform' method='get'>
<input id='s' name='q' onblur='if(this.value==&apos;&apos;){this.value=&apos;search site&apos;};' onfocus='if(this.value==&apos;search site&apos;){this.value=&apos;&apos;};' type='text'/>
<input id='searchsubmit' type='submit' value='Buscar no blog'/>
</form>       
<!-- fim caixa de busca by Arruma Blog-->

  Mude apenas o que está em vermelho, ou seja, 'Busque no blog'. Esta informação vai aparecer no botão ao lado da caixa de texto. A primeira e ultima linha são comentários, elas não vão aparecer para o leitor e se excluí-las no futuro possivelmente você terá dificuldade em saber o começo e fim da pesquisa.

- Se você achar legal e interessante, mostre links internos que mais são relevantes ao público.
- Mostre que ele não está só naquele local e indique o link contato de seu blog além de inserir outras formas de contato como as redes sociais, mas ressalte que é necessário passar como ele chegou ao erro antes de simplesmente criticar o blog por não encontrar o artigo / link.

OBS: Você pode usar softwares para edição de página web simples para criar sua página como Adobe Dreamweaver ou notepad ++ e ainda editores como o Microsoft Writer. Tome cuidado neste caso ao usar imagens, você terá que hospedá-las em algum lugar, então você pode usar o Picasa da Google mesmo, por já ter conta lá ou em algum outro serviço de hospedagem.

O QUE NÃO FAZER EM UMA PÁGINA DE ERRO 404


Escrever um texto gigante tentando explicar o erro.
Simplesmente colocar um símbolo ou objeto que não remete ao certo ao erro 404.
Colocar apenas uma imagem. (Cadê a acessibilidade digital?)
Tornar a mensagem de erro um local onde o visitante encontra de tudo, até selos dos parceiros.
Simplesmente falar que a página não existe.
Sugerir que ele busque o conteúdo em sites de busca. Jamais isso.
Humilhar a sua pessoa (citando até nome do ADM) pedindo desculpas de diversas formas em diversos idiomas. (quem garante que a culpa é exclusivamente sua?)

JÁ FIZ O CONTEÚDO DA MINHA PÁGINA DE ERRO, E AGORA?
Ok, clique no botao HTML do painel de postagem e copie TUDO o que você está vendo. Depois vamos então voltar na outra aba e no campo que está selecionado para página de erro personalizada, cole o código lá. Lembre-se que cada linha da sua mensagem de erro tem um espaço em KB a ser armazenado pelo Blogger então manere nas palavras e nas cores da sua imagem (se houver imagem) pois o Blogger só armazena informações com até 10 KB de espaço. Não há como saber o tamanho do seu código, mas o Blogger vai te falar quando não conseguir salvar.
Como o próprio Blogger hospeda as imagens que usamos, neste caso exclusivamente você não terá problema, mas recomendo que retire o link da imagem que você inseriu (quando você insere uma imagem na postagem, o Blogger link ela para a imagem em tamanho real). Isso pode ser feito inda no painel de edição do Blogger.
Salve as alterações e veja o resultado. Não sabe como fazer um teste? Ok, visite seu blog. No endereço do mesmo, depois do endereço de seu blog, edite alguma letra se você estiver em algum post OU escreva uma palavra qualquer, exemplo:

http://www.arrumablog.com/erro 
*Neste caso a palavra ERRO depois do endereço do blog fará mostrar a página interna 404 pois não existe um diretório chamado erro no Arruma Blog

Mostrar que não é um simples computador que está falando com o visitante é sempre melhor. Isso faz com que seu blog fique mais agrádevel e interativo, então não polpe esforço para criar e editar sua página de erro 404 bem como seus artigos.

9 comentários:

  1. Olá!

    Gostei do seu tutorial! Em vez de apenas mostrar o novo recurso, você também explicou as questões teóricas envolvidas, o que é bastante importante aos leitores.

    E também gostei de você dizer o que não deve ser colocado na página não encontrada personalizada. Muitos aproveitam mal esse espaço e desperdiçam uma oportunidade preciosa de manter o visitante em seus blogs.

    Um abraço!

    ResponderExcluir
  2. no meu nao pegou , e é pq eu tenho conhecimentos em HTML fiz tudo certo mais nao apareceu nada...tipo http://destackstube.blogspot.com.br/fdfdf simplesmente nao me mostrou pagina de erro nenhuma pq?

    ResponderExcluir
    Respostas
    1. Visitei seu blog e notei seu modelo de blog é modificado e muito bonito (além de bem elaborado). o que pode acontecer é que a pessoa que o criou ou editou não inseriu os códigos mais atuais para a página surtir o efeito esperado. Acredito que o modelo de blog usado segue uma estrutura antiga, mas não tem como confirmar

      Excluir
  3. Excelente artigo, me ajudou muito, parabéns...

    ResponderExcluir
  4. me ajudo muito tenho um blog é estou tendo um pequeno erro obg

    ResponderExcluir
  5. Bom dia!
    É possível colocar um link nessa mensagem de erro? Por exemplo: "desculpe, esta página não existe, mas você pode gostar de..."
    Visitei a sua mensagem de erro (www.arrumablog.com/naoexisto) e vi que ela é extremamente simples. Vc optou pela simplicidade (cor única, sem imagens, etc.) por conta do peso?
    Obrigada.
    Vanessa

    ResponderExcluir
    Respostas
    1. Olá Vanessa,
      Confesso que tinha elaborado mais códigos para a página de erro, mas depois, ao criar redirecionamentos personalizados aqui mesmo no blog, de alguma forma ele sumiu e eu deixei o mais simples possível.
      No Blogger, há uma limitação pequena que envolve tamanho do arquivos em bytes se não me engano. Repare que no local indicado para editar sua página de erro, há uma limitação de espaço ou de caracteres e isso faz sim uma diferença entre o que está lá, mas ainda assim você pode chamar uma imagem hospedada por exemplo no Picasa da Google mesmo e personalizar com uma caixa de busca que o seu blog aguenta.

      Excluir
    2. Entendo, Rafa. Acho q também vou optar por uma mensagem simples.
      Muito obrigada pelas suas explicações. Serão muito úteis para mim.
      Sucesso sempre!
      Abs,
      Vanessa

      Excluir
  6. adorei a dica e ficou bem legal no meu blog :D

    ResponderExcluir

Use este espaço para perguntar, questionar ou dar algum complemento sobre o artigo em questão. Todos os comentários publicados no Arruma Blog são de inteira responsabilidade dos seus respectivos autores. A finalidade do comentário é proporcionar ao leitor o poder de resposta sobre a postagem apenas. Neste campo não será aprovado comentários para publicar link e/ou material com conteúdo pornográfico de qualquer espécie, discriminatório ou ofensivo de qualquer natureza; que enviar informações sobre atividades ilegais e/ou incitar crimes ou violência. Para finalidades comerciais ou contato direto com o autor damos a opção de 'entrar em contato no topo da página'.

É expressamente proibido utilizar o espaço de comentários para engajar-se em atividades de cunho comercial, como vender produtos, procurar anunciantes e patrocinadores, divulgar informações pessoais de contato, além de veicular banners de qualquer espécie. Também serão apagados comentários de auto-promoção ou que não sejam pertinentes ao artigo em questão.

Todos os comentários são moderados e poderão ser excluídos caso sejam considerados inadequados, ofensivos ou alheios ao objetivo do blog. Este é blog é protegido pela lei de direitos autorais vigente no Brasil.


















 
Arruma Blog © 2009 - 2013 | Desenhado por Bubble Shooter | Direitos reservados | Obrigado pela visita