Live Coding : Créer un fichier sitemap.xml avec Symfony 4

17 janvier 2020 - : MVC Tutoriel Symfony SEO Live-Coding - : 3 commentaires - Tutoriel MVC Symfony Live-Coding

Visualisez les fichiers de cette série sur GitHub

Dernière modification le 18 janvier 2020

L'objectif de tout site web est d'avoir des visiteurs. Pour avoir des visiteurs, il est nécessaire d'être présent dans les moteurs de recherche.

Un des outils favorisant le référencement des sites web est le fichier sitemap.xml.

Qu'est-ce que le sitemap ?

Le fichier sitemap.xml est un fichier au format XML qui liste les pages et ressources d'un site. Il répond à une norme détaillée sur le site officiel sitemaps.org.

Nous allons créer un fichier sitemap.xml pour notre blog.

Il contiendra la liste des pages et articles du site, sous format XML.

Un exemple de fichier sitemap.xml est le suivant

<?xml version="1.0" encoding="UTF-8"?>

<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">

   <url>

      <loc>https://nouvelle-techno.fr/</loc>

      <lastmod>2020-01-18</lastmod>

      <changefreq>weekly</changefreq>

      <priority>0.8</priority>

   </url>

</urlset> 

Créer le contrôleur

Pour commencer, nous allons créer un contrôleur spécifique qui enverra les données à une vue xml sous forme de tableau. Nous appellerons ce contrôleur "SitemapController" et allons le créer au moyen de la commande suivante

php bin/console make:controller SitemapController

Ce contrôleur contient ce code par défaut

<?php

namespace App\Controller;

use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\Routing\Annotation\Route;

class SitemapController extends AbstractController
{
    /**
     * @Route("/sitemap", name="sitemap")
     */
    public function index()
    {
        return $this->render('sitemap/index.html.twig', [
            'controller_name' => 'SitemapController',
        ]);
    }
}

Nous allons commencer par modifier la route afin qu'elle réponde au nom de fichier sitemap.xml et qu'elle envoie un format xml

/**
 * @Route("/sitemap.xml", name="sitemap", defaults={"_format"="xml"})
 */

Nous allons devoir nous assurer que les urls sont toutes complètes, nous allons donc récupérer le nom d'hôte au moyen de la requête.

La méthode sera modifiée comme suit

public function index(Request $request)
{
    // Nous récupérons le nom d'hôte depuis l'URL
    $hostname = $request->getSchemeAndHttpHost();

    return $this->render('sitemap/index.html.twig', [
        'controller_name' => 'SitemapController',
    ]);
}

Nous allons ensuite créer les urls que nous allons insérer dans le fichier sitemap sur le modèle de l'exemple cité plus haut.

Notre site contient une page d'accueil, une page d'inscription, une page de connexion et une page pour chaque article.

Nous ajouterons donc ce qui suit dans le contrôleur

// On initialise un tableau pour lister les URLs
$urls = [];

// On ajoute les URLs "statiques"
$urls[] = ['loc' => $this->generateUrl('accueil')];
$urls[] = ['loc' => $this->generateUrl('app_register')];
$urls[] = ['loc' => $this->generateUrl('app_login')];

// On ajoute les URLs dynamiques des articles dans le tableau
foreach ($this->getDoctrine()->getRepository(Articles::class)->findAll() as $article) {
    $images = [
        'loc' => '/uploads/images/featured/'.$article->getFeaturedImage(), // URL to image
        'title' => $article->getTitre()    // Optional, text describing the image
    ];

    $urls[] = [
        'loc' => $this->generateUrl('article', [
            'slug' => $article->getSlug(),
        ]),
        'lastmod' => $article->getUpdatedAt()->format('Y-m-d'),
        'image' => $images
    ];
}

Enfin, nous allons fabriquer le fichier XML au moyen du fichier twig (détaillé dans le chapitre suivant) et envoyer la réponse

// Fabrication de la réponse XML
$response = new Response(
    $this->renderView('sitemap/index.html.twig', ['urls' => $urls,
        'hostname' => $hostname]),
    200
);

// Ajout des entêtes
$response->headers->set('Content-Type', 'text/xml');

// On envoie la réponse
return $response;

Le fichier Twig

Après avoir préparé les données dans le contrôleur, nous allons les transmettre au fichier twig qui générera le code XML au standard sitemap.

Pour commencer, nous allons intégrer l'entête

<?xml version="1.0" encoding="UTF-8"?>

Ensuite, nous intégrons la balise "urlset" avec les différents schémas par défaut

<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9 http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">

</urlset>

Enfin, nous allons boucler sur le tableau "urls" pour générer chacune des URLs que nous avons envoyées. Nous intégrons cette boucle à l'intérieur de la balise "urlset"

{# On boucle sur les URLs #}
{% for url in urls %}
    <url>
        {# On vérifie si le nom d'hôte (hostname) est présent dans l'url #}
        {# Si il n'y est pas, on l'ajoute #}
        <loc>
            {% if url.loc|replace({hostname:''}) == url.loc %}
                {{ hostname }}{{ url.loc }}
            {% else %}
                {{ url.loc }}
            {% endif %}
        </loc>

        {# Si il y a une date de modification #}
        {% if url.lastmod is defined %}
            <lastmod>{{url.lastmod}}</lastmod>
        {% endif %}

        {# Si il y a une fréquence de modification #}
        {% if url.changefreq is defined %}
            <changefreq>{{url.changefreq}}</changefreq>
        {% endif %}

        {# Si il y a une priorité #}
        {% if url.priority is defined %}
            <priority>{{url.priority}}</priority>
        {% endif %}

        {# Si il y a une image #}
        {% if url.image is defined and url.image is not empty %}
            <image:image>
                <image:loc>{%if url.image.loc|replace({hostname:''}) == url.image.loc%}{{hostname}}{{url.image.loc}}{%else%}{{url.image.loc}}{%endif%}</image:loc>
                <image:title>{{ url.image.title }}</image:title>
            </image:image>
        {% endif %}
    </url>
{% endfor %}

 

Visualisez les fichiers de cette série sur GitHub

Partager

Partager sur Facebook Partager sur Twitter Partager sur LinkedIn

Commentaires

Algiu a écrit le 10 juin 2020 à 20:18

Hello,

Merci beaucoup pour ce tuto encore une fois très clair :)
Je suis parvenu à sortir le sitemap comme dans la vidéo. Par contre je remarque que l'url s'ouvre correctement en xml dans Chrome mais pas dans Safari ou cela s'affiche comme un fichier txt.

Egalement, j'ai soumis l'url de sitemap dans Google Search Console et j'ai un message d'erreur: Impossible de lire le sitemap

Est ce que quelqu'un a essayé de mettre son sitemap dans Google Search Console et a le même problème que moi ?

Merci beaucoup !

Répondre

Nouvelle-Techno.fr a répondu le 10 juin 2020 à 20:22

Bonjour,

Je publie ce sitemap sans aucun problème sur Google Search Console.

Nous pouvons en discuter sur Discord si besoin.

Répondre

Flo a écrit le 24 avril 2020 à 21:21

Merci pour ce tuto, simple, efficace :)

Répondre

Obtenir de l'aide

Il n'est plus possible d'ajouter de commentaires.

Pour obtenir de l'aide, vous pouvez accéder au serveur Discord pour une entraide par chat