Comment ajouter les balises prev/next et canonical avec Sylius ?

Voyons comment améliorer le SEO de votre boutique Sylius en ajoutant les balises prev/next et canonical aux différentes pages du site.

Tout commence par un besoin SEO

L’ajout des balises prev/next et canonical intervient dans le cadre de l’amélioration du SEO d’une boutique Sylius que nous avons développée.
Dans notre cas les règles à mettre en place sont les suivantes :

• Ajout des prev/next sur toutes les pages de la boutique Sylius contenant une pagination.
• Ajout d’une canonical sur les pages suivantes de la boutique :
  • Homepage
  • Listes produits (Uniquement sur la première page d’une liste)
  • Fiches produits
  • Pages CMS (Pages de contenu)
  • Page panier
  • Page login
  • Page inscription
  • Page mot de passe oublié
  • Listes des actualités (Uniquement sur la première page d’une liste)

Bien sûr, ces recommandations ne sont pas universelles et peuvent dépendre d’un site à l’autre.

Comment faire simple ?

Nous avons eu l’idée d’utiliser les macros disponibles dans Twig. Et cela pour plusieurs raison :

• Nous avons besoin de connaître les pages disponibles pour les balises prev/next. Dans le template que nous allons vous proposer, nous les connaissons.
• Nous avons besoin de cibler certaines parties du site et pas d’autres. Dans les templates, nous sommes un contexte connu et nous pouvons décider ou non d’ajouter les balises.
• Étant donné que nous avons modifié les templates de base de Sylius pour le design de notre site, les surcharges de templates sont déjà existantes.

Des macros pour les gouverner tout·e·s

Nous avonc donc créé deux macros afin de ne pas dupliquer le même code à différents endroits du site, et de pouvoir ajouter facilement nos balises.

Nous avons créé un fichier SyliusShopBundle/views/Macro/seo.html.twig dans notre thème :

{% macro prevNext(paginator) %}
    {% if paginator.hasPreviousPage %}
        {% if paginator.previousPage > 1 %}
            {% set path = path(app.request.attributes.get('_route'), app.request.attributes.get('_route_params')|merge(app.request.query)|merge({'page': paginator.previousPage})) %}
        {% else %}
            {% set path = path(app.request.attributes.get('_route'), app.request.attributes.get('_route_params')) %}
        {% endif %}
        <link rel="prev" href="{{ absolute_url(path) }}" />
    {% endif %}
    {% if paginator.hasNextPage %}
        {% set path = path(app.request.attributes.get('_route'), app.request.attributes.get('_route_params')|merge(app.request.query)|merge({'page': paginator.nextPage})) %}
        <link rel="next" href="{{ absolute_url(path) }}" />
    {% endif %}
{% endmacro %}

{% macro canonical(paginator) %}
    {# Add canonical if page does not have pagination or only of the first litsing page #}
    {% if paginator is null or not paginator.hasPreviousPage %}
        {% set path = path(app.request.attributes.get('_route'), app.request.attributes.get('_route_params')) %}
        <link rel="canonical" href="{{ absolute_url(path) }}" />
    {% endif %}
{% endmacro %}

La première macro concerne l’ajout des balises prev/next. Nous donnons en paramètre la pagination (PagerFanta pour nous). Si la page possède une page précédente, et que celle-ci n’est pas la première page, nous mettons l’URL avec le numéro de la page.
En revanche, si la page précédente est la page 1, nous ne mettons pas le paramètre.
De même, si la page possède une page suivante, nous mettons son URL avec le numéro de page.

La seconde concerne la balise canonical, elle prend aussi en paramètre la pagination, mais ce paramètre n’est pas obligatoire. Nous souhaitons aussi avoir des balises canonical sur des pages sans pagination !
Si la page n’est pas paginée, nous mettons alors l’URL courante, sans les paramètres qu’il pourrait y avoir en plus. Nous ajoutons aussi cette canonical uniquement sur la première page des pages paginées (not paginator.hasPreviousPage).

Maintenant que nos macros sont prêtes, il ne reste qu’à les appeler !

Ajout des appels aux macros seo.prevNext et seo.canonical dans nos templates

Utilisation du bloc metatags du layout Sylius

Nous allons profiter du bloc metatags qui est utilisé dans le layout Sylius pour y insérer nos balises dédiées SEO :

<!DOCTYPE html>
<html lang="{{ app.request.locale|slice(0, 2) }}">
<head>
	{# [...] #}

    {% block metatags %}
    {% endblock %}
    
	{# [...] #}
</head>
{# [...] #}

Page avec pagination

Dans le cas d’une page avec une pagination nous avons juste à importer le fichier précédemment créé et appeler les macros.

Exemple ici dans notre liste produits :

{% extends '@SyliusShop/layout.html.twig' %}
{% import '@SyliusShop/Macro/seo.html.twig' as seo %}

{# [...] #}

{% block metatags %}
    {{ parent() }}
    {{ seo.prevNext(products) }}
    {{ seo.canonical(products) }}
{% endblock %}

{# [...] #}

Page sans pagination

Pour les pages sans pagination, nous n’appelons que la méthode seo.canonical, étant donné que nous avons pas besoin des balises prev et next.

Exemple ici sur notre homepage :

{% extends '@SyliusShop/layout.html.twig' %}
{% import '@SyliusShop/Macro/seo.html.twig' as seo %}

{# [...] #}

{% block metatags %}
    {{ parent() }}
    {{ seo.canonical }}
{% endblock %}

{# [...] #}

Et voilà, notre boutique est prête pour la gestion des balises canonical et les prev / next. Pour l’avoir fait sur des boutiques Magento par le passé, c’était très compliqué à mettre en place surtout pour les paginations.
Ici avec Sylius, c’est un jeu d’enfant et pas de problème de performance car nous ne chargeons aucun élément supplémentaire en plus de ce qui est disponible !

Vous avez besoin d’aide sur un projet Sylius ou sur une Migration de Magento vers Sylius ? Venez-nous voir !