Manuel de rédaction du site CRB

• Est-ce que cet objet connecté interrogé va pouvoir deviner le contenu communicatif de mon article ?
• Quel est le but communicatif de chaque article contenu ? est-il oralisable par les objets connectés ?
• Qu’est ce qui est vraiment la préoccupation des visiteurs souhaités ?

FORUM INTERNE : Poser une question, répondre, lire les réponses, participer, …

Accéder au forum interne en cliquant sur la case

AMELIORER LA VALEUR DES TEXTES DE VOS ARTICLES, titres, chapo, sous-titres, Listes,

• Pour vos articles les plus lus, faites une relecture pour les rendre plus agréables à lire.
• Pour vos nouveaux articles, pensez à la lisibilité en ajoutant, images, vidéos… ( Faites des optimisations au minimum sur les images & vidéo avec un titre donnant envie, un descriptif oralisable pertinent)
  Un article utile à lire : https://naturedigitale.fr/optimisation-seo/
  

Un titre d’article percutant qui donne envie de lire le contenu.

Augmentez la taille de vos articles. Ce que vous devez faire est simple

Le descriptif résumé de l’article doit donner envie de cliquer pour ouvrir l’article.

Les mots-clés dans votre article : chaque page optimisée pour une et une seule expression

Créer des sous-titres – la titraille – de votre article

Le chapô d’un article

Créer une liste dans le contenu d’un article

Liste avec des points : début de ligne avec -* et -**

• Première ligne de la liste
• deuxième ligne de la liste
  • première sous-deuxième ligne
  • deuxième sous-deuxième ligne
• troisième ligne de la liste)]

• Première ligne de la liste
• deuxième ligne de la liste
  • première sous-deuxième ligne
  • deuxième sous-deuxième ligne
• troisième ligne de la liste
• quatrième ligne de la liste
• cinquième ligne de la liste

Liste numérotée : début de ligne avec -# et -##

1. deuxième ligne de la liste
   1. première sous-deuxième ligne
   2. deuxième sous-deuxième ligne
2. troisième ligne de la liste
3. quatrième ligne de la liste
4. cinquième ligne de la liste )]

1. Première ligne de la liste
2. deuxième ligne de la liste
   1. première sous-deuxième ligne
   2. deuxième sous-deuxième ligne
3. troisième ligne de la liste
4. quatrième ligne de la liste
5. cinquième ligne de la liste

Créer un tableau

Exemple de tableau avec fusion de cellules

Tableau avec fusion

Colonne 1	Colonne 2	Colonne 3
ligne 1	Cellule fusionnée avec la suivante
ligne 2	Celulle fusionnée avec celle du dessous	normale
ligne 2		normale aussi	Exemple de tableau avec fusion de cellules		Tableau avec fusion	Ce tableau sert d’exemple de mise en forme spip
Colonne 1	Colonne 2	Colonne 3
ligne 1	Cellule fusionnée avec la suivante
ligne 2	Celulle fusionnée avec celle du dessous	normale
ligne 2		normale aussi

Principe : |<| fusionne avec la cellule de gauche

Éléments dangereux

Il y a deux éléments dangereux dans SPIP :

• le retour à la ligne simple : _ (souligné espace) en début de ligne.
• Usage toléré pour donner adresse et numéro de téléphone/fax.
• Usage toléré : dans une liste à puce pour passer à la ligne sans passer à une nouvelle puce (comme ici).
  
  Pour mettre de l’espace entre deux éléments :

saut de ligne
  
  [*Usage interdit :*] pour mettre plus d’espace vertical entre deux éléments de la page.
• les fausses listes à puce : – (moins espace) en début de ligne L’effet visuel peut être intéressant, mais il n’a pas de sens. – Ceci est une fausse liste à puce
• le HTML pur : il est possible dans SPIP de mettre du code HTML. Le faire est fortement déconseillé : parce que c’est la porte ouverte à toutes les dérives, ne serait-ce que celle de sortir de la charte graphique du site, ou celle de produire un code HTML non valide (voire non interprétable ailleurs que sur Internet Explorer Parce que c’est partir du postulat que votre site ne sera visité qu’en tant que site web ; il pourrait très bien être un jour disponible sous forme de fichier PDF…
  
  

---

La CHECKLIST 2019 : 8 points pour optimiser le référencement d’un article sur internet.

Ci-dessous, une checklist des différentes manipulations à effectuer pour optimiser le référencement d’une page-article sur internet. Si le SEO et le AEO (optimisation pour les moteurs de réponses) vous intéressent voici quelque infos concernant la stratégie AEO pour chaque page-article et un site web CHECKLIST SEO 2019

1. Le[** Titre*] de mon site et celui [**de chaque page comprend*] : ☐ Mes mots-clés ☐ Le nom de mon association ( dans le « header » et le footer ) ☐ Ma localisation ☐ Moins de 60 caractères
2. La Description de mon site et celle de chaque page comprend : ☐ Mes mots-clés ☐ Le nom de mon association ( dans le « header » et/ou le footer ☐ Moins de 155 caractères
3. MES IMAGES ☐ Mes images sont optimisées pour le Web avec toutes un « Alt Text » (texte alternatif lorsque’elles ne s’affichent pas) ☐ Mes images sont « légères » pour se charger vite sur smartphones & par wifi. ☐ Mes images ont un titre (avec mots clefs adaptés) ☐ Mes images ont une localisation (facultatif) ☐ Mes images ont toutes une description (avec mots clefs adaptés)
[**4. MES CONTENUS*] ☐ Mes textes sont optimisés pour le Web ( Titre – chapeau – descriptif – sous-titres – contenu ..) ☐ J’utilise des mots-clés ☐ J’utilise des balises H1 – H6 dans mes textes pour les sous-titres
5. Optimisation générale ☐ J’ai validé la case « Permettre aux moteurs de recherche de trouver mon site » ☐ [**mon site est « responsive » adapté aux mobiles, tablettes, adaptables selon les écrans*] ☐ J’ai connecté mon site à Google Analytics ☐ Mon site a été soumis à Bing Webmaster Tool ☐ Mon site a été soumis à Google Webmaster tool
6. Site Structure & Design ☐ La structure de mon site est claire ☐ [**La navigation sur mon site est intuitive*] ☐ Mon design est compréhensible ☐ Mon H1 est défini ☐ [**Je n’ai qu’un seul H1 pour chaque page*]
7. Réseaux sociaux & annuaires ☐ Mon site renvoie vers mes comptes sur les réseaux sociaux ☐ [**Mes pages sur les réseaux sociaux présentent un lien vers mon site et ses articles*] ☐ J’ai vérifié que je suis présent sur les réseaux majeurs ☐ [**Je suis mentionné dans les annuaires professionnels*]
7. SEO – Référencement local (facultatif selon objectif du site) ☐ J’ai créé une page Google+ business ☐ J’ai inscrit mon site sur Google+ Places ☐ [**J’ai intégré mon site sur les annuaires en ligne pertinents*] ☐ J’ai vérifié que toutes mes coordonnées de contact apparaissent ☐ je suis mentionné dans les annuaires locaux & sites mairies, blogs locaux
8. LIENS INTERNES & EXTERNES ☐ J’utilise des liens ancrés dans mes pages ☐ **J’utilise des liens internes et [suggère la lecture d’autres pages avec le modèle « choix_article » lire *] ☐ Je renvoie vers des sites externes pertinents

AJOUTER UNE VIDEO à un article

Si votre vidéo est hébergée sur DailyMotion, YouTube ou Viméo, dans un nouvel onglet de votre navigateur, aller sur la page de visionnage de la vidéo, et copier l’url. Dans la page d’édition de votre article cliquer sur « Ajouter une vidéo » et coller l’url. Insérer alors dans la zone texte de l’article Depuis la page d’un article ou depuis la page d’édition d’article dans la colonne de gauche, un champ de saisie permet de copier/coller le lien Youtube, Viméo ou DailyMotion , … , vers la page de votre vidéo. Aucun besoin d’extraire un identifiant ou de copier un code quelconque, l’adresse complète de la vidéo est suffisante :

Ajouter une vidéo

Les vidéos sont alors disponibles comme n’importe quel document depuis la page article ou depuis la Médiathèque de SPIP qui permet au plugin Vidéo(s) d’insérer l’auteur et la durée du film). Le fonctionnement est le fonctionnement classique des modèles : avec YY (:p) représentant le numéro de document de la vidéo. Les options peuvent se rajouter à la suite : Ce nouveau modèle rajoute la lecture des vidéos importées depuis les plateformes ainsi que la lecture HTML5 des contenus de type MP4/H264, WebM, Ogg. Dans tous les autres cas (autres extensions), c’est le fonctionnement classique qui est respecté.

---

SONS AUDIO

Incorporer un lecteur audio adaptatif mixcloud avec votre podcast dans un article

Exemple réalisé avec les copies-écrans d’un article de l’émission « Crossroads » animée par Bobby Hiebler

1. Au départ vous disposez de l’adresse de votre podcast

Rendez-vous sur l’adresse du podcast de votre émission déposé chez Mixcloud (ou tout autre système). Exemple avec le podcast de l’émission « Crossroads » du 22/10/18 sur RGO, animée par Bobby Hiebler dont l’adresse est : https://www.mixcloud.com/RadioRGO/crossroads-221018/

2. Cliquer sur [* »share »*]

3. puis cliquer sur [** « embed player »*]

Et là vous avez le choix entre trois dimensions de player audio, et deux couleurs de fond ( blanc ou noir ).

• un mini widget
• un [**classic widget *] (dimension préférable pour inclure dans un article)
• un picture widget qui occupe beaucoup de surface

Quand un seul lecteur audio est utile dans un article, le « classic widget » est préférable. Il occupera toute la largeur de l’article (100%) sur une hauteur de 120 pixels;

C’est à dire que la largeur du player s’adaptera selon les largeurs d’écrans, de l’écran du smartphone à celui de bureau. Son code « iframe » à copier et coller dans votre article ressemble à ceci :

4. [** Copier le code « iframe » du player et le coller dans le contenu texte de votre article *]

5. Dans un article dont le contenu raconte une émission de radio le player audio se place [*uniquement*] dans le contenu de l’article parmi les textes.

Coller le code uniquement dans le texte de l’article est important : ni dans le chapeau, ni dans le descriptif, ni dans le titre de l’article. [(Le chapô d’un article, est un texte court, précédant le corps d’un article de presse et dont le but est d’en encourager la lecture, par exemple en résumant le propos qui va être développé. Ses mots sont très utiles au référencement de l’article par les moteurs de recherches. Placé communément au-dessus du corps de l’article, sa largeur) « coiffe » généralement les différentes colonnes utilisées pour le contenu de l’article (d’où le terme « chapeau »). Pour les journalistes, le chapeau constitue, avec la titraille et une éventuelle illustration, les éléments essentiels de l’accroche, censée donner envie au lecteur de lire l’article. Comment rédiger le chapô de ses articles )]

6. Présenter une liste dans le contenu de l’article

Sélectionner les lignes de texte à mettre en liste et cliquer sur le bouton « [*Mettre en Liste*]
Spip va automatiquement ajouter les deux caractères « tiret & étoile » [** -* *] devant chaque ligne de la liste.
L’article affichera un décalage du texte et des points carrés devant chaque ligne

7. Créer les sous-titres – la titraille – de votre article

Voici l’article ainsi mis en page pour le web

---

Comment ajouter un flux audio déjà existant sur Internet avec un lecteur flash

7 étapes pour ajouter un lecteur avec le fichier audio existant sur Internet : 1) Récupérez l’adresse internet du fichier audio Préférez une adresse sécurisée en « http[*s*]:// » pour que votre article soit mieux apprécié et référencé par les moteurs de recherche. Spip accepte la plupart des formats de fichiers audio ( .mp3, .oga, .ogg, .f4a, .m4a, .m4p, .ram, …).


2) Ajouter un document ou une image par la gauche de l’écran dans le rectangle prévu. Cliquez sur « [**Internet*] » et dans la zone adresse qui s’ouvre avec comme contenu [** »https:// »*], entrez l’adresse internet du fichier audio.

3)Validez en cliquant sur [** »Choisir »*]

4) Un nouveau rectangle est apparu plus bas, toujours sur la gauche avec votre document audio. Il vous permet d’associer votre fichier .mp3 à votre article comme pour une image. [**Donnez à ce document audio : un titre, une description et un crédit avec le bouton « modifier »..*]
5) Dans le texte de l’article, cliquez à l’endroit où vous voulez incorporer le lecteur. Dans un article dont le contenu raconte une émission de radio le player audio se place [*uniquement*] dans le contenu de l’article parmi les textes. Coller le code uniquement dans le texte de l’article est important : [**ni dans le chapeau, ni dans le descriptif, ni dans le titre de l’article.*]

6) Dans ce nouveau rectangle, sous « Inclusion de la vignette », double cliquez (par exemple) sur Cela va placer un lecteur flash dans le corps de votre article à l’endroit souhaité . pour permettre au visiteur de lancer la lecture du son.

7) Selon vos préférences, dans votre texte remplacez <[*doc*]xxxx|center> par <[**audio*]xxxx|center> live19-hq.mp3live19-hq.mp3affiche à gauche du texte une image.mp3 cliquable pour écouter

affiche un lecteur flash pour écouter le flux audio aligné à droite dans l’article. Ici le flux d’une radio d’un pays balte qui chante
Exemple :

Une play liste

A compléter …

---

PUB INTERNE D’ARTICLES : AJOUTER 1, 2,3, … BLOCS RELIANT VERS D’AUTRES ARTICLES

[([* Inclusion modèle « choix_article » exemples à voir dans cette page *] )] Pour ajouter dans un article ou une page rubrique, à l’endroit souhaité, un cadre responsive cliquable ou plusieurs, affichant chacun logo + titre + descriptif et fond coloré, concernant tel ou tel N° d’article. Les couleurs sont adaptables ainsi que le nombre de colonnes (1, 2, 3). ►inclusion en une colonne responsive Incorporer dans l’article comme pour un document image de spip le code suivant en indiquant le ou les numéros identifiant le ou les articles séparés par une barre  » | « .

►inclusion 2 colonnes et deux couleurs de fond ►inclusion simple en trois colonnes
►inclusion simple en trois colonnes de 4 articles

---

IMAGES

1. Quelle taille doit faire ma photo pour ne pas pénaliser le référencement de mon article ?

Il n’y a pas de « bonne » taille pour afficher une image dans un article. En tout cas, inutile d’envoyer une image de 3000 pixels de large, aucun écran ne pourra l’afficher dans son intégralité ! Sauf si le document est destiné à l’impression. Une image trop grosse va pénaliser le référencement de l’article qui ne sera pas « google friendly » pour être lu rapidement sur les smartphones et tablettes. Déréférencé par les moteurs de recherches, l’article ne sera pas trouvé sur la première page des résultats de recherches malgré sa qualité et l’investissement en temps pour l’écrire Concrètement, sur un écran de smartphone, c’est très désagréable, quand une image ne s’affiche pas car trop grosse et consomme les « forfaits données » de l’abonnement mobile. Les visiteurs risquent de ne pas revenir sur le site or +50% des consultations d’internet se font par des mobinautes sur leurs smartphones et leurs tablettes.

Les plus grosses images du site CRB

Si l’image doit être intégrée au texte d’un article, tout dépend de son contenu :

• Si c’est un portrait, une hauteur de 200 px peut suffire sinon gare aux rides ;

• Si l’image est prévue pour s’afficher dans le porte-folio ou en diaporama d’un article, il y a quelques années il ne fallait pas dépasser 1024 pixels de large et 600 pixels de haut.

• Si c’est un paysage, à afficher en pleine page, on peut aller jusqu’à 1920 pixels de large, voire [*2560 pixels maximum de large*].

En octobre 2018, les nouvelles normes de dimensions des écrans de smartphones sont de 5 et 5,5 pouces de diagonale et souvent une résolution de 1024 pixels de large.

Résolution des écrans : cliquer 2 fois !

Un écran de bureau de 19 pouces au ratio 4/3 affiche 1280 px sur 1024 pixels correspondant à une diagonale d’environ 48,26 cm. La résolution des écrans fut souvent de 72 ppp (pixels par pouce en français) ou 72 ppi (pixels per inch en anglais) le « premier » standard de résolution défini pour les écrans dit de « PC ». Avec les écrans « rétina » celle-ci tend à augmenter. Pus de précisions : http://www.imedias.pro/cours-en-ligne/informatique/definition-resolution-taille-ecran/

Résolution des écrans

Attention, le poids max à ne pas dépasser est de @poids_max@Mo sans quoi le téléchargement sera refusé. Cela ne sert à rien d’avoir une image de 2,2 Mo si elle ne s’affiche que sur 400 octets de large dans une grande page.

2. Quelle taille doit faire l’image du logo de mon article

Pour le logo d’un article, qui va s’afficher sur 200 voire 300 pixels de large, c’est inutile de télécharger une image d’une grande dimension, et cela freinera le chargement de la page. Ci dessus l’image chargée fait 2070 x 2994 pixels. C’est une image excellente pour s’afficher en pleine page, dont la largeur dépasse probablement celle de votre écran d’ordinateur. Dans l’article elle sera affichée ultra diminuée sur 200 x 243 pixels seulement et on ne distinguera pas les détails. Sur un smartphone elle ne s’affichera probablement pas.

Image JPEG – 300 × 300 pixels – 10.6 ko

Les meilleurs logos d’articles sont faits pour attirer l’œil à partir d’une petite surface. Les meilleures images pour attirer les yeux des visiteurs, sont celles de visages avec d’autres yeux !

3. Comment diminuer le poids des images sans altérer l’affichage sur écrans.

Ici s’affichent différentes images de Christophe Marquilly, compressées au format « jpg » et pour différents volumes affichés. [**Cliquer une deuxième fois sur l’image pour l’afficher en pleine largeur.*]

Largeur en pixels et poids comparés d’images de 72 pixels par pouces
Cliquer une première fois sur les [**vignettes de 280 pixels*]

4032 x 3024 [*2200 ko*]	JPEG 1920×1440 pixels 252ko
JPEG 1440×1080 pixels 121ko	JPEG 1024×768 pixels [**70 ko*]
	Christophe Marquilly dans USE THE BLUES	largeur=300" />
JPEG 1280×960 pixels 90 ko	JPEG 1920×1440 pixels 205 ko

L'image de départ en 4032 pixels de large x 3024 pixels et 2200 ko s'affiche dans l'article 4042 du site ici . Elle est 31 fois plus lourde que l'image 1024x768 pixels. Dans cet article l'espace blanc contient l'embed d'une vidéo facebook qui ne s'affiche pas toujours selon les navigateurs. L'image ci-dessous

Christophe Marquilly dans USE THE BLUES

mesure 800 × 793 pixels pour 59 ko

Christophe Marquilly dans USE THE BLUES

A partir de la même image, celle qui fait 1920 pixels de large (largeur d'un écran de bureau) ne pèse seulement que 150 ko et se chargera bien plus vite. Celle qui fait 1024 pixels de large (écran de smartphone 5 pouces) ne pèse seulement que 70 ko

3. XNVIEW très bon logiciel gratuit multiplateformes pour gérer vos images

XNVIEW-MP est un très bon logiciel gratuit multiplateformes ( windows, apple, linux ) pour renommer les images par lots, gérer dimension et poids des images, etc ... : https://www.xnview.org/fr/xnviewmp/

4. Comment remplir facilement un portfolio ?

Il est possible d’envoyer en un clic plusieurs photos dans un article :

• Copier les photos choisies dans un dossier de votre disque dur
• Les redimensionner à la bonne taille avec
• Les insérer dans un fichier zip
• Joindre ce fichier zip à l’article. A la fin du téléchargement, il vous est demandé ce que vous voulez faire du fichier, vous pouvez alors déposer par exemple toutes les photos dans le port-folio.

Comment remplir facilement un portfolio ? Il est possible d’envoyer en un clic plusieurs photos dans un article : Copier les photos choisies dans un dossier de votre disque dur Les redimensionner à la bonne taille Les insérer dans un fichier zip Joindre ce fichier zip à l’article. A la fin du téléchargement, il vous est demandé ce que vous voulez faire du fichier, vous pouvez alors déposer par exemple toutes les photos dans le port-folio.

5. ou ?

On utilise majoritairement le tag pour insérer une image dans un texte d’article. Mais si on veut aussi afficher le titre ou la description sous l’image, il faut utiliser .

Incorporer les images dans le site CRB

Raccourci	Signification	Illustration	Portfolio
	image	Image	Vignette + Lien
	document	Image + Titre	Vignette + Titre + Lien
	embed (« embarqué »)	Image + Titre	Image + Titre

1. Quand les images sont incorporées dans les articles avec

Emission spéciale avec Christophe Marquilly

et déposées dans le portfolio, elles apparaissent en vignettes plus petites au centre comme ci-dessous, avec titre et descriptif de l'image.

Emission spéciale avec Christophe Marquilly

Emission spéciale avec Christophe Marquilly

Avec

Emission spéciale avec Christophe Marquilly

et déposées dans le portfolio, elles apparaissent en vignettes plus petites de largeur 100 pixels à gauche du texte comme ci-contre
C'est en cliquant dessus plusieurs fois qu'on les agrandit à leur dimension téléchargée. Quand les dimensions de l'image dépassent les largeurs de l'écran avec un trop gros volume en mégaoctets ce n'est vraiment pas recommandé. L'article va etre étudié/scanné par google, qui lui attribuera une note très négative pour sa trés longue vitesse de chargement. L'image ne sera pas "google friendly" pour etre lue sur les smartphones et tablettes. Déposer une image dans le portfolio, c'est bien pour faire un diaporama, mais ce n'est plus adapté aujourd'hui avec les smartphones, et les modes esthétiques des images en pleine page.
Incorporer les images avec un seul code

Emission spéciale avec Christophe Marquilly

est bien meilleur ! Avec la future mise à jour de spip et la gestion "adaptative" des largeurs images selon les écrans, il sera très simple d'avoir des images "responsives" avec le seul code"imgXXX" https://www.paris-beyrouth.org/Plugin-SPIP-Insertion-avancee-d-images Ce serait mieux si elle s'affichait au moins sur toute la largeur de la colonne de l'article
Cette image Illustration incorporée avec

Christophe Marquilly dans USE THE BLUES

pas de titre ni descriptif visibles s'affiche sur la largeur de la colonne. C'est une image JPEG de 1024 × 768 pixels pour seulement 69,7 ko

Christophe Marquilly dans USE THE BLUES

Il est donc préférable de ne pas déposer les images dans le portfolio quand on préfère qu'elle s'affiche sur toute la largeur sans obliger le visiteur à cliquer une fois de plus pour l'agrandir. Exemple dans l'article : https://www.radiosblues.com/USE-THE-BLUES-du-28-novembre-2016 Raccourci Signification Illustration Portfolio image Image Vignette + Lien document Image + Titre Vignette + Titre + Lien embed (« embarqué ») Image + Titre Image + Titre

[*6. Important*] : renseigner le titre et le descriptif d'une image !

Google et les moteurs de recherche priorisent images et vidéos et référencent majoritairement celles-ci, avec les liens amenant aux articles qu'elles illustrent. C'est important que le titre de l'image et son descriptif soient renseignés, car c'est à partir de ce texte, et des "mots" de ce texte que les moteurs de recherche vont référencer votre image, et ainsi suggérer à des internautes de cliquer sur son lien pour trouver votre article. Si les termes saisis par les internautes sont dans le titre et le descriptif de votre image, ils augmentent les chances de positionner votre article dans les premières pages des moteurs de recherche. Exemples d'image incorporée avec

Titre de l'image

Titre de l'image

D'ou l'importance de remplir "titre et descriptif" qui s'afficheront comme "texte alternatif" (alt) à la place de l'image, et ainsi pourront etre lus par les personnes malvoyantes.

Autres questions ? ( à compléter)

Christophe Marquilly dans USE THE BLUES

Emission spéciale avec Christophe Marquilly

Christophe Marquilly dans USE THE BLUES

Titre de l’image « Modifier une image dans le site SPIP »

Les plus grosses images du site CRB

Résolution des écrans

Résolution des écrans : cliquer 2 fois !

Ajouter une vidéo

Image JPEG – 300 × 300 pixels – 10.6 ko

Accéder au forum interne en cliquant sur la case « Forum interne » située juste à coté de la case « rechercher »

Documents joints

Liste des contacts des émissions du Collectif des Radios Blues (CRB)