Skapa en 404-sida med WordPress och Visual Composer

Nikola Puciriusa Senast uppdaterad 02.09.2021
6 Min.
Senast uppdaterad 02.09.2021

Det kan alltid hända att din webbplats underhålls, att enskilda sidor inte är tillgängliga eller innehåller felaktiga länkar, vilket ofta leder till en 404-sida. Detta är inte trevligt, men med väl utformade felsidor kan du ändå behålla dina besökare. Vi visar hur du gör det med WordPress och Visual Composer .

Syftet med en 404-felsida är att informera besökarna om det fel som uppstått. Och för att omdirigera dem till de delar av webbplatsen som fortfarande är tillgängliga eller fungerar. På så sätt sänker du avvisningsfrekvensen.

En anpassad 404-sida är också idealisk för marknadsföring och för att lägga in element som kallar till åtgärder. Det innebär att den i princip kan utföra samma funktioner som en fungerande landningssida och landningssida.

Visste du det?

Uppfinnaren av World Wide Web, Tim Berners-Lee, hade ett kontor i rum 404 i CERN (Europeiska organisationen för kärnforskning), där han hade den allra första webbservern. 404-felet fick sitt namn efter honom eftersom Tim ofta inte kunde hittas.

Vi tittar på följande punkter:

  • Vad är en 404-felsida?
  • 404 felvarianter
  • När uppstår 404-fel? 
  • Hur du åtgärdar 404-fel
  • Goda och kreativa exempel på 404-sidor
  • Skapa en anpassad 404-felsida med WordPress
  • 404-felsida med Visual Composer skapa

Vad är en 404-sida?

Kortfattat beskrivet är 404-felet en HTTP-svarskod (Hypertext Transfer Protocol). Det betyder att servern inte kan hitta den begärda källan. Eller den del av webbplatsens sökväg som kommer efter "/". Det betyder i princip att den specifika sidan som ska visas inte är tillgänglig.

Oftast visas ett 404-felmeddelande på följande sätt:

  • HTTP 404
  • 404 Not Found / inte funnen
  • 404
  • 404 Fel / Fel
  • 404 Den här sidan finns inte (Sidan finns inte)
  • Sidan hittades inte
  • Filen hittades inte
  • Katalog inte hittad 
  • Den begärda URL:n har inte hittats
  • ... och liknande variationer

Möjliga orsaker till att 404-fel uppstår:

  • En sida eller ett inlägg på WordPress tas bort eller flyttas till en annan sida utan att länkarna omdirigeras.
  • En besökare skriver in domännamnet felaktigt (en bokstav saknas, stavfel osv.).
  • Tidigare länkar (som har ändrats) anges fortfarande i externa källor.
  • Servern/webbplatsen har kraschat, är under underhåll eller har tekniska problem som gör att webbplatsen inte visas korrekt (t.ex. avbruten anslutning).

Förutom 404-fel finns följande HTTP-statuskoder:

  • 100-199 Svar: Begär mottagaren och fortsätter behandlingen.
  • 200-299 Framgångsrik: Begäran är framgångsrik och accepterad.
  • 300-399 Omdirigering: Kräver ytterligare åtgärder för att slutföra begäran.
  • 400-499 Klientfel: ogiltig begäran eller begäran kan inte slutföras.
  • 500-599 Serverfel: Servern kunde inte acceptera begäran.

Hur du åtgärdar 404-fel

Å ena sidan kan du genom omdirigeringar skicka dina besökare direkt till målsidor som så nära som möjligt motsvarar innehållet i den ursprungliga begäran. På RAIDBOXES behöver du inte ytterligare WordPress Plugin för att ställa in omdirigeringar och omdirigeringsregler. Se instruktionerna om 301- och 302-omdirigeringar.

En annan möjlighet är att hitta och reparera trasiga länkar - dvs. ersätta dem med den nya giltiga interna källan. Se till att alla interna länkar leder till de önskade sidorna. Be också ägarna till externa länkkällor att ändra alla trasiga länkar.

Ett annat tips är att använda användarvänliga webbadresser och permalänkar - håll dem korta, använd små bokstäver och beskriv vad länkarna leder till. På så sätt kan du hålla koll på eventuella trasiga länkar och optimera din webbplats för sökmotorer. Se artikeln Intern länkning och SEO med WordPress .

Slutligen bör du skapa en anpassad 404-sida. Detta leder "vilsna" besökare tillbaka till hemsidan eller till relevant innehåll. Samtidigt kommer de inte att förväxla felet med att hela din webbplats är trasig.

404-sidor och SEO

De flesta 404-fel har vanligtvis ingen direkt negativ inverkan på webbplatsens prestanda eller ranking. I värsta fall innehåller de inga omdirigeringar. Då är det 88 procent mer sannolikt att användarna lämnar webbplatsen helt och hållet och inte återvänder - en indirekt SEO-faktor. En bra 404-sida handlar mer om att skapa en bättre upplevelse för din målgrupp.

Vad är målinriktade 404-sidor?

Det är därför viktigt att ha en anpassad 404-felsida som leder besökarna tillbaka till befintliga delar av webbplatsen. Nu ska vi titta på vilka alternativ du har. De vanliga och rekommenderade tillvägagångssätten för att skapa anpassade 404-sidor är följande:

  • Tillbaka- eller hemknappen: Ge din publik möjlighet att återvända till de tillgängliga sidorna eller till vilken plats som helst.
  • Sökfältet: Vanligtvis uppstår dessa typer av fel när användare:inside försöker hitta ett visst innehåll eller en viss sida. Erbjud dem ett sökalternativ eller föreslå specifika landningssidor.
  • Kontaktformulär: Människor kan använda ett kontaktformulär eller en chatt för att få hjälp om de inte hittar det innehåll de söker. Eller om de behöver hjälp med andra saker på din webbplats.
  • Ikoner för sociala medier: Det är alltid bra att koppla ihop olika sociala medier där ditt innehåll kan hittas och nås.
  • Humoristiska bilder: Detta är en av de mest underskattade metoderna som är klart underutnyttjad. Humor kan säkert avdramatisera resultatet av en (troligen) negativ uppfattning. Här är några exempel på ett ögonblick.

Skapa en anpassad 404-sida med WordPress

Du har följande alternativ för att skapa en 404-sida. Med WordPress , med en webbplatsbyggare eller sidbyggare och med egen kod - t.ex. HTML. Så här fungerar det med WordPress :

  1. Gå till din WordPress Dashboard
  2. Välj området "Design" till vänster
  3. Där finns underpunkten "Editor".
  4. Kontrollera om din WordPress Theme innehåller en "404-mall" (Ctrl + F och ange sedan "404.php");
  5. Klicka på länken för 404-mallen på höger sida.

Innehållet ser ut ungefär så här:

get_header();
?>
	<header class="page-header alignwide">
		<h1 class="page-title"><?php esc_html_e( 'Nothing here', 'twentytwentyone' ); ?></h1>
	</header><!-- .page-header -->
	<div class="error-404 not-found default-max-width">
		<div class="page-content">
			<p><?php esc_html_e( 'It looks like nothing was found at this location. Maybe try a search?', 'twentytwentyone' ); ?></p>
			<?php get_search_form(); ?>
		</div><!-- .page-content -->
	</div><!-- .error-404 -->
<?php
get_footer();

Nu kan du ändra den enligt dina behov. Du behöver dock kunskaper i HTML för att göra detta. Du bör också arbeta med ett barn Theme, annars kan dina ändringar raderas igen efter en uppdatering av WordPress Themes .

404 WordPress Plugins

Det bästa i WordPress är Plugins. Det finns över 50 000 kostnadsfria Plugins för nästan alla tänkbara ändamål: För 404-sidor, 301-sidor, omdirigeringar, SEO och mycket mer. Se den officiella katalogenWordPress Plugin .

Skapa en 404-sida med Visual Composer

Ett av de enklaste och snabbaste sätten att skapa en 404-sida är att använda en webbplats- eller sidbyggare. I det här exemplet visar vi hur du skapar en anpassad 404-sida med Visual Composer genom att dra och släppa. Observera att detta endast är möjligt med premiumversionen.

Först måste du ladda ner och installera Visual Composer Plugin . Se denna videohandledning på YouTube:

Youtube

Genom att läsa in videon accepterar du YouTubes sekretesspolicy.
Läs mer

Ladda ner video

PGlmcmFtZSBsb2FkaW5nPSJsYXp5IiB3aWR0aD0iNTYwIiBoZWlnaHQ9IjMxNSIgc3JjPSJodHRwczovL3d3dy55b3V0dWJlLW5vY29va2llLmNvbS9lbWJlZC9DY2FVNHNZd2NvbyIgdGl0bGU9IllvdVR1YmUgdmlkZW8gcGxheWVyIiBmcmFtZWJvcmRlcj0iMCIgYWxsb3c9ImFjY2VsZXJvbWV0ZXI7IGF1dG9wbGF5OyBjbGlwYm9hcmQtd3JpdGU7IGVuY3J5cHRlZC1tZWRpYTsgZ3lyb3Njb3BlOyBwaWN0dXJlLWluLXBpY3R1cmUiIGFsbG93ZnVsbHNjcmVlbj0iIj48L2lmcmFtZT4=

Så snart Plugin har installerats och aktiverats kan du komma igång. Använd en av de många mallarna. För att göra det klickar du på marknadsplatssymbolen i frontend-redigeraren. Välj Mallar och ange "404" för att hitta färdiga 404-sidor.

Den här handledningen förklarar exakt hur du skapar en anpassad 404-sida med Visual Composer :

Youtube

Genom att läsa in videon accepterar du YouTubes sekretesspolicy.
Läs mer

Ladda ner video

PGlmcmFtZSBsb2FkaW5nPSJsYXp5IiB3aWR0aD0iNTYwIiBoZWlnaHQ9IjMxNSIgc3JjPSJodHRwczovL3d3dy55b3V0dWJlLW5vY29va2llLmNvbS9lbWJlZC9hSHg2V3dETnVqTSIgdGl0bGU9IllvdVR1YmUgdmlkZW8gcGxheWVyIiBmcmFtZWJvcmRlcj0iMCIgYWxsb3c9ImFjY2VsZXJvbWV0ZXI7IGF1dG9wbGF5OyBjbGlwYm9hcmQtd3JpdGU7IGVuY3J5cHRlZC1tZWRpYTsgZ3lyb3Njb3BlOyBwaWN0dXJlLWluLXBpY3R1cmUiIGFsbG93ZnVsbHNjcmVlbj0iIj48L2lmcmFtZT4=

När du har slutfört och sparat dina individuella 404-sidedesigns kan du nu hantera dem i redigeringsverktyget. Följande video visar hur du gör detta:

Youtube

Genom att läsa in videon accepterar du YouTubes sekretesspolicy.
Läs mer

Ladda ner video

PGlmcmFtZSBsb2FkaW5nPSJsYXp5IiB3aWR0aD0iNTYwIiBoZWlnaHQ9IjMxNSIgc3JjPSJodHRwczovL3d3dy55b3V0dWJlLW5vY29va2llLmNvbS9lbWJlZC9LeG4xT2hmUGRxayIgdGl0bGU9IllvdVR1YmUgdmlkZW8gcGxheWVyIiBmcmFtZWJvcmRlcj0iMCIgYWxsb3c9ImFjY2VsZXJvbWV0ZXI7IGF1dG9wbGF5OyBjbGlwYm9hcmQtd3JpdGU7IGVuY3J5cHRlZC1tZWRpYTsgZ3lyb3Njb3BlOyBwaWN0dXJlLWluLXBpY3R1cmUiIGFsbG93ZnVsbHNjcmVlbj0iIj48L2lmcmFtZT4=

Mer tips om hur du skapar en anpassad 404-sida, de bästa lösningarna på Plugin och lite inspiration för 404-sidor finns i inlägget från Visual Composer 404-sidor med WordPress .

Exempel på bra 404-sidor

Vi har samlat några av de mest kreativa 404-felsidorna - oberoende av WordPress och Visual Composer - som du kan inspireras av. GOG.coms 404-sida är ett av de bästa exemplen på att tänka utanför boxen. Och det i ordets rätta bemärkelse:

404-sida med exempel på GOG
404-sidan på GOG.com (bild © gog.com)

Eftersom detta är en sida med underhållningsvärde måste Blizzard uppfylla höga krav på sin 404-sida. Den coola designen blir en klassiker i sig själv:

404-sida med exempel Blizzard
Blizzard skickar ut sina hjälpare (Bild © Blizzard)

Det sista exemplet på 404-sidor från Slack är superenkelt, men ändå överraskande. Det är ett vackert exempel på kreativitet:

Exempel på 404-sida Slack
Lekfullt och animerat: 404-felsidan på Slack (bild © Slack )

Slutsats om 404-sidor med WordPress

Nu vet du hur du skapar en 404-felsida för att leda dina besökare till aktiva undersidor på din webbplats. Och hur du kan vända en dålig situation till något som minimerar eller till och med löser irritationen. Det finns också mycket enkla sätt att utforma en sådan 404-sida - om man är kreativ och har lite grafisk skicklighet.

Med en webbplatsbyggare som verktyg behöver du inga kunskaper i programmering för att förvandla en tråkig 404-sida till något som gör dig på gott humör. Och/eller som hjälper dina besökare i deras situation. Har du ett bra exempel på en lyckad 404-felsida? Dela gärna med dig av den i kommentarerna.

Dina frågor om 404-sidor

Vilka frågor har du om 404-felsidor med WordPress ? Vi ser fram emot din kommentar. Är du intresserad av aktuella ämnen om WordPress och WooCommerce? Följ sedan RAIDBOXES på Twitter och Facebook, LinkedIn eller via vårt nyhetsbrev.

Efter sina studier - Public Relations och Advertising Management - arbetar Nikola i marknadsföringsteamet på Visual Composer . Hennes fokus ligger på copywriting, sociala medier och analys, hon är intresserad av psykologi och konsumentbeteende och beslutsprocesser.

Liknande artiklar

Kommentarer om den här artikeln

Skriva en kommentar

Din e-postadress kommer inte att publiceras. Obligatoriska fält är markerade med *.