Publié le

Améliorer les résultats sur la recherche locale

Geolocaliser correctement votre site est dans certains cas le facteur le plus important pour rendre un site internet utile et drainer du trafic physique dans votre établissement. De plus en plus de commerces (restaurants, menuisiers, magasins) ont une présence sur internet et bien souvent pour eux, elle a comme but de faire venir les visiteurs. Avoir une approche cohérente de SEO dans ces cas est de cibler un public régional. Trop souvent les propriétaires veulent le plus de trafic possible quand en réalité, il est plus important d’avoir un bon trafic ou plus précisément dit, un bon taux de conversion.

Comme toujours, lorsqu’il s’agit d’être plus visible et plus pertinent sur les moteurs de recherche, un double travail doit être effectué. 

Les facteurs dans le site: Comment rendre votre site plus facilement compréhensible par les robots afin qu’ils apportent des résultats plus pertinent aux utilisateurs et in fine vous amène du trafic de qualité. 

Les facteurs externes: Comme toujours sur internet, les lient et informations transmises par d’autres sites permettent de rassurer Google et être le facteur de boost décisif.

L’extension du nom de domaine

Si vous cibler un pays spécifique comme dans mon cas la Suisse, utiliser un nom de domaine avec l’extension correspondante est un grand avantage (.ch, .fr, .ma). Elle permet de définir clairement la zone géographique du public cible et est un facteur clé de la pertinence des résultats dans les classements des moteurs de recherche.

Renseigner Google My Business

La façon la plus simple, la plus rapide et indispensable pour améliorer son référencement local est bien évidemment de renseigner les informations de votre entreprise sur Google My Business. Si ce n’est pas encore fait, c’est quelque chose à faire immédiatement. Ces informations sont dans certaines recherches les premières visibles en haut des moteurs de recherche comme le montre l’image ci-dessous.

Adresse de contact sur le site

N’oublier pas lorsque vous ciblez un public physique de préciser toutes les informations nécessaires pour vous contacter et ne vous privez pas de mettre l’adresse exacte, numéro de tel, et même une carte ou plan d’accès google maps. Assurez-vous que votre adresse soit la même partout afin de montrer une cohérence. Il est facile d’oublier de mettre à jour l’une ou l’autre des infos lors de modifications.

Utiliser les données structurées

Les informations fournies par les données structurées sont de plus en plus respectées par les moteurs. Si elles sont en adéquation avec les résultats de leurs algorithmes, elles sont considérées comme fiables et utilisées par eux. Dans le cas de la recherche locale, les types les plus pertinents sont LocalBusiness et Restaurant. 
Le site de référence est schema.org mais google met à disposition un outil d’aide au markage qui peut s’avérer très utile pour générer un bon squelette.

<script type="application/ld+json">
{
  "@context" : "http://schema.org",
  "@type" : "LocalBusiness",
  // "@type" : "Restaurant",
  "name" : "....",
  "telephone" : "....",
  "address" : {
    "@type" : "PostalAddress",
    "streetAddress" : "....",
    "addressLocality" : "...."
  }
}
</script>

Contenu du site

Le contenu du site devrait au maximum corroborer votre présence locale. Parler de la région, utiliser des synonymes, mais sans excès afin que le texte ne soit pas indigeste aux lecteurs et considéré comme du spam par Google. En plus d’explication sur la région, les cartes de vin des restaurants par exemple sont une mine d’or en terme de nom de village de la région et donnent vraiment une identité locale au site dans son ensemble. En plus de rassurer les clients, les pages de références peuvent également aller dans ce sens.
Comme toujours, les titres, meta description, nom des images sont à prendre en considération.

Backlinks

Comme toujours les backlinks sont d’une importance capitale. Il est donc utile d’avoir un maximum de liens retours de bonne qualité. Pour savoir si un lien est de bonne qualité, il suffit parfois de se poser la question: Une personne va-t-elle cliquer sur le lien et être contente d’arriver sur mon site. Il faut donc qu’il soit dédié aux clients et non aux moteurs de recherche. L’idéal et d’avoir dans la page d’un partenaire ou d’un client régional un petit texte descriptif parlant du site avec un lien retour dans le texte. Ce n’est pas toujours facile à obtenir, mais c’est réalisable et ça peut faire une grande différence.

Les annuaires de mauvaise qualité sont un piège à éviter. Trop utilisé par le passé, ils peuvent maintenant nuire a votre référencement. MAIS, les annuaires reconnus comme les annuaires de téléphonique en ligne officiels ou des annuaire spécialisé et les associations dans un domaine peuvent être très positif.

Pour finir, les liens provenant d’organisme officiel comme les mairies sont de liens reconnus de qualité par les moteurs et peuvent avoir un impact significatif.

Recommandations

Google met en avant les résultat avec des commentaires nombreux et positifs. Il est donc important d’inviter les clients à laisser une petite évaluation et dans le cas de travail de proximité relativement facile a encourager.

Images et vidéos – geotagging

Une astuce assez efficace et peu utilisée pour donner un côté local à votre site est d’utiliser des geotags sur vos images ou vidéos. Les géo tags sont des marqueurs qui signalent où a été prise la photo en stockant les coordonnées GPS. Ils permettent une fois de plus d’ajouter une cohérence et une pertinence à vos informations de localisation.

Affichage des geotags sous Windows

Conclusion

Cohérence et constance: lorsque vous avez votre adresse à plusieurs endroits vous devez vous assurer qu’elle soit la même partout. Que google my business, vos données structurée, votre page contact, … retournent les mêmes informations.

Les recherches locales ne sont pas nouvelles, mais sont depuis quelque temps un mouvement de fond principalement sur Google qui ne semble pas prêt de diminuer. Comme les résultats sont souvent plus pertinent pour les utilisateurs, ils amènent un trafic d’excellente qualité avec un très bon taux de conversion. Le seul problème est dans le cas de services dématérialisés, car sur certaines requêtes, les moteurs de recherches ne tiennent pas ou peu compte de la localisation.

Dans le cas de services ou de magasins, vous devez également définir votre rayon d’action et tenter d’être visible dans cette zone géographique. À vous de voir si vous avez un intérêt à vous positionner sur une zone étendue ou travailler sur de l’hyper localisation comme une ville ou une agglomération. 

Pour conclure, une fois de plus de nombreux autres facteurs entre en considération comme la vitesse de chargement du site, l’ancienneté, le fait qu’il soit adapté aux mobiles… Ces recettes ne sont pas la panacée, mais un très bon début qui a terme va porter ses fruits.

Je profite de cette article pour faire un lien sur le site d’une connaissance bien-acheter.com qui désire faire des tests seo dans le domaine des conseil d’achat. Il voudrait voir les possibilités d’affiliation pour des sites qui ne font que du référencement naturel. Ce lien lui permettra peut-être un peu plus de visibilité.

Publié le

Compression d’image avec jpegoptim et optipng

Lors de l’amélioration de la vitesse de chargement de vos pages afin d’améliorer l’UX pour réduire le taux de rebonds et satisfaire plus aux directives de Google, vous serez vite confronté au fait d’avoir des images trop lourdes qu’il est difficile de réduire sans en réduire la qualité. Pour arriver à cela aussi appelé lossless, des librairies sont extrêmement utiles, efficaces et rapide à mettre en œuvre. 
Les librairies optipng et jpegoptim permettent d’atteindre les taux de compression définis par Google Page Speed et donc de valider cette partie de leur test.

Jpegoptim

Jpegoptim comme son nom l’indique permet d’optimiser des fichier jpeg selon un taux de compression définie ou sans perte. Un des grands avantages de cette librairie est qu’elle est extrêmement rapide.

Installation de JpegOptiom sur Ubuntu

sudo apt-get update apt-get install jpegoptim

Exécution de jpegoptim

Je vous montre ci-dessous comment exécuter jpegotim de différentes façon afin d’avoir un aperçu global. Il est parfois utile de compresser par lot et parfois par fichier.

Exécuter jpegotim en ligne de commande
ParamètreUtilisation
–strip-allEnlève tous les marquer de l’image (nom du programme utilisé,…), à utiliser pour satisfaire Google
-mChoix de la qualité à avoir entre 0 et 100. Si vous mettez ce paramètre, la compression ne sera plus sans perte ou lossless.
-pPréserve les différentes informations de date
-PPréserve les permissions de l’image originale.

jpegotim change le proriétaire du fichier
Les version précédentes à la version 1.4.2 ne permettent pas de garder les permissions (owner/group) ce qui a pour effet que, si vous exécuter le script depuis une cron, le propriétaire peut changer et rendre l’image inaccessible pour l’utilisateur.
Pour voir votre version exécuter simplement: #jpegotim –version

Exécuter en ligne de commande

La ligne ci-dessous compresse toutes les images de type JPG qui se trouvent dans mon dossier /img/

find /home/web-presence/public_html/img/ -type f -name '*.jpg' -exec jpegoptim -m80 -P --strip-all {} \;

Exécuter depuis une cron php

Pour compresser toutes les images de type JPG modifiée il y a moins de 60 minutes qui se trouvent dans le dossier img/cache, exécuter un fichier php contenant les commandes suivantes :

find /home/web-presence/public_html/img/cache/ -type f -name '*.jpg' -cmin -60 -exec jpegoptim -m75 -P --strip-all {} 

Compresser les jpeg depuis php

Pour compresser une image de type JPG depuis un script php exécuter la commande ci-dessous:

exec("exec jpegoptim -m80  -P --strip-all /chemin_de_l_image/nom_du_fichier.jpg");

Optipng

Vous l’aurez bien sur compris, optipng est lui conçu pour compresser des images png. Plus lent que pour les jpegs, il est néanmoins très utile et selon les réglages pas trop lent.

Installation de Optipng sur Ubuntu

sudo apt-get update
apt-get install optipng

Paramètres principaux

Paramètre Utilisation
-strip all Enleve toutes les meta données de l’image. Elles sont inutiles et prennent de la place.
-o Choix du niveau d’optimisation entre 0 et 7. La valeur par défaut est 2. Plus le niveau de compression est élevé, plus la vitesse d’exécution sera lente.
-preserve Tente de préserver les attributs du fichier

Exécuter Optipng

Les principes sont les mêmes que pour Jpegoptim. Je donne ici 2 exemple, le premier avec une recherche de fichier et le second en lui transmettant le nom du fichier. Je vous incite à regarder plus haut pour plus d’exemples.

optipng -o4 -strip all mon_image.png
find /home/web-presence/public_html/img/ -type f -name '*.png' -exec optipng -o4  {} \;

Publié le

Comment passer au protocole HTTP2

Bien que le ptotocole HTTP2 soit encore en mode expérimental, je l’utilise sur de nombreux site sans le moindre problème. Il permet de réduire considérablement les temps de chargement comme le montre les waterfall tout en bas de la page. La seule limitation est qu’il faut avoir son site en HTTPS. Je vais vous montrer ci-dessous comment l’installer et l’activer.

HTTP/2 ne fonctionne qu’avec des sites tournant en HTTPS

Installer et activer HTTP2

Installer HTTP2 est simplissime. Pour se faire suivez les instructions ci-dessous.

sudo a2enmod http2

Si vous le message d’erreur suivant c’est que vous ne l’avez pas installé et poursuivez. Si vous n’avez pas d’erreur allez directement à la section configuration.

ERROR: Module http2 does not exist!

Installation

Pour passez à l’installation proprement dite, exécutez les commandes suivantes:

sudo add-apt-repository -y ppa:ondrej/apache2
sudo apt-key update
sudo apt-get update
# Répondez non à la question pour savoir s'il faut écraser la config
sudo apt-get --only-upgrade install apache2 -y 
sudo a2enmod http2
/etc/init.d/apache2 restart

Activez http2 pour votre domaine

Pour activer le protocole sur votre domaine, effectuez la modification suivante et redémarrer.

# Fichier: etc/apache2/site-enabled/votedomaine.conf
#SSLCertificateChainFile ....
Protocols h2 http/1.1
#SuexecUserGroup "#1005" "#1005"
/etc/init.d/apache2 restart

Contrôle

Pour contrôler si les changements ont été pris en compte, le plus simple est de regarder avec l’outil de développement chrome (F12) quel est le protocole utilisé. Attention, en fonction de vos directives d’expiration vous devez cliquer sur CTRL + F5

Détection du protocole utilisé avec Chrome Developer Tools

Temps de chargement HTTP 1.1 versus HTTP2

Les graphiques ci-dessous sont de comparatif de waterfall de chargement entre la version 1.1 et 2 de HTTP. Ils permettent de voir très clairement les avantages en terme de temps que la nouvelle version apporte.

Temps de chargement http versus http2 sur GTmetrix.com

Publié le

Open Graph

Les balises Open Graph permettent de faire que vos pages soient des objets enrichis (rich object) afin d’en faciliter leur partage sur WhatsApp, Facebook,Twitter, Linked in, Google +,… ou sur les autres réseaux sociaux. Très facile à mettre en place, elles ont pour but et avantage de donner un aperçu succinct du contenu de la page lors de partage sur un média social.

Intérêt du balisage

Le contenu de ces balises doit avant tout être conçu pour l’utilisateur et pour avoir un bon taux de clic. Vous devez focaliser votre rédaction sur l’utilisateur. La taille de l’image par exemple dépend de l’endroit où vous allez publier. Si vous publiez sur whatsapp une image carrée est parfaire tandis que sur facebook recommande une image d’une dimension minimale idéale de 1 200 x 630 ou plus grande mais avec ce rapport

Comment implémenter Open Graph

Implémenter opengraph est très facile, il suffit d’avoir les bonnes informations et de lui transmettre correctement. Le bout de code suivant est un exemple qui est celui que j’utilise sur ce site. Il utilise donc les balises les plus courantes pour afficher des articles

<!-- A NOTER: le changement de la balise head !!!!--->
<!-- ... --->
<meta property="og:title" content="Allez plus loins avec Laravel">
<meta property="og:type" content="article">
<meta property="og:url" content="http://www.crabcake.ch/blog/laravel-snippet-utile">
<meta property="og:locale" content="fr_FR">
<meta property="og:locale:alternate" content="fr_CH">
<meta property="og:description" content="Divers snippets Laravel comme masquer la technologie, paramètre optionnel dans une route, créer des middlewares.">
<meta property="og:image" content="http://www.crabcake.ch/blog/img/14/laravel_fonction_utiles.jpg">
<meta property="og:image:width" content="800">
<meta property="og:image:height" content="800">
<meta property="og:image:type" content="image/jpeg">

Différentes balises

Les balises disponibles sont d’une part trop nombreuse pour être détaillé (music, video, image, article, book, profile, websit) ici et d’autre part suffisamment bien détaillées sur d’autre site pour ne pas avoir à les reprendre. Le site officiel ogp.me est bien sur très inintéressant, mais la section opengraph de facebook est plus accessible et met à disposition énormément d’exemples très utiles.

Erreur de Validation

Le validateur de FaceBook n’est pas souple et à besoin d’un code HTML propre. Si vous ne l’avez pas déjà fait, assurez-vous avant d’utiliser leur outil de test que votre code respecte les standards W3C. Cette petite analyse en plus d’être un quasi-indispensable, peut vous permettre de gagner beaucoup de temps…

Erreur possible pour les Suisses

la valeur donnée fr_ch pour la propriété og:locale:locale n’a pas pu être analysée en tant que type enum

Si vous êtes confronté à l’erreur ci-dessus, c’est uniquement parce que Facebbok ne reconnais pas la locale fr_CH, vous devez donc utiliser une autre valeur. La liste des locales possibles est accessible en cliquant-ici!

Publié le

Outil de désaveux de Google

Si vous subissez une attaque de Negative SEO consistant en un très grand nombre de backlinks de mauvaise qualité, la seule action que vous pouvez entreprendre afin de ne pas subire une pénalité Google est de désavouer les liens. Ca si même Google invite les webmaster à contacter les site pour enlever les liens, il est évident que vu le but de l’action est de vous nuire, ca ne servira a rien. Vous n’avez pas d’autre réaction possible que de signaler à Google que vous ne voulez pas qu’il prenne certains liens en compte. J’ai déjà eu à faire dans le passé a ce type d’action et il m’a semblé que le fait de signaler les lien m’a aider même si je pense avoir tout de même souffert un peu des conséquences de cette attaque. Vous désavouer des lines rendez-vous à l’adresse suivante disavow-links et transmettez lui un fichier csv par exemple avec les liens à supprimer.

Efficacité constatée

Après de nombreux cas de negative SEO, j’ai pu constater que cet outil est intitule ou pour moi n’a rien amené de concret. Etant donné le temps qu’il faut mettre pour tenir cela à jour et l’énervement que ça m’amène de constater ce genre de pratique, j’ai arrêté d’utiliser cet outil et je me comporte donc comme un utilisateur normal. Je pense que cette attitude en plus de ne demander aucun investissement en temps peu avoir un avantage car Google doit se méfier des personne trop réactives…

Publié le

Le négative SEO

Le SEO négatif est une pratique qui consiste à enfreindre des règle de la guideline Google afin qu’il pense que vous essayez de manipuler son index. Une fois qu’il pense cela, il met en place des mesures de rétorsion afin de vous faire passer l’envie de le refaire. Malheureusement, dans ce cas vous n’en êtes pas l’instaurateur ou vous ne pouvez pas lutter efficacement.

Les formes possibles d’attaques

Pour nuire à la crédibilité d’un site vis-à-vis des moteurs de recherche, il existe plusieurs pratiques plus ou moins onéreuses et plus ou moins efficaces. Les principales sont : Le contenu copié, un très grand nombre de backlinks, des backlinks non-pertinent, des problèmes serveur, faire croire à du contenu dupliqué sur votre site, demander d’enlever vos bon backlinks ou rediriger des urls.

Mauvais backlinks

C’est de loins l’attaque la plus fréquente. Il s’agit de générer beaucoup et de façon quasi-simultanée un très grand nombre de liens de mauvaise qualité et hors sujet. Le fermes de liens ont parfois été recyclées de cette façon. C’est malheureusement une attaque relativement facile à mettre en oeuvre si vous êtes prêt à dépenser un peu d’argent, efficace dans la durée et très sournois, car il faut parfois beaucoup de temps pour le remarquer. Pour ces raisons, c’est 9 fois sur 10 la pratique utilisée pour vous nuire. Il faut préciser que si cette attaque est très efficace sur de nouveaux sites, elle est très difficile sur des sites bien implantés et considérés comme fiable par google.

Si vous utiliser une adresse https, n’oubliez pas de régulièrement voir la liste de backlinks sur le http. Comme on utilise presque jamais cette version de la search console, il faut parfois beaucoup de temps pour s’en apercevoir.

Supprimer des bons backlinks

Comme les liens sont un facteur très important de positionnement, une attaque facile consiste à contacter en votre nom les sites qui font de bon backlink sur le vôtre afin de leur demander de les enlever. Très simple à mettre en place, cette stratégie peut s’avérer très efficace et peux coûteuse.

Contenu dupliqué

Pour créer du contenu dupliqué sur votre site, il suffit parfois d’ajouter un paramètre à votre URL. Si vous n’avez pas de balises canonical sur la page, elle peut être considérée comme dupliquée..

Redirections

Une redirection globale sur votre site depuis une URL a très mauvaise réputation ou depuis un grand nombre d’url peut également nuire à la réputation et au classement de votre site.

Copier des contenus

Copier le contenu de votre site pour faire croire à google que vous l’avez copié est assez difficile, car il doit être fait très très rapidement et le site qui le fait doit jouir d’une meilleure confiance et d’une indexions plus fréquente que vous que vous.

Ralentir le site

Ralentir les performances du serveur est plus facile, mais moins efficace et plus coûteux dans le temps. Il est aussi très facile à remarquer et entraîne une riposte plus rapide.

Comment détecter du negative SEO

Comme nous l’avons vu plus haut, la méthode la plus souvent utilisé pour nuire en référencement est de générer un nombre très élevé de liens de mauvaise qualité et complètement hors sujet vers votre site. Google pensera donc que vous trichez et vous pénalisera. L’image suivante montre un aperçu de la search console d’en client qui a reçu environ 150 liens depuis des sites chinois sans aucun rapport et de façon simultanée.

Backlinks de mauvaise qualité dans la search console

Conclusion

J’ai récemment dû faire face à une situation semblable sur un sexshop en suisse. Vraisemblablement, le leader du marché semble ne pas apprécier la concurrence et semble avoir été l’instigateur de l’attaque. Pour se relever (péniblement ou lentement), il a été nécessaire de désavouer les liens, d’acquérir de nouveaux backlinks de confiance et faire un passage sur un très grand nombre de pages afin de des-optimiser certaine requête. Même si les rédacteurs n’avaient pas l’intention de spammer certain mots, il est ressorti que la fréquence des termes principaux était trop élevée par rapport au contenu total. Après environ deux mois de travail, le niveau d’avant l’attaque a été à nouveau atteint…

Publié le

Utilisation et impact des données Structurées

Le balisage des données à l’aide des données structurées (Structured datas ou rich snippets) permet à GoogleBingYahoo de mieux interpréter les informations présentes sur les pages et les exploiter plus facilement pour ajouter parfois des extraits enrichis dans leurs résultats de recherche comme des évaluations, des adresses, gamme de prix, images, horaires et bien d’autres choses.

Pourquoi Google encourage-t-il leurs utilisations?

Google apprécie tellement l’utilisation des données structurées qu’il faut en plus de les voir comme un bon moyen d’être mieux visibles dans les serp, les considérer comme un optimisation pour le référencement. Leurs présences pour google sont importante car elle permettent améliorer la présentation des résultats dans leur moteur de recherche en améliorant le taux de clics, en présentant plus d’informations de façon condensé et améliorent la précision de leur algorithme.

L’exemple suivant est une excellant illustration de l’utilisation des données structurée dans leur SERP.

Exemple de résultat Google des données structurée

Balisage de vos données


Google fournit des outils pour vous aider à baliser correctement vos pages ou pour vous aider à créer les squelettes des données que vous allez pouvoir utiliser de façon automatisée.

Outil d’aide au balisage Google

Un des outils à disposition est leur Outil d’aide au balisage. Il permet de créer le squelette parmi une liste assez importante d’attribut. Facile à tester, il donne à la fin de l’opération le bout de code à insérer dans votre page.

Outil d’aide au balisage Google

Balisage dans Google Search Console

Vous pouvez également utiliser un outil présent dans la search console. Il permet soit de baliser une page spécifique soit de baliser toutes les pages du même type. La grande différence avec la façon précédente et que dans ce cas, si vous accepter, les données seront automatiquement transmises à Google. Il est toujours possible de modifier ou d’annuler ce balisage.

Balisage des pages depuis la search console

Microdata, RDFa et JSON-LD

Il est possible de marque vos pages à l’aide de ces trois formats et le site schema.org en donne de nombreux exemples d’implémentation. Si les notations Microdata et RDFa sont incluses dans la présentation, le format JSON-LD permet de séparer les données affichées à l’utilisateur et celles transmises au moteur ce qui a pour très grand avantage d’être entièrement défini au même endroit et en rend l’utilisation plus facile pour les programmeurs.

JSON-LD est le format recommandé par Google

Détection et contrôle du résultat dans la Search Console

Vous pouvez ici voir quelles sont les balises prises en compte par Google et remarquer d’éventuelles erreurs. Il faut tout de même préciser qu’ils vous faudra attendre plusieurs jours pour voir vos nouveaux marquages apparaître dans cette page. Il est donc indispensable de valider vos tags avec leur outil de test

Aperçu des données structurées dans la search console
Publié le

Utilisation de Chrome pour l’analyse seo

Google Chrome est plus qu’un simple navigateur, à l’aide de sa barre d’outils pour développeur (F12), il est un véritable allié pour améliorer la qualité de votre développement et permet de tester si votre site est responsive, de changer les CSS en live et bien d’autres choses.

Affichage des css inutiles

La barre d’outils pour développeur de google chrome est un outils très pratique pour de nombreuses choses et quasi-indispensable pour découvrir les balises css inutiles sur vos pages. L’analyse de cette donnée permettra de réduire la taille de vos fichiers CSS soit en enlevant les balises inutiles soit en vous aidant à diviser vos css et à les personnaliser en fonction du type de page (catégories, produits, espace membre) que vous affichez. 

La taille de la page et le nombre d’information inutile à télécharger en plus de faire varier le temps de téléchargement, font partie des critères de qualité des algorithmes des moteurs de recherche.

Ce n’est évidemment pas un des critères principaux mais lorsque vous commencez à vouloir aller dans le détail, vous devrez en tenir compte.

Pour trouver les css inutiles sur votre page, Cliquez F12, sélectionner l’onglet Audit et lancer l’analyse. Vous aurez ensuite accès à la liste des CSS inutile pour la page courante.

Identifier les balises css inutiles

Définir le protocol HTTP utilisé et aperçu du Waterfall

Chrome permet également d’avoir un aperçu du waterfall de chargement, du temps de chargement de la page et de trouver quel est le protocole utilisé par le serveur. Je profite de l’exemple pour vous montrer les différences entre le chargement d’une page sur un serveur équipé du HTTP2 et le chargement sur un serveur classique munis du protocole HTTP 1.1.

Si la colonne protocole n’est pas visible, ajoutez-là en cliquant sur une en-tête de colonne avec le bouton droite de la souris. Vous pourrez ajouter de nouvelles informations.

L’exemple suivant vous montre donc les avantages de l’utilisation du protocole HTTP2.

Waterfall et détection du protocole HTTP / HTTP2

Contrôle du cache-control des fichiers

Il est fortement recommandé de définir dans le .htaccess des durées de validité et d’expiration d’expiration pour les fichiers afin de limiter les chargement et accélérer la vitesse d’affichage. Vous pouvez contrôler depuis chrome si ces directives sont correctement prise en compte de la façon suivante:

Contrôle des directives d’expiration du cache des fichiers

Dans l’exemple ci-dessus, les directives suivantes ont été ajouté au fichier .htaccess afin de donner des directives de cache aux navigateurs.

<ifmodule mod_expires.c="">

   AddType image/x-icon .ico
   AddType application/font-woff2  .woff2
	
    ExpiresActive on
    ExpiresByType image/jpg "access plus 3 week"
    ExpiresByType image/jpeg "access plus 3 week"
    ExpiresByType image/gif "access plus 3 week"
    ExpiresByType image/png "access plus 3 week"
	ExpiresByType application/font-woff2 "access plus 4 week" 
	ExpiresByType image/x-icon "access plus 4 week"
	ExpiresByType text/css "access 1 week"
	ExpiresByType text/javascript "access 1 week"
	ExpiresByType application/javascript "access 1 week"
	ExpiresByType text/x-javascript "access 1 week"
</ifmodule>

Trouver les ressources non-https d’un site https

Lors du passage d’une site de http à https, il arrive parfois d’oublier des ressources qui n’utilisent pas le transfert sécurisé. L’onglet Sécurity vous permet de trouver quels sont ces éléments afin de passer complètement votre site vers le nouveau protocole.

Identifier les ressources non HTTPS de la page

Tester si votre site est responsive

Google Chrome met à disposition un moyen très efficace, simple et rapide de tester votre site sur toutes les résolutions et vous assurez que vos pages sont bien responsive. Cette fenêtre vous permet soit de changer la résolution à l’aide de la souris ou de choisir de résolution prédéfinies correspondant à certains devices.

Utilisation de Chrome pour tester si le site est responsif

Contrôle des standards AMP

Comme j’en avais parlé précédemment dans mon post sur les pages amp, Chrome permet de tester si votre page respecte les standards des pages amp de la façon suivante:

Valider sa page selon les standards AMP
Publié le

Balises structurentes HTML5

Les balises sémantiques HTML5 permettent de définir clairement la fonction d’une zone de la page autant pour les browsers que pour les développeurs ou les moteurs de recherche. Elles sont utilisées par les « readers » et améliorent donc grandement l’accessibilité du site à un plus grand nombre. Elles amènent également l’avantage de définir des styles précis pour chaque zone sans avoir a ajouter d’attribut class. Html 5 apporte 6 nouvelles balises qui permettent d’affiner la structuration de vos pages

Balise Utilisation
<header> Section d’introduction de la page entière ou d’une section. Il serait préférable de lui donner un titre (h1 -> h6) mais ce n’est pas obligatoire.
Cette balise n’est pas faite pour introduire une nouvelle section
<footer> Section qui représente la fin de la page ou d’un article. Remplace le traditionnel div de fin de page et donne accès à une ne meilleure compréhension de la page. Elle est conçue pour encapsuler par exemple les informations sur l’auteur ou l’éditeur de la page ou article.
Comme le header, elle n’est pas conçue pour clore une section.
<section> Définit une section du document qui parle d’un sujet ou d’une fonctionnalité et qui peut être extraite du document général tout en gardant en sens et restant compréhensible dans son ensemble.
<article> Section de contenu dans la page qui peut être lu de façon indépendante, et même extraite du document pour par exemple un flux rss, sans pénaliser la compréhension générale. Il devrait toujours contenir un titre (Hn)
<nav> Section utile à la navigation. C’est la partie qui contient principalement les liens et idéalement des listes d’éléments.
<aside> Balise qui permet d’encapsuler une information qui n’a pas de rapport direct avec le contenu principal. Défini une section qui n’est pas indispensable à la compréhension générale de la page.
A noter qu’il est inapproprié d’utiliser cette balise pour du contenu que l’on pourrait dire ‘entre-parenthèses’.
Elle est dédiée à du contenu très peu en relation avec la page…

Exemple d’implémentation des balises sémantiques

Exemple de structuration d’une page avec les balises sémantiques HTML5

Publié le

AMP – Mise en place, astuce & impact dans google

Le projet AMP (Accelerated Mobile Pages) de google a été lancé en 2016 afin d’améliorer l’expérience utilisateur en rendant le chargement des pages plus rapide sur les mobiles. C’est une initiative qui va dans la direction Mobile First en rendant les pages plus rapides grâce à des systèmes de cache et en limitant le chargement de fichiers externes et en réduisant la taille du fichier HTML. Dans ce but, ils ont étrangement décidé de ne pas autoriser le chargement du feuille de style externe.

Si votre site est bien conçu et si vous avez des notions de PHP, la mise en place est assez rapide pour les pages classiques. Le problème principal est pour les sites utilisant du javascript.

Entête des fichiers AMP

Pour la mise en place, il suffit déjà de créer vos pages en changeant la balise HTML et les balises header de la sorte selon les exemples présent sur le site du projet amp.

<!doctype html>
<html amp lang="fr">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
        <title>.....</title>
        <meta name="description" content="......."/>
        <link rel="icon"  type="image/x-icon" href="/img/favicon.ico" />
        <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
        <script async src="https://cdn.ampproject.org/v0.js"></script>

Validation des fichiers AMP

Google fournit avec son navigateur chrome un excellant moyen de contrôler la validitél du code HTML de vos pages HTML AMP. Pour afficher les erreurs il suffit d’ouvrir l’outil pour développeur en cliquant F12, et ajouter development=1 à la fin de votre url. Vous pourrez donc ainsi avoir en temps réel la validation de votre code.

Pour valider le code de votre page AMP, Cliquer F12 pour ouvrir la console du mode développeur, aller dans l’onglet console et ouvrir la page amp en ajouter #development=1 à la fin de votre url

Valider les pages AMP sous Google Chrome

Css dans les pages amp

Parmi les nombreuses balises spécifiques, une des premières que vous aurez besoin est celle qui permet d’inclure un css personnalisé, je vous met ci-dessous la façon de faire et je vous laisse allez voir le site officiel pour la suite:

<head>
...
   <style amp-custom>
      .fright{float:right}
   </style>
</head>

Comment signaler la présence de la page AMP

Une fois la version Accelerated Mobile Pages de votre page crée, il faudra tout de suite la signalée à Google afin qu’il puisse l’indexer dans son moteur. Pour ce faire, vous devez utiliser la balise de la façon suivante:

Balise dans la page AMP

Sur votre page AMP définissez dans la section head l’adresse de la version standard à l’aide de la balise canonical de la façon suivante:

<link rel="canonical" href="http://www.crabcake.ch/blog/seo-amp-page" />

Balise dans la version standard de la page

Dans votre page traditionnelle, vous devez signaler la présence d’une version mobile de votre page afin que les moteurs la trouvent plus facilement. Pour ce faire, définissez dans la section head l’adresse de la version amp à l’aide de la balise canonical de la façon suivante:

<link rel="amphtml" href="http://www.crabcake.ch/blog/seo-amp-page.amp" />

Suivit du référencement de vos pages amps

Google fournit dans la search console la liste des pages accélérées qu’il a détecté. En plus du nombre cette page permet de voir s’il y a des erreurs. Comme souvent, il faut quelque jours avant qu’un résultat soit visible.

Détection dans la search console

Je parle dans un prochain post de l’intégration de formulaires dans les pages amp. Pour voir la marche à suivre allez le lire: Formulaire dans une page amp