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.
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.
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.
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:
Metod 1: Skapa en Customize 404 Page i WordPress utan kod (rekommenderas)
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.
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”.
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.
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.
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.
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.
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”.
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.
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.
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.
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.
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.
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.
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.
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”.
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.
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.
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.
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.
Öppna sedan ”Select a Form” dropdown och välj ditt kontaktformulär från listan.
Page editor visar nu en preview av kontaktformuläret.
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.
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”.
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”.
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”.
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”.
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.
Som standard visar den fullständiga Site Editor ditt temas hemmamall.
För att edit 404 page, gå vidare och click på ”Templates”.
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”.
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.
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 ”+”.
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.
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.
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.
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.
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
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.
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!
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.
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.
Pramendra Singh
Thank you sir. This is what I was searching for long time. Great Post.
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
arman
This code is showing headings of post but i want to show content of posts also .Thanks in advance
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.
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?
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?
CANALWP
Thank you for this awesome article. I was wondering how can i add my category to this page and as well images. Thanks.
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.