Mes 72 meilleures idées pour améliorer votre référencement (SEO)
▻http://www.webrankinfo.com/dossiers/techniques/idees-seo
#seo
Mes 72 meilleures idées pour améliorer votre référencement (SEO)
▻http://www.webrankinfo.com/dossiers/techniques/idees-seo
#seo
Tous les chiffres clés sur Google : société, produits et services
▻http://www.webrankinfo.com/dossiers/google/chiffres-cles
Google est devenu gigantesque ! Voici toute une série de chiffres qui permettent de se rendre compte de la progression fulgurante de Google depuis son lancement en 1998...
Super amélioration de mon #plugin pour #SPIP, image_responsive :
►http://zone.spip.org/trac/spip-zone/browser/_plugins_/image_responsive
Cette fois, j’introduis la possibilité de fabriquer le code <picture><source>
complet pour complètement gérer les images responsive nativement (pour l’instant, dans Chrome).
L’idée, c’est l’introduction d’un quatrième paramètre dans ma fonction, ce qui permet de définir les media queries correspondant à chaque taille d’image.
Par exemple :
[(#LOGO_ARTICLE_NORMAL
|image_responsive{
0/50/100/200,
0,
0,
(max-width:470px)/(max-width:1009px)/
}
)]
La première variable (0/50/100/200
) est la liste des tailles d’images autorisées :
– 0 n’est pas une taille d’image, ça signifie simplement qu’au chargement de la page, le <img>
se fera sur rien.gif
– ensuite on autorise des images de 50 pixels, 100 pixels, 200 pixels (donc trois tailles).
Si on n’indique rien d’autre, on a le fonctionnement habituel du plugin : une fois la page chargée, un javascript calcule la taille de l’endroit qui contient cette image, et en fonction va appeler l’image à la bonne taille (et éventuellement en haute définition si écran haute déf.)
La seconde variable permettrait de forcer le chargement en « lazy load ». Comme la valeur est zéro (par défaut), ce mode est désactivé. Si on avait forcé la valeur à 1, alors l’image ne serait chargée que si elle visible à l’écran (ou bientôt visible en scrollant). Ça permet, si on a envie, de ne pas charger des images qui seraient bien plus loin en bas de page. Ici, il est important de laisser à zéro, parce qu’on veut un code complet qui se charge dès avant le lancement de la page (voir en préchargement).
La troisième variable est à zéro (par défaut). Si on met à un, alors on indique qu’on veut que les calculs se fassent sur la hauteur du conteneur, et non sur la largeur. Ici il faut laisser à zéro, je n’ai pas encore adapté mon code pour qu’il fonctionne avec les images alignées verticalement.
La quatrième variable est la nouvelle : si on décide de l’utiliser, alors on va permettre au plugin de fabriquer le code complet qui fait fonctionner les images responsive directement en HTML5. C’est alors bien plus rapide à l’affichage, et le pré-chargement fonctionne sur ces images.
Le code généré est le suivant :
<picture style='padding:0;padding-bottom:63.5593220339%' class='conteneur_image_responsive_h'>
<source media='(max-width:470px)'
srcset='
index.php?action=image_responsive&img=IMG/arton5.jpg&taille=50 1x,
index.php?action=image_responsive&img=IMG/arton5.jpg&taille=50&dpr=2 2x
'>
<source media='(max-width:1009px)'
srcset='
index.php?action=image_responsive&img=IMG/arton5.jpg&taille=100 1x,
index.php?action=image_responsive&img=IMG/arton5.jpg&taille=100&dpr=2 2x
'>
<source
srcset='
index.php?action=image_responsive&img=IMG/arton5.jpg&taille=200 1x,
index.php?action=image_responsive&img=IMG/arton5.jpg&taille=200&dpr=2 2x
'>
<img class='image_responsive' alt="" src='https://seenthis.net/rien.gif' data-src='IMG/arton5.jpg' data-l='2832' data-h='1800' data-tailles='[\"50\",\"100\",\"200\"]' />
</picture>
Ici, on avait les tailles autorisées : 0/50/100/200. On a donc trois tailles autorisées. Dans les medias queries, il nous faut donc définir trois valeurs correspondant à ces tailles d’images autorisées :(max-width:470px)/(max-width:1009px)/
Ce qui signifie :
– utiliser l’image de largeur 50 dans le cas (max-width:470px)
– utiliser celle de largeur 100 dans le cas (max-width:1009px)
– utiliser l’image de largeur 200 dans les autres cas (par défaut donc).
Noter le slash final, qui permet de voir qu’il y a bien une troisième valeur attendue (valeur vide).
Le plugin fabrique donc les <source>
correspondant à ces tailles, en indiquant à chaque fois l’image en définition 1x et l’image en haut définition (2x).
Sur les navigateurs qui comprennent ça (Chrome), ça fonctionne très bien : les images sont chargées bien plus rapidement (puisqu’on n’attend plus le chargement de la page, des JS et des CSS avant de lancer le chargement des images), et le preloader est censé prendre en compte ces informations. (Et si on désactive Javascript : ça fonctionne parfaitement sur ces navigateurs…)
Actuellement caniuse.com donne 40% des visiteurs compatibles (essentiellement : Chrome – donc c’est déjà pas rien) mais la prochaine version de Firefox va l’avoir, et vu que c’est Chrome c’est webkit, je ne vois pas pourquoi Safari traînerait encore longtemps. De toute façon, c’est un enrichissement progressif : si le navigateur ne pige pas, le plugin fonctionnera comme auparavant uniquement en Javascript. (Dommage quand même que ça ne fonctionne pas sur Safari mobile, quand même.)
Yes ! Je viens d’uploader la version 4.6 : maintenant tout cela fonctionne également avec les images définies par leur hauteur.
Je passe progressivement Flip-Zone sur le nouveau système :
▻http://fr.flip-zone.com/fashion/couture-1
Ce qui est amusant, évidemment, c’est de voir le site sous Chrome avec Javascript désactivé. Je me demande jusqu’où je peux essayer d’aller comme ça…
Bonjour
Ton plugin fonctionne très bien, merci. Par contre PageSpeed réclame des tailles aux images (width et height) et je n’ai pas trouvé comment les rajouter...
Il semblerai que ça devienne important d’optimiser aux mieux les versions mobiles ▻http://www.webrankinfo.com/dossiers/google-mobile/compatibilite-mobile-critere-seo#utm_source=wri
Merci
Tu es certaine que PageSpeed réclame encore les dimensions des images ? Parce qu’avec le responsive, ça n’a plus vraiment de sens (si tu regardes les nouvelles balises <picture>, d’ailleurs, il n’y a jamais de dimensions indiquées en dur dans le HTML). Tu n’aurais pas une version déjà un peu ancienne de Pagespeed (il y a de nombreuses choses qui étaient conseillées à une époque, et qui ne le sont plus).
Note qu’avec ce plugin, l’espace des images est tout de même réservé au chargement, même sans indiquer les dimensions, parce que le conteneur (là où va s’installer l’image), lui, est bien aux proportions de l’image (et l’image est positionnée en absolu à l’intérieur). Du coup, sauf erreur il n’y a pas de redraw
au chargement, ni d’effet de « sauté » lorsque les images sont chargées – or c’est bien à cela que servaient le fait d’indiquer en clair les dimensions des images.
Merci pour cette réponse.
Je suis d’accord avec toi pour dire que cela n’a plus vraiment de sens. J’utilise le PageSpeed de Google (webmastertools) et comme j’avais des incohérences au niveau des images, j’ai utilisé aussi GTmetrix (tout ça avec FF) et pour être sure, j’ai installé PageSpeed Insights sur Chrome.
Je te mets mes résultats et étrangement, sur le site où je n’ai pas encore utilisé le plugin, il ne note pas d’erreur sur la taille des images ou l’obligation de les redimensionner alors qu’elles sont beaucoup plus grandes (mais elles ont un width et un height).
Site avec plugin
▻http://gtmetrix.com/reports/www.gite-cabane-ali-nais.com/wXuhHBW6 (là, il a bien pris ma dimension de 180 de large)
▻https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fwww.gite-cabane-ali-nais.com%2FVotre-suite&tab= (là, il prend les images en 600 de large)
Site sans plugin
▻http://gtmetrix.com/reports/www.antilles-passion.com/TqU7BbNz
▻https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fwww.antilles-passion.com%2F
D’après tout ça, j’en suis arrivée à la conclusion qu’il vaut mieux mettre des tailles à la balise image même si c’est une aberration et je ne comprends pas non plus pourquoi il ne tient pas compte des data dans ses vérifications...
Jusqu’où s’arrêteront-ils ?
Aujourd’hui, on sait que Google exploite au maximum toutes les informations de géolocalisation enregistrées par les utilisateurs d’appareils mobiles
Google pourrait identifier les internautes chez les commerçants
▻http://www.webrankinfo.com/dossiers/adwords/tracking-conversions-magasins#utm_source=WebRankInfo
#ça-craint
Comment gérer le filtre Google de sur-optimisation du #référencement (#seo)
▻http://www.webrankinfo.com/dossiers/techniques/suroptimisation-referencement
« Comment éviter la pénalité de sur optimisation ? » Tags : référencement seo
A propos de référencement, comment se fait il que mes liens soient en nofollow sur senthis alors que tout le monde est en dofollow ? Merci.
@aurelie10 si tu l’as remarqué c’est que tu cherches la faille à spam, petite coquine va :-D
Infographie : le référencement en 2013, à faire et à éviter
▻http://www.webrankinfo.com/dossiers/conseils/referencement-2013
Tutoriel sur l’URL Rewriting (réécriture d’URL)
►http://www.webrankinfo.com/dossiers/techniques/tutoriel-url-rewriting#reecriture
Le format de l’URL à réécrire est basé sur les expressions régulières, dont la base devra être acquise pour pouvoir définir des règles de réécriture. Ne vous inquiétez pas, pour la plupart des cas c’est très simple.
Voici la liste des éléments pris en considération dans les règles de réécriture :
On dirait que certains ont trouvé une parade aux contenus de qualité variable sur leurs domaines : les sous-domaines !
Les sous-domaines, une solution à Google Panda ?
►http://www.webrankinfo.com/dossiers/techniques/panda-sous-domaines
C’est sans doute la première fois qu’on entend parler d’un gros site disant avoir trouvé une solution pour récupérer (une partie de) son trafic après avoir été impacté par Panda. En résumé, ce portail d’articles isole ses contenus dans des sous-domaines... Est-ce réellement la solution ?
#seo #référencement #google #panda #qualité #fermes_de_contenu
@stephane, je n’entends pas te faire changer d’avis sur les conseils en référencement. Ton incrédulité dans ce domaine n’est pas nouvelle. Néanmoins, je te rejoins en cela que le coup des sous-domaines reste très superficiel et pas du tout pérenne.
Ce qu’il faut, c’est bel et bien privilégier le contenu de qualité, ce que la plupart des responsables éditoriaux de sites refusent de comprendre, parce que ça coûte plus cher que de déplacer des dossiers vers des sous-domaines, ou encore importer un flux RSS et de changer le titre de la page.
D’ailleurs, dès que je recommande à mes clients de rédiger du contenu sur leur site, parce qu’ils sont 100 (fréquent) à 100.000 (déjà vu) concurrents qui utilisent strictement le même flux XML fourni par le fournisseur, en leur expliquant qu’il faut bien une heure par fiche produit pour donner une description et des conseils pertinents (les gens ont besoin d’être rassurés, pas de lire une fiche produit réduite à « longue et puissante » pour — véridique, j’ai eu ce cas — décrire une balle de golf), ou encore qu’il faut fournir des guides de conseils d’achat à disposition des clients (quoi ? les dossiers fnac ? jamais entendu parler ?), il n’y a plus personne. :-D
Les clients veulent une potion magique. Les sous-domaines en sont une composante. :-D