{"id":4414,"date":"2020-08-27T00:00:00","date_gmt":"2020-08-27T00:00:00","guid":{"rendered":"https:\/\/rockcontent.com\/br\/2020\/08\/27\/pagina-de-erro-404-personalizada\/"},"modified":"2025-09-19T11:03:34","modified_gmt":"2025-09-19T14:03:34","slug":"pagina-de-erro-404-personalizada","status":"publish","type":"post","link":"https:\/\/pingback.com\/br\/resources\/pagina-de-erro-404-personalizada\/","title":{"rendered":"Confira o passo a passo para criar uma p\u00e1gina de erro 404 personalizada"},"content":{"rendered":"<p>O <a href=\"https:\/\/pingback.com\/br\/resources\/wordpress\/\" rel=\"noreferrer noopener\" target=\"_blank\">WordPress<\/a> \u00e9 uma das ferramentas mais populares para a cria\u00e7\u00e3o e gerenciamento de websites e isso n\u00e3o \u00e9 por acaso. Suas <strong>muitas funcionalidades<\/strong> permitem que o usu\u00e1rio crie experi\u00eancias personalizadas para os visitantes da p\u00e1gina e, assim, usufrua dos muitos benef\u00edcios de um canal digital eficiente.<\/p>\n<p>Naturalmente, a gest\u00e3o do site envolve uma s\u00e9rie de t\u00e9cnicas para ser bem-sucedida e, mesmo se for, nem sempre \u00e9 poss\u00edvel escapar de alguns erros comuns. Um equ\u00edvoco de configura\u00e7\u00e3o pode, por exemplo, tornar uma p\u00e1gina do site inacess\u00edvel. Isso gera o <a href=\"https:\/\/pingback.com\/br\/resources\/erro-404\/\" rel=\"noreferrer noopener\" target=\"_blank\">erro 404<\/a>, nada agrad\u00e1vel para a experi\u00eancia dos visitantes.<\/p>\n<p>Contudo, a boa not\u00edcia \u00e9 que \u00e9 poss\u00edvel contornar a situa\u00e7\u00e3o e, quem sabe, recuperar um internauta insatisfeito. Soa como uma boa ideia? Ent\u00e3o, voc\u00ea precisa saber como criar uma p\u00e1gina de erro 404 personalizada. Continue lendo este post para descobrir:<\/p>\n<ul class=\"wp-block-list\">\n<li><a href=\"#1\">O que \u00e9 erro 404?<\/a><\/li>\n<li><a href=\"#2\">Por que contar com uma p\u00e1gina de erro 404 personalizada?<\/a><\/li>\n<li><a href=\"#3\">Como personalizar minha p\u00e1gina?<\/li>\n<li><a href=\"#4\">Quais s\u00e3o os melhores exemplos de personaliza\u00e7\u00e3o e criatividade?<\/li>\n<\/ul>\n<p><a id=\"1\"><\/a><\/p>\n<h2 class=\"wp-block-heading\">O que \u00e9 erro 404?<\/h2>\n<p>O erro 404 \u00e9 um dos mais comuns na internet. \u00c9 dif\u00edcil encontrar algu\u00e9m que nunca tenha se deparado com essa p\u00e1gina, que, basicamente, informa que o endere\u00e7o em quest\u00e3o n\u00e3o est\u00e1 dispon\u00edvel. Diversos fatores podem levar a esse problema, mas antes de falar deles, vamos entender o que, de fato, significa essa mensagem.<\/p>\n<p>Em linguagem HTML, o c\u00f3digo 404 pode ser entendido em duas partes. O n\u00famero &#8220;4&#8221; inicial indica que o erro foi provocado pelo cliente, ou seja, por quem solicitou a p\u00e1gina ao servidor. J\u00e1 o &#8220;04&#8221; simplesmente informa que o documento HTML n\u00e3o foi encontrado, logo, a solicita\u00e7\u00e3o n\u00e3o p\u00f4de ser conclu\u00edda.<\/p>\n<p>Observe essa imagem de erro 404 do Google e perceba como o texto que acompanha o erro 404 indica que a <a href=\"https:\/\/pingback.com\/br\/resources\/url\/\" rel=\"noreferrer noopener\" target=\"_blank\">URL<\/a> n\u00e3o foi encontrada <strong>no servidor em quest\u00e3o. <\/strong><\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img data-opt-id=962855115  fetchpriority=\"high\" decoding=\"async\" src=\"https:\/\/mlgzkyrbq6eh.i.optimole.com\/cb:AiM1.588\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/pingback.com\/br\/resources\/wp-content\/uploads\/2020\/08\/image-5.png\" alt=\"p\u00e1gina de erro 404 personalizada\" class=\"wp-image-53689\"\/><\/figure>\n<\/div>\n<p>N\u00e3o ficou claro? O que o erro 404 informa ao visitante \u00e9 que o servidor do site que ele est\u00e1 tentando acessar est\u00e1 comunic\u00e1vel, mas a p\u00e1gina em quest\u00e3o n\u00e3o pode ser encontrada. Na imagem, ainda \u00e9 poss\u00edvel ler &#8220;Isso \u00e9 tudo que sabemos&#8221;. Isso \u00e9 porque, como j\u00e1 falamos, n\u00e3o existe apenas uma raz\u00e3o para a ocorr\u00eancia do erro.<\/p>\n<h3 class=\"wp-block-heading\">O que pode causar o erro 404?<\/h3>\n<p>Uma das causas mais comuns desse tipo de erro sequer tem a ver com o administrador do site. Geralmente, a p\u00e1gina 404 aparece simplesmente porque o usu\u00e1rio, ao digitar a URL na barra de pesquisas,<strong> errou pelo menos um caractere. <\/strong>Desse modo, fica claro que todos os sites est\u00e3o expostos a esse tipo de situa\u00e7\u00e3o.<\/p>\n<p>Dessa maneira, n\u00e3o adianta ignorar a personaliza\u00e7\u00e3o da p\u00e1gina 404 porque voc\u00ea entende que a configura\u00e7\u00e3o de todas as p\u00e1ginas est\u00e1 infal\u00edvel. Afinal, mesmo que isso seja verdade, usu\u00e1rios continuar\u00e3o a se deparar com o erro ao confundirem o endere\u00e7o da p\u00e1gina, muitas vezes sem ao menos perceber isso.<\/p>\n<p>Deixando de lado a a\u00e7\u00e3o dos usu\u00e1rios como causa, os outros motivos t\u00eam a ver com falhas ocorridas em algum detalhe da gest\u00e3o do site.<\/p>\n<p>Um editor, por exemplo, pode alterar a estrutura de uma URL para torn\u00e1-la mais amig\u00e1vel e melhorar a pontua\u00e7\u00e3o de <a href=\"https:\/\/pingback.com\/br\/resources\/o-que-e-seo\/\" rel=\"noreferrer noopener\" target=\"_blank\">SEO<\/a>. Sem problemas, mas se ele esquecer de configurar o redirecionamento da antiga URL para a nova, vai gerar o erro 404.<\/p>\n<p>Trata-se de uma situa\u00e7\u00e3o muito comum em momentos de <a href=\"https:\/\/pingback.com\/br\/resources\/migracao-de-website\/\" rel=\"noreferrer noopener\" target=\"_blank\">migra\u00e7\u00e3o<\/a>. Pense, por exemplo, que voc\u00ea conta com uma s\u00f3lida estrat\u00e9gia de <a href=\"https:\/\/pingback.com\/br\/resources\/link-building\/\" rel=\"noreferrer noopener\" target=\"_blank\">link building<\/a> e conta com diversos dom\u00ednios apontando para suas p\u00e1ginas.<\/p>\n<p>Se voc\u00ea mudar o endere\u00e7o delas, quem clicar nos links da estrat\u00e9gia n\u00e3o vai chegar na p\u00e1gina desejada.<\/p>\n<p>Com tudo isso, entendemos que o erro 404 \u00e9 causado pelo usu\u00e1rio ou pelo administrador do site, n\u00e3o tendo nada a ver com problemas no servidor.<\/p>\n<h3 class=\"wp-block-heading\">Como o erro 404 prejudica minha estrat\u00e9gia digital?<\/h3>\n<p>Voc\u00ea j\u00e1 sabe que qualquer tipo de inconsist\u00eancia na <a href=\"https:\/\/pingback.com\/br\/resources\/app-permite-que-e-commerces-analisem-a-experiencia-de-seus-usuarios\/\" rel=\"noreferrer noopener\" target=\"_blank\">experi\u00eancia<\/a> digital do usu\u00e1rio pode levar a sua insatisfa\u00e7\u00e3o, mas as consequ\u00eancias do erro 404 v\u00e3o al\u00e9m disso. \u00c9 que, embora essas p\u00e1ginas n\u00e3o sejam consideradas pelos mecanismos de busca, elas podem, de forma indireta, afetar os seus resultados de SEO.<\/p>\n<p>\u00c9 bem simples. Pense em sua pr\u00f3pria experi\u00eancia como usu\u00e1rio de internet e responda: o que voc\u00ea faz quando se depara com uma p\u00e1gina de erro ao tentar acessar um site? Provavelmente aperta o bot\u00e3o de voltar e busca por outra op\u00e7\u00e3o semelhante, correto?<strong> \u00c9 exatamente isso que voc\u00ea deve evitar em seu site.<\/strong><\/p>\n<p>N\u00e3o apenas pela satisfa\u00e7\u00e3o geral do usu\u00e1rio, mas tamb\u00e9m pelos sinais que isso passa ao algoritmo do Google. Se muitos usu\u00e1rios tentam acessar uma p\u00e1gina e saem logo em seguida, a Bounce Rate sobe, o tempo de perman\u00eancia na p\u00e1gina desce e o seu ranking nos mecanismos de busca cai.<\/p>\n<p>Sendo assim, fica mais do que clara a necessidade de manter suas URLs atualizadas e monitorar suas p\u00e1ginas para garantir seu funcionamento. Ainda assim, \u00e9 ut\u00f3pico imaginar que o seu website nunca vai apresentar um erro 404. Ent\u00e3o, o que fazer? <strong>A resposta est\u00e1 na personaliza\u00e7\u00e3o.<\/strong><\/p>\n<p><a id=\"2\"><\/a><\/p>\n<h2 class=\"wp-block-heading\">Por que contar com uma p\u00e1gina de erro 404 personalizada?<\/h2>\n<p>Considerando que as p\u00e1ginas de erro 404 n\u00e3o podem ser completamente evitadas, \u00e9 interessante fazer uso delas para amenizar o problema e at\u00e9 colher benef\u00edcios.<\/p>\n<p>A personaliza\u00e7\u00e3o permite, para come\u00e7ar, que voc\u00ea <strong>deixe a p\u00e1gina de erro com a cara do seu website<\/strong>, evitando os visuais padr\u00f5es que os internautas j\u00e1 est\u00e3o cansados de ver.<\/p>\n<p>Assim, voc\u00ea fortalece a identidade visual da sua marca e, sutilmente, informa ao visitante que ele ainda est\u00e1 no site e pode tomar outras a\u00e7\u00f5es. Em outras palavras, voc\u00ea garante que o leitor n\u00e3o pense que foi direcionado para fora do site ou, pior, que o portal n\u00e3o existe mais.<\/p>\n<p>Com a personaliza\u00e7\u00e3o, voc\u00ea tamb\u00e9m pode usar o espa\u00e7o da p\u00e1gina de erro para manter o visitante envolvido na experi\u00eancia. Como? <strong>Oferecendo informa\u00e7\u00f5es relevantes e outras op\u00e7\u00f5es de navega\u00e7\u00e3o. <\/strong><\/p>\n<p>Por exemplo, uma mensagem amig\u00e1vel pode explicar o erro e sugerir formas de contorn\u00e1-lo. Outra ideia \u00e9 um bot\u00e3o que leve a pessoa at\u00e9 a p\u00e1gina inicial do site, onde ela pode encontrar o que procura.<\/p>\n<p>Com criatividade, \u00e9 poss\u00edvel gerar at\u00e9 uma experi\u00eancia divertida para o usu\u00e1rio. Observe, por exemplo, esse exemplo da Magnt. Repare como a p\u00e1gina, de forma l\u00fadica, explica o que pode ter motivado o erro e, ainda, oferece um bot\u00e3o de redirecionamento para a p\u00e1gina principal.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img data-opt-id=256208093  fetchpriority=\"high\" decoding=\"async\" src=\"https:\/\/neilpatel.com\/wp-content\/uploads\/2015\/11\/image271.png\" alt=\"p\u00e1gina de erro 404 personalizada\"\/><\/figure>\n<\/div>\n<p>Mais a frente, vamos apresentar mais exemplos que podem inspirar voc\u00ea. Antes disso, vamos entender melhor o processo de personaliza\u00e7\u00e3o dessas p\u00e1ginas. Siga a leitura!<\/p>\n<p><a id=\"3\"><\/a><\/p>\n<h2 class=\"wp-block-heading\">Como personalizar minha p\u00e1gina?<\/h2>\n<p>Se voc\u00ea tem conhecimentos t\u00e9cnicos avan\u00e7ados de HTML, tem a possibilidade de realizar essa edi\u00e7\u00e3o por meio do servidor, iniciando pela edi\u00e7\u00e3o do arquivo <strong>.<\/strong><a href=\"https:\/\/pingback.com\/br\/resources\/htaccess\/\" rel=\"noreferrer noopener\" target=\"_blank\"><strong>htaccess<\/strong><\/a><strong>. <\/strong>Contudo, \u00e9 bem verdade que esse tipo de habilidade n\u00e3o \u00e9 das mais comuns, e pode significar a necessidade de contratar um profissional.<\/p>\n<h3 class=\"wp-block-heading\">Como conduzir o processo pelo cPanel?<\/h3>\n<p>Contudo, a realidade \u00e9 que a maioria dos <a href=\"https:\/\/pingback.com\/br\/resources\/como-escolher-um-cms\/\" rel=\"noreferrer noopener\" target=\"_blank\">CMSs<\/a> oferecem op\u00e7\u00f5es mais simples para resolver o problema, como a utiliza\u00e7\u00e3o do <a href=\"https:\/\/pingback.com\/br\/resources\/cpanel\/\" rel=\"noreferrer noopener\" target=\"_blank\">cPanel<\/a>, que \u00e9 uma esp\u00e9cie de plataforma de gerenciamento de sites em WordPress. Para utilizar esse caminho, acesse o<a href=\"https:\/\/pingback.com\/br\/resources\/dashboard\/\" rel=\"noreferrer noopener\" target=\"_blank\"> painel de controle<\/a>, v\u00e1 at\u00e9 o menu avan\u00e7ado, e acesse as p\u00e1ginas de erro.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img data-opt-id=1329088044  fetchpriority=\"high\" decoding=\"async\" src=\"https:\/\/www.hostinger.com.br\/tutoriais\/wp-content\/uploads\/sites\/12\/2018\/08\/se%C3%A7%C3%A3o-p%C3%A1gina-de-erros.png\" alt=\"p\u00e1gina de erro 404 personalizada\"\/><\/figure>\n<\/div>\n<p>Depois, selecione o dom\u00ednio em que se encontra a p\u00e1gina de erro que voc\u00ea quer personalizar. Por configura\u00e7\u00e3o padr\u00e3o, o cPanel vai exibir uma lista com alguns dos erros mais comuns, como o pr\u00f3prio 404, o <a href=\"https:\/\/pingback.com\/br\/resources\/erro-500\/\" rel=\"noreferrer noopener\" target=\"_blank\">erro 500<\/a>, o erro 0101 e por a\u00ed vai.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img data-opt-id=1978752116  decoding=\"async\" src=\"https:\/\/www.hostinger.com.br\/tutoriais\/wp-content\/uploads\/sites\/12\/2018\/08\/configura%C3%A7%C3%A3o-p%C3%A1ginas-de-erro.png\" alt=\"p\u00e1gina de erro 404 personalizada\"\/><\/figure>\n<\/div>\n<p>Escolha o tipo de p\u00e1gina que voc\u00ea quer editar e prossiga para o pr\u00f3ximo passo. Agora, depende das funcionalidades oferecidas pelo seu servi\u00e7o de hospedagem. Algumas s\u00f3 permitem a edi\u00e7\u00e3o por meio de mudan\u00e7as diretamente no c\u00f3digo HTML, o que pode ser um desafio para quem n\u00e3o \u00e9 t\u00e3o experiente no assunto.<\/p>\n<p>Se voc\u00ea usa o WordPress, <strong>pode realizar todo o processo de forma mais simples a partir da instala\u00e7\u00e3o do plugin <\/strong><a href=\"https:\/\/br.wordpress.org\/plugins\/404page\/\" rel=\"noreferrer noopener\" target=\"_blank\"><strong>404page<\/strong><\/a><strong>.<\/strong> Essa ferramenta permite que voc\u00ea crie um redirecionamento autom\u00e1tico da p\u00e1gina de erro para outro ponto do seu website, como sua homepage. Mas, como o foco deste texto \u00e9 a cria\u00e7\u00e3o de p\u00e1ginas personalizadas, vamos observar como o plugin pode ajudar nisso.<\/p>\n<h3 class=\"wp-block-heading\">Como editar sua p\u00e1gina de erro a partir do plugin 404page?<\/h3>\n<p>O primeiro passo n\u00e3o poderia ser mais simples: criar uma p\u00e1gina nova que, no futuro, se transformar\u00e1 na mensagem de erro personalizada. Para tal, acesse o painel do WordPress, v\u00e1 at\u00e9 &#8220;p\u00e1ginas&#8221; e clique em &#8220;criar nova&#8221;.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img data-opt-id=2106448240  decoding=\"async\" src=\"https:\/\/mlgzkyrbq6eh.i.optimole.com\/cb:AiM1.588\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/pingback.com\/br\/resources\/wp-content\/uploads\/2019\/11\/erro_404_6-1.jpeg\" alt=\"p\u00e1gina de erro 404 personalizada\"\/><\/figure>\n<\/div>\n<p>Na p\u00e1gina rec\u00e9m-criada, voc\u00ea pode fazer as altera\u00e7\u00f5es que quiser. Escreva mensagens criativas, mexa com as cores, adicione imagens e fa\u00e7a o que achar necess\u00e1rio para torn\u00e1-la adequada \u00e0 situa\u00e7\u00e3o, ao <a href=\"https:\/\/pingback.com\/br\/resources\/tom-de-voz-da-marca\/\" rel=\"noreferrer noopener\" target=\"_blank\">tom de voz<\/a> da sua marca e \u00e0s caracter\u00edsticas da persona.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img data-opt-id=1912456018  decoding=\"async\" src=\"https:\/\/mlgzkyrbq6eh.i.optimole.com\/cb:AiM1.588\/w:1024\/h:367\/q:mauto\/f:best\/https:\/\/pingback.com\/br\/resources\/wp-content\/uploads\/2019\/11\/erro_404_7-1024x367.jpeg\" alt=\"p\u00e1gina de erro 404 personalizada\"\/><\/figure>\n<\/div>\n<p>Com a p\u00e1gina criada, \u00e9 hora de baixar o <a href=\"https:\/\/wordpress.org\/plugins\/404page\/\" rel=\"noreferrer noopener\" target=\"_blank\">404page.<\/a> Agora, o caminho \u00e9 bem simples. Abra o plugin, acesse a aba &#8220;general&#8221; e selecione a p\u00e1gina que voc\u00ea quer configurar como destino para os usu\u00e1rios que acessarem uma URL inexistente. Naturalmente, voc\u00ea vai selecionar a p\u00e1gina que acabou de criar e personalizar.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img data-opt-id=1531067216  decoding=\"async\" src=\"https:\/\/mlgzkyrbq6eh.i.optimole.com\/cb:AiM1.588\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/pingback.com\/br\/resources\/wp-content\/uploads\/2019\/11\/erro_404_11-1.jpeg\" alt=\"p\u00e1gina de erro 404 personalizada\"\/><\/figure>\n<\/div>\n<p>Como voc\u00ea pode notar, esse processo cria uma p\u00e1gina de erro secund\u00e1ria que, essencialmente, \u00e9 mais um endere\u00e7o dentro do seu website. Dito isso, \u00e9 preciso tomar as precau\u00e7\u00f5es necess\u00e1rias para evitar que essa p\u00e1gina seja indexada no ranking de pesquisa dos mecanismos de buscas. Um plugin especializado, como o Yoast SEO, resolve esse problema facilmente.<\/p>\n<p>Achou o processo complicado? Embora muito popular e eficiente, o WordPress pode ser um desafio para os menos experientes, ou para os que n\u00e3o t\u00eam tempo suficiente para focar na manuten\u00e7\u00e3o do site.<\/p>\n<p>Por isso, \u00e9 crucial fazer uso de uma plataforma de hospedagem como a Stage, que, al\u00e9m de facilitar a execu\u00e7\u00e3o de diversos processos, garante alta performance ao seu site e aumenta os n\u00edveis de <a rel=\"noreferrer noopener\" href=\"https:\/\/pingback.com\/br\/resources\/seguranca-de-hospedagem\/\" target=\"_blank\">seguran\u00e7a<\/a>. Se quiser saber mais, \u00e9 <a rel=\"noreferrer noopener\" href=\"https:\/\/rockstage.io\/signup?__hstc=64741936.f19f9a972c7f9a7470ce9c125d956d99.1584895765272.1597868387954.1597873039159.127&amp;__hssc=64741936.1.1597873039159&amp;__hsfp=1520915155\" target=\"_blank\">s\u00f3 fazer um teste!<\/a><\/p>\n<p><a id=\"4\"><\/a><\/p>\n<h2 class=\"wp-block-heading\">Exemplos de personaliza\u00e7\u00e3o e criatividade<\/h2>\n<p>Bom, agora que voc\u00ea entende o que \u00e9 e o que representa a p\u00e1gina de erro 404 e sabe que sua personaliza\u00e7\u00e3o pode ser ben\u00e9fica para a experi\u00eancia dos usu\u00e1rios e, consequentemente para os seus resultados, deve estar pensando em criar a sua. Por isso, separamos alguns exemplos excelentes para alimentar sua criatividade. Acompanhe!<\/p>\n<h3 class=\"wp-block-heading\">Lego<\/h3>\n<p>A p\u00e1gina de erro da <a href=\"https:\/\/www.lego.com\/pt-br\/error\">Lego<\/a> \u00e9 um excelente exemplo por reunir praticamente todas as caracter\u00edsticas recomendadas para esse tipo de personaliza\u00e7\u00e3o. Como voc\u00ea pode ver abaixo, o design reflete bem a <a rel=\"noreferrer noopener\" href=\"https:\/\/pingback.com\/br\/resources\/identidade-visual-para-agencia\/\" target=\"_blank\">identidade visual<\/a> da marca. At\u00e9 brinquedos famosos s\u00e3o usados de forma engra\u00e7ada para atenuar a mensagem de erro.<\/p>\n<p>Al\u00e9m disso, na parte de baixo, a Lego oferece um link que direciona o usu\u00e1rio at\u00e9 a loja do site.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img data-opt-id=1278961796  decoding=\"async\" src=\"https:\/\/mlgzkyrbq6eh.i.optimole.com\/cb:AiM1.588\/w:1024\/h:512\/q:mauto\/f:best\/https:\/\/pingback.com\/br\/resources\/wp-content\/uploads\/2020\/08\/image-8-1024x512.png\" alt=\"p\u00e1gina de erro 404 personalizada\" class=\"wp-image-53692\"\/><\/figure>\n<\/div>\n<h3 class=\"wp-block-heading\">Pixar<\/h3>\n<p>A <a href=\"https:\/\/www.pixar.com\/error\">Pixar<\/a> tamb\u00e9m apela para um de seus personagens famosos para tornar a mensagem de erro menos frustrante. Al\u00e9m isso, a linguagem empregada \u00e9 bem informal, o que \u00e9 adequado para o p\u00fablico que geralmente acessa o site da produtora de filmes animados.<\/p>\n<p>O interessante \u00e9 notar como a empresa d\u00e1 import\u00e2ncia \u00e0 personaliza\u00e7\u00e3o dessas p\u00e1ginas. No exemplo mostrado abaixo, a personagem utilizada vem da anima\u00e7\u00e3o &#8220;Divertidamente&#8221;. Contudo, se voc\u00ea acessar agora a p\u00e1gina de erro da Pixar, pode se deparar com outro personagem, provavelmente em maior relev\u00e2ncia no momento.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img data-opt-id=1451442538  decoding=\"async\" src=\"https:\/\/static.wixstatic.com\/media\/077d5f_2e49c8c3f9504a659a96c64152356f09~mv2.jpg\/v1\/fill\/w_584,h_363,al_c,q_90,usm_0.66_1.00_0.01\/077d5f_2e49c8c3f9504a659a96c64152356f09~mv2.webp\" alt=\"p\u00e1gina de erro 404 personalizada\"\/><\/figure>\n<\/div>\n<h3 class=\"wp-block-heading\">Dropbox<\/h3>\n<p>A p\u00e1gina de erro do <a href=\"https:\/\/www.dropbox.com\/error\">Dropbox<\/a> tamb\u00e9m utiliza imagens positivas para diminuir a sensa\u00e7\u00e3o de frustra\u00e7\u00e3o do usu\u00e1rio. No caso, s\u00e3o dois personagens desenhados de forma bem simples, mas que suavizam a experi\u00eancia. Logo abaixo, o Dropbox informa que a p\u00e1gina n\u00e3o p\u00f4de ser encontrada.<\/p>\n<p>Nesse exemplo, temos uma situa\u00e7\u00e3o bem interessante. Al\u00e9m de informar o erro, a p\u00e1gina \u00e9 utilizada como geradora de tr\u00e1fego para outras partes do website. O Dropbox, a fim de evitar que o usu\u00e1rio abandone a experi\u00eancia por completo, lista uma s\u00e9rie de links que podem ser \u00fateis.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img data-opt-id=46616957  decoding=\"async\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0533\/2089\/files\/best-404-pages-dropbox.jpg?v=1512660165\" alt=\"p\u00e1gina de erro 404 personalizada\"\/><\/figure>\n<\/div>\n<h3 class=\"wp-block-heading\">Spotify<\/h3>\n<p>A p\u00e1gina de erro do <a href=\"https:\/\/www.spotify.com\/br\/br-pt\/error\/\">Spotify<\/a> se destaca pelo design, que \u00e9 extremamente adequado \u00e0 identidade da marca e ao perfil de seu p\u00fablico. Nela, o usu\u00e1rio se depara com um disco vinil que gira por alguns momentos at\u00e9 parar, talvez representando o erro. Al\u00e9m disso, as cores suaves fazem jus ao p\u00fablico do servi\u00e7o, composto majoritariamente por jovens.<\/p>\n<p>No texto em que informa que a p\u00e1gina n\u00e3o existe mais, o Spotify oferece links que podem ajudar o usu\u00e1rio, como a se\u00e7\u00e3o de perguntas frequentes.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img data-opt-id=2064625774  decoding=\"async\" src=\"https:\/\/mlgzkyrbq6eh.i.optimole.com\/cb:AiM1.588\/w:1024\/h:486\/q:mauto\/f:best\/https:\/\/pingback.com\/br\/resources\/wp-content\/uploads\/2020\/08\/image-7-1024x486.png\" alt=\"p\u00e1gina de erro 404 personalizada\" class=\"wp-image-53691\"\/><\/figure>\n<\/div>\n<h3 class=\"wp-block-heading\">Starbucks<\/h3>\n<p>Uma imagem \u00e9 suficiente para manter viva a identidade da marca <a href=\"https:\/\/www.starbucks.in\/error-404\">Starbucks<\/a>: uma mancha de caf\u00e9. Al\u00e9m da parte visual, a p\u00e1gina de erro da empresa americana apresenta uma s\u00e9rie de poss\u00edveis causas para a falha e informa o que o usu\u00e1rio pode fazer para resolver o problema.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img data-opt-id=1130891500  decoding=\"async\" src=\"https:\/\/mlgzkyrbq6eh.i.optimole.com\/cb:AiM1.588\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/pingback.com\/br\/resources\/wp-content\/uploads\/2020\/08\/image-6.png\" alt=\"p\u00e1gina de erro 404 personalizada\" class=\"wp-image-53690\"\/><\/figure>\n<\/div>\n<p>Sem d\u00favidas, o erro 404 deve ser evitado e corrigido. Afinal, sua exibi\u00e7\u00e3o pode afetar negativamente a experi\u00eancia do usu\u00e1rio e, de quebra, prejudicar sua estrat\u00e9gia de SEO. Dito isso, por se tratar de um problema que n\u00e3o pode ser evitado completamente, contar com uma p\u00e1gina de erro 404 personalizada pode <strong>reduzir danos e at\u00e9 agir a favor do seu branding<\/strong>.<\/p>\n<p>Quer saber mais sobre os erros do WordPress e aprender como corrigi-los? Ent\u00e3o, d\u00ea uma olhada neste post em que <a href=\"https:\/\/pingback.com\/br\/resources\/erros-do-wordpress\/\" rel=\"noreferrer noopener\" target=\"_blank\">listamos e explicamos os 20 erros mais comuns que voc\u00ea vai encontrar. <\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>O erro 404 \u00e9 um dos mais comuns da internet. Embora n\u00e3o seja poss\u00edvel garantir que ele n\u00e3o vai ocorrer em seu website, \u00e9 poss\u00edvel se preparar para reduzir seus danos e, ainda, fortalecer a imagem da sua marca perante a audi\u00eancia. Como fazer isso? \u00c9 o que contamos neste texto!<\/p>\n","protected":false},"author":1,"featured_media":33028,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[22],"tags":[],"class_list":["post-4414","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tech"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.3.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Confira o passo a passo para criar uma p\u00e1gina de erro 404 personalizada<\/title>\n<meta name=\"description\" content=\"Uma p\u00e1gina de erro 404 personalizada pode ser a diferen\u00e7a entre a perda e a reten\u00e7\u00e3o de um visitante em seu site. Saiba como criar uma!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/pingback.com\/br\/resources\/pagina-de-erro-404-personalizada\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Confira o passo a passo para criar uma p\u00e1gina de erro 404 personalizada\" \/>\n<meta property=\"og:description\" content=\"Uma p\u00e1gina de erro 404 personalizada pode ser a diferen\u00e7a entre a perda e a reten\u00e7\u00e3o de um visitante em seu site. Saiba como criar uma!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/pingback.com\/br\/resources\/pagina-de-erro-404-personalizada\/\" \/>\n<meta property=\"og:site_name\" content=\"Pingback\" \/>\n<meta property=\"article:published_time\" content=\"2020-08-27T00:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-09-19T14:03:34+00:00\" \/>\n<meta name=\"author\" content=\"Pingback\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@pingbackoficial\" \/>\n<meta name=\"twitter:site\" content=\"@pingbackoficial\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Pingback\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/pingback.com\/br\/resources\/pagina-de-erro-404-personalizada\/\",\"url\":\"https:\/\/pingback.com\/br\/resources\/pagina-de-erro-404-personalizada\/\",\"name\":\"Confira o passo a passo para criar uma p\u00e1gina de erro 404 personalizada\",\"isPartOf\":{\"@id\":\"https:\/\/pingback.com\/br\/resources\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/pingback.com\/br\/resources\/pagina-de-erro-404-personalizada\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/pingback.com\/br\/resources\/pagina-de-erro-404-personalizada\/#primaryimage\"},\"thumbnailUrl\":\"\",\"datePublished\":\"2020-08-27T00:00:00+00:00\",\"dateModified\":\"2025-09-19T14:03:34+00:00\",\"author\":{\"@id\":\"https:\/\/pingback.com\/br\/resources\/#\/schema\/person\/170478128352e2f21e2360c2e4944a66\"},\"description\":\"Uma p\u00e1gina de erro 404 personalizada pode ser a diferen\u00e7a entre a perda e a reten\u00e7\u00e3o de um visitante em seu site. Saiba como criar uma!\",\"breadcrumb\":{\"@id\":\"https:\/\/pingback.com\/br\/resources\/pagina-de-erro-404-personalizada\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/pingback.com\/br\/resources\/pagina-de-erro-404-personalizada\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/pingback.com\/br\/resources\/pagina-de-erro-404-personalizada\/#primaryimage\",\"url\":\"\",\"contentUrl\":\"\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/pingback.com\/br\/resources\/pagina-de-erro-404-personalizada\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"https:\/\/pingback.com\/br\/resources\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Confira o passo a passo para criar uma p\u00e1gina de erro 404 personalizada\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/pingback.com\/br\/resources\/#website\",\"url\":\"https:\/\/pingback.com\/br\/resources\/\",\"name\":\"Pingback Blog\",\"description\":\"Marketing for builders\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/pingback.com\/br\/resources\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/pingback.com\/br\/resources\/#\/schema\/person\/170478128352e2f21e2360c2e4944a66\",\"name\":\"Pingback\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/pingback.com\/br\/resources\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/70cde532238b4f8bf4a6e7e589ff0a259eda38fa966564ca7ed7d23e61c27774?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/70cde532238b4f8bf4a6e7e589ff0a259eda38fa966564ca7ed7d23e61c27774?s=96&d=mm&r=g\",\"caption\":\"Pingback\"},\"description\":\"Pingback: Marketing for builders.\",\"sameAs\":[\"https:\/\/pingback.com\",\"https:\/\/www.instagram.com\/pingbackoficial\/\",\"https:\/\/www.linkedin.com\/company\/pingbackoficial\/\",\"https:\/\/x.com\/pingbackoficial\",\"https:\/\/www.youtube.com\/@pingbackoficial\"],\"url\":\"https:\/\/pingback.com\/br\/resources\/author\/adm1n\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Confira o passo a passo para criar uma p\u00e1gina de erro 404 personalizada","description":"Uma p\u00e1gina de erro 404 personalizada pode ser a diferen\u00e7a entre a perda e a reten\u00e7\u00e3o de um visitante em seu site. Saiba como criar uma!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/pingback.com\/br\/resources\/pagina-de-erro-404-personalizada\/","og_locale":"pt_BR","og_type":"article","og_title":"Confira o passo a passo para criar uma p\u00e1gina de erro 404 personalizada","og_description":"Uma p\u00e1gina de erro 404 personalizada pode ser a diferen\u00e7a entre a perda e a reten\u00e7\u00e3o de um visitante em seu site. Saiba como criar uma!","og_url":"https:\/\/pingback.com\/br\/resources\/pagina-de-erro-404-personalizada\/","og_site_name":"Pingback","article_published_time":"2020-08-27T00:00:00+00:00","article_modified_time":"2025-09-19T14:03:34+00:00","author":"Pingback","twitter_card":"summary_large_image","twitter_creator":"@pingbackoficial","twitter_site":"@pingbackoficial","twitter_misc":{"Escrito por":"Pingback","Est. tempo de leitura":"12 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/pingback.com\/br\/resources\/pagina-de-erro-404-personalizada\/","url":"https:\/\/pingback.com\/br\/resources\/pagina-de-erro-404-personalizada\/","name":"Confira o passo a passo para criar uma p\u00e1gina de erro 404 personalizada","isPartOf":{"@id":"https:\/\/pingback.com\/br\/resources\/#website"},"primaryImageOfPage":{"@id":"https:\/\/pingback.com\/br\/resources\/pagina-de-erro-404-personalizada\/#primaryimage"},"image":{"@id":"https:\/\/pingback.com\/br\/resources\/pagina-de-erro-404-personalizada\/#primaryimage"},"thumbnailUrl":"","datePublished":"2020-08-27T00:00:00+00:00","dateModified":"2025-09-19T14:03:34+00:00","author":{"@id":"https:\/\/pingback.com\/br\/resources\/#\/schema\/person\/170478128352e2f21e2360c2e4944a66"},"description":"Uma p\u00e1gina de erro 404 personalizada pode ser a diferen\u00e7a entre a perda e a reten\u00e7\u00e3o de um visitante em seu site. Saiba como criar uma!","breadcrumb":{"@id":"https:\/\/pingback.com\/br\/resources\/pagina-de-erro-404-personalizada\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/pingback.com\/br\/resources\/pagina-de-erro-404-personalizada\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/pingback.com\/br\/resources\/pagina-de-erro-404-personalizada\/#primaryimage","url":"","contentUrl":""},{"@type":"BreadcrumbList","@id":"https:\/\/pingback.com\/br\/resources\/pagina-de-erro-404-personalizada\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"https:\/\/pingback.com\/br\/resources\/"},{"@type":"ListItem","position":2,"name":"Confira o passo a passo para criar uma p\u00e1gina de erro 404 personalizada"}]},{"@type":"WebSite","@id":"https:\/\/pingback.com\/br\/resources\/#website","url":"https:\/\/pingback.com\/br\/resources\/","name":"Pingback Blog","description":"Marketing for builders","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/pingback.com\/br\/resources\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Person","@id":"https:\/\/pingback.com\/br\/resources\/#\/schema\/person\/170478128352e2f21e2360c2e4944a66","name":"Pingback","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/pingback.com\/br\/resources\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/70cde532238b4f8bf4a6e7e589ff0a259eda38fa966564ca7ed7d23e61c27774?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/70cde532238b4f8bf4a6e7e589ff0a259eda38fa966564ca7ed7d23e61c27774?s=96&d=mm&r=g","caption":"Pingback"},"description":"Pingback: Marketing for builders.","sameAs":["https:\/\/pingback.com","https:\/\/www.instagram.com\/pingbackoficial\/","https:\/\/www.linkedin.com\/company\/pingbackoficial\/","https:\/\/x.com\/pingbackoficial","https:\/\/www.youtube.com\/@pingbackoficial"],"url":"https:\/\/pingback.com\/br\/resources\/author\/adm1n\/"}]}},"_links":{"self":[{"href":"https:\/\/pingback.com\/br\/resources\/wp-json\/wp\/v2\/posts\/4414","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pingback.com\/br\/resources\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pingback.com\/br\/resources\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pingback.com\/br\/resources\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pingback.com\/br\/resources\/wp-json\/wp\/v2\/comments?post=4414"}],"version-history":[{"count":1,"href":"https:\/\/pingback.com\/br\/resources\/wp-json\/wp\/v2\/posts\/4414\/revisions"}],"predecessor-version":[{"id":80188,"href":"https:\/\/pingback.com\/br\/resources\/wp-json\/wp\/v2\/posts\/4414\/revisions\/80188"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pingback.com\/br\/resources\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/pingback.com\/br\/resources\/wp-json\/wp\/v2\/media?parent=4414"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pingback.com\/br\/resources\/wp-json\/wp\/v2\/categories?post=4414"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pingback.com\/br\/resources\/wp-json\/wp\/v2\/tags?post=4414"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}