Travaux

Réalisations webmaster

Référencement naturel

Micro données

Micro données veille

L'amélioration du référencement naturel des sites sur lesquels j'interviens est une priorité.

Afin d'aider les sites il a été décidé de mettre en place plusieurs éléments en micro-data (micro-données).
Un travail de veille a été nécessaire pour estimer quels schémas de données utiliser, quelles sont les données à notre disposition, et quels sont les freins techniques par rapport au CMS utilisé (WordPress).

Micro données HENTRY

Cela a passé tout d'abord par une résolution des erreurs de type "HENTRY".

Les erreurs de type HENTRY

Sur les sites WordPress des erreurs remontent en masse en Google Search Console :
Champ manquant : author
Champ manquant : updated
Champ manquant : title

D'où viennent ces erreurs?

Elles résultent d'une sémantique HTML utilisé par les CMS.

Comment corriger les erreurs HENTRY
  • Si le titre est manquant : il faut ajouter la classe "entry-title" sur la totalité des balises h1 des gabarits .php
  • Si le contenu est manquant : il faut ajouter la classe "entry-content" sur la totalité des balises articles des gabarits .php
  • Si l'auteur, date de publication et date de mise à jour est manquante : Créer un fichier "entry-meta.php"
Supprimer les class HENTRY

Si vous préférez casser d'entrée les erreurs car vous n'avez pas le besoin de faire afficher la date de publication dans les résultats de recherche, il suffit de coller une fonction dans le fichier Funtions.php dans le dossier theme.

<div class="entry-meta">
<time class="updated" datetime="<?= get_post_time( 'c', true ); ?>"><?= get_the_date(); ?></time>
<p>Publié par : <span class="vcard author post-author"><span class="fn"><?php the_author(); ?></span></span>
</p>
</div>

Ensuite il suffit de poser ce fichier dans le dossier thème de votre site WordPress, et d'appeler ce fichier en posant le code suivant avant la fin de votre "entry-content" :
</?php get_template_part(‘entry-meta' ); ?>

Voici la courbe d'erreurs inversée une fois tout les éléments en place :

graphique résolution hentry

Sur l'exemple le site est passé de plus de 1 600 erreurs à 21.

function themeslug_remove_hentry( $classes ) {
if ( is_singular() || is_front_page() || is_home() || is_archive() || is_page() || is_post() ) {
$classes = array_diff( $classes, array( 'hentry' ) );
}
return $classes;
}
add_filter( 'post_class','themeslug_remove_hentry' );

Cette fonction supprimera la totalité des données de type HENTRY, le contenu le titre les dates de publications et mise à jour en plus de l'auteur ne remonteront plus.

Micro données Organization

A quoi ça sert?

A nourrir les informations dont Google dispose et pour profiter de résultats de recherche améliorés tel que la barre de recherche directement accessible en résultat de recherche. Et bien plus encore.

Pour cela l'idéal est de réaliser un script en JSON-LD.
Il faut déclarer le schéma utilisé, soit "Organization".

Plus on a d'informations plus il est possible de rendre les résultats de recherche riches.
Le strict minimum est de savoir :

  • L'adresse de la société
  • Nom de la société
  • Réseaux sociaux de la société
  • Logo de la société
  • Adresse de la société
  • Moyens de contact de l'entreprise (téléphone, mail)
Pour aller plus loin
  • Nom du fondateur de l'entreprise
  • Date de naissance du fondateur

Comment tester si mon script est correct ?

Il suffit de se rendre sur l'outils de test des micro données mis à disposition par Google : ici.

<script type="application/ld+json"?>
{
"@context": "http://schema.org/",
"@type": "Organization",
"url":"url de l'index du site",
"name": "Nom de la société",
"sameAs":[
"https:/fr-fr.facebook.com/nom_compte",
"https:/www.instagram.com/nom_compte",
"https:/www.linkedin.com/nom_compte",
"https:/plus.google.com/nom_compte",
"https:/www.youtube.com/nom_compte",
"https:/twitter.com/nom_compte"
],
"logo":"url du logo",
"founder":
{
"@type": "Person",
"name": "Prénom NOM",
"birthDate": "AAAA-MM-JJ"
},

"contactPoint" :
{ "@type" : "ContactPoint",
"telephone" : "+33X-XX-XX-XX-XX",
"email": "contact@magali-colas.fr",
"contactType" : "customer service"
},
"address": {
"@type": "PostalAddress",
"addressLocality": "Paris",
"addressRegion": "Ile de France",
"addressCountry": "FR",
"postalCode": "75008",
"streetAddress": "55 Rue du Faubourg Saint-Honoré"
}
}
</script?>

Micro données LocalBusiness

Le schéma consiste à renseigner les horaires d'ouverture et de fermeture de l'entreprise.

Il faut donc connaître les horaires d'ouverture hebdomadaires, plus les moyens de contact comme le téléphone

Comment tester si mon script est correct ?

Il suffit de se rendre sur l'outils de test des micro données mis à disposition par Google : ici.

<script type="application/ld+json"?>
{ "@context" : "http://schema.org",
"@type" : "LocalBusiness",
"image": "url du logo",
"@id": "url de l'index du site",
"address": {
"@type": "PostalAddress",
"streetAddress": "55 Rue du Faubourg Saint-Honoré",
"addressLocality": "Paris",
"postalCode": "75008",
"addressCountry": "FR"},
"url": "url de l'index du site",
"telephone": "+33XXXXXXXXX",
"openingHoursSpecification":
[{ "@type": "OpeningHoursSpecification", "dayOfWeek": "Monday",
"opens": "09:00", "closes": "17:00"},
{ "@type": "OpeningHoursSpecification", "dayOfWeek": "Tuesday",
"opens": "09:00", "closes": "17:00"},
{ "@type": "OpeningHoursSpecification", "dayOfWeek": "Wednesday",
"opens": "09:00", "closes": "17:00"},
{ "@type": "OpeningHoursSpecification", "dayOfWeek": "Thursday",
"opens": "09:00", "closes": "17:00"},
{ "@type": "OpeningHoursSpecification", "dayOfWeek": "Friday",
"opens": "09:00", "closes": "17:00"}],
"name": "Nom de l'entreprise"}
</script?>

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



Mobile Friendly

L'augmentation des consultations mobile nous force à penser les sites de façon à ce que les informations indispensables soient comprises sur ce support parfois oublié.

La totalité des actions principales doit être facilement réalisables avec le pouce. Les étapes de navigation et espaces entre les éléments doivent être repensés.

Plusieurs questions se sont posées à travers cette mission :

  • le contenu est-il déceptif par rapport à la requête de l'internaute
  • les sites comportent-ils des éléments bloquants ? (iframe non responsives,...)
  • les informations sont-elles lisibles avant la ligne de flottaison ?
  • la navigation est-elle simplifiée pour une cible mobile ?
  • le contenu est-il accessible par une device comportant une connexion 3G ou Edge?

De plus la volonté de Google a annoncé et déployé un algorithme afin de mieux afficher les sites adaptés mobile.

Message de Google qui apparait sur les résultats de recherche considérés incompatibles mobile.



Les résultats de recherche bougent énormément depuis la mise en place des algorithmes mobiles.
Source:Serpomètre

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

Renommer le préfixe des tables WordPress en base de données

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

Chaque table de la base de données dispose d’un préfixe, par défaut celui est « wp_ ».
Si vous avez un doute sur votre préfixe il faut vous rendre dans le fichier wp-config.php (qui est à la racine) :
$table_prefix = 'wp_';

Il faut donc modifier le préfixe, et le reporter aussi en base de données (car modifier en dur dans ce fichier ne réécrit pas la base).
Connectez-vous sur la base de données php : https://phpmyadmin.ovh.net/
Sélectionner toutes les tables et sélectionner « Remplacer le préfixe de table »

Renseigner celui que vous avez mis au préalable dans le wp-config et le lien est à nouveau correct !

Remplacer le préfixe de table existant par celui souhaité

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