Google AMP with Laravel

问题:

I have recently launched an ecommerce site based on laravel. And now i really think its a good idea to implement AMP as it supports ecommerce now (even shopify and ebay are implementing it)

So my query is how can we implement AMP on laravel? Is there a way to use desktopMainTempalte.blade.php for desktop version and switch to mobileMainTemplate.blade.php on mobile version? I just don't want to create a different domain for mobile device as m.domain.com. I want something creative here but Im not sure if i am going in the right direction.

What would you guys be doing if you were in my shoe?

回答1:

Using different routes and controllers to do the same but with a different view is very difficult. You can do this for a better approach.

1. Use the same web controllers for /amp/ urls
2. View the amp pages differently by modifying view() helper

Amp Routes

To catch the /amp/ routes, add this to your RouteServiceProvider.php

protected function mapAmpRoutes()
{
    Route::group([
        'middleware' => 'web',
        'namespace' => $this->namespace,
        'prefix' => 'amp',
    ], function ($router) {
        require base_path('routes/web.php');
    });
}

Also change your map method:

public function map()
{
    $this->mapAmpRoutes(); // <-- Add this

    $this->mapWebRoutes();

    $this->mapApiRoutes();
}

At this time all addresses like example.com/amp/... will refer to your web.php routes.

Amp view files

Now you should customize view() helper to render a different view for amp. Create a helpers.php in app/Http directory with a view function:

function view($view = null, $data = [], $mergeData = [])
{
    $factory = app(Illuminate\Contracts\View\Factory::class);

    if (func_num_args() === 0) {
        return $factory;
    }

    //if amp, add '-amp' to view name
    if(request()->segment(1) == 'amp'){
        if(view()->exists($view . '-amp')){
            $view .= '-amp';
        }else{
            abort(404);
        }
    }
    return $factory->make($view, $data, $mergeData);
}

This function is not loaded until you add it to your bootstrap/autoload.php file

require __DIR__.'/../app/Http/helpers.php'; // <-- add this (should be before require vendor/autoload.php)
require __DIR__.'/../vendor/autoload.php';

Edit: If you don't find bootstrap/autoload.php file, search for vendor/autoload.php because laravel has removed that. (Thanks MinderMondo for the comment)

You can now add any views you like for amp with '-amp' affix. For example if you have index.blade.php the amp view name should be index-amp.blade.php.

回答2:

There are several ways of implementing AMP pages to your web application (no matter the framework).

One example is the way https://www.theguardian.com have done this : by creating a new sumbomain "amp.theguardian.com" and every page on the main site "www.theguardian.com" has a canonical link to the same page, but the AMP version and vice versa.

Example : Normal page : LINK AMP version of the page : LINK

As you can see, they are the same, but not quite. Most of the elements that the normal page has are removed from the amp page (because AMP does not allow them or is a bad practice for AMP).

So there you have it! A way to implement AMP to your Laravel project is to have separate views (resources/views/amp) and Controller that handles them.

A good guide to what your AMP views can have as functionalities is HERE.

回答3:

I made one site with AMP and my solution was simple adding to routes new GET rule for: mobile/{articleSlug}/{pageNumber?}, and new function in Controller to support it, which load all necessary things for new AMP layout.

If I'm not wrong you can't have AMP page and normal page on this same route - Google will not know how to change between them.