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

Hur du förbättrar din 404 Page Template i WordPress (2 sätt)

När vi designar WordPress-webbplatser är 404-felsidan ett av de mest förbisedda men ändå viktiga elementen. Många webbplatsägare inser inte att en väl utformad 404-sida kan vara ett kraftfullt verktyg för att behålla och engagera användare.

Enligt vår erfarenhet är en 404-sida som standard en missad möjlighet. Vi har själva sett hur en anpassad 404-sida kan förvandla en potentiell utgångspunkt till en chans att przewodnik klienci tillbaka till värdefullt innehåll.

I den här artikeln visar vi dig två effektiva metoder för att förbättra din WordPress 404-sidmall.

How to improve your 404 page template in WordPress

Varför förbättra din 404 Page Template i WordPress?

De flesta teman för WordPress levereras med en grundläggande 404 template, inklusive standardteman för WordPress.

I följande image kan du till exempel se ThemeIsle Hestias 404 page.

The 404 template included in the ThemeIsle Hestia WordPress theme

De flesta av dessa standard templates är enkla och visar inte något content från din site. Detta innebär att alla som landar på din 404 page är mer benägna att lämna din WordPress website, vilket kommer att öka din avvisningsfrekvens.

Detta är dåliga nyheter för din sökmotorsoptimering i WordPress och kan påverka var din site visas i rankingen hos search engine.

Med det sagt är det en bra idé att skapa en 404 page med yours eget content och branding.

The WPBeginner custom 404 page

En anpassad 404-sida är ett utmärkt sätt att marknadsföra innehåll, t.ex. de mest populära inläggen eller produkterna från din webbutik. Du kan också inkludera länkar till dina profiler på sociala medier, lyfta fram dina senaste kommentarer och mycket mer.

Om du letar efter inspiration har vi samlat de bästa designexemplen på 404 error pages som du kan klura på.

Med detta sagt, låt oss ta en titt på hur du kan förbättra din 404-sidmall i WordPress. Du kan använda snabblänkarna nedan för att hoppa direkt till den metod du vill använda:

Det bästa sättet att förbättra din sites 404 page är att använda SeedProd.

SeedProd är den bästa landning page builder för WordPress. Det låter dig skapa, edit, och customize din WordPress pages utan att skriva någon kod.

SeedProd levereras med mer än 300+ färdiga templates, inklusive massor av 404-design. Detta innebär att du kan skapa en professionellt utformad 404 page inom några minuter.

Det första du behöver göra är att installera SeedProd plugin. För mer detaljer, se vår Step-by-Step guide om hur du installerar ett WordPress plugin.

Note: Det finns en gratis version av SeedProd som tillåter dig att skapa beautiful maintenance and coming soon pages. Vi kommer dock att använda premiumtema-tillägget eftersom det låter dig ersätta ditt temas inbyggda 404 template.

När du har aktiverat pluginet kommer SeedProd att be om din license key.

SeedProd license key

You can find this information in your account on the SeedProd website. När du har enter licensen klickar du på knappen ”Verify Key”.

När du har gjort det går du till SeedProd ” Landing Pages. I sektionen ”404 Page” klickar du på ”Set up a 404 Page”.

The SeedProd page builder plugin

Du kan nu välja en template för din 404 page.

För att få preview på en design, hoverar du bara musen över den och clickar sedan på förstoringsglaset.

SeedProd's ready-made 404 templates

När du hittar en design som du gillar klickar du bara på ”Choose This Template”.

Vi använder ”Oh No 404 Page” i alla våra images, men you kan använda vilken design du vill.

Choosing a professionally-designed 404 template

När du har valt en template kommer du till drag and drop buildern, där du kan börja customize 404 page.

På vänster sida av vyn hittar du block och sections som du kan add to your design. På höger sida av page visas en live preview.

Building a custom 404 page for your WordPress website

De flesta 404 templates har redan några block, som är en core del av all SeedProd design.

För att customize något av dessa block klickar du bara för att välja det blocket i din layout. Du kan sedan göra ändringar med hjälp av inställningarna i menyn till vänster.

Changing the text in a custom 404 page

Om du vill add a new block till din design hittar du blocket i menyn till vänster. Dra det sedan till din layout. Du kan nu customize blocket genom att följa processen som beskrivs ovan.

Till att börja med vill du vanligtvis lägga till din site logo på 404 page så att visitorerna vet att de fortfarande är på din site.

För att ersätta SeedProd-logotypen med ditt eget varumärke, klicka bara för att välja placeholder-logotypen i din layout. Sedan hoverar du med musen över imagen i menyn till vänster.

När den dyker upp klickar du på knappen ”Select Image”.

Adding your own logo to a 404 page

Då öppnas mediabiblioteket i WordPress, där du kan välja en image eller uppladare en new fil från din dator.

Många 404 templates visar också din sites main navigation menu. Om du har flera menyer kanske du föredrar att visa en annan meny istället.

För att göra denna ändring klickar du helt enkelt på blocket ”Nav Menu” i din template. You can then open the ”Menu” dropdown and choose any menu from the list.

Adding a custom navigation menu to a 404 page

För mer information, vänligen se vår guide om hur du add to custom navigation menus i WordPress teman.

När en visitor landar på din 404 page kan de vara förvirrade över hur de kom hit och vad de ska göra härnäst. Med detta sagt är det en bra idé att add to lite text som förklarar att innehållet inte kan hittas och föreslå några actions att göra härnäst.

Det gör du genom att add to ett ”Headline” och ett ”Text” block till din design. Sedan kan du skriva in ditt message i textredigeraren i menyn till vänster.

Adding text to a custom 404 page

Därefter kommer vi att ändra knappen ”Tillbaka till hemsidan” så att den uppmuntrar människor att kontrollera ett specifikt post istället för att bara återvända till homepage.

Du kan till exempel marknadsföra dina senaste inlägg eller visa dina mest kommenterade inlägg.

För att customize knappen klickar du helt enkelt för att selecta den i sidans layout. I fältet ”Link” skriver du in den URL som du vill använda i stället.

Changing the button label

Eftersom knappen inte längre länkar till hemsidan vill du ersätta etiketten ”Tillbaka till hemsidan”. Gå bara vidare och skriv ett nytt meddelande i rutan ”Knapptext”.

När du har gjort det klickar du på tabben ”Advanced”. Här kan du ändra knappens färg, storlek och mycket mer.

Creating a custom CTA button

Det här är all du behöver för att skapa en enkel customized 404 page. Det finns dock många andra funktioner och innehåll som kan förbättra upplevelsen för besökarna, hålla människor engagerade och till och med hjälpa you att få fler konverteringar.

Med det sagt, låt oss titta på några avancerade funktioner som du kan add to your 404 page.

Add to dina mest populära posts till din WordPress 404 Page

Till att börja med kanske du vill visa en lista över dina mest populära posts. Eftersom dessa artiklar är populära finns det en god chans att visitorerna hittar något de gillar.

Du kan skapa den här listan automatiskt med hjälp av tillägget MonsterInsights. Det är den bästa analyslösningen för WordPress, som används av över 3 miljoner websites.

MonsterInsights kan se vilka posts som får flest besökare och add to your 404 page. För mer detaljer, se vår guide om hur du visar populära posts efter views i WordPress.

När du har aktiverat MonsterInsights kan du visa dina mest populära posts genom att lägga till en shortcode i WordPress. I SeedProds vänstra meny hittar du helt enkelt blocket ”Shortcode” och släpper det på din layout.

How to add shortcode to your website's 404 page

Kopiera nu följande shortcode:

[monsterinsights_popular_posts_widget theme="beta"]

Därefter klickar du på för att selecta Shortcode-blocket i SeedProd editor. Nu kan du klistra in koden i menyn till vänster.

Adding shortcode to you website's 404 page

Som standard visar SeedProd inte en preview av dina mest populära posts i page editor, så du måste klicka på knappen ”Preview” i det övre högra hörnet för att se shortcoden i action.

Om du vill se listan över populära posts i SeedProd editor, klicka då helt enkelt på ”Show Shortcode Preview” -knappen.

Previewing the 404 page's shortcode

I shortcoden ovan använder vi theme="beta ” för vår lista, men MonsterInsights har några olika themes som du kan använda.

För att se de olika teman, gå till Insights ” Popular Posts i WordPress dashboard och klicka sedan på ”Popular Posts Widget”.

The MonsterInsights' popular posts widget settings

Du kan nu clicka på de olika temana för att se en preview.

När du hittar en design som du gillar, uppdaterar du bara shortcoden i SeedProd. Om du till exempel vill använda temat ”Alpha”, måste du skriva in:

[monsterinsights_popular_posts_widget theme="alpha"]

Visa dina mest populära WooCommerce-produkter

Om du har en webbutik kanske du vill visa dina bästsäljande WooCommerce-produkter på 404-sidan. På så sätt kan din anpassade 404-sida hjälpa dig att få mer klienci.

I menyn till vänster hittar du blocket Bästsäljande produkter och drar det till din layout.

How to show best-selling products on a 404 page

SeedProd kommer att visa vissa produkter automatiskt. Du kan dock finjustera detta block genom att välja det i editorn och sedan använda inställningarna i menyn till vänster.

Till exempel kan du ändra antalet Column i blocket, add to sidonumrering, allow shoppers att filtrera de bästsäljande produkterna, och mycket mer.

Displaying WooCommerce products on a 404 page

För mer information, se vår guide om hur du visar populära WooCommerce-produkter.

Trots namnet kan du använda det här blocket för att visa andra typer av produkter. Du kan till exempel visa produkter som är på rea eller dina högst upp rankade objekt.

För att titta på de olika alternativen öppnar du dropdown-menyn ”Type” och väljer sedan ett alternativ från listan.

Showing different WooCommerce products on a 404 page

Add a Contact Form to Your WordPress 404 Page

Du kanske också vill add to ett kontaktformulär så att visitorerna kan kontakta dig om de inte hittar det de letar efter. Detta formulär ger också människor ett enkelt sätt att rapportera 404 error så att du kan fixa dessa brutna länkar och förbättra upplevelsen för framtida besökare.

För mer information, vänligen se vår kompletta guide om hur du fixar brutna links i WordPress.

Det bästa sättet att add to ett kontaktformulär till din site är genom att använda WPForms plugin. Det är det bästa kontaktformulärpluginet för WordPress och levereras med en drag & drop WordPress form builder.

För mer detaljer, se vår Step-by-Step guide om hur du skapar ett kontaktformulär i WordPress.

När du har skapat ett kontaktformulär kan du add to din 404 page med hjälp av blocket ”Contact Form”. Hitta blocket i menyn till vänster och dra det till din design.

The WPForms form builder plugin

Öppna sedan ”Select a Form” dropdown och välj ditt kontaktformulär från listan.

Page editor visar nu en preview av kontaktformuläret.

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

You might want to add some text introducing your contact form or encouraging visitors to get contact.

Det gör du genom att add to ett block med ”Headline” eller ”Text” ovanför ditt kontaktformulär och sedan skriva in den text som du vill använda.

A custom 404 page, created using SeedProd

Så här publicerar du 404 Page

När you är nöjd med hur 404 page ser ut är det dags att publicera den.

Klicka bara på dropdown-pilen bredvid ”Save” och välj sedan ”Save as Template”.

Saving your SeedProd 404 template

Skriv in ett namn på templaten när du blir tillfrågad. Detta är bara för din referens, så du kan använda vad du vill.

Efter det klickar du på ”Save Template”.

Naming your WordPress template

I nästa popup klickar du på ”Return to Page Editor”. You can then click on the ’X’ button in the upper-right corner to close the SeedProd page editor.

I det här läget kan du se en popup som frågar om du vill publicera din 404-design. Om du vill fortsätta klickar du på ”Yes, Activate”.

Activating a SeedProd template for your WordPress website

Om du inte vill publicera templates just nu klickar du på ”No, Close” istället.

Efter det kan du publicera designen när som helst genom att gå till SeedProd ” Pages. Här klickar du på omkopplaren i sektionen ”404 Page” så att den visar ”Active”.

Activating a template for your WordPress website

För att se din 404 page i action, add to /404 till slutet av ditt domain name.

När du har publicerat din custom 404-sida är det en bra idé att spåra hur människor engagerar sig i den sidan. This allows you to see what’s working and what isn’t working so you can fine-tune your 404 design to get more conversions and engagement.

Om du vill veta mer kan du läsa vår guide för nybörjare om hur du installerar Google Analytics i WordPress.

Metod 2: Skapa en 404 Page med hjälp av hela Site Editor (endast Block Themes)

Om du använder ett block-aktiverat WordPress-tema kan du redigera din webbplats 404 page i hela Site Editor.

För att komma igång, heada över till Appearance ” Editor i WordPress dashpanelen.

Opening the WordPress full-site editor (FSE)

Som standard visar den fullständiga Site Editor ditt temas hemmamall.

För att edit 404 page, gå vidare och click på ”Templates”.

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

Du kommer nu att se en lista över alla mallar som utgör ditt blockbaserade tema, till exempel din bloggsida och arkivsida.

Det är bara att gå vidare och clicka på ”404”.

Improving the built-in 404 design using FSE

WordPress kommer nu att visa en preview av den aktuella 404-designen.

För att gå vidare och edit denna template, click på den lilla penna iconen.

Editing the 404 template in your WordPress theme

Editorn för hela webbplatsen fungerar på samma sätt som den vanliga editorn för WordPress content.

För att add to block till designen, click på knappen ”+”.

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

Du kan nu skriva in det block som du vill add to på 404 page.

Du kanske till exempel vill visa dina senaste inlägg. För att göra detta skriver du helt enkelt in ”Senaste inlägg” och drar sedan blocket till din design.

Adding the Latest Posts block to a 404 page design

När du har lagt till ett block kanske du vill customize det.

Du kan gå vidare och klicka för att välja blocket i previewen. I den högra menyn visas sedan all Settings som du kan använda för att ändra blockets content och appearance.

How to customize blocks in a WordPress 404 page

Alternativen du ser kan variera beroende på vilket block du har valt. Du kommer dock vanligtvis att kunna ändra bakgrundsfärg, textfärg och ändra storleken på fonten.

Du kanske till och med vill visa de senaste inläggen som en rullgardinsmeny om det behövs.

Du kan nu fortsätta att lägga till block i din design och finjustera dem genom att följa samma process som beskrivs ovan. Du kanske också vill ordna dina WordPress-widgets i Column eller använda WordPress block patterns för att skapa en customizer 404 page snabbare.

När du är nöjd med hur 404 page ser ut klickar du på ”Save” för att aktivera den.

Publishing a custom 404 page template

Nu, om du add to /404 i slutet av din websites domain name, så kommer du att se den customize 404 page i action.

När ska du redirecta 404 pages?

En av de vanligaste orsakerna till 404 error är att besökaren verkligen har gjort ett misstag när han eller hon har enterat URL:en.

I det här fallet behöver du vanligtvis inte redirecta användaren till en annan page. Men vi rekommenderar att du följer de bästa metoderna som vi har visat dig för att få dem tillbaka på track.

Med det sagt, om du inte har tid att skapa en custom 404 page template, kanske du vill redirecta användare till homepage under tiden. På så sätt kan du fortfarande hålla användare på din website.

Utöver det rekommenderar vi starkt att du trackar och redirecterar 404 error. På så sätt kan du se vilka länkar användarna inte lyckades komma åt och du kan redirecta dem till de mest relevanta pages.

Som ett resultat kan du maximera möjligheten att öka sidvisningar och minska avvisningsfrekvensen. Dessutom kan du behålla de bakåtlänkar som har länkats till dessa pages för att bibehålla din domäns auktorisering.

All in One SEO-pluginet har en praktisk 404 error log och redirect-funktion som du kan använda. Du behöver inte någon teknisk kunskap för att använda det korrekt eftersom det är ganska användarvänligt direkt från boxen.

Click 404 logs menu option

Om du vill ha fler plugin-rekommendationer, kontrollera vår lista över de bästa gratis 404 redirect-tilläggen för WordPress.

Video Tutorial

Subscribe to WPBeginner

Vi hoppas att den här artikeln hjälpte dig att förbättra din 404-sidmall i WordPress. Du kanske också vill se våra expertval av de bästa plugins för populära inlägg för WordPress och vår artikel om anatomin hos en landningssida med hög konvertering.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Avslöjande: Vårt innehåll stöds av våra läsare. Det innebär att om du klickar på några av våra länkar, kan vi tjäna en provision. Se hur WPBeginner finansieras, varför det är viktigt, och hur du kan stödja oss. Här är vår editoriala process.

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.

Den ultimata WordPress-verktygslådan

Få GRATIS tillgång till vår verktygslåda - en samling WordPress-relaterade produkter och resurser som varje professionell användare bör ha!

Reader Interactions

11 kommentarerLämna ett svar

  1. Dennis Muthomi

    After reading this, I think its time to improve my plain 404 page by adding links to some of my most popular articles.
    That way, visitors who happen to land on my 404 page will have some helpful content to engage with and TAKE ACTION, rather than just seeing an error message.
    Thank you for this!

  2. Mrteesurez

    As regard to Redirecting users.
    You have shared the best practice suggesting tracking and redirecting 404 errors.
    If one is able to find the particular link that leads to 404 error, it will definitely helpful either to create a contents around it or redirect users to a related page which might be relevant to them.

  3. 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.

  4. Pramendra Singh

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

  5. 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

  6. arman

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

  7. 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.

  8. 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?

  9. 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?

  10. CANALWP

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

  11. 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. :-)

Lämna ett svar

Tack för att du väljer att lämna en kommentar. Tänk på att alla kommentarer modereras enligt våra policy för kommentarer, och din e-postadress kommer INTE att publiceras. Vänligen använd INTE nyckelord i namnfältet. Låt oss ha en personlig och meningsfull konversation.