SEO for Geotrek-rando static pages (meta) and multi-portal

camillemonchicourt commented 5 years ago

Depuis la version 2.16.1 de Geotrek-admin (https://github.com/GeotrekCE/Geotrek-admin/blob/master/docs/changelog.rst#2161-2018-01-10), celui-ci génère des pages HTML statiques de chaque page de Geotrek-rando pour les réseaux sociaux et les moteurs de recherche.

En effet, Geotrek-rando est construit en javascript comme une Single-page app avec AngularJS. Cela pose des soucis de référencement.

Fournir des copies HTML statiques aux moteurs de recherche améliore cela, et permet de reproduire le fonctionnement d'un site HTML statique.

La génération de ces pages est réalisée lors de la synchronisation des données (sync_rando) dans le répertoire data/meta/ à partir de templates HTML :

https://github.com/GeotrekCE/Geotrek-admin/blob/master/geotrek/trekking/templates/trekking/meta.html pour la page d'accueil de Geotrek-rando
https://github.com/GeotrekCE/Geotrek-admin/blob/master/geotrek/trekking/templates/trekking/trek_meta.html pour la page statique d'une rando
https://github.com/GeotrekCE/Geotrek-admin/blob/master/geotrek/tourism/templates/tourism/touristiccontent_meta.html pour la page statique d'un contenu touristique
https://github.com/GeotrekCE/Geotrek-admin/blob/master/geotrek/tourism/templates/tourism/touristicevent_meta.html pour la page statique d'un événement touristique

Pour que ces templates soient renseignés avec les bonnes balises <title> et <description> du portail Geotrek-rando, il est nécessaire de surcoucher 2 variables de langues dans les langues utilisées sur Geotrek-rando : https://github.com/GeotrekCE/Geotrek-admin/blob/master/geotrek/trekking/locale/fr/LC_MESSAGES/django.po#L410-L415 en utilisant la méthode détaillée ici : https://geotrek.readthedocs.io/en/master/advanced-configuration.html#override-translations

Cependant ces templates (non surcouchables à priori ?) ne prévoient que la publication sur un seul portail. Dans notre cas, notre Geotrek-admin publie sur 3 portails Geotrek-rando.

C'est pourquoi nous avons du ajouté des variables de langue pour chaque portail, en se basant sur la variable rando_url, passée lors de la synchronisation par portail (et désormais à ajouter dans les paramètres de sync_rando : https://geotrek.readthedocs.io/en/master/synchronization.html#synchronization-options).

Exemple du fichier de surcouche de langue \Geotrek-admin\geotrek\locale\fr\LC_MESSAGES\django.po :

msgid "Geotrek-rando-re-title"
msgstr "Rando Ecrins"

msgid "Geotrek-rando-gte-title"
msgstr "Grand tour des Ecrins"

msgid "Geotrek-rando-pde-title"
msgstr "Rando Pays des Ecrins"

msgid "Geotrek-rando-re-desc"
msgstr "Préparez vos randonnées au coeur du Parc national des Ecrins !"

msgid "Geotrek-rando-gte-desc"
msgstr "Découvrez l'essentiel du Parc national et voyagez au cœur des Alpes avec le Grand Tour des Ecrins"

msgid "Geotrek-rando-pde-desc"
msgstr "Randonnées dans le pays des écrins. Une sélection d'idées balades/randos à faire en famille ou entres amis. Découvrez le pays des écrins"

Modification (bricolage) du fichier geotrek/trekking/templates/trekking/meta.html :

{% load i18n %}{% get_current_language as LANGUAGE_CODE %}
<!-- Get portal variables (title and description)-->
{% if request.GET.rando_url == 'http://rando.paysdesecrins.com' %}
    {% trans "Geotrek-rando-pde-title" as portaltitle %}{% trans "Geotrek-rando-pde-desc" as portaldesc %}
{% elif request.GET.rando_url == 'http://www.grand-tour-ecrins.fr' %}
    {% trans "Geotrek-rando-gte-title" as portaltitle %}{% trans "Geotrek-rando-gte-desc" as portaldesc %}
{% else %}
    {% trans "Geotrek-rando-re-title" as portaltitle %}{% trans "Geotrek-rando-re-desc" as portaldesc %}
{% endif %}
<!DOCTYPE html>
<html lang="{{ LANGUAGE_CODE }}">
<head>
    <meta charset="UTF-8">
    <title>{{ portaltitle }}</title>
    <meta name="description" content="{{ portaldesc }}">
    <meta property="og:description" content="{{ portaldesc }}">
    <meta property="og:title" content="{{ portaltitle }}">
    <meta property="og:type" content="website">
    <meta property="og:url" content="{{ request.GET.rando_url }}">
    <meta property="og:image" content="{{ facebook_image }}">
    <meta property="og:image:width" content="{{ FACEBOOK_IMAGE_WIDTH }}">
    <meta property="og:image:height" content="{{ FACEBOOK_IMAGE_HEIGHT }}">
    <meta property="fb:app_id" content="{{ FACEBOOK_APP_ID }}">
</head>
<body>
<h1>{{ portaltitle }}</h1>
<p>{{ portaldesc }}</p>
{% for trek in treks %}
    <a href="{{ request.GET.rando_url }}/{{ trek.rando_url }}">{{ trek.name }}</a>
{% endfor %}
{% for content in contents %}
    <a href="{{ request.GET.rando_url }}/{{ content.rando_url }}">{{ content.name }}</a>
{% endfor %}
{% for event in events %}
    <a href="{{ request.GET.rando_url }}/{{ event.rando_url }}">{{ event.name }}</a>
{% endfor %}
</body>
</html>

Modification (bricolage) du fichier geotrek/trekking/templates/trekking/trek_meta.html :

{% load i18n %}{% get_current_language as LANGUAGE_CODE %}
<!-- Get portal title -->
{% if request.GET.rando_url == 'http://rando.paysdesecrins.com' %}
    {% trans "Geotrek-rando-pde-title" as portaltitle %}
{% elif request.GET.rando_url == 'http://www.grand-tour-ecrins.fr' %}
    {% trans "Geotrek-rando-gte-title" as portaltitle %}
{% else %}
    {% trans "Geotrek-rando-re-title" as portaltitle %}
{% endif %}
<!DOCTYPE html>
<html lang="{{ LANGUAGE_CODE }}">
<head>
    <meta charset="UTF-8">
    <title>{{ object.name }}</title>
    <meta name="description" content="{{ object.meta_description }}">
    <meta property="og:description" content="{{ object.meta_description }}">
    <meta property="og:title" content="{{ object.name }}">
    <meta property="og:type" content="article">
    <meta property="og:url" content="{{ request.GET.rando_url }}/{{ object.rando_url }}">
    {% if object.resized_pictures %}
        <meta property="og:image" content="{{ request.GET.rando_url }}{{ object.resized_pictures.0.1.url }}">
        <meta property="og:image:width" content="{{ object.resized_pictures.0.1.width }}">
        <meta property="og:image:height" content="{{ object.resized_pictures.0.1.height }}">
    {% else %}
        <meta property="og:image" content="{{ facebook_image }}">
        <meta property="og:image:width" content="{{ FACEBOOK_IMAGE_WIDTH }}">
        <meta property="og:image:height" content="{{ FACEBOOK_IMAGE_HEIGHT }}">
    {% endif %}
    <meta property="fb:app_id" content="{{ FACEBOOK_APP_ID }}">
</head>
<body>
<h1>{{ object.name }}</h1>
<a href="{{ request.GET.rando_url }}">{{ portaltitle }}</a>
</body>
</html>

A faire aussi sur les templates meta des contenus et évènements touristiques.

A voir comment améliorer cela, sans bricoler les fichiers sources.

D'autant que le problème se pose aussi pour les variables FACEBOOK_APP_ID qui doivent être différents par portail et pour les logos.

Un mécanisme similaire est à mettre en place dans les templates HTML des PDF publics pour récupérer le logo et l'URL du portail cible lors de la synchronisation qui génère les PDF.

pinaudnico commented 4 years ago

Bon bon bon, si je comprends bien il s'agit de bricolage. Pas de souci mais que dois-je faire ? bricoler ou attendre une évolution prévue de ce mécanisme ? Nous n'avons pas de dev en interne...

camillemonchicourt commented 4 years ago

Non non le "bricolage" concerne juste le cas particulier où votre Geotrek-admin alimente plusieurs portails Geotrek-rando, ce qui n'est pas votre cas. Vous pouvez avoir un usage standard de la génération des métas.

camillemonchicourt commented 3 years ago

En cours avec l'ajout de champs (title, description, facebook_id...) dans la table des PORTAILS, permettant de définir les éléments par portail directement dans la BDD.

camillemonchicourt commented 3 years ago

Amélioré dans la version 2.38.0 avec l'ajout de champs dédiées aux métadonnées dans la table des portails. Ces infos sont ainsi utilisées désormais dans les templates des fichiers de métadonnées générées pour les moteurs de recherche et les réseaux sociaux.

Cependant, du coup, je ne comprends quelles sont les infos utilisées quand on synchronise sans filtrer par portail ? Dans ce cas, on n'a plus de métadonnées contextualisées ?

gutard commented 3 years ago

Si tu ne précise pas de portail pour la synchro, ça fonctionne comme aujourd'hui en allant chercher dans les settings et le traductions. On peut imaginer aller plus loin en mettant en place un mécanisme de portail par défaut.

camillemonchicourt commented 3 years ago

OK super. Je n'avais pas compris que si il n'y a pas de portail, alors ça continue à utiliser les traductions.

Super, ça me semble idéal, pour ne pas avoir à associer toutes les randos à un portail, notamment quand on publie sur un seul Geotrek-rando

camillemonchicourt commented 3 years ago

Des champs ont été ajoutés dans la table des portails. Par contre dans l'AdminSite, quand on renseigne un portail, il demande de renseigner le champs (valeur par défaut) puis ensuite le champs pour chaque langue. Pour les autres champs multi-lingues, on ne renseigne que les valeurs pour chaque langue, mais pas la valeur par défaut, qui est renseignée automatiquement je crois. A retirer des portails cibles dans l'AdminSite je pense ?

camillemonchicourt commented 1 year ago

Depuis Geotrek-rando V3, on n'utilise plus les pages statiques de métadonnées générés pour le SEO de Geotrek-rando V2 lors du processus de synchronisation.

On pourrait donc supprimer ces champs "Titre", "Description", "ID Facebook", "Image Facebook"... de la table des portails cibles.

babastienne commented 1 year ago

Oui complètement d'accord, il faudrait retirer ces informations non utilisées.

mviadere-openig commented 1 year ago

Je confirme que ça porte à confusion.

GeotrekCE / Geotrek-admin

SEO for Geotrek-rando static pages (meta) and multi-portal #2003