Blog d'un Éternel Geek

Google monte au créneau et pénalise de nouveaux facteurs web

http://vivageek.com/data/images/css/googlefriendly3.jpg

 

G  oogle est le moteur de recherche par référence, on n'en doute pas. Il a récemment remis un coup de neuf dans son style se voyant sûrement menacés par des moteurs de recherche jeunots qui viennent le titiller sur un terrain où il n'est pas maître l'anonymat.

 

Seulement voilà, notre référencement dépend de son bon vouloir et nous devons respecter ses standards quel qu'il soit. D'autant plus qu'il a jusqu'à présent été cohérent avec le marché du web2.0.

 

La communication a changé dans le cloud. On ne vient plus sur un site par hasard mais surtout, on ne vient plus de la même façon. Si les geeks sont encore présents avec leurs bons vieux Pc voire au pire portable, les nouveaux détracteurs du geek web2.0 naviguent par le biais de leur mobile ou tablette.

 

De plus, on remarque que ces dernières années une recrudescence de l'utilisation à outrance de flash pub. Soyons honnête, on n'en peut plus de ces messages flashs qui s'ouvrent sans cesse sur notre écran devenant quasi envahissant.

 

Pire quand il s'agit de liens interstitiels, vous savez ces liens qui au lieu de vous amener vers la destination souhaitez, vous balance une page pleine avec une pub sur la dernière appli à télécharger qui changera votre existence (d'ailleurs largement utilisée par les pirates informatiques).

 

Je pense que Google a raison de mettre un frein à ces abus qui viennent empêcher les utilisateurs que nous sommes de profiter pleinement d'Internet.

 

Ce sont les trois points que google a décidé de pénaliser ce qui va, je pense permettre à des blogues ou page web plus honnête et défendable de faire leur trou. Je pense bien entendu à VivaGeek qui ne propose pas de lien interstitiel, ni pub flash et qui est lisible sur tout format écran PD, tablette et maintenant mobile.

 

En effet, VivaGeek a progressivement suivi les directives de googler et a glissé vers un mobile Friendly.

 

 

Les liens interstitiels c'est fini

 

 

Google n'en veut plus et je pense les auditeurs web non plus.

 

" A partir d’aujourd’hui, nous allons mettre à jour le test pour les sites mobiles pour indiquer que les sites devraient éviter de montrer des interstitiels de promo d’applications qui cachent une partie importante du contenu ", nous explique-t-on dans un billet de blog.

 

Donc, ce genre d'intrusion sauvage se verra sanctionner sévèrement par le moteur de recherche par  des pertes de positionnement.

 

Ne dramatisez pas si vous êtes dans ce genre de contexte, il suffit de remplacer vos pages pub par des bannières plus discrètes.

 

Ce n'est pas plus mal, ca trop de pub tue la pub.

 

La technologie flash ne passe pas le contrôle technique google

 

Google ne souhaite plus avoir à référencer des sites flashs et les soumet aussi à un ultimatum. Pourquoi ? La technologie actuelle se miniaturisant et surtout les tendances de navigations plutôt versé mobile ne sont pas compatibles avec un site en flash.

 

On les lit  très mal sur les nouveaux appareils utilisés tels que les Smartphones ou les tablettes. La navigation est compliquée, tout ne s’affiche pas et surtout aucun contenu n’en est vraiment puisqu’il s’agit d’animations.

 

Un site en Flash est difficilement référençable dans Google, car le moteur utilise des filtres et algorithmes spécifiques qui prennent en compte les contenus textuels. Google est un robot qui ne sait pas lire le flash, car ce type de technologie n’est pas adapté.

 

 

http://vivageek.com/data/images/css/flash-penalise-google.jpg

Bref, un site en Flash est un produit obsolète aux yeux de google qui lui absout même un petit message d'avertissement sur une recherche mobile, ce qui est peu gratifiant pour l'auditeur et encore moins pour le propriétaire.

Google donne le ton et précise une préférence pour les sites en HTML5, CSS3 et JavaScript.

 

 

Mobile friendly ou tu n'es pas mon ami

 

http://vivageek.com/data/images/css/googlefriendly2.jpg

 

Comme je l'ai dit la technologie et la façon de communiquer a évolué. On sait que la plupart des utilisateurs réseaux télécom sont constamment lockés sur leur téléphone mobile presque 24/24.

 

Au début, on ne s'en server que pour aller sur Facebook, Twitter et certains réseaux sociaux. Puis cela a été le tour de Youtube, mais de plus en plus on ne le lâche plus et le PC est délaissé même pour naviguer sur des sites ou pages web.

 

Dès lors, google à flairer ce changement de comportement et un site responsif uniquement sur des formats PC ou tablette ne suffit plus. Il faut être adaptable partout et surtout sur toutes les technologies tels que I -phone, Smartphone,…

 

Il l'avait annoncé que le label mobile Friendly serait obligatoire comme un examen de passage pour un bon référencement.

 

Comment savoir si je suis mobile friendly ?

 

Sur le site : mobile-friendly

 

http://vivageek.com/data/images/css/googlefriendly.jpg

 

Des sites comme Testiphone ou des émulateurs permettent aussi de vérifier votre compatibilité mobile au cas vous devriez travaillez dessus.

 

Comment devenir Mobile Friendly ?

 

Responsive à tout prix

 

http://vivageek.com/data/images/css/googlefriendly1.jpg
 
 

Vous voudriez également avoir un beau vert comme vivageek. Sachez que je me suis penché sur la question longuement et j'ai eu quelques difficultés au début, mais vous verrez qu'il est aisé de modifier soi-même son site pour qu'il passe le cap.

 

Plusieurs méthodes s'offrent à nous, en fait trois. Peut-être d'autres techniques sont envisageables, mais de base, j'en ai découvert trois.

 

La première utilisée un sous domaine. Tout comme les grosses plates-formes twitter, on peut utiliser un sous-domaine. C'est le serveur qui fait tout le travail. Il va sélectionner la page à renvoyer suivant l'appareil qui se présente à lui.

 

On peut par exemple faire une redirection à l'aide d'un fichier .htaccess ainsi :

 

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} "android|blackberry|googlebot-mobile|iemobile|ipad|iphone|ipod|opera mobile|palmos|webos" [NC]
RewriteRule ^$ http://m.example.com/ [L,R=302]
</IfModule>

 

On redirigera donc notre visiteur vers notre sous-domaine qui contient une copie de notre site adapté aux mobiles.

 

Cependant, cette méthode est lourde puisqu'elle demande plus de fichiers sur votre espace disque, et surtout en charge serveur avec des redirections rewriting qui vont distribuer les auditeurs suivants leurs technologies.

 

Étant donné que Google met en avant les sites compatibles et qu’il les place en première position dans les résultats de recherche, les pages de votre site seront difficilement visibles et généreront peu de trafic, tout simplement.

 

Mise à jour CMS

 

 

La 2e est plus simple, il vous suffit de chercher un thème responsive correspondant à votre CMS ou un plugiciel qui le fait pour vous en gardant votre thème actuel.

 

Si vous êtes attaché à votre thème, vous pouvez regarder si des plugiciels sont disponibles afin de le rendre mobile Friendly.

 

Sinon, il reste la 3esolution.

 

 

Responsive CSS

 

 

Le CSS3 a beaucoup d'atouts dont celui de permettre un tour de force en ce qui concerne le responsive et c'est celui que je préfère.

 

On va dans notre CSS rajouter des media queries. C'est un peu la formule magique pour mettre en place des effets responsive qui vont permettre d'associer le contenu CSS de votre site à tous les types d'appareils technologiques rencontrés.

 

Certains vont les placer dans des feuilles externes avec des noms évoquant l'appel de l'appareil, personnellement je préfère les laisser dans la même feuille CSS. On a tendance à se retrouver avec une feuille par ci et une autre par là, autant éviter à notre navigateur de charger encore plus de fichiers au démarrage.

 

Par exemple:

 

@media screen and (max-width: 480px) { Votre code CSS ici}

 

Exemple :

 
img {width: 500px;}@media (max-width: 500px){img {  width: 250px;}}

 

Vous allez à l'aide d'émulateur adapter le code CSS de votre site à l'intérieur de ces média queries. Cette méthode a l'avantage de ne pas avoir à changer le code HTML et surtout ne pas alourdir le site.

 

Je ne vous cache pas que plus votre site sera simple, plus vous aurez de facilité à le transformer.

 

Sur le site CSS-Tricks, vous avez des exemples de travail en media Queries.

Pour les images des techniques que j'ai tirées de mon ebook CSS Avançé m'ont permis de découvrir des possibilités intéressantes pour les images et les vidéos. Sur CSS trick une vidéo parle aussi de ses possibilités assez sympas :

 

 

Images à résolution adaptative

 

 

Img est une balise ancienne et beaucoup croient encore qu'elles testent la seule option, mais il se trompe. Depuis HTML5, on possède d'autres balises plus complexes, mais avec de multiples possibilités.

 

L'attribut srcset peut être une option. Imaginons que vous souhaitiez adapter une image header sans vraiment vous compliquer la vie. Vous crée vos images avec les formats correspondants :

 

Image-petite.jpg, image-moyenne.jpg, image-grande.jpg et votre image-normal.jpg

 

Vous intégrez ceci dans votre code ainsi :

 

<img src="http://vivageek.livehost.fr/ image-normal.jpg" alt="monheader" srcset=" image-petite.jpg, image-moyenne.jpg, image-grande.jpg" />

 

Ceci est une façon de faire mais on peut utiliser également picture ainsi :

 

<source>
<picture>
<source src="http://vivageek.livehost.fr/image-grande.jpg" >
<source media="(max-width: 800px)" srcset=" image-petite.jpg 1x, image-petite.jpg 2x" >
<img src="http://vivageek.livehost.fr/ image-normal.jpg" alt="monheader" >
</picture>

 

Comme vous le remarquez, j'utiloise source que l'on avait pu voir avec les Balises vidéo (un petit exemple de ce que HTML5 a de bon).

 

On a aussi l'attribut size qui fait le boulot de la même façon ainsi :

 

<img src="http://vivageek.livehost.fr/ image-normal.jpg" alt="monheader" srcset=" image-petite.jpg, image-moyenne.jpg, image-grande.jpg" sizes="(min-width: 500px) 50%, 100%" />

 

Plutôt pas mal, on se rend vite compte que bon nombre de solutions simple s'offrent à nous.

 

Moi j'ai préféré media Queries qui fonctionne bien et sans aucun souci au cas où je souhaite changer mon architecture HTML.

 

On peut aller encore plus loin avec HTML5 mais je pense qu'en cherchant un peu on a dans W3 qui en parle et le site reponsivimg.

 

Pour les vidéos, la manière que j'ai trouvée passe essentiellement par le CSS. On va en quelque sorte créé une classe video qui va rendre responsive. Ensuite, il suffit d'inclure dans un conteneur nos vidéos avec cette classe afin d'avoir une adaptation.

 

Il suffira comme on l'a vu de la diversifier avec les media Queries ou simplement avec :

 

video { width: 100% !important; height: auto !important; }

 

Vous pouvez diversifies la classe et l'adapter à tous les modèles sur CSS tricks, il l'explique très bien.

 

Ensuite, si vous utilisez un plugiciel comme tinymce pour écrire vos articles (perso moi je l'utilise en duo avec le source code), il suffit de l'intégré dans la partie correspondante du PHP pour qu'il mette en code :

 

<div class="videorespons"><iframe ..[…] /></div>

 

Et le tour est joué votre vidéo sera également responsive.

 

Dans tous les cas google souhaite mettre un coup de balai au site qui ne respecte pas la communication web2.0 et récompensé ceux qui lui font honneur.

 

Vous avez encore le temps mais ne tardez pas sinon vous avez des petites astuces comme JQuery Mobile est un système d'interface utilisateur basée sur le HTML5 conçu pour rendre les sites et applications qui sont accessibles sur tous les Smartphones, tablettes et ordinateurs de bureau Web sensibles.

 

Ou encore la plateforme Easypli qui permet gratuitement de créé son site mobile friendly.

 

Merci de m'avoir lu, à bientôt.

 

Pensez à partagez sur vos réseaux sociaux.






 Geek me     Je suis un Geek dans l'âme. 18 ans à silloner internet pour récolter des informations afin de comprendre son fonctionnement. Idéalement j'étudie également le comportement humain.

C'est afin de vous partager mes connaissances que j'ai ouvert ce blog alors je vous souhaite une bonne lecture.



À lire également


Écrire un commentaire

Votre adresse de messagerie ne sera pas publiée.

Quelle est la deuxième lettre du mot yqwjj ? :