Laravel AMP optimization
AMP (Accelerated Mobile Pages) is an open-source website publishing technology developed by Google. It gives your users fast, lightweight and almost instant loading experience on the mobile web. If you are concern your website SEO, then it is highly recommended for you to make an AMP version of your website. It has a huge impact on SEO. When we search on Google through our mobile device Google will show some search result like this which load instantly in our browser.
Are you interested with how to make AMP pages in Laravel Framework? Okay, it's not so hard to implement amp version on your existing or new laravel website. In this article, I'll show you a step by step process to make AMP pages of your site in Laravel Framework without any third-party package.
Suppose our website has routes like these or any other route combinations.
Route::get('/','SiteController@home');
Route::get('/posts','SiteController@posts');
Route::get('/{slug}','SiteController@postDetails');
and controller code like this.
<?php
namespace App\Http\Controllers\Site;
use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use App\Post;
class SiteController extends Controller
{
public function home(){
return view('site.home');
}
public function posts(){
$data = Post::all();
return view('site.posts',compact('data'));
}
public function postDetails($slug){
$post = Post::where('slug',$slug)->first();
return view('site.single',compact('post'));
}
}
It's a simple scenario but your site might have more routes. It'll be difficult to make a separate route and controller file to handle amp pages.
Our Plan We'll not create any more route to handle our AMP version. We use our existing routes and controller file to handle our AMP version of site with some minor changes and tricks. Let's start.
Step 01: Add a mapAmpRoutes
method to routeServiceProvider.php
protected function mapAmpRoutes()
{
Route::prefix('amp')
->middleware('web')
->namespace($this->namespace)
->group(base_path('routes/web.php'));
}
and add this in the map
method.
$this->mapAmpRoutes();
Note: It'll use our web.php
route file and use our existing site routes. With this, our base URL start with example.com/amp.
example.com/amp example.com | Both will use our existing controller method. |
example.com/amp/posts example.com/posts | Both will use our existing controller method. |
example.com/amp/this-is-first-post example.com/this-is-first-post | Both will use our existing controller method. |
Now, we have to detect the current route is for amp page request or normal view then we'll deliver blade template according to route request. Let's do the tricks to detect the current route is for amp or normal page. The plan is when route request for amp page we will return same template name with amp suffix.
Example
If normal request we will return | home.blade.php |
If amp page request we will return | home-amp.blade.php |
Step 02: Make a request detector.
Add this method in your controller. This getView
method will detect the request is for amp page or normal.
private function getView($viewName)
{
if (request()->segment(1) == 'amp') {
if (view()->exists($viewName . '-amp')) {
$viewName .= '-amp';
} else {
abort(404);
}
}
return $viewName;
}
After adding this method we have to just update our view return statement like return view($this->getView('home'))
<?php
namespace App\Http\Controllers\Site;
use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use App\Post;
class SiteController extends Controller
{
private function getView($viewName)
{
if (request()->segment(1) == 'amp') {
if (view()->exists($viewName . '-amp')) {
$viewName .= '-amp';
} else {
abort(404);
}
}
return $viewName;
}
public function home(){
return view($this->getView('site.home'));
}
public function posts(){
$data = Post::all();
return view($this->getView('site.posts'),compact('data'));
}
public function postDetails($slug){
$post = Post::where('slug',$slug)->first();
return view($this->getView('site.single'),compact('post'));
}
}
Step 03: Make amp pages
Now we just have to create these pages for amp page request.
home-amp.blade.php
posts-amp.blade.php
single-amp.blade.php
AMP page design has some rules and direction. If you are new and interested to learn how to make amp page design then take a tour of AMP official documentation and guideline to design amp page or you can free download amp page template.
Hope this article will help you to make amp page in Laravel website. If you find this helpful then please share with others.