Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Copa WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Como melhorar seu modelo de página 404 no WordPress (2 maneiras)

Quando projetamos sites do WordPress, um dos elementos mais negligenciados, porém cruciais, é a página de erro 404. Muitos proprietários de sites não percebem que uma página 404 bem elaborada pode ser uma ferramenta poderosa para a retenção e o envolvimento do usuário.

Em nossa experiência, uma página 404 padrão é uma oportunidade perdida. Vimos em primeira mão como uma página 404 personalizada pode transformar um possível ponto de saída em uma chance de guiar os visitantes de volta a um conteúdo valioso.

Neste artigo, mostraremos dois métodos eficazes para melhorar seu modelo de página 404 do WordPress.

How to improve your 404 page template in WordPress

Por que melhorar seu modelo de página 404 no WordPress?

A maioria dos temas do WordPress vem com um modelo 404 básico, inclusive os temas padrão do WordPress.

Por exemplo, na imagem a seguir, você pode ver a página 404 do ThemeIsle Hestia.

The 404 template included in the ThemeIsle Hestia WordPress theme

A maioria desses modelos padrão é simples e não mostra nenhum conteúdo de seu site. Isso significa que qualquer pessoa que chegar à sua página 404 terá maior probabilidade de sair do site do WordPress, o que aumentará sua taxa de rejeição.

Isso é uma má notícia para o SEO do WordPress e pode afetar a posição do seu site nas classificações dos mecanismos de pesquisa.

Dito isso, é uma boa ideia criar uma página 404 com seu próprio conteúdo e marca.

The WPBeginner custom 404 page

Uma página 404 personalizada é uma ótima maneira de promover conteúdo, como as postagens mais populares ou os produtos de sua loja on-line. Você também pode incluir links para seus perfis de mídia social, destacar seus comentários mais recentes e muito mais.

Se estiver procurando inspiração, reunimos os melhores exemplos de design de página de erro 404 para você analisar.

Dito isso, vamos dar uma olhada em como melhorar o modelo da página 404 no WordPress. Você pode usar os links rápidos abaixo para ir direto ao método que deseja usar:

A melhor maneira de melhorar a página 404 de seu site é usar o SeedProd.

O SeedProd é o melhor construtor de páginas de destino para WordPress. Ele permite que você crie, edite e personalize suas páginas do WordPress sem escrever nenhum código.

O SeedProd vem com mais de 300 modelos prontos, incluindo vários designs de 404. Isso significa que você pode criar uma página 404 com design profissional em poucos minutos.

A primeira coisa que você precisa fazer é instalar o plug-in SeedProd. Para obter mais detalhes, consulte nosso guia passo a passo sobre como instalar um plug-in do WordPress.

Observação: há uma versão gratuita do SeedProd que permite que você crie belas páginas de manutenção e de próximas páginas. No entanto, usaremos o plug-in premium, pois ele permite que você substitua o modelo 404 incorporado ao seu tema.

Após a ativação do plug-in, o SeedProd solicitará sua chave de licença.

SeedProd license key

Você pode encontrar essas informações em sua conta no site da SeedProd. Depois de inserir a licença, clique no botão “Verify Key” (Verificar chave).

Depois de fazer isso, vá para SeedProd ” Landing Pages. Na seção “404 Page” (Página 404), clique em “Set up a 404 Page” (Configurar uma página 404).

The SeedProd page builder plugin

Agora você pode escolher um modelo para sua página 404.

Para visualizar um design, basta passar o mouse sobre ele e clicar na lupa.

SeedProd's ready-made 404 templates

Quando você encontrar um design que lhe agrade, basta clicar em ‘Choose This Template’.

Estamos usando “Oh No 404 Page” em todas as nossas imagens, mas você pode usar qualquer design que desejar.

Choosing a professionally-designed 404 template

Depois de selecionar um modelo, você será levado ao construtor de arrastar e soltar, onde poderá começar a personalizar a página 404.

No lado esquerdo da tela, você encontrará blocos e seções que podem ser adicionados ao seu design. O lado direito da página mostra uma visualização ao vivo.

Building a custom 404 page for your WordPress website

A maioria dos modelos 404 já tem alguns blocos, que são uma parte essencial de todos os designs do SeedProd.

Para personalizar qualquer um desses blocos, basta clicar para selecionar o bloco em seu layout. Em seguida, você pode fazer alterações usando as configurações no menu à esquerda.

Changing the text in a custom 404 page

Para adicionar um novo bloco ao seu design, basta localizar o bloco no menu à esquerda. Em seguida, arraste-o para seu layout. Agora você pode personalizar o bloco seguindo o processo descrito acima.

Para começar, você normalmente deseja adicionar o logotipo do seu site à página 404 para que os visitantes saibam que ainda estão no seu site.

Para substituir o logotipo da SeedProd por sua própria marca, basta clicar para selecionar o logotipo de espaço reservado em seu layout. Em seguida, passe o mouse sobre a imagem no menu à esquerda.

Quando ele for exibido, clique no botão “Select Image” (Selecionar imagem).

Adding your own logo to a 404 page

Isso abre a biblioteca de mídia do WordPress, onde você pode selecionar qualquer imagem ou carregar um novo arquivo do seu computador.

Muitos modelos 404 também mostram o menu de navegação principal de seu site. Se você tiver vários menus, talvez prefira mostrar um menu diferente.

Para fazer essa alteração, basta clicar no bloco “Nav Menu” em seu modelo. Em seguida, você pode abrir o menu suspenso “Menu” e escolher qualquer menu da lista.

Adding a custom navigation menu to a 404 page

Para obter mais informações, consulte nosso guia sobre como adicionar menus de navegação personalizados em temas do WordPress.

Quando um visitante chega à sua página 404, ele pode ficar confuso sobre como chegou até aqui e o que fazer em seguida. Dito isso, é uma boa ideia adicionar algum texto explicando que o conteúdo não pode ser encontrado e sugerindo algumas ações a serem tomadas em seguida.

Para fazer isso, adicione um bloco “Headline” (Título) e um bloco “Text” (Texto) ao seu design. Em seguida, você pode digitar sua mensagem no editor de texto no menu à esquerda.

Adding text to a custom 404 page

Em seguida, vamos alterar o botão “Back To Home” para que ele incentive as pessoas a conferir um post específico em vez de simplesmente retornar à página inicial.

Por exemplo, você pode promover suas postagens mais recentes ou mostrar as postagens mais comentadas.

Para personalizar o botão, basta clicar para selecioná-lo no layout da página. No campo “Link”, digite o URL que você deseja usar em seu lugar.

Changing the button label

Como o botão não está mais vinculado à página inicial, você deverá substituir o rótulo “Back To Home”. Basta digitar uma nova mensagem na caixa “Button Text” (Texto do botão).

Depois de fazer isso, clique na guia “Advanced” (Avançado). Aqui, você pode alterar a cor, o tamanho e muito mais do botão.

Creating a custom CTA button

Isso é tudo o que você precisa para criar uma página 404 personalizada simples. No entanto, há muitos outros recursos e conteúdos que podem melhorar a experiência do visitante, manter as pessoas envolvidas e até mesmo ajudá-lo a obter mais conversões.

Dito isso, vamos dar uma olhada em alguns recursos avançados que você pode adicionar à sua página 404.

Adicione suas postagens mais populares à sua página 404 do WordPress

Para começar, talvez você queira mostrar uma lista de suas postagens mais populares. Como esses artigos são populares, há uma boa chance de os visitantes encontrarem algo de que gostem.

Você pode criar essa lista automaticamente usando o plug-in MonsterInsights. É a melhor solução de análise para WordPress, usada por mais de 3 milhões de sites.

O MonsterInsights pode ver quais publicações recebem o maior número de visitantes e adicioná-las à sua página 404. Para obter mais detalhes, consulte nosso guia sobre como exibir publicações populares por visualizações no WordPress.

Depois de ativar o MonsterInsights, você pode exibir suas publicações mais populares adicionando um shortcode no WordPress. No menu à esquerda do SeedProd, basta localizar o bloco “Shortcode” e soltá-lo em seu layout.

How to add shortcode to your website's 404 page

Agora, copie o seguinte shortcode:

[monsterinsights_popular_posts_widget theme="beta"]

Depois disso, clique para selecionar o bloco Shortcode no editor do SeedProd. Agora você pode colar o código no menu do lado esquerdo.

Adding shortcode to you website's 404 page

Por padrão, o SeedProd não mostra uma visualização de suas postagens mais populares dentro do editor de páginas, portanto, você precisará clicar no botão “Preview” (Visualizar) no canto superior direito para ver o shortcode em ação.

Se você quiser ver a lista de postagens populares dentro do editor do SeedProd, basta clicar no botão “Show Shortcode Preview”.

Previewing the 404 page's shortcode

No shortcode acima, estamos usando theme="beta" para nossa lista, mas o MonsterInsights tem alguns temas diferentes que você pode usar.

Para ver os diferentes temas, vá para Insights ” Popular Posts no painel do WordPress e clique em “Popular Posts Widget”.

The MonsterInsights' popular posts widget settings

Agora você pode clicar nos diferentes temas para ver uma prévia.

Quando você encontrar um design de que goste, basta atualizar o shortcode no SeedProd. Por exemplo, se você quiser usar o tema “Alpha”, precisará digitar:

[monsterinsights_popular_posts_widget theme="alpha"]

Mostre seus produtos mais populares do WooCommerce

Se você tem uma loja on-line, talvez queira mostrar seus produtos mais vendidos do WooCommerce na página 404. Dessa forma, sua página 404 personalizada pode ajudá-lo a obter mais vendas.

No menu à esquerda, localize o bloco Best Selling Products e arraste-o para seu layout.

How to show best-selling products on a 404 page

O SeedProd mostrará alguns produtos automaticamente. No entanto, você pode ajustar esse bloco selecionando-o no editor e, em seguida, usando as configurações no menu à esquerda.

Por exemplo, você pode alterar o número de colunas no bloco, adicionar paginação, permitir que os compradores filtrem os produtos mais vendidos e muito mais.

Displaying WooCommerce products on a 404 page

Para obter mais informações, consulte nosso guia sobre como exibir produtos populares do WooCommerce.

Apesar do nome, você pode usar esse bloco para mostrar outros tipos de produtos. Por exemplo, você pode mostrar produtos que estão em promoção ou seus itens mais bem avaliados.

Para dar uma olhada nas diferentes opções, abra o menu suspenso “Tipo” e escolha uma opção da lista.

Showing different WooCommerce products on a 404 page

Adicione um formulário de contato à sua página 404 do WordPress

Você também pode adicionar um formulário de contato para que os visitantes possam entrar em contato se não encontrarem o que estão procurando. Esse formulário também oferece às pessoas uma maneira fácil de relatar erros 404 para que você possa corrigir esses links quebrados e melhorar a experiência dos futuros visitantes.

Para obter mais informações, consulte nosso guia completo sobre como corrigir links quebrados no WordPress.

A melhor maneira de adicionar um formulário de contato ao seu site é usar o plug-in WPForms. Ele é o melhor plugin de formulário de contato para WordPress e vem com um construtor de formulários de arrastar e soltar.

Para obter mais detalhes, consulte nosso guia passo a passo sobre como criar um formulário de contato no WordPress.

Depois de criar um formulário de contato, você pode adicioná-lo à sua página 404 usando o bloco “Contact Form”. Basta localizar o bloco no menu à esquerda e arrastá-lo para o seu design.

The WPForms form builder plugin

Em seguida, abra o menu suspenso “Select a Form” (Selecionar um formulário) e escolha o formulário de contato na lista.

O editor de páginas agora mostrará uma visualização do formulário de contato.

How to add a contact form to your website's 404 page

Talvez você queira adicionar algum texto apresentando o formulário de contato ou incentivando os visitantes a entrar em contato.

Para fazer isso, basta adicionar um bloco de “Título” ou “Texto” acima do formulário de contato e digitar o texto que deseja usar.

A custom 404 page, created using SeedProd

Como publicar a página 404

Quando você estiver satisfeito com a aparência da página 404, é hora de publicá-la.

Basta clicar na seta suspensa ao lado de “Salvar” e selecionar “Salvar como modelo”.

Saving your SeedProd 404 template

Quando solicitado, digite um nome para o modelo. Isso é apenas para sua referência, portanto, você pode usar o que quiser.

Depois disso, clique em “Save Template” (Salvar modelo).

Naming your WordPress template

Na janela pop-up seguinte, clique em “Return to Page Editor”. Em seguida, você pode clicar no botão “X” no canto superior direito para fechar o editor de páginas do SeedProd.

Nesse momento, você verá uma janela pop-up perguntando se deseja publicar seu design 404. Se você quiser ir em frente, clique em “Yes, Activate” (Sim, ativar).

Activating a SeedProd template for your WordPress website

Se você não quiser publicar o modelo agora, clique em “No, Close” (Não, fechar).

Depois disso, você pode publicar o design a qualquer momento acessando SeedProd ” Pages. Aqui, clique no botão na seção “404 Page” para que ele mostre “Active”.

Activating a template for your WordPress website

Para ver sua página 404 em ação, basta adicionar /404 ao final do seu nome de domínio.

Depois de publicar sua página 404 personalizada, é uma boa ideia rastrear como as pessoas estão se envolvendo com essa página. Isso permite que você veja o que está funcionando e o que não está funcionando para que possa ajustar seu design 404 para obter mais conversões e engajamento.

Para saber mais, consulte nosso guia para iniciantes sobre como instalar o Google Analytics no WordPress.

Método 2: Criar uma página 404 usando o Editor de site completo (somente temas de bloco)

Se estiver usando um tema do WordPress habilitado para blocos, você poderá editar a página 404 do seu site no editor completo do site.

Para começar, vá para Appearance ” Editor no painel do WordPress.

Opening the WordPress full-site editor (FSE)

Por padrão, o editor de site completo mostra o modelo inicial do seu tema.

Para editar a página 404, vá em frente e clique em “Templates”.

How to edit the 404 template using the full-site editor

Agora você verá uma lista de todos os modelos que compõem o tema baseado em blocos, como a página do blog e a página de arquivos.

Basta ir em frente e clicar em “404”.

Improving the built-in 404 design using FSE

O WordPress agora mostrará uma visualização do design atual do 404.

Para prosseguir e editar esse modelo, clique no pequeno ícone de lápis.

Editing the 404 template in your WordPress theme

O editor de site completo funciona de forma semelhante ao editor de conteúdo padrão do WordPress.

Para adicionar blocos ao design, clique no botão “+”.

Adding blocks to a 404 page design using the block-based WordPress editor

Agora você pode digitar o bloco que deseja adicionar à página 404.

Por exemplo, talvez você queira exibir suas postagens recentes. Para fazer isso, basta digitar “Latest Posts” e arrastar o bloco para o design.

Adding the Latest Posts block to a 404 page design

Depois de adicionar um bloco, talvez você queira personalizá-lo.

Você pode prosseguir e clicar para selecionar o bloco na visualização. O menu do lado direito mostrará todas as configurações que você pode usar para alterar o conteúdo e a aparência do bloco.

How to customize blocks in a WordPress 404 page

As opções que você vê podem variar dependendo do bloco selecionado. Entretanto, normalmente você poderá alterar a cor do plano de fundo, a cor do texto e o tamanho da fonte.

Você pode até querer exibir as postagens recentes como um menu suspenso, se necessário.

Agora você pode continuar adicionando blocos ao seu design e ajustando-os seguindo o mesmo processo descrito acima. Talvez você também queira organizar seus widgets do WordPress em colunas ou usar padrões de blocos do WordPress para criar uma página 404 personalizada mais rapidamente.

Quando você estiver satisfeito com a aparência da página 404, clique em “Save” (Salvar) para ativá-la.

Publishing a custom 404 page template

Agora, se você adicionar /404 ao final do nome de domínio do seu site, verá a página 404 personalizada em ação.

Quando você deve redirecionar as páginas 404?

Uma das causas mais comuns de erros 404 é quando o visitante realmente comete um erro ao inserir o URL.

Nesse caso, geralmente não é necessário redirecionar o usuário para outra página. No entanto, recomendamos que você siga as práticas recomendadas que mostramos para que eles voltem ao caminho certo.

Dito isso, se você não tiver tempo para criar um modelo de página 404 personalizado, talvez queira redirecionar os usuários para a página inicial nesse meio tempo. Dessa forma, você ainda poderá manter os usuários no seu website.

Além disso, também sugerimos fortemente o rastreamento e o redirecionamento de erros 404. Isso permite descobrir quais links os usuários não conseguiram acessar e você pode redirecioná-los para as páginas mais relevantes.

Como resultado, você pode maximizar a oportunidade de aumentar as visualizações de página e reduzir as taxas de rejeição. Além disso, você pode manter os backlinks que foram vinculados a essas páginas para manter a autoridade do seu domínio.

O plugin All in One SEO tem um prático recurso de redirecionamento e registro de erros 404 que pode ser usado. Você não precisa de nenhum conhecimento técnico para usá-lo adequadamente, pois ele é bastante fácil de usar.

Click 404 logs menu option

Se você quiser mais recomendações de plug-ins, confira nossa lista dos melhores plug-ins de redirecionamento 404 gratuitos para WordPress.

Tutorial em vídeo

Subscribe to WPBeginner

Esperamos que este artigo tenha ajudado você a melhorar seu modelo de página 404 no WordPress. Talvez você também queira ver nossa seleção de especialistas dos melhores plug-ins de publicações populares para WordPress e nosso artigo sobre a anatomia de uma página de destino de alta conversão.

Se você gostou deste artigo, inscreva-se em nosso canal do YouTube para receber tutoriais em vídeo sobre o WordPress. Você também pode nos encontrar no Twitter e no Facebook.

Divulgação: Nosso conteúdo é apoiado pelo leitor. Isso significa que, se você clicar em alguns de nossos links, poderemos receber uma comissão. Veja como o WPBeginner é financiado, por que isso é importante e como você pode nos apoiar. Aqui está nosso processo editorial.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

O kit de ferramentas definitivo WordPress

Obtenha acesso GRATUITO ao nosso kit de ferramentas - uma coleção de produtos e recursos relacionados ao WordPress que todo profissional deve ter!

Reader Interactions

9 ComentáriosDeixe uma resposta

  1. Moinuddin Waheed

    Thanks for giving the design options for making intuitive and innovative 404 page error.
    I have been seeing good 404 error pages and was not sure that making it is so easy.
    Seedprod gives so much options to tweak on 404 error page and make it as intuitive and innovative as possible so that users bad experience turns into good experience.

  2. Pramendra Singh

    Thank you sir. This is what I was searching for long time. Great Post.

  3. Joe Wocoski

    Hi,

    I just read about the 404 page, but I am not code literate. Your article seems complicated and the popular posts does not float my boat.

    What would is a simple widget that I can use to display a single list of my main tabs on the 404 page under the search.

    Do you have a widget to send readers back to my main blog page or my other main 9 tabs?

    Thank you very much
    Joe Wocoski

  4. arman

    This code is showing headings of post but i want to show content of posts also .Thanks in advance

  5. WPBeginner Staff

    Try updating your permalink structure by visiting Settings -> Permalinks. Simply click on save changes button without making any changes to your permalink structure.

  6. On Boit Quoi Ce Soir

    Hello there, very nice article, thanks ! However something simply does not work. When calling on 404.php page (once plug-in activated), it just does not show. Anyway idea why this is happening?

  7. Ali Sajjad

    Thanks for this usefull post, i want to know how i can bend my first post from header just like a curve with shadow?

  8. CANALWP

    Thank you for this awesome article. I was wondering how can i add my category to this page and as well images. Thanks.

  9. Cheri- CreationScience4kids

    Thanks! I’d used wp.com for 2 years before moving to selfhosting. It was exciting to take out all the dates on my articles, but then I started realizing my most popular page by far was the 404! I did the work to use the redirect plugin (also great for posts with rotten original headlines), but haven’t done it for all 400+.
    The email alert will be a relief and the most recent/popular/etc posts idea is great. :-)

Deixe uma resposta

Obrigado por deixar um comentário. Lembre-se de que todos os comentários são moderados de acordo com nossos política de comentários, e seu endereço de e-mail NÃO será publicado. NÃO use palavras-chave no campo do nome. Vamos ter uma conversa pessoal e significativa.