Smile!

Nu zogenaamde single page applications (met als bekendste voorbeeld AngularJS) steeds populairder worden, is er ook een probleem: als zo'n site door de browser wordt opgebouwd, wat moet een zoekmachine er dan mee?!?

Zoekmachines als Google trekken de broncode van een pagina binnen, doorzoeken die en verder niks. Als de broncode pas de start is om in de browser alle content in te laden, dan ziet Google dat dus nooit. Google is geen browser immers, 't is een zoekmachine en in die zin vrij "dom".

Sensi Media heeft de oplossing!

Nou ja, dat hebben we natuurlijk niet helemaal alleen bedacht. De grote zoekmachines als Google en Bing hebben een feature om stiekem toch de eindpagina op te vragen als je site aangeeft dat hij nog allemaal dingen gaat lopen inladen. Nou kun je natuurlijk alle code dubbel schrijven om dit af te vangen - je moet dan immers je pagina's zowel dynamisch als in z'n geheel kunnen genereren - maar dat is natuurlijk niet handig: dan wordt je site twee keer zo duur om te laten maken.

Sensi Media's dienst Smile zorgt ervoor dat jouw site, met een paar regels code, dergelijke speciale verzoeken van zoekmachines doorstuurt naar ons platform, daar de complete pagina genereert en die dan terug laat geven. Kijk, daar kan Google vervolgens mee uit de voeten! Het enige wat je nodig hebt is een unieke API key waardoor wij weten dat je toegang tot het platform hebt.

Voorbeeld implementatie (PHP/AngularJS)

Het kan zo simpel zijn als deze code toevoegen aan je index.php (ervan uitgaande dat alle pagina's daarnaartoe geroute worden natuurlijk) voordat je eigenlijke site het overneemt:

if (isset($_GET['_escaped_fragment_'])) {
    $smile = 'http://smile.sensimedia.nl';
    // _escaped_fragment_ weer weghalen,
    // anders kom je in een eindeloze lus:
    $url = preg_replace(
        '@[\?&]_escaped_fragment_=(.*?)(&|$)@',
        '$2',
        $_SERVER['REQUEST_URI']
    );
    $ch = curl_init(sprintf(
        "%s/?api=MIJN_API_KEY&url=%s",
        $smile,
        "http://www.mijndomein.nl".$url
    ));
    // Voorbeeld gaat uit van een html5 doctype, maar dit kun
    // je natuurlijk aanpassen naargelang wat jouw site doet:
    echo "<!doctype html>\n";
    curl_exec($ch);
    // Hierna zou je "normale" afhandeling komen,
    // maar dat willen we niet, dus: sterf!
    die();
}

...en dan zorgen dat je SPA als-ie klaar is met renderen de <body> aanpast :

<body data-smile="{{Smile.status}}">

Voorbeeld controller (AngularJS):

angular.module('myapp').controller(
'myController',
['$scope', function($scope) {

$scope.Smile = {};
// Doe dingen die de pagina laden...
$scope.Smile.status = 'cheese';

}]);

...of, voorbeeld met jQuery:

$(document).ready(function() {
    // Pas dingen aan die de pagina laden...
    $('body').attr('data-smile', 'cheese');
});

Wat kost dat?

Tja, voor niks gaat de zon op. Prijzen vind je aan de rechterzijde. Neem contact op met ons voor meer informatie, of om een API key aan te vragen.