Travaux généraux

Création et refonte

Réalisation site streameurs Les Goules sur WordPress

Comment donner de la visibilité aux streameurs et capitaliser sur leurs connaissances du jeu ?

• Architecture prévue pour le seo
• Accompagnement sur comment rédiger pour le web
• Vulgarisation du langage technique

Et côté technique :

• Thème enfant d'un starter thème Bootstrap
• Merchandising temporaire avec Woocommerce
• CPTs CUSTOMs
• Taxonomy CUSTOMS
• Police Luciole pour l'accesibilité
• Navigation clavier (en cours de réalisation)
• Respect des teintes de couleurs pour l'accesibilité
• Requêtes en transients pour la rapidité
• Purge automatique des transients à la mise à jour / création d'un article (cas de brouillons exclus)

Voir le site

DPA, Groupe IGS site évènementiel

Souhait du client exprimé :

• remise "au goût du jour" du code
• refonte graphique et technique
• relancer réindexation du site
• Créer une version mobile

Voir la version 1

Axe emprunté :

• bascule du code sur Bootstrap (refonte technique et création version mobile)
• passage en one-page
• dédiabolisation du scroll, aération des éléments
• réappropriation de la charte graphique

Voir la version 2

2C2E, Groupe IGS site évènementiel

Souhait du client exprimé :

• remettre de la couleur
• rendre l'image du concours plus dynamique
• réduire le scroll et rendre les informations essentielles plus percurtantes

Voir la version 1

Axe emprunté :

• exploitation des couleurs plus "vives" de la charte graphique (bleu / vert)
• amélioratoin de la lisibilité des informations clés en passant sur fond blanc
• découpage des informations et hiérarchisation
• découpage du formulaire en plusieurs étapes

Voir la version 2

Cléa, Groupe IGS site vitrine

Réalisation des deux versions du site en collaboration avec la direction artistique du Groupe IGS

Version 1

Voir la version desktop Voir la version mobile

Version 2

Changements :

• entrée par type de cible (recruteur / salarié)
• aide à la navigation
• ajout d'informations clés

Voir la version desktop Voir la version mobile

IMIS, Groupe IGS site institutionnel

Souhait de moderniser et de casser l'aspect très statique du site.

Version 1

Voir l'ancienne version

Version 2

Changements :

• mise en place d'un slider et transitions
• effets de liens, transitions survol
• mise en place de sous-navigation en parralax
• refonte du menu
• refonte de la sidebar
• lissage du CSS, harmonisation et espace avec créationsde styles manquants (call to action,...)

Voir la nouvelle version Voir une page intérieure

Refonte du site : Ancienne version Crosstalent

Version 1

Problématiques du site :

• Mauvaise adaptation mobile
• Mauvaise rapidité
• Peu moderne (statique)
• Ancienne charte graphique
• Les contenus sont modifiables dans les gabarits PHP, le WYSIWYG n'est pas exploitable

Cliquer ici

Refonte du site : Nouvelle version

Version 2

Nouvel axe :

• Nouveau thème installé
• Rapidité augmentée
• Compatibilité mobile 100%
• Format AMP lancé pour les actualités
• Mise en place de la nouvelle charte
• Workflow amélioré : routage automatique des demandes de démonstration / catalogue aux acteurs directement concernés

Cliquer ici

Refonte et création de landings

Landing page pour Solution Business Crosstalent

Cliquer ici

Landing page pour produit Base de Données Economiques et Sociales (BDES) Crosstalent

Cliquer ici

Landing page pour produit Agile HR Crosstalent

Cliquer ici

Résultats

• Meilleur taux de transformation
• Ciblage pertinent
• Budget repris en main

Atteindre la position 0

La position 0 est considéré comme le graal en terme de positionnement naturel.
Le contenu est jugé tellement pertinent sur une requête qu'il surpassera tout les autres.

Plusieurs tests ont été réalisés afin de comprendre le fonctionnement et les critères en vue d'atteindre cette position 0 tant convoitée.

Hormis la qualité irréprochable du contenu il n'y a aucun moyen d'influer et de forcer pour atteindre la position

Les formats de position 0

Il existe à ce jour 3 formats connus :

1. Le format paragraphe : un paragraphe du contenu de la page répondant à la requête de l'internaute sort directement.
2. Le format liste : si la requête possède plusieurs possibilité, les éléments de réponses sont mis sous forme de liste à puce.
3. Le format tableau : les informations sont condensés au sein d'un tableau

Pour savoir quel format viser, il est idéal de regarder les requêtes "voisines" pour voir quel format ressort habituellement.
La position 0 s'avère utilise pour les longues traines. Idéalement des questions !

• Quel / quelle
• Pourquoi
• Lequel / laquelle
• A qui
• ...

Après une refonte de contenus, l'équipe web a réussi à avoir des réultats mesurables grâce à ses positions 0.

Amélioration de la vitesse des sites

En vue de faciliter la vie de l'internaute et accessoirement du GoogleBot, un grand audit de vitesse des sites a été nécessaire pour connaître les axes d'amélioration possibles.

Les résultats ont très largement montrés que la vitesse des sites étaient insatisfaisante pour une connexion 3G et Edge.

Les améliorations se sont centrées autour des médias (images, vidéos, pdf...), et le code source du site.

L'outil GoogleSpeed a permis de réaliser un suivi hebdomadaire pendant un mois, puis nous sommes passés sur un rythme mensuel en vue des efforts réalisés.

Le poids des images

C'est le plus grand ennemi de la rapidité d'un site, les images.
Il n'est pas acquis pour la plupart des webmasters qu'une image doit être :

• en 72 DPi et non 300
• avec la bonne taille (rien ne sert d'utiliser une photo de 3200x1800 pour un format miniature)
• faire attention aux formats ! L'utilisation du PNG à foison n'est pas utile sauf pour utiliser la transparence des visuels.
• contrôler son poids, au dessus de 400 ko pour une image large (grand maximum), ce poids est difficile à charger sur un support mobile

Ce n'est pas pour rien que les strandards de l'AMP, demandent tellement d'alléger que les médias que le CSS, JS sont exclus.

La mise en cache

Le cache est un moyen de mettre les éléments d'un site en mémoire pour qu'il soit chargé encore plus vite.

Pour cela rien de plus simple, il suffit d'éditer son fichier .HTACCESS et d'autoriser la compression des médias, css statiques !

La hiérarchisation de son code

Pour optimiser le chargement de sa page il faut placer en tête de page (dans la balise header idéalement), les styles CSS et JavaScript indispensables.

Pour ceux qui sont secondaires, il ne faut pas hésiter à les placer en bas de page, cela permet au site de ne pas tout charger au début et de différer.

<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 7200 seconds"
ExpiresByType image/jpg "access plus 1 week"
ExpiresByType image/jpeg "access plus 1 week"
ExpiresByType image/png "access plus 1 week"
ExpiresByType image/gif "access plus 1 week"
ExpiresByType image/svg+xml "access plus 1 week"
AddType image/x-icon .ico
ExpiresByType image/ico "access plus 1 week"
ExpiresByType image/icon "access plus 1 week"
ExpiresByType image/x-icon "access plus 1 week"
ExpiresByType text/css "access plus 1 week"
ExpiresByType text/javascript "access plus 1 week"
ExpiresByType text/html "access plus 7200 seconds"
ExpiresByType application/xhtml+xml "access plus 7200 seconds"
ExpiresByType application/javascript "access plus 1 week"
ExpiresByType application/x-javascript "access plus 1 week"
ExpiresByType application/x-shockwave-flash "access plus 1 week"
</IfModule>

Résultat du PageSpeed Insights

Critères de notation

000 à 064 : Pauvre
065 à 084 : Peut mieux faire
085 à 100 : Bon

Création de CDN

Toujours dans l'optique de rendre un site accessible rapidement, la totalité des fichiers statiques ont été configurés sur des CDN

Qu'est ce qu'un CDN ?

Un CDN ou Content delivery network, est le fait de diviser les requêtes d'un site.

Quels sont les avantages à la création de CDN ?

Il y a pas mal de bénéfices à faire cela :

• Pour disperser le téléchargement en fonction des ressources, éviter qu’un seul serveur supporte la totalité des requêtes
• Comme les ressources sont divisées le site gagne en rapidité, les requêtes sont segmentées par type de contenu
• Stopper les choses superflues pour certains types de contenus. Le meilleur exemple restant la suppression des Cookies sur les images

Comment ça se matérialise ?

L’architecture pour un site est la suivante :

1. Site principal (architecture normal du wordpress)
   wp-content
   wp-admin
   wp-includes
   
2. Cdn1
   HTML
   Plugins
   
3. fichiers CSS
   Fichiers JS
4. Cdn3
   Médias

Comment mettre cela en place ?

La mise en place de CDN se réalise en amont de la création d'un site.

Cependant, sur l'ensemble des sites Wordpress les webmasters ont la possibilité de le mettre en place même une fois le site installé.

1. Créer un sous domaine
   cdn1.mondomaine.fr
2. Faire pointer le sous domaine sur la même IP que le domaine sur lequel le CDN est réalisé
3. Créer le dossier dans le FTP à la racine, sous le même niveau que le WWW.
   Ce qui donne l’architecture de dossier suivante :
   cdn1
   wp-admin
   wp-content
   wp-includes
   .htaccess …
   
   
4. Dans le dossier cdn1 y placer un .htaccess pour bloquer les cookies.
5. Réaliser une sauvegarde de la base de données.
6. Accéder à la base de données du site, se rendre dans la table “options”.
   Y trouver les champs :
   • upload_path
     Placer un fichier chemin.php dans le dossier CDN et renseigner le résultat dans le champ
   • upload_url_path
     Renseigner le champ avec l’url du CDN cdn1.mondomaine.fr
7. Effectuer la redirection de l’ancien fichier uploads vers le cdn1. + autoriser les cookies sur le domaine principal
8. Autoriser les cookies sur le domaine principal

Comment contrôler que tout fonctionne ?

1. Upload un fichier
2. Voir si les URLs des fichiers sont bien modifiées en Front

Si le site n’a pas supporté

Reupload l’ancienne base de données

RequestHeader unset Cookie
Header unset Set-Cookie
<Files *.php>
Deny from all
</Files>

contenu fichier .htaccess à la racine du CDN

<?php echo realpath('chemin.php'); ?>

contenu du fichier chemin.php

Options +FollowSymLinks
RewriteEngine On
RewriteBase /
RewriteRule ^wp-content/uploads/(.*) http://cdn1.monsite.fr/$1 [R=301,NC,L]

contenu du .htaccess à la racine du domaine principal
permet d'effectuer la redirection de l'ancien dossier upload vers le CDN

define('COOKIE_DOMAIN', 'www.monsite.fr');

autorisation des cookies sur le domaine principal

Sécurité

Comment sécuriser son site WordPress

Il est facile de rentrer dans n’importe quel site WordPress lorsque l’on ne met pas en place des actions basiques en vue de contrer les attaques de masse.

On sait qu’un site WordPress possède une hiérarchie de dossier, comment se connecter dessus, comment connaitre les utilisateurs du site en quelques clics.

Pour le peu que les mots de passe soit faciles comme « admin » ou « 1234 », un site est rapidement tombé.

Bloquer l’identifiant id=1

Niveau : intermédiaire
Nécessite : Accès FTP

L’identifiant id=1 est l’administrateur du site.
Pour savoir si vous êtes concernés par ce point il suffit d’ajouter ?author=1 à la fin de l’url de la page d’accueil.
http://mon-site-wordress.com/?author=1
Si l’URL se réécrit avec un identifiant pour vous connecter au back office ce n’est pas bon !
http://mon-site-wordress.com/author/ admin/
Il faut alors créer un fichier author.php qui contient un code qui le redirigera automatiquement en page d'accueil.

<?php
wp_redirect( home_url() );
exit;
?>

Glisser ce fichier dans le dossier thème et refaire le test en tuant le cache navigateur.

Eviter les mots de passe et identifiants connus

Niveau : débutant
Nécessite : Accès FTP

Les piratages sont souvent dû à des mots de passe et identifiants trop simples à deviner.
Il faut éviter à tout prix les mots de passe suivants car ils sont connus comme les 25 mots de passe les plus utilisés dans le monde (donc facilement piratable).

Outil magique qui permet de réaliser des mots de passe sécurisés : https://www.generateurdemotdepasse.com/

Toujours ajouter une majuscule un caractère spécial. Plus un mot de passe est complexe moins une personne s’acharnera à rentrer dans votre base de données :

« A titre informatif, il faut 4 825 650 839 752 91883 années pour qu’un logiciel de crack trouve un mot de passe de 51 caractères généré aléatoirement et composé de chiffres, lettres, majuscules, minuscules, avec des caractères spéciaux et symboles. »

• 123456
• 123456789
• qwerty
• 12345678
• 111111
• 1234567890
• 1234567
• password
• 123123
• 987654321
• qwertyuiop
• mynoob
• 123321
• 666666
• 18atcskd2w
• 7777777
• 1q2w3e4r
• 654321
• 555555
• 3rjs1la7qe
• google
• 1q2w3e4r5t
• 123qwe
• zxcvbnm
• 1q2w3e

Les 25 mots de passe les plus utilisés au monde

Changer l'URL de connexion pour accéder au back office

Niveau : intermédiaire
Nécessite : Accès FTP

Sachant que WordPress possède le plus grand nombre d’utilisateurs, tout le monde sait comment accéder au back-office.
Le premier niveau de sécurité consiste à ne plus rendre accessible le back office par l’adresse habituelle et de la customiser.

Plugin suggéré

SF MOVE LOGIN
Il réécrira automatiquement en fonction de vos besoins les URLs de :

• Connexion
• Déconnexion
• Mot de passe perdu
• Réinitialisation de mot de passe
• Inscription

Vous pouvez voir les lignes réécrites directement dans le fichier .htaccess.

# BEGIN SF Move Login
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^ urlpersonnalisee /?$ /wp-login.php?action=postpass [QSA,L]
RewriteRule ^ urlpersonnalisee /?$ /wp-login.php?action=logout [QSA,L]
RewriteRule ^ urlpersonnalisee /?$ /wp-login.php?action=lostpassword [QSA,L]
RewriteRule ^ urlpersonnalisee /?$ /wp-login.php?action=resetpass [QSA,L]
RewriteRule ^ urlpersonnalisee /?$ /wp-login.php?action=register [QSA,L]
RewriteRule ^urlpersonnalisee/?$ /wp-login.php [QSA,L]
</IfModule>
# END SF Move Login

Bloquer l’accès aux répertoires WordPress

Niveau : débutant
Nécessite : Accès FTP

Les fichiers dans les dossiers wp-content comme le thème de votre site ou la possibilité d’upload des fichiers se bloque grâce en éditant le fichier .htaccess à la racine du www.

Options All -Indexes

Bloquer l’accès aux robots malveillants

Niveau : expert
Nécessite : Accès FTP, Logs de serveur

Pour cela il faut recenser la totalité des robots malveillants qui remontent dans les logs du site qui polluent énormément, et créer un fichier « unwantedbots.php ».

Une fois la liste établie il faut appeler le fichier sur l’index.php du thème du site :

include 'unwantedBots.php';

Ainsi dès qu’une requête provient des robots listés, celui-ci sera éjecté automatiquement.

<?php
$httpUserAgent = null;
if(isset($_SERVER['HTTP_USER_AGENT'])) {
$httpUserAgent = $_SERVER['HTTP_USER_AGENT'];

$unwanted = array(
"robot1",
"robot2",
"robot3",
"robot4",
"robot5",
);

foreach ($unwanted AS $val) {
if (stristr($_SERVER['HTTP_USER_AGENT'], $val) != FALSE) {
header("HTTP/1.0 404 Not Found");
readfile('nomdevotrepage404.php');
die;
}
}
}

Supprimer les éléments qui identifient que votre site est sous WordPress

Niveau : intermédiaire
Nécessite : Accès FTP et Back Office

C’est-à-dire :

• Supprimer les thèmes mis par défaut à l’installation de WordPress (si aucun fichier n’est utilisé évidemment).
• Renommer votre thème
• Supprimer le commentaire et la page d’exemple fait par WordPress par défaut.
• Supprimer la meta de la version de Wordpress. Pour cela, il faut éditer le fichier functions.php dans le dossier du thème et ajouter une ligne de code.
  Cette action est très importante car elle permet de masquer la version, donc les failles de la version dont vous disposez.

Pourquoi ?

Tous ses petits éléments ouvrent la porte aux « Footprints ».
Très utilisés en référencement, ce sont des outils utilisés par les référenceurs qui trackent ce genre d’éléments pour poser des liens de façon automatique et parfois bourrine. Si le robot détecte que le site possède un élément clé de Wordpress comme ceux listés au-dessus, il postera des commentaires automatiquement en chaine chez vous !

remove_action('wp_head', 'wp_generator');

Fonction WordPress qui bloque la génération de la méta version

Faire des sauvegardes

Niveau : expert
Nécessite : Accès SSH, Accès base de données

L’idéal est de réaliser des sauvegardes à chaque mise à jour WordPress (en vue d’éviter les éventuelles surprises de conflits), et par défaut de réaliser une sauvegarde mensuelle ou hebdomadaire en fonction des besoins.

La méthode la plus rapide est soit de mettre en place un script d’automatisation ou passer par des commandes SSH via Putty.

Se connecter via Putty et lancer les commandes suivantes.

Une fois les dossiers zippés il faut faire de même pour la base de données, une simple extraction suffira via l’option « export ».

zip -r date-nomdevotredossier.zip www

Traduction : la commande fera un dossier zip de votre www avec le nom date-nomdevotredossier.

Il est aussi possible de réaliser une sauvegarde en SSH, comme les fichiers en FTP

mysqldump --single-transaction --create-options -ecqQ -h nomdelabase -u nomdelabase -p nomdelabase > nomdufichiersouhaité.sql