Performance - SEO
Performance et optimisation de site

 

 SOMMAIRE

1- Avant-propos
2- Les images
3- Le poids du code
4- Les modules Apaches et les outils de calcul
5- La sécurité
6- Métadonnées/microdonnées
7- Les outils complémentaires pour la diffusion et le partage

 

PARTIE 1 – Avant-propos

L’objectif de ce billet est de faire un résumé sur les différents outils qui existent pour optimiser les performances d’un site web et améliorer son référencement. Il est également question des comportements à adopter comme propriétaire, mais aussi comme hébergeur.

Cependant, chaque section ne présente pas nécessairement une liste exhaustive des procédés et certaines d’entre elles, vous le verrez, sont en cours de révision. Pour cette raison, je vous invite donc à poursuivre votre investigation sur le sujet en consultant, ente autres, les excellents sites donnés en références ici.

Enfin, il va s’en dire que la note parfaite est difficile à atteindre. Il est quasi utopique d’espérer y parvenir dans le cadre d’un projet en communication visuel d’impact. D’ailleurs, tout récent qu’il est, à l’instant où j’écris ces quelques lignes le présent site est lui-même en cours d’optimisation (sprites css à faire, chargement asynchrone de styles..). Inutile donc de tenter d’essayer d’être « immaculé » à tout prix. Si les performances sont importantes pour vous essayez de ne pas vous contenter de la moyenne faible car il est risqué de se retrouver vite en dessous, mais établissez aussi clairement vos priorités si vous voulez voir votre site en ligne un jour. 😉


 

PARTIE 2 – Les images

2.1- Sprites CSS

Pour des formats png ou gif (formats souvent utilisés pour des icônes ou gérer des effets graphiques sur des liens) il est conseillé d’utiliser les sprites CSS. Cette technique consiste à disposer quelques images au sein d’un même calque qui sera déplacé, via les styles CSS, du nombre de pixels requis sur les abscisses et/ou subordonnés pour afficher l’image voulue.

Voici un exemple qui permettra de créer un effet sur l’élément ayant la class « bigplay » au passage du curseur de la souris.

Image PNG utilisée :

CSS

.bigplay{
width:74px; 
height:49px; 
position:absolute;
left:0;
top:0;
background:url("images/bt_play.png") 0 0 no-repeat;
cursor:pointer;
border:0;
margin:0;
}
.bigplay:hover,.bigplay:active,.bigplay:focus{
  background-position:-78px 0px;
}

Résultat:

Cette façon de faire permet d’épargner des ressources puisqu’une seule image sera chargée plutôt qu’une multitude pour obtenir le résultat escompté.

2.2 – Encodage en Base 64

Bien que cette option soit à utiliser avec parcimonie (la longueur du code généré risquant au contraire de surcharger vos pages si on utilise l’encodage en base 64 pour plusieurs images) je vous la conseille surtout pour le chargement d’images de faible poids qui font partie intégrantes de vos styles css. C’est une opinion, je vous invite à consulter la documentation sur le sujet.

Base64 | Wikipédia
Base64 encoding and decoding
Encoder et décoder en ligne de commandes

2.4 – Compression des images et chargement progressif

Utilisez un logiciel comme Photoshop ou Gimp est l’idéal. Dans Photoshop par exemple, via «Fichier» (ensuite « Exporter » pour les version récentes ») –> «Sauvegarder pour le web » , vous pourrez sélectionner le niveau de compression désiré et cocher le mode progressif pour le format JPG.

Bien entendu, lors de la compression, il faut aussi considérer la quantité d’images chargées sur une seule page et jugez, par surcroît, s’il vaut mieux opter également pour un plugin JQuery tel que Lazy Load (très utilisé dans un contexte infinite scroll).

2.5 – Dimensions des images

Si vous exploité des images plus grandes que requises pour l’affichage (parce que vous faites du responsive design par exemple), vous avez été ou serez probablement confronté bientôt à cet avertissement via des outils tels que GTMetrix :

« Serve scaled images »

Que faire ?

Rassurez-vous, temporairement du moins, des outils existent grâce à javascript dont le célèbre picturefill.js.

Je vous l’accorde, pour ceux qui ont un thème WordPress (WP) responsive, savoir comment adapter tout ça peut être est un vrai casse-tête. (J’ai dû passer personnellement plus de 48h à chercher comment utiliser sur WP cette supposée 7e merveille du monde pour contrôler l’affichage des images d’un portefolio employant les thumbnails par défaut).

Je vous réfère à mon sauveteur :Integrate-picturefill with WordPress […].

Voici comment j’ai finalement adapté à mon besoin ce que propose Jay Hoffmann 🙂

Avant tout, dans fonctions.php, j’ai bien ajouté le code suivant permettant de charger adéquatement depuis le répertoire de mon thème enfant, en footer, picturfill.js et de créer l’élément <picture> nécessaire depuis une source javascript inline en en-tête :

functions.php

function custom_enqueue_script() {
            wp_enqueue_script( 'picturefill', get_bloginfo( 'stylesheet_directory' ) . '/js/picturefill.min.js', 
           array(),false, true );
      } 
	 add_action( 'wp_enqueue_scripts', 'custom_enqueue_script' );
	 
function vb_picture_tag() { ?>

<script> document.createElement( "picture" ); </script>
<?php } add_action( 'wp_head', 'vb_picture_tag', 99 );

Ci bas, voici la façon de faire pour ajouter les formats d’images voulues à ceux déjà existants:

functions.php

if ( function_exists( 'add_image_size' ) ) {
  //add_image_size( 'img-xlarge', 648, 648, true );
  add_image_size( 'img-large', 590, 590, true );
  add_image_size( 'img-medium', 475, 475, true );
  add_image_size( 'img-small', 300, 300, true );
}
function vb_rwd_image( $id, $size, $alt, $theclass ) {
  $xlg = wp_get_attachment_image_src( $id, $size.'-xlarge' );
  $lg = wp_get_attachment_image_src( $id, $size.'-large' );
  $md = wp_get_attachment_image_src( $id, $size.'-medium' );
  $xs = wp_get_attachment_image_src( $id, $size.'-small' );
?>

<picture> <!--[if IE 9]><video style="display: none;"><![endif]--> <source srcset="<?php echo $xlg['0']; ?>" media="(min-width: 1900px)"> <source srcset="<?php echo $lg['0']; ?>" media="(min-width: 1530px)"> <source srcset="<?php echo $md['0']; ?>" media="(min-width: 940px)"> <source srcset="<?php echo $xs['0']; ?>" media="(min-width: 760px)"> <source srcset="<?php echo $xs['0']; ?>"> <!--[if IE 9]></video><![endif]--> <img srcset="<?php echo $xs['0']; ?>" alt="<?php echo $alt; ?>" class="<?php echo $theclass; ?>"> </picture>
<?php }

La fonction vb_rwd_image permet de pouvoir disposer de ces nouveaux formats via les paramètres de l’éléments <picture>. Je vous laisse soin de vous documenter sur les paramètres du plugin via les liens fournis dans ce billet; retenez ici qu’on choisi une résolution minimale pour chaque format via l’attribut media.

Vous remarquerez aussi que j’ai ajouté $theclass dans vb_rwd_image afin de permettre, entre autres, à mes images de s’adapter à leur conteneur grâce à l’ajout d’une classe CSS.

Une fois que j’ai régénéré mes formats d’images en utilisant le très pratique Regenerate Thumbnails, voici donc comment j’ai laissé la magie opérée pour la section portfolio :

portfolio.php

<?php
$port_image=get_post_thumbnail_id($post->ID);
vb_rwd_image($port_image, 'img', 'Image du portfolio', 'responsive-image');
?>

Je récupère donc les renseignements relatifs à l’image dans $port_image que je passe à vb_rwd_image. Il y a bien entendu les autres paramètres dont $size (img réfère ici aux format disponibles qui lui sont associés), $alt et $theclass (responsive-image).

En résumé, l’utilisation de « width :100%; » pour adapter le contenu d’une image à son conteneur est toujours pertinente. Cependant, si les dimensions de cette image dépassent celles de son conteneur sur une plus petite résolution, vous verrez que PageSpeed (ou GTMetrix) n’aime pas beaucoup. Il faut donc générer plusieurs versions de la même image pour différentes résolution et/ou densité pixel.

Selon le design de notre site, afin de ne pas se retrouver surcharger en versions d’images, il faudra parfois faire le choix, (déchirant je vous l’accorde) de voir sur certaines résolutions nos visuels moins grands que nos conteneurs et par conséquent avoir une qualité d’image moins élevée.

Pour terminer, Picturfill étant un polyfill son utilisation ne convainquera pas tous le monde. Cependant, avec la popularité grandissante du « web responsive », l’utilisation de <srcset> dans l’élément <source> encadré par <picture> est maintenant partiellement implémentée. Ainsi, semble-t-il que plusieurs développeurs ont bon espoir de voir bientôt tous les navigateurs les prendre en charge. 🙂


 

PARTIE 3- Le poids du code

Il existe différentes technique de minification via serveur et des outils disponibles en ligne vous permettant de compresser, entre autres, vos fichiers CSS et Javascript.

Lorsque le design et les fonctionnalités d’un site ne sont plus révisés (quand il n’est plus au stade de développement) il est fort pertinent de procéder à une compression de son code source; supprimer les espaces et sources inline inutiles, les commentaires, les fonctions et styles non utilisés, etc.

En procédant ainsi vous perdrez beaucoup de poids et verrez le temps de chargement de vos pages augmenter significativement.

Utilisez également des outils de débogage tels que Firebug pour connaître les erreurs que votre code pourrait contenir, les fichiers qui pourraient ne pas être appelés correctement et bien plus.

Éviter de surcharger des sites WordPress de plugins qui ne feraient qu’alourdir votre base de données, ralentir votre site et être un risque pour la sécurité.


 

PARTIE 4- Les modules Apaches et les outils d’analyse

Si vous avez accès à la gestion du serveur et pouvez activer des modules Apache, vous pourrez facilement mettre en place ce qu’il faut pour aider vos utilisateurs (clients) à augmenter les performances de leurs sites et, par conséquent, économiser de la bande passante.

4.1- Quelques pas pour le propriétaire de site

Avant tout, que vous soyez familier ou non avec la ligne de commande et les outils d’analyse Apache, voici des services en ligne populaires qui vous aideront dans votre effort d’optimisation : PageSpeed Tools et GTmetrix.

GTmetrix est de bons conseils car il vous indiquera clairement les modifications qui doivent être apportées (organisation et compression de code, dimensions des images, utilisation de sprites CSS, etc.). En fait, il utilise PageSpeed, précédement cité, en combinaison avec YSlow développé par Yahoo.

Mais quelles sont les bases pour arriver à obtenir, ou presque, quelque chose qui ressemble à ça :

Capture GTmetrix

Capture GTmetrix

La première étape est d’utiliser au minimum tous les modules suivants en les appelant via un fichier .htaccess : expires, headers sans oublier gzip (ou deflate) pour la compression.

Afin de savoir si ces modules sont activés chez un hébergeur, vous pouvez vérifier rapidement votre configuration PHP via la commande suivante :

Code PHP

phpinfo();

Une autre application pratique et gratuite est Zend Optimizer (pour améliorer les performances des exécutions php).

En gros, une bonne partie de votre fichier .htaccess pourrait ressembler à ça :

Fichier .htaccess

<IfModule mod_expires.c>  
    ExpiresActive On  
    ExpiresDefault "access plus 1 week"  
    ExpiresByType image/jpg             "access plus 1 month"  
    ExpiresByType image/jpeg            "access plus 1 month"  
    ExpiresByType image/png             "access plus 1 month"  
    ExpiresByType image/gif             "access plus 1 month"  
    ExpiresByType image/svg+xml         "access plus 1 month"  
    AddType image/x-icon .ico  
    ExpiresByType image/ico             "access plus 1 month"  
    ExpiresByType image/icon            "access plus 1 month"  
    ExpiresByType image/x-icon          "accessplus 1 month"  
    ExpiresByType text/css              "access plus 1 month"  
    ExpiresByType text/javascript       "access plus 1 month"  
    ExpiresByType text/html             "access plus 0 seconds"  
    ExpiresByType application/xhtml+xml     "access plus 0 seconds"  
    ExpiresByType application/javascript    "access plus 1 month"  
    ExpiresByType application/x-javascript  "access plus 1 month"  
    ExpiresByType application/x-shockwave-flash "access plus 1 month"  
    ExpiresByType audio/mpeg "access plus 1 month"
    ExpiresByType video/mpeg "access plus 1 month"
    ExpiresByType video/mp4 "access plus 1 month"
    ExpiresByType video/quicktime "access plus 1 month"
    ExpiresByType video/x-ms-wmv "access plus 1 month"
</IfModule>  

<IfModule mod_gzip.c>
   mod_gzip_on Yes
   mod_gzip_can_negotiate Yes
   mod_gzip_static_suffix .gz
   AddEncoding gzip .gz
   mod_gzip_update_static No
   mod_gzip_command_version '/mod_gzip_status'
   mod_gzip_temp_dir /tmp
   mod_gzip_keep_workfiles No
   mod_gzip_minimum_file_size 500
   mod_gzip_maximum_file_size 500000
   mod_gzip_maximum_inmem_size 60000
   mod_gzip_min_http 1000
   mod_gzip_handle_methods GET POST
   mod_gzip_item_exclude reqheader "User-agent: Mozilla/4.0[678]"
   mod_gzip_item_include file \.html$
   mod_gzip_item_include file \.htm$
   mod_gzip_item_include file \.php3$
   mod_gzip_item_include file \.php$
   mod_gzip_item_include file \.js$
   mod_gzip_item_include file \.css$
   mod_gzip_item_include mime ^text/
   mod_gzip_item_exclude mime ^httpd/unix-directory
   mod_gzip_item_exclude mime ^image/
   mod_gzip_dechunk Yes
   mod_gzip_add_header_count Yes
   mod_gzip_send_vary Yes
</IfModule> 
 
<IfModule mod_headers.c> 
     Header set Connection keep-alive
     <FilesMatch "\\.(ico|jpe?g|png|gif|swf)$">   
     Header set Cache-Control "max-age=2592000, public"  
     </FilesMatch> 
     <FilesMatch "\.(ttf|otf|eot|woff|font.css)$"> 
     Header set Cache-Control "max-age=604800, public"  
     </FilesMatch>  
     <FilesMatch "\\.(css)$">   
     Header set Cache-Control "max-age=604800, public"  
     </FilesMatch>   
     <FilesMatch "\\.(js)$">   
     Header set Cache-Control "max-age=604800, private"  
     </FilesMatch>   
     <FilesMatch "\\.(x?html?|php)$">  
     Header set Cache-Control "max-age=600, private, must-revalidate"  
     </FilesMatch>    
</IfModule>

SetEnv ZEND_OPTIMIZER 1  
SetOutputFilter DEFLATE  

Header unset ETag
FileETag none

Bien entendu, il faut placer ce fichier .htaccess à la racine du site.

Un autre indispensable qui vous renseignera sur l’intérêt qu’on les visiteurs pour certaines de vos pages est, et vous le connaissez déjà, Google Analytic. Il y a aussi nombre de ressources provenant de Google Developer.

*Spécifiquement pour les propriétaires de sites WordPress, le système à des fonctionnalités natives vous permettant, via le fichier wp-config.php, d’effectuer dynamiquement des fonctions de maintenance, de modifier certaines limites et d’activer aussi, par exemples, des outils de compression.

Voici un exemple de configuration possible à ajouter :

Code PHP

define( 'WP_MEMORY_LIMIT', '96M' );
define( 'WP_MAX_MEMORY_LIMIT', '256M' );
/* Reparation automatique BDD */
define('WP_ALLOW_REPAIR', true);
define('WP_DEBUG', false); 
/* WordPress langue du site */
define( 'WPLANG', 'fr_FR' );
/* Désactiver les révisions OU limiter leur nombre */
define( 'WP_POST_REVISIONS', 'false' );
/* interval de sauvegardes automatiques */
define( 'AUTOSAVE_INTERVAL', '300' );
/* Nettoyage de la corbeille */
define( 'MEDIA_TRASH', true );
define( 'EMPTY_TRASH_DAYS', '7' );
/* WordPress Cache */
define( 'WP_CACHE', true );
/* Compression */
define( 'COMPRESS_CSS',        true );
define( 'COMPRESS_SCRIPTS',    true );
define( 'CONCATENATE_SCRIPTS', true );
define( 'ENFORCE_GZIP',        true );
define ('WPLANG', 'fr_FR');
define ( 'FORCE_SSL_ADMIN', true);
define('WP_HOME','https://monsite.com');
define('WP_SITEURL','https://monsite.com');

4.1- Quelques pas pour l’hébergeur

N’hésitez pas à activer les modules dont il fait mention plus haut. Tenez votre système et vos logiciels à jour, soyez clair et honnête, expliquez pourquoi vous faites certains choix plutôt que d’autres (comme par exemple, que pour des raisons de sécurité vous avez désactiver (comme moi), la fonctionnalité phpinfo(); dont il est fait mention plus haut.

Imposer des limitations claires concernant la disposition des ressources. (Utilisez « ulimit » voir : Admin Linux).

Essayez d’avoir une section FAQ et écrivez un ou deux billets ou des tutoriels. Vérifiez les processus d’utilisation, la configuration DNS (http://www.intodns.com/)… Vous pouvez aussi mettre par défaut, ou à disposition, d’autres modules tels que Google Page Speed.

Enfin, installer Apache Benchmark et effectuez quelques tests de performance, « stressez » quelque peu votre machine. Vous pouvez aussi vérifier les données sur l’utilisation de la mémoire et du swap. Plus d’information ici : Mémoire physique et mémoire virtuelle – Red Hat Entreprise Linux

Pour libérer un peu d’espace, voir le cache se libérer, utilisez la commande suivante :

sync; echo 3 > /proc/sys/vm/drop_caches

Suivant echo, les options sont :
1 => Libère la mémoire des données en cache
2 => Libère la mémoire des données en tampon
3 => Libère la mémoire des données cache et tampon

(Cette section est à compléter. Merci de votre compréhension).


 

PARTIE 5- La sécurité

Encore une fois côté serveur, sous WHM par exemple, il est nécessaire d’activer au minimum des outils de protection tels que CSF/LFD (Config Server Security & Firewall).

L’installation est simple et vous serez guidé pas à pas dans votre configuration pour augmenter votre score sur une échelle de 140. Bien entendu, l’important encore une fois est d’arriver à dépasser le plus possible la moyenne. Je ne sais pas si un score de 140 est possible sans perdre certaines fonctionnalités parfois très utiles.
Personnellement, je crois avoir un score d’environ 135 et j’en suis très satisfaite 😉

Pensez à modifier certains ports et à bloquer l’accès aux ports inutilisés. Toujours assez simple de préciser quels ports sont autorisés via la configuration CSF une fois qu’il est activé.
Le plus compliqué à mon sens est de connaître la syntaxe pour autoriser une plage de ports dans la section « Firewall Configuration »
Par exemple, si ma plage couvre de 3000 à 5000 pour les ports entrants, voici ce qu’il faudrait entrer, précédez d’un virgule, dans TCP_IN sous Allow incoming TCP ports :

3000:5000

Pour la configuration générale de CSF, je vous invite à référer à l’aide iweb « Installer et configurer ConfigServer Security & Firewall (CSF) »

Bien entendu, vous pouvez activer en plus CPHulk Brute Force Protection pour gérer facilement vos listes noire et blanche d’adresses IP.

Nombre de configuration peuvent aussi être faites via les paramètres de réglages bien entendu. Voici un tutoriel WHM sur le sujet : « Tweak Settings Configurer les paramètres WHM facilement ».

(À venir sécurisé Exim)

Maintenant, pour ce qui est des propriétaires de sites hébergés, si vous utilisez des thèmes et des plugins gratuits, soyez prudents et ne faites confiances qu’à des outils reconnus (et encore…).

Employez des alias d’adresse courriel si vous diffuser vos coordonnées sur le web, choisissez des mots de passe complexes, assez longs, avec des chiffres, des majuscules et des caractères spéciaux.

Vous pouvez limitez l’accès à des pages d’administration en précisant via .htacces quel ip est autorisé à accéder.

Exemple pour l’administration WordPress – via fichier .htaccess

<Files wp-config.php>
    order deny,allow
    Deny from all
    allow from 107.171.143.40
</Files> 

Pour les configurations Drupal, WordPress ou autres, éviter de conserver les fichiers readme.txt (ou .html) qui donnent trop d’information.
Protégez aussi l’accès aux fichiers de configuration.

Via fichier .htaccess

<Files wp-config.php>
    order allow,deny
    deny from all
</Files> 

Lorsque vous achetez un nom de domaine, vérifiez que vous en êtes bien le propriétaire et que le contact administratif c’est vous.

Vous pouvez effectuer un Whois en ligne de commande ou utiliser les services de Tucows.

Si vous réalisez que vous n’êtes pas propriétaire et/ou Administrative User, effectuez les changements directement auprès du registraire ou en passant par les services du revendeur. Cela vous évitera des mauvaises surprises.

Imaginez que votre revendeur quitte pour un voyage dans le sud durant plusieurs jours et qu’il oublie de renouveler votre nom qui vient à échéance durant cette même période. Tout à coup votre site n’est plus en ligne. Bien entendu, vous tenter de le joindre mais sans succès. Vous prenez donc la décision de contactez les autorités compétentes accrédités, mais celles-ci vous informe que, malheureusement, votre nom n’est pas associé au domaine. Vous devez donc fournir une preuve d’achat et d’identité si vous voulez qu’on vous aide. Le processus est assez long et il coûtait, à l’époque 100$ US !


 

PARTIE 6- Les métadonnées/microdonnées

6.1- Métadonnées

Si vous n’avez pas accès au code source, plusieurs outils existent dans la plupart des CMS populaires pour vous aider à personnaliser et générer dynamiquement les informations transmises en en-tête de votre site.

Il ne faut pas négliger les balises title et description (maximum 150 caractères). Il y a aussi cette image qui vaut mille mot et qui sera associée à votre page…

Par exemple, dans le cas de sitedartiste.com, pour un individu nommée Artiste Meilleur on pourrait retrouver :

Code HTML

<title>Artiste Meilleur | Site web du meilleur artiste</title>
<meta name="description" content="ARTISTE MEILLEUR | Événements, Photos, et Nouvelles du meilleur artiste au monde.">
<link rel="image_src" href="http://sitedartiste.com/images/mon_joli_minois_a_diffuser.jpg" />

Idéalement, on précise l’encodage via la balise header ou on se le fera dire :

Code PHP

header("Content-Type: text/html; charset=utf-8");

Si notre site est mobile friendly, il est responsive et s’adapte aux différents écrans, on ajoutera ceci pour que cela fonctionne (maximum-scale=3.0 et user-scalable=yes sont personnalisables bien entendu):

Code HTML

<meta name="viewport" content="maximum-scale=3.0, user-scalable=yes">
<meta name="viewport" content="width=device-width">
<meta name="viewport" content="initial-scale=1.0">

Maintenant, le bonbon pour les animateurs de communauté web, l’Open Graph Protocol utilisé par Facebook.
On reprend les métas que l’on vient de voir ci-haut, mais cette fois on utilise l’attribut property :

Code HTML

<meta property="og:title" content="Artiste Meilleur | Site web du meilleur artiste"/>
<meta property="og:description" content="ARTISTE MEILLEUR | Événements, Photos, et Nouvelles du meilleur artiste au monde." />
<meta property="og:url" content=" http://sitedartiste.com/ "/>
<meta property="og:image" content="http://sitedartiste.com/images/mon_joli_minois_a_diffuser.jpg"/>

*Notez que l’image associée à la méta doit avoir idéalement des dimensions minimales de 600 x 315 px.

Pour quelqu’un qui a déjà une fan page ou est Facebook Developer, d’autres options existent tel que :

Code HTML

<meta property="fb:app_id" content="[FB_APP_ID]" "/>

Je vous invite à consulter la doc sur le sujet, disponible directement depuis developers.facebook.com

Maintenant, pour vous aider, si vous suivez ce lien https://developers.facebook.com/tools/debug/og/object vous êtes en mesure de vérifier et confirmer les informations relatives à la lecture de vos métadonnées. Ainsi, si vous devez effectuer des corrections au niveau de certaines métas, vous pouvez effectuer une mise à jour directement auprès de Facebook en cliquant simplement sur « Fetch new scrape information ».

Et voilà, la mise à jour est effective. Plus besoin d’attendre que les robots passent et repassent, vous avez le contrôle !

6.1- Microdonnées

Surtout si vous avez un site marchant, les microdonnées sont un essentiel et je vous invite à vous informer sur la page suivante : Microdonnées pour Google Shopping

Brièvement, les microdonnées permettent d’avoir des résultats de recherche plus visibles.
Ces données se retrouvent directement dans le code source de votre page, et non en en-tête entre les balises<head></head>.

Voici une ébauche sur Wikipédia : Microdonnée | Wikipédia
Puis schema.org pour vous aider à vous y retrouver.
Ensuite, pour tester votre structure : Structured Data Testing Tool

Exemple d’utilisation:

HTML

<div itemscope itemtype="http://schema.org/Organization">
  <a itemprop="url" href="http://www.monsupersite.com/">Home</a>
  <img itemprop="logo" src="http://www.monsupersite.com/logo.png" />
</div>

Ce point sera plus détaillé prochainement mais il fait très bien le pont avec la partie suivante. 😉


 

PARTIE 7- Les outils complémentaires pour la diffusion et le partage

Si ce n’est pas déjà fait, retourner au point précédent et lisez la section concernant l’aide Facebook et l’Open Graph Protocol.
Ensuite, vous pourrez fièrement mettre des boutons partage Google+, Facebook, Twitter, Instagram et autres.

L’échange des données étant structuré, l’information aura la forme que vous lui aurez fait prendre et les ponts se feront d’eux-mêmes.
Vous pouvez synchroniser vos comptes Twitter et Facebook, partager sur Google +, normalement tout aura l’apparence voulue et contiendra les données souhaitées.

N’hésitez pas à créer des infolettres ou des e-card pour promouvoir vos activités et sites.
Attention cependant de respecter la règle du opt-in ou du double opt-in !

Mailchimp peut vous être utile, mais si vous voulez être autonome, avoir contrôle sur tout et que vous avez peu de limitations serveur, un simple client courriel comme Thunderbird est assez bien équipé pour permettre l’envoi d’infolettres personnalisées malgré qu’il soit de masse. (La programmation et l’envoi infolettre feront l’objet d’un prochain billet).

Utilisez des outils comme Google Analytic et des liens UTM pour constater les rendements, taux de rebond, etc.

Les outils pour webmaster de Google sont un incontournable :
Google Webmasters

Ajoutez et valider un site dont vous êtes le propriétaire :
Centre pour les webmasters dans Search Console

Déposer l’url de votre site :
Déposer un site via Search Console

Le site Comment ça marche nous renseigne ici sur les soumissions pour les autres moteurs de recherches :
http://www.commentcamarche.net/faq/10811-ajouter-son-site-dans-les-moteurs-de-recherche

Dans ce point j’ajouterai aussi l’intérêt de disposer d’un fil d’Ariane sur nos pages web quand on a un site plus en profondeur ou axé sur la recherche.

N’oublions pas non plus le protocole sitemap qui permet d’aviser les moteurs de recherches concernant les pages disponibles pour l’indexation (http://www.google.com/schemas/sitemap/0.84/).

Aussi, il ne faut pas hésiter à mettre sous forme de lien pertinent avec balise « title » les ressources mentionnées dans une page lorsqu’elles sont directement liées à son sujet.

Cherchez, sur Wikipédia, les liens brisés ou manquants pour lesquels vous pourriez apportés votre contribution.

Avant de conclure: il est important d’utiliser des urls canoniques afin de permettre une meilleure indexation de votre site; on veut éviter que les robots prennent ça pour du contenu dupliqué.

Pour rediriger sur une adresse officielle avec ou sans www il faut activer mod_rewrite. Ensuite, cette redirection peut se faire soit directement depuis Apache ou depuis le fichier .htaccess.

Via .htaccess

RewriteEngine On
RewriteCond %{HTTP_HOST} !^www\.site-example\.com [NC]
RewriteCond %{HTTP_HOST} !^$
RewriteRule ^/?(.*) http://www.site-example.com/$1 [L,R,NE] 

Finalement, vous êtes auteur de blogue ou de webzine ? N’attendez plus : Optimiser votre site pour la fonctionnalité « Articles de fond ».

 

*À venir sous peu : chargement différé et asynchrone, les différents types de redirection, PHP/FastCGI et utiliser un CDN.


 

Liens et références générales :

Google:
Google Webmasters
Support Google
Webmaster Central Blog

Autres:
Facebook Developers
apache.org
Server Configuration par Tutorials WHM-cPanel

 


Partagez cette page :

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *