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 !