Laravel 5 SEO Friendly URLs

Download: Laravel SEO Friendly URLs

Introduction

No one lights up a light and puts it under the bed. The same principle applies to your website. You want to put it out there for people to find it. SEO is the acronym for Search Engine Optimization. URLs play an important role in getting found on the web. In this tutorial, we will implement SEO friendly URLs for our Larashop tutorial project. In the previous tutorial Laravel Hello World, we looked at routing and controllers. In this tutorial, we will build on that knowledge and do some actual work on our tutorial project.

Use composer here

Topics to be covered

We will cover the following topics

  • Factors that affect SEO
    • Website speed
    • Role of Social Media in SEO
    • Responsive designs and mobile friendly
    • Keywords
    • Website URLs
  • How to implement SEO friendly URLs in Laravel

Factors that affect SEO

This is not a comprehensive tutorial on search engine optimization. It only introduces you to what you need to know that your role in SEO as a developer. The following are some of the factors that search engines such as Google Search consider when evaluating web sites

  1. Website speed – no one loves websites that take forever to load. We all love fast websites. The goal should be to keep the load time under 2 seconds. If you can get it under a second that is even much better. This role falls to you as the developer. You need to test your web application for speed and optimize if necessary
  2. Social media statistics – if you read something cool on the web, you naturally share it on social media. This is a stamp of approval to search engines. Your role in this is to include tools on the web site that will make it easy for the visitors to share content
  3. Responsive designs – mobile devices have a significant market share of internet usage. Since user experience matters to search engines, you need to ensure that the web site displays properly in mobile devices, tablets and desktops
  4. Keywords – search engines look at keywords when querying billions of indexed websites. Your role as a developer is to ensure you provide title tags, meta description and HTML H2 heading that the content writers can use to place keywords
  5. Website URLs – the URLs should be keyword rich and words should be separated by dashes and not underscores.

How to implement SEO friendly URLs in Laravel

Now that we have covered the basics of SEO and the role that we as developers have to play, let’s get our hands dirty. We will be mapping routes to controllers. For the sake of simplicity, we will only create a single controller for all routes. The following table shows the URLs that our online store will implement

S/N URL METHOD DESCRIPTION
1 / index Display home page
2 /products products Display products page
3 /products/details/{id} product_details(id) Display product detailed based on product id
4 /products/category product_categories Display product categories
5 /products/brands product_brands Display product brands
6 /blog blog Display blog postings list
7 /blog/post/{id} blog_post{id} Display blog post content
8 /contact-us contact_us Display contact us page
9 /login login Login user
10 /logout logout Logout user
11 /cart cart Display cart contents
12 /checkout checkout Checkout shopper
13 /search/{query} search Display search results

This section assumes you have created the tutorial project larashop. If you haven’t done so yet then read this tutorial Laravel Hello World. We will now use the artisan command line tool to generate the boiler plate code for Front.php controller

  1. open the command prompt
  2. run the following command to browse to our project. We assume you are using windows and XAMPP installed to drive C. The knowledge still applies to other operating systems
cd "C:\xampp\htdocs\larashop"

Run the following artisan command to generate the Front controller

php artisan make:controller Front

You will get the following message

Controller created successfully.

Open /app/Http/Controllers/Front.php

Replace the controller boiler plate code with the following

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Http\Controllers\Controller;

class Front extends Controller {

    public function index() {
        return 'index page';
    }

    public function products() {
        return 'products page';
    }

    public function product_details($id) {
        return 'product details page';
    }

    public function product_categories() {
        return 'product categories page';
    }

    public function product_brands() {
        return 'product brands page';
    }

    public function blog() {
        return 'blog page';
    }

    public function blog_post($id) {
        return 'blog post page';
    }

    public function contact_us() {
        return 'contact us page';
    }

    public function login() {
        return 'login page';
    }

    public function logout() {
        return 'logout page';
    }

    public function cart() {
        return 'cart page';
    }

    public function checkout() {
        return 'checkout page';
    }

    public function search($query) {
        return "$query search page";
    }
}

HERE,

  • The above code defines functions that will responds to the routes. For now the controller will simply return the name of the page. Actual implementation will be done in the tutorial Laravel Blade. For detailed explanation of similar code, read the tutorial Laravel Hello World if you haven’t done so yet.

We will now add routes that will call the methods in the controllers

  1. Open routes.php in /app/Http/routes.php
  2. Replace the code with the following
<?php

/*
|--------------------------------------------------------------------------
| Application Routes
|--------------------------------------------------------------------------
|
| Here is where you can register all of the routes for an application.
| It's a breeze. Simply tell Laravel the URIs it should respond to
| and give it the controller to call when that URI is requested.
|
*/
Route::get('/','Front@index');
Route::get('/products','Front@products');
Route::get('/products/details/{id}','Front@product_details');
Route::get('/products/categories','Front@product_categories');
Route::get('/products/brands','Front@product_brands');
Route::get('/blog','Front@blog');
Route::get('/blog/post/{id}','Front@blog_post');
Route::get('/contact-us','Front@contact_us');
Route::get('/login','Front@login');
Route::get('/logout','Front@logout');
Route::get('/cart','Front@cart');
Route::get('/checkout','Front@checkout');
Route::get('/search/{query}','Front@search');

Save the changes

Load the following URL in your web browser

http://localhost/larashop/public/search/boots

You will get the following output

boots search page

Try out other URLs as well.

Summary

Developing web sites that simplify search engine optimization will make SEO experts love your web applications and this will have the sinful effect of making you a hell lot of money. Always remember the factors that affect SEO and incorporate them into your public web applications.

What’s next?

Read the next tutorial on Laravel Blade. We will replace the simple text with HTML views. We will also learn about blade. Blade is a template engine for Laravel.

Related Tutorials