search

PnX-SI / GeoNature-atlas

Application WEB permettant de générer des fiches espèces publiques à partir d'observations faune/flore
GNU General Public License v3.0
44 stars 46 forks source link

Ajouter des balises "open graph" pour les partages sur réseaux sociaux #184

Open sig-pnrnm opened 5 years ago

sig-pnrnm commented 5 years ago

Je ne connaissais pas ces balises il y a 2 minutes, mais on vient de me signaler que les liens de notre Atlas partagés sur Facebook ne disposaient pas des bonnes images de partages. Une investigation rapide m'a fait comprendre que Facebook utilise les balises "open graph" pour afficher les vignettes/titres des liens partagés.

Plus d'infos ici : http://ogp.me/

Je vais le faire pour mon instance, mais je me dis que ça pourrait être généralisé.

lpofredc commented 5 years ago

Oui, ça rejoint un échange récent sur la liste geonature-info sur le référencement. Il y a sans doute encore un travail à mener sur le "réferencement naturel" avec l'utilisation des balises meta dans le headerdes pages (description puis og: pour facebook, twitter: pour twitter par exemple).

https://css-ig.net/articles/optimiser-html-referencement

camillemonchicourt commented 5 years ago

Oui à ajouter.

sig-pnrnm commented 5 years ago

Pas encore testé, mais voici ce que je vais mettre dans le <head> des template de nos fiches espèces :

{% if firstPhoto != None %} 
<!-- Si il y a une photo principale -->
<meta property="og:image" content="{{firstPhoto.path}}" />
{% else %} 
<!-- Si pas de photo, on utilise l'image de la page d'accueil -->
<meta property="og:image" content="{{url_for('static', filename='custom/images/accueil-intro.jpg') }}" />
{% endif %}

Car le problème se posait surtout sur les fiches espèces dont il n'y avait pas d'image principale.

Si vous voyez des améliorations, n'hésitez pas à les suggérer !

sig-pnrnm commented 5 years ago

J'ai dû me planter dans l'écriture de cette adaptation, car le content de ma propriété og:image n'est pas converti en URL :

og_image (pas cliquable, quand j'affiche le code source de la page, contrairement aux autres URL)

Je dois peut-être ajouter un {{ url_for() }}, mais je ne suis pas familier avec cette syntaxe : quelqu'un pour m'aider ?

sig-pnrnm commented 5 years ago

bon, finalement, ça marche quand même avec cette syntaxe !

lpofredc commented 4 years ago

Je vois pour intégrer ça dans les templates dans le cadre de la MaJ vers bootstrap4 (cf. #230). Quelles propositions pour les fiches sans illustrations (espèces sans photos et zonages (communes & autres)? l'image accueil-intro.jpg? une image générique?

camillemonchicourt commented 4 years ago

OK super, jette un œil à la doc officielle car ça a potentiellement bougé depuis. Je pense pas qu'il faille utiliser l'image accueil-intro.jpg car elle peut représenter une espèce qui n'a rien à voir avec l'espèce de la fiche, et u coup porter à confusion, voir penser à une erreur. Je mettrai pas d'image, ou sinon comme image générique, le logo de la structure, ou le logo de l'appli, ou sinon un logo GeoNature