# How to Customize Error Pages in Laravel: A Step-by-Step Guide

> Author: [Oussama Ghaieb](https://oussama.ghaieb.com/about-me)
> Canonical: https://oussama.ghaieb.com/posts/how-to-customize-error-pages-in-laravel-a-step-by-step-guide

# <span class="hover:bg-yellow-100">How to Customize Error Pages in Laravel: A Step-by-Step Guide</span>

## Why Customize Error Pages in Laravel?  

When users encounter errors like **404 (Not Found)** or **500 (Server Error)**, default error pages can look unprofessional and harm user experience. Custom error pages help:  
✅ **Improve branding** – Match your website’s design.  
✅ **Enhance user experience** – Provide helpful navigation options.  
✅ **Boost SEO** – Search engines prefer well-handled error pages.  

## Step 1: Locate Laravel’s Default Error Views  

Laravel stores default error views in:  
```  
resources/views/errors/  
```  
Files like `404.blade.php`, `500.blade.php`, etc., control how errors are displayed.  

## Step 2: Create Custom Error Pages  

To customize an error page (e.g., **404**), create a new Blade file:  

```bash
php artisan make:view errors/404
```  

Then, edit `resources/views/errors/404.blade.php`:  

```html
@extends('layouts.app')  

@section('content')  
    <div class="container text-center py-5">  
        <h1>404 - Page Not Found</h1>  
        <p>Oops! The page you're looking for doesn't exist.</p>  
        <a href="https://oussama.ghaieb.com" class="btn btn-primary">Return Home</a>  
    </div>  
@endsection  
```  

Repeat for other errors (`403.blade.php`, `500.blade.php`, etc.).  

## Step 3: Test Your Custom Error Pages  

### Manually Trigger Errors for Testing  
- **404 Error** – Visit a non-existent URL.  
- **500 Error** – Temporarily break a route:  
```php
Route::get('/test-500', function() {
    abort(500);
});
```  

## Step 4: Customize HTTP Error Responses (Optional)  

For advanced control, modify `app/Exceptions/Handler.php`:  

```php
public function register()  
{
    $this->renderable(function (\Symfony\Component\HttpKernel\Exception\NotFoundHttpException $e, $request) {
        return response()->view('errors.404', [], 404);
    });

    $this->renderable(function (\Symfony\Component\HttpKernel\Exception\HttpException $e, $request) {
        return response()->view('errors.500', [], 500);
    });
}
```  

## SEO Best Practices for Error Pages  

🔹 **Keep the Design Consistent** – Match your site’s theme.  
🔹 **Add Helpful Links** – Include navigation to the homepage or popular pages.  
🔹 **Use Clear, Friendly Messages** – Avoid technical jargon.  
🔹 **Set Proper HTTP Status Codes** – Ensure search engines recognize the error.  

## Conclusion  

Customizing error pages in Laravel is simple and improves user experience while benefiting SEO. By following these steps, you can replace default error screens with branded, user-friendly pages.  

**Need help?** <a href="https://oussama.ghaieb.com/contact">Get in Touch! <a/> 🚀