Au détour d’un tweet qui parlait de Logiciel Libre, j’ai laissé mon crayon dessiner librement sur mon carnet. En rentrant, j’ai dégainé Illustrator pour fixer mes idées. Ce travail de recherche créatif est un projet personnel devenu collectif par la force des choses, puisque j’ai tenu compte des suggestions et des critiques des membres de Google+ et de Twitter où chaque version du projet a été largement discutée. Je précise d’emblée que je ne suis pas un expert ès licences libres, ce qui fait que j’ai pu faire — à l’insu de mon plein gré — des rapprochements visuels allant à l’encontre de la philosophie du mouvement Open Source ou du Logiciel Libre (1). 

Version 2 & 1

• Le libre prend son envol (les oiseaux)
• Le libre, ça pousse (jeu sur les verticales)
• Le libre est nourricier, retour à la nature (l’arbre, les oiseaux, les couleurs)

Version 3

• Plus viril,
• Moins « écolo »,
• Moins « bio »,
• Plus « futuriste » (si si),
• Axé sur le partage et la redistribution.

Possibilité de réduire le logo au L de LIBRE avec l’étoile !

Version 5 & 4

J’ai troqué l’expression « Logiciel Libre » par une traduction française d’Open source proposée par +Laurent Gloaguen (une traduction littérale aurait donné Code source ouvert) qui a l’avantage de conserver le terme « libre » pour faire une sorte de synthèse entre les deux mouvements.

J’en ai profité aussi pour ajouter une référence au copyleft avec le symbole du copyright inversé. Le logo peut ainsi se lire également comme une ode aux sources libres.

Enfin, la baseline reste fidèle à l’esprit du Logiciel Libre.

Version finale (ou presque)

Le fil directeur de cette version 0.8 est de supprimer le superflu et de garder l’essentiel pour avoir un logo plus ramassé, plus compact et plus lisible.

Par rapport à l’ancienne version :

• Suppression du mot code, inutile, puisque finalement l’idée est de partager des sources, qu’il s’agisse de code ou de .psd .ai, etc.
• Suppression de la barre de progression : trop présente par rapport à sa signification.

Google+ comme facilitateur d’expérimentations logotypiennes

Je tiens à remercier tous les Plussiens et les Plussiennes qui ont apporté leur contribution sous forme de critiques, d’encouragements et de suggestions sur Google+ :

1. Version 0.8 : http://plus.tl/3q
2. Version 0.7 : http://plus.tl/3j
3. Version 0.6 : http://plus.tl/3i
4. Version 0.5 : http://plus.tl/3g
5. Version 0.4 : http://plus.tl/38
6. Version 0.3 : http://plus.tl/31
7. Version 0.2 : http://plus.tl/2T
8. Version 0.1 : http://plus.tl/2Q

La richesse des échanges prouve que, loin d’être inutile ou redondant, Google+ s’avère un excellent medium pour les créatifs de tout poil qui voudraient présenter leur travaux finis ou en cours d’élaboration.

plus.tl/bruno

(1) Bon ok, j’avoue que la version Soviet était faite exprès pour réveiller les consciences :o)

Articles sur le même sujet

• WordPress je thème
• Super Formateur HTML & CSS bientôt dans la place ?
• 8 composés HTML pour le logo et la « baseline » et leur potentiel SEO
• Quelques propositions de logo pour Worth1000
• Un « Logothic » pour WordPress Basics

Schema.org propose un ensemble de micro-données hiérarchisé destiné à donner du sens au marquage HTML qui structure les pages web. Ce système complet de microdatas est comparable à RDFa, à ceci près qu’il est proposé conjointement par Google, Bing et Yahoo! pour enrichir les résultats de leurs moteurs de recherche respectifs.

Pour vous faire une idée de la richesse de ce vocabulaire commun, il suffit de jeter un oeil sur l’ensemble de la hiérarchie disponible sur la page The Type Hierarchy. On le voit, ce vocabulaire a l’ambition de taguer l’ensemble de la production culturelle humaine, et plus à venir.

Thing

Au sommet de cette hiérarchie de micro-données, on trouve la «chose».Thing est décomposée en:

• CreativeWork,
• Event,
• Intangible,
• Organization,
• Person,
• Place,
• Product.

CreativeWork

Chaque élément est lui-même structuré en sous-ensemble. Pour CreativeWork, nous avons par exemple :

• Article,
• Blog,
• Book,
• ItemList,
• Map,
• MediaObject,
• Movie,
• MusicPlaylist,
• MusicRecording,
• Painting,
• Photograph,
• Recipe,
• Review,
• Sculpture,
• TVEpisode,
• TVSeason,
• TVSerie,
• WebPage,
• WebPageElement.

WebPageElement

Parmi les éléments qui permettent d’ajouter du sens aux balises HTML pour préciser leur portée. Par exemple, WebPageElement se subdivise en :

• SiteNavigationElement,
• Table,
• WPAdBlock,
• WPFooter,
• WPHeader,
• WPSideBar.

Exemple d’utilisation du schema « Movie »

J’ai repris un exemple de la documentation de schema.org en prenant la liberté de modifier le balisage HTML initialement proposé pour ajouter un peu plus de sémantique via une liste de définition. Un peu dans l’esprit de ce que j’avais fait pour le microformat hCard, souvent expliqué avec des exemples de marquage HTML un peu «léger».

<dl>
    <dt>Avatar</dt>
     <dd>Director: James Cameron (born August 16, 1954)</dd>
     <dd>Science fiction</dd>
     <dd><a href="../movies/avatar-theatrical-trailer.html">Trailer</a></dd>
</dl>

<dl itemscope itemtype ="http://schema.org/Movie">
    <dt itemprop="name">Avatar</dt>
    <dd>Director: <span itemprop="director">James Cameron</span> (born August 16, 1954)</dd>
    <dd itemprop="genre">Science fiction</dd>
    <dd><a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">Trailer</a></dd>
</dl>

RDFa c’est fini ?

D’après Google, les site utilisant RDFa continueront à être valorisés en tant que Rich Snippets mais il ne dit pas pendant combien de temps…

Enfin une solution stable et pérenne pour enrichir nos données ?

Je suis un farouche supporter des microformats, mais j’ai toujours gardé également à l’esprit qu’il ne s’agissait globalement que d’un exercice de style. Je n’ai jamais pu observer un quelconque impact dans le fait de mettre des classes microformatées dans mes balises. Avec les schémas proposés par Google Bing et Yahoo! nous aurons peut-être plus de chances de voir nos efforts enfin récompensés. A tester et à voir.

→ Consulter HTML Microdata du W3C

Articles sur le même sujet

• Le prêt-à-bloguer bride-t-il la créativité ?
• Sites de contenus vs sites commerciaux ?
• Optimiser son blog pour le référencement est inutile dans 80% des cas
• Goopilation — Les blogs officiels de Google traduits en français
• Quelques lignes de PHP pour protéger la SERP-diversité

Mon petit manifeste concernant la création des balises logo et motto dans les spécifications HTML5 n’a pas encore eu l’effet escompté. En attendant que le W3C valide cette modeste proposition, les enveloppeurs Web font preuve d’imagination. Voici un florilège de composés HTML (HTML Compound) plus ou moins sémantiques pour baliser l’identité d’un site internet. Cerise sur le SEO, j’ai demandé à Didier Sampaolo de nous dire ce qu’il pense — ou ce que Google pense — des différentes solutions présentées. @dsampaolo est éditeur du site Brave New World et consultant e-business spécialisé en référencement naturel.

Ces marquages HTML trouvés sur le Web (pour la plupart) seront brièvement commentés par mes soins, puis par l’expert SEO. J’ai évoqué la CSS pour le premier exemple seulement pour alléger l’article. Grosso modo, dans ce contexte, les CSS sont souvent utilisées pour afficher une image en background d’une balise et «évacuer» le texte avec display: none, text-indent: -99999em ou position: absolute, en ajoutant éventuellement une balise span, comme dans h1 span { position: absolute; top: -9999px; }.

1. Logo texte dans «h1»

<div id="top">
    <h1>
        <a href="/">ici &amp; ailleurs</a>
    </h1>
</div>

background: transparent url(top_bg.png) no-repeat 0px 3px;

#top h1 {
    font-size: 0px;
    text-indent: -5000px;
}

L’avis de l’expert SEO — Le texte est positionné « hors de l’écran » via CSS, et donc caché pour le visiteur. Je ne pense pas qu’un site ait déjà été pénalisé pour cette seule raison (cela semblerait un peu abusif), mais Google demande aux webmasters d’éviter ce genre de techniques, qui pourraient donner l’impression que leur site est « peu fiable » (source Google). Note : j’aurais plutôt utilisé un lien absolu reprenant l’URL complète de la homepage plutôt qu’un "/" qui signifie « vers la racine du site ».

2. Logo texte dans «h1» et Motto dans «p»

Un marquage HTML similaire avec une tagline à la clé :

<div id='logo'>
    <h1><a href="http://t37.net/">Ergonomie Web, Expérience Utilisateur et Ruby On Rails</a></h1>
    <p>Blog professionnel de Frédéric de Villamil sur les métiers du web</p>
</div>

Ces deux premiers exemples sont probablement la forme la plus courante en raison de leur simplicité et d’une certaine logique. La marque répétée sur l’ensemble des pages du site se voit attribuer une balise d’en-tête de premier niveau. Au temps de HTML 4 ou XHTML 1.0 on s’interrogeait sur le bien-fondé de cette utilisation d’une précieuse balise h1 que l’on réserve normalement aux titres des articles. Le débat est encore houleux entre les partisan de la balise h1 unique pour l’ensemble de la page et ceux qui voudrait en mettre partout. Avec HTML5, les intégrateurs peuvent utiliser au moins une balise h1 par section…

L’avis de l’expert SEO — Etant partisan de la balise h1 unique pour chaque page, je trouve dommage de l’utiliser pour un logo commun à toutes les pages du site. Cela ne permet pas de différencier sémantiquement les pages entre elles. Le p, ici, est neutre, et permet d’améliorer la densité des mots-clefs qu’il contient. Pour preuve, le blog ressort très bien sur Google quand on cherche le nom de son auteur.

Mise à jour (14/11/2010) : comme le fait remarquer Frédéric dans les commentaires, le fragment de code a été prélevé sur la page d’accueil. Sur http://t37.net, le marquage HTML pour la page affichant les articles présente une différence importante : la balise h1 est remplacée par une balise p.

<div id='logo'>
    <p id='title'><a href="http://t37.net">Ergonomie Web, Expérience Utilisateur et Ruby On Rails</a></p>
    <p>Frédéric de Villamil analyse l'écosystème Web en temps presque réel</p>
</div>

3. Logo image dans «div»

<div id="logo">
    <a title="Le blog de intégrateur HTML & CSS" href="http://css4design.com/">
        <img src="css-4-design.png" alt="css 4 design" />
    </a>
</div>

Voici le marquage que j’utilise sur ce blog : pas de balise d’en-tête, l’image est purement décorative et permet d’identifier le site lors de l’impression de la page. Le premier élément h1 que l’on trouve dans la page est le titre des articles.

L’avis de l’expert SEO — Voilà qui me semble très bien. Les balises utilisées (div) sont sémantiquement neutres et permettent de réserver les éléments h1 pour des données contextuelles ciblées. L’utilisation combinée du title sur le lien et du alt sur l’image permet aux moteurs de savoir précisément de quoi parle la homepage du blog, et n’impacte pas la page en cours, qu’il reste possible d’optimiser finement.

4. Logo image et Motto dans «span» enveloppés dans «address»

<div="header">
    <address id="site_contact" class="vcard">
        <a class="url home bookmark" href="http://identi.ca/">
            <img class="logo photo" src="http://theme.status.net/0.9.5/identica/logo.png" alt="Identi.ca"/>
            <span class="fn org">Identi.ca</span>
        </a>
        <span class="poweredby">propulsé par <a href="http://status.net/">StatusNet</a></span>
    </address>
</div>

Source : http://identi.ca

L’avis de l’expert SEO — Effectivement, ce balisage est un peu surprenant mais ne manque pas de sens. Google a annoncé sa volonté d’utiliser de plus en plus les microformats (dont hCard) qui permettent de structurer l’information. Identi.ca fait un pari à long terme sur la généralisation des traitements de ces formats, qui permettront, à terme, une mise en avant visuelle dans les pages de résultats de recherches sur les moteurs (qu’on appelle SERP’s, pour Search Engines Results Pages).

5. Logo image dans «h1» et logo texte dans «span»

<h1 class="logo">
    <a tabindex="2" accesskey="1" href="/">
        <img src="/logo.png" width="90" height="53" alt="W3C" />
    </a>
    <span class="alt-logo">W3C</span>
</h1>

L’avis de l’expert SEO — Là encore, l’utilisation d’une balise h1 commune à toutes les pages est à déplorer. A mon sens, cette balise peut (et donc doit) qualifier la page en cours, et non l’ensemble du site.

6. Logo image dans «h1» avec baseline évènementielle

<div id="title" class="vevent">
    <h1 class="span-5">
        <img class="summary" src="/img/paris-web.png" alt="Paris-Web" title="" width="178" height="36">
        <img class="print" src="/img/paris-web-print.png" alt="" title="" width="202" height="36" />
    </h1>
    <abbr class="dtstart" title="2010-10-14"><!-- --></abbr>
    <abbr class="dtend" title="2010-10-16"><!-- --></abbr>
    <p class="baseline">
        <img src="/img/du_14_au_16_octobre_2010.png" alt="Du 14 au 16 octobre 2010" title="" width="202" height="36" />
        <span class="hide">
            à <span class="location">Paris</span>.
        </span>
    </p>
    <hr class="hide">
</div>

Actualité oblige, voici le marquage choisi pour le site Paris Web. Un peu complexes au premier abord, les choix s’expliquent par la nature évènementielle du site, d’où l’image réservée à l’impression ou les dates de début et de fin.

L’avis de l’expert SEO — Comme Identi.ca, Paris Web fait le pari des microformats en utilisant hCalendar, qui semble adapté pour de l’évènementiel. La prise en charge des microformats par Google reste à ce jour aléatoire (au mieux), mais reste une piste très intéressante car sémantiquement très poussée, et normalisée.

7. Logo image dans «span»

<div id="tete">
    <span><img src="/style/ici-michel-fortin.png" alt="ici Michel Fortin" /></span>
    <ul>
        <li><strong>Journal</strong></li>
        <li><a href="/logiciels/">Logiciels</a></li>
        <li><a href="/services/">Services</a></li>
        <li><a href="/joindre/">Me joindre</a></li>
        <li class="alt"><a href="/weblog/" hreflang="en">English</a></li>
    </ul>
</div>

Source : http://michelf.com/journal

L’avis de l’expert SEO — L’utilisation de balises neutres (div, span, ul…) est une bonne chose (les h1 étant libres d’être utilisés pour le contenu de la page), mais la mise en avant du menu de navigation est un choix qu’il faut assumer. L’écueil vient plutôt des pages que l’on va placer dans le menu : ces pages seront linkées depuis toutes les pages du site, dès le début du code-source, et seront donc sur-pondérées aux yeux des moteurs. Il faut les choisir avec soin, et se limiter à quelques pages. Le lien vers la page Contact (qui n’a que très peu de valeur ajoutée en référencement) pourrait être caché (en utilisant du Javascript).

8. Logo texte et image dans «dt» et motto dans «dd»

<dl>
    <dt>Nom du site</dt>
    <dt><img src="" alt="logo du site"></dt>
    <dd>HTML5 & CSS3, vous le savez, c'est ma grande passion !</dd>
</dl>

<dialog>
    <dt>Nom du site</dt>
    <dt><img src="" alt="logo du site"></dt>
    <dd>Pinailler, c'est mon dada !</dd>
</dialog>

@media aural {
    dialog {
        voice-family: betty, female;
    }
}

La conclusion de l’expert SEO

Lorsqu’on conçoit le code HTML d’un site, il faut garder à l’esprit qu’un moteur de recherche a besoin d’être guidé. Je recommande d’utiliser les balises h1 à h3 de manière à ce qu’en les lisant, on ait une sorte de « plan de la page » (rappelez-vous de vos cours : grand I, petit b, etc.) qui suffira à la résumer. De cette manière, les moteurs sauront d’emblée quel est (ou sont) le(s) thème(s) de la page, et par voie de conséquence, quand la présenter à l’internaute qui effectue une recherche. Pour les balisages communs à toutes les pages du site, je recommande l’utilisation d’éléments sémantiquement « neutres » (comme div et span).

La conclusion de l’intégrateur

La banalité et la récurrence de la présence du logo et du slogan aurait pu laisser supposer une relative homogénéïté des pratiques. Il n’en est rien :  on trouve un nombre important de combinaisons. Certaines sont sémantiques mais ne sont pas optimisées en terme de référencement ; d’autres ne paient pas de mine, mais permettent aux articles de transmettre plus de «jus» aux termes et aux expressions utilisées.

A part celui que j’utilise déjà, les deux derniers composés HTML ont ma préférence. Ils permettent de lier sémantiquement le nom du site avec sa baseline (ainsi que le logo) sans utiliser de balise hiérarchique h1 ou de balise de contenu p.

Par ailleurs — et même si on peut considérer l’absence de feuille de style comme une légende urbaine — j’aime assurer un maximum de lisibilité en dehors de toute mise en forme : le contenu doit être «tout terrain» même s’il ne sort que rarement accompagné sans CSS ou Javascript.

Merci à Didier Sampaolo d’avoir pris le temps de se pencher sur ces composés HTML et d’avoir donné un point de vue extérieur, ce qui donne à cet article un supplément d’âme :-)

Articles sur le même sujet

• Manifeste pour la création des éléments LOGO et MOTTO dans HTML5
• Une solution CSS accessible pour remplacer du texte HTML par une image
• Quelques notes sur la balise h1 avec HTML5
• Aperçu instantané de Google, Webdesign et référencement naturel
• Référencement de sites Web — Chassez le naturel, il revient au SEO !

La rédaction Web et le référencement naturel vont bien ensemble en raison du fonctionnement des moteurs de recherche qui indexent les textes depuis toujours. Il a fallu attendre 2001 pour les images en ce qui concerne Google, ce qui poussé les intégraphistes orientés SEO à mieux nommer leurs fichiers. Les visuels utilisés dans un article sont devenus un atout supplémentaire dans l’acquisition de trafic. Les textes et les images ont une incidence directe sur le référencement et le positionnement d’une page, mais ce n’est pas le cas du design, de l’apparence de cette page. Enfin, jusqu’à présent… La nouvelle fonction « Aperçus instantanés » (Instant Preview) de Google permet de prévisualiser la page de destination depuis les SERP’s, ce qui pourrait bien changer la face du Web et faire entrer le Webdesign dans une nouvelle dimension. Rien que ça.

Deux mots sur l’algorithme de Google

Le classement des pages par Google tient compte de nombreux critères. Grosso modo, plus les liens extérieurs qui pointent vers vos pages thématiques sont nombreux, plus vous aurez des chances d’apparaitre en bonne position sur ces mêmes thématiques. Le PageRank officialise les choses. A côté de ce principe général, Google pondère ses résultats avec, par exemple, le nombre de clics effectués sur une page par rapport au nombre de fois où elle apparait dans les résultats (consultez les outils Google pour Webmasters pour plus d’information).

Les composantes de l’algorithme de classement des pages par Google. Surveillez votre CTR !

Google utilise déjà une forme d’enchère similaire pour les Adwords : plus votre annonce est cliquée et plus elle apparait en haut des résultats avec un  coût par clic (CPC) à la baisse. Si votre annonce intéresse les visiteurs (qu’il s’agisse de la nature du produit ou de la manière dont vous présentez les choses) Google vous récompense pour vos efforts.

Lisez le blog de Patrice Albertus (Search marketer) pour en savoir plus sur les questions liées au marketing pour les moteurs de recherche.

Aperçu instantané

De la même manière, la fonction Aperçus instantanés va inciter les visiteurs à parcourir les différents aperçus proposés, et ce d’autant plus que l’affichage des aperçus est rapide et généreux, ce qui ne doit pas être un hasard quand on connait la hantise de Google concernant les performances d’affichage de sa page de résultats.

Le visiteur pourra donc faire son choix entre… Entre quoi, au juste ? Ah oui, entre :

• Le design qui lui semblera le plus cohérent avec ce qu’il s’attend à trouver,
• La page qui sera la plus lisible ou la plus avenante,
• La page qui proposera le plus de visuels allèchants,
• La page qui aura le logo ou le motto le plus accrocheur,
• La page dont le design sera plus ou moins moderne en fonction des goûts de l’utilisateur,
• Une site d’apparence institutionnel ou un blogzine,
• Un vrai site ou un MFA ^^
• etc.

C’est la petite loupe à côté du titre qui permet d’activer l’aperçu instantané (Instant Preview). Cliquez pour agrandir l’image.

Le Webdesign, ce n’est pas juste pour faire joli !

Avec la possibilité de comparer le design des pages directement dans les SERP’s, les clics des visiteur risquent d’influer fortement sur le positionnement des pages proposées en première intention par Google. Après la prise en compte de la qualité rédactionnelle, le design et la direction artistique pourraient devenir des éléments fondamentaux (comprendre : pas uniquement pour faire joli) qu’il faudra penser dès le départ pour optimiser l’expérience utilisateur avant même que le visiteur ne se soit rendu sur votre site. Encore une avancée qui devrait rapprocher les différents intervenants de la chaine de production Web !

Articles sur le même sujet

• Ecrire pour Google : des mots-clés au clickrank
• 8 composés HTML pour le logo et la « baseline » et leur potentiel SEO
• Référencement de sites Web — Chassez le naturel, il revient au SEO !
• J’ai référencé mon site sur plus de 400 moteurs de recherche et annuaires de liens, j’ai bon ?
• Une solution CSS accessible pour remplacer du texte HTML par une image

Comme toutes les disciplines graphiques, la conception de modèle de site internet (Webdesign) est traversée par les modes et les tendances. Parmi elles, le design minimaliste (style épuré, typographie fine, utilisation parcimonieuse des visuels, grille de mise en page tirée au cordeau) est sans doute le plus répandu. C’est certainement celui qui est amené à perdurer en raison de son faible potentiel de lassitude. Toutefois, il ne faut pas confondre ce style épuré avec le style «sans style». Sorte de design pauvre mis au service d’un contenu pré-mâché où le contenant n’a d’intérêt que s’il permet à Google d’avaler les contenus sans avoir le hoquet.

Force est de constater que le fait d’avoir mis l’installation des blogs à la portée de tous, allié à la propension des individus au moindre effort ainsi qu’à leur tendance à la reproduction des comportements, abouti à une double uniformisation des contenus et des contenants.

Des contenus dupliqués à l’extrême

Si on enlevait les blogs des spécialistes SEO autoproclamés, des Community Manager en devenir ou des chantres des réseaux sociaux et du High-Tech s’extasiant sur le moindre déplacement d’un bouton de connexion, la circulation sur les autoroutes de l’information serait plus fluide. Savez-vous qu’un seul blog peut en remplacer un bon millier ? Goopilation, par exemple, propose la traduction des actualités publiées sur les blogs de Google. On retrouve plus ou moins la même chose pour Twitter avec la version française du blog de Twitter.

Il suffirait de traduire ainsi une grosse dizaine de blogs anglo-saxons issus du web 2.0 pour mettre au chômage 90% des blogs francophones soi-disant High-Tech. Les 10% restants sont les blogueurs qui apportent une valeur ajoutée grâce à leur vision sur le long terme et leur compréhension des enjeux socio-économiques sous-jacents.

Ergonomie ou marketing ?

Beaucoup pensent que l’ergonomie est aux blogs ce que l’aérodynamisme est à l’automobile : un moyen permettant d’aller plus vite en essayant de ne pas gaspiller trop de ressources. Cela semble séduisant, mais à l’époque des débuts de l’aventure automobile, la forme des véhicules n’avait que l’imagination des créateurs comme limite… Les blogs vont-ils tous se ressembler pour offrir le moins de résistance au clic sponsorisé et s’adapter au plus petit dénominateur commun ?

Voilà en substance ce que j’écrivais en mars 2007 dans Ergonomie des blogs : utilisabilité ou marketing ? Je pensais à l’époque que la monétisation des blogs allait tuer la blogosphère mais il semble que la course au SEO et aux classements s’en soit chargés avant…

L’absence de design, ce n’est pas du minimalisme

Dis, c’est quoi le design ? En anglais, une des acceptions du terme «design» est «dessein», comme dans The Great Design. Je n’irais pas jusqu’à dire que si l’on enlève une lettre à «dessein» on obtient «dessin», mais presque !

Le minimaliste c’est du design où les fioritures graphiques auraient laissé la place à du blanc distribué avec générosité et à bon escient. Mais attention : tous les sites web ne gagnent pas à être ultra minimalistes ! Une fois qu’il n’y a plus rien à retrancher dans le design d’un site internet, il peut être judicieux d’ajouter des éléments graphiques pour flatter l’oeil et valoriser le contenu.

Trouver son chemin

Sur la durée, l’intérêt d’un blog réside en grande partie sur l’originalité du contenu (style, angle de vue, diversité des sujets abordés par l’auteur) que le contenant devrait refléter. Le design est une vitrine pour les contenus. Pour que les lecteurs s’arrêtent, il est important de personnaliser son blog quand bien même on n’aurait pas de véritable patte graphique. L’important est que le ramage se rapporte au plumage.

Ecrit à quatre mains avec Jiann Venturini – @_jiann sur Twitter – étudiant en Master Webdesign à Sup de Pub Paris.

Articles sur le même sujet

• Le Design serait inutile dans 80% des cas
• Sites de contenus vs sites commerciaux ?
• Optimiser son blog pour le référencement est inutile dans 80% des cas
• J’ai référencé mon site sur plus de 400 moteurs de recherche et annuaires de liens, j’ai bon ?
• Journalistes vs Blogueurs (Gladiators inside)

Il existe de nombreux sites pour apprendre les ficelles des référenceurs. Mais quoi de mieux qu’un bon guide SEO qui reprend les bases pour faire le point sur les différentes techniques ? Réponse : quatre bons guides ! J’ai fait mon Monsieur Plus en ajoutant quelques ressources qui pourraient s’avérer utiles si vous voulez faire le point sur les liens qui pointent vers votre site ou si vous désirez surveiller vos contenus et votre réputation sur le web.

Tutoriels SEO

• Tutoriel Référencement Black Hat — On parle beaucoup de référencement Black Hat, mais qu’est-ce exactement ? Oseox nous propose un tutoriel afin d’y voir plus clair sur ces techniques que la morale réprouve ce qui est parfait pour éviter du faire du Black Hat sans le savoir ;)
• Tutoriel Référencement White Hat – Maintenant que vous connaissez les techniques à ne pas mettre en oeuvre si vous voulez rester du bon côté de force, voici un tutoriel composé de près de 50 articles pour optimiser le référencement naturel de votre site ou de votre blog.
• Le guide des redirections pour le référencement — Si les liens sont le sang du web, les redirections en assure la fluidité. Ce tutoriel aborde les différents types de redirection : Meta Refresh, Javascript, redirection 301, 302. Complète idéalement l’initiation aux différents types de redirections.
• Guide référencement — Tutoriel SEO en 14 parties qui part de l’état des lieux des moteurs de recherche en France jusqu’aux mauvaises pratiques et pénalités en passant par l’analyse sémantique, l’optimisation on et off page.

Outils SEO

• 5 façons de connaître des sites qui pointent vers votre blog — Si lesBacklinks sont le résultat de l’optimisation de votre site (SEO), ils en sont également la matière première. Il est donc indispensable de savoir si des liens externes pointent vers vos pages et leur origine, le cas échéant.
• Using Excel for SEO – the Grand Collection of Tips — Saviez-vous que Excel pouvait être un formidable outil pour être productif en SEO ?
• 16 ressources pour surveiller vos contenus et votre e-réputation sur le Web — Dans le même esprit que les outils qui permettent de savoir qui fait des liens vers votre site, il est important de veiller sur vos contenus et votre réputation sur le Web.

Articles sur le même sujet

• J’ai référencé mon site sur plus de 400 moteurs de recherche et annuaires de liens, j’ai bon ?
• 8 composés HTML pour le logo et la « baseline » et leur potentiel SEO
• Aperçu instantané de Google, Webdesign et référencement naturel
• Référencement de sites Web — Chassez le naturel, il revient au SEO !
• SEO — Optimiser le référencement de WordPress avec les descriptions de tags

Mon dernier article sur le référencement et le positionnement sur les moteurs de recherche commence à dater un peu. Pour raffraichir un peu les tags SEO et référencement internet voici une idée toute simple pour ratisser plus large au niveau des requêtes qui permettront aux internautes de tomber sur votre blog. Loin d’être un guide sur le référencement, cette astuce s’adresse aux blogueurs désirant optimiser leur positionnement sur Google en restant concentrés sur ce qu’ils savent faire le mieux : la rédaction web ! Grâce aux options proposées par Google, il est possible de faire l’impasse sur l’étude de marché pour le choix des mots-clés. Et, cerise sur le gâteau, il s’agit de référencement gratuit ;)

Google Suggest

Il s’agit de la liste déroulante qui apparait lorsqu’on commence à saisir une requête dans le champs de recherche de Google. Pratique pour avoir une idée des expressions à utiliser dans un article, qu’il s’agisse du titre, des sous-titres ou du texte.

Google propose aux internautes d’élargir leurs recherches aux termes fréquemment recherchés.

Exemple de suggestion de recherche sur le terme «référencement». Cliquez pour agrandir l'image.

Recherches associées

Habituellement situées à la fin de la page de résultats, les Recherches associées ont fait leur apparition dans le menu latérale de Google : Plus d’outils ->Recherches associées.

Les recherches associées sont plus complètes que les suggestions et permettent d’élargir l’horizon des termes à utiliser.

Exemples de recherches associées au terme «référencement». Cliquez pour agrandir l'image.

Mise en pratique avec WordPress

Si vous utilisez WordPress, vous avez certainement remarqué que l’URL pour accéder à un article en particulier reprend votre titre débarrassé des accents, avec des tirets pour séparer les mots. Ce permalien (pour lien permanent) modifiable est parfait pour ajouter un terme issu de la Recherche associée.

A l’origine, l’intitulé de ce billet était Astuce pour améliorer le référencement naturel. Google me suggère les termes référencement Google. Il suffit de modifier le permalien (sous le champs Titre) pour changer l’URL affichée par défaut par WordPress et la remplacer pour astuce-ameliorer-referencement-google.

Comme vous pouvez le constater, il m’est venu une autre idée de titre bien plus plaisante susceptible d’attirer l’attention de l’internaute au milieu des 20 millions de résultats retournés par Google sur la requête Référencement de sites Web. Bref, le beurre (les mots-clés pour plaire à Google) et l’argent du beurre (un jeu de mots pour distraire l’être humain qui se cache derrière toute requête). Reste la crémière (le nombre de pages vues) !

Conclusion

Pour référencer votre site web dans les moteurs de recherche, il suffit parfois de peu de chose. Prenez l’habitude de jeter un oeil sur Google Suggest ou les Recherches associées avant de cliquer sur Publier pour modifier votre texte en fonction des termes suggérés pour élargir l’audience de votre site internet.

Articles sur le même sujet

• Ecrire pour Google : des mots-clés au clickrank
• 8 composés HTML pour le logo et la « baseline » et leur potentiel SEO
• Aperçu instantané de Google, Webdesign et référencement naturel
• SEO — Optimiser le référencement de WordPress avec les descriptions de tags
• WordPress de A à Z — E comme Extensions (les plugins)

Tag descriptions in WordPress 2.8 est un billet très instructif qui explique comment utiliser les mots-clés des articles (tag description) pour optimiser les textes présents dans la balise <meta name=’description’ content=’Wordpress et le SEO’>. Son contenu est censé contenir une description spécifique à chaque page si l’on veut que Google les indexe correctement.

En prennant le temps de renseigner correctement la description associée à chaque tag (oui, ça peut prendre un certain temps), on pourra obtenir une description unique lorsque le contexte des tags est actif, ce qui est très bon pour le SEO !

Complète idéalement mon billet Une meilleure indexation avec Not at All in One SEO pour WordPress !  Via WordPress Tuto.

Articles sur le même sujet

• Référencement de sites Web — Chassez le naturel, il revient au SEO !
• 8 composés HTML pour le logo et la « baseline » et leur potentiel SEO
• Aperçu instantané de Google, Webdesign et référencement naturel
• 4 tutoriels SEO et quelques liens pour surveiller votre référencement
• Le petit journal du web — Non, Twitter n’a pas tué les Backlinks… La preuve !

L’analyse des mots-clés en provenance de Google en dit autant sur les intentions des internautes que sur le contenu de votre site ! Et ceci dans un double mouvement qui se renforce : plus votre contenu colle à la formulation des demandes des internautes, plus ces derniers auront des occasions de vous lire. C’est bête comme choux, mais pas si facile à réaliser ;) Ce billet est la réécriture de la deuxième partie du (trop long) article intitulé Mesure d’audience : des mots-clefs au ClickRank il y a plus de 3 ans. Non seulement il n’a pas trop vieillit, mais certaines hypothèses (relation entre les résultats de recherche et les statistiques puisées dans Google Analytics) ont trouvé depuis des éléments de confirmation avec le Google Bounce Factor, notamment.

Comme des poissons dans l’eau

Le contenu de vos billets est semblable à l’asticot qui gigote au bout de l’hameçon. Chacun sait qu’on n’attrappe pas tous les poissons avec le même appât et que l’eau dans laquelle on lance la ligne n’abrite pas les mêmes espèces… En fonction de la thématique globale de votre site et des sujets abordés dans les billets, vous parviendrez à intéresser certaines espèces ou pas.

Ce que parler veut dire

Plus votre site est spécialisé et plus vous avez des chances d’être bien vu par Google qui est toujours à la recherche d’informations rares et pertinentes à proposer à ses utilisateurs. Bien évidemment, Google n’accordera une attention particulière au contenu de vos pages que si vous accordez vous-même un soin particulier à l’écriture de vos articles. L’emploi de termes spécifiques et d’expressions du métier au lieu d’un vocabulaire passe-partout peut vous propulser très haut sur la scène googlienne.

Ce qui ne doit pas vous faire oublier que beaucoup de visiteurs interrogent peut-être justement les moteurs pour apprendre le jargon du métier. Pour cette raison, je relis souvent mes billets en me mettant à la place des visiteurs. J’imagine les mots ou les phrases qu’ils pourraient utiliser. Il s’agit de trouver le juste équilibre entre l’emploi de termes ésotériques et de formules toutes faites. Si la répétition d’un même terme dans la page peut avoir des effets positifs, privilégiez toutefois l’emploi de synonymes : vous élargirez le diamètre de l’entonnoir.

Quand le sage montre la lune, l’imbécile regarde le doigt

Le première fois que j’ai regardé les mots-clés en provenance de Google, je me suis dit : tiens, c’est marrant, tout le monde cherche des informations au sujet des blogs commerciaux, puis plus tard se sont ajouté ceux qui voulait des informations sur les classements des blogs, puis sur la monétisation des blogs…

Aujourd’hui, une bonne part des requêtes qui mènent sur ce blog concerne le statut du blogueur, etc. Vous l’avez compris : je ne regardais pas la lune, mais mon doigt ;). C’est comme des cercles concentriques : plus les sujets d’une même thématique globale sont nombreux et plus vous aurez de chance de correspondre aux requêtes qui fusent dans le cyberespace.

Un algal, des algos ?

Le deuxième enseignement de l’analyse des statistiques, c’est que les résultats retournés par Google semblent utiliser des algorithmes différents selon le nombre de terme contenus dans la requête.

Pour un ou deux termes génériques, les sites qui apparaissent dans les premières pages semblent bénéficier d’un traitement de faveur en fonction de l’ancienneté surtout (date de création du domaine) et de leur popularité (PageRank).

Google fonctionne comme si les requêtes étaient ventilées dans des clusters thématiques (développement web, voyage, sexe, divertissement, etc.) à l’intérieur desquels certains sites seraient considérés comme proposant un contenu de référence. (TrustRank ?).

De l’influence de l’ancienneté et du PageRank

A partir de deux ou trois termes et plus, le contenu reprend la main sur l’ancienneté et le PageRank, et là, c’est surtout la présence et la proximité de tout ou partie des termes demandés qui fait le bon positionnement. Il semblerait que la fraicheur de l’information disponible soit ici favorisée au détriment parfois de sites plus qualifié installés de longue date. C’est peut-être la conséquence de la forte croissance des blogs en particulier et du web en général : il faut bien que les moteurs fassent de la place pour les petits nouveaux ;)

Des invités triés sur le mot-clé volet

Pour cet article, j’ai tenté de faire preuve d’empathie envers des profils de visiteurs assez différents :

• Les gens du marketing, toujours à l’affût d’une information liée à Google,
• Les geeks, toujours intéressés par un terme qui se termine par Rank ;)
• Ceux qui rédigent des articles pour le web en général,
• Et ceux qui cherchent des rédacteurs en particulier…

Le mot-clé mots-clefs par l’exemple

Parmi tous les termes éligibles pour capter un flux de visiteurs potentiels, j’ai comparé les différentes possibilités dans Google lui-même pour avoir une idée du marché potentiel d’un mot en fonction du nombre de résultats retournés et de la diversité des sites retournés par le moteur.

A cet égart, l’orthographe a son importance. Le terme mot-clé, par exemple, a plusieurs acceptions parmi lesquelles il faudra trancher au moins pour le titre :

• mot-clé,
• mots-clé,
• mots-clés,
• mot-clef,
• mots-clef
• ou mots-clefs ?

Après réflexion, j’ai choisi mots-clés qui renvoit dix fois plus de résultats que mots-clefs. Ce qui me donnera sans doute moins de chances d’être positionné dans les premières pages, mais d’avoir plus de possibillités d’être présent sur la requête en espérant que cette présence s’accompagne d’un bon positionnement avec le temps (Dans le billet d’origine j’avais choisi le contraire).

Le ClickRank

The hyperlink was a vote in the search-driven Internet. Now I’m dependent on a new currency – human action. The click is much more potent than the existence of a link.

Tout le monde ou presque connait le PageRank, mais il pourrait bientôt être remplacé ou relégué au fond de la classe par des paramètres autrement plus précis et sûr (le genre sûr que même les méchants pirates experts en SEO, ils auraient du mal à dealer with ;) ).

En effet, Google pourrait par exemple, tenir compte du nombre de fois où un résultat fait l’objet d’un clic sur une requête donnée en enregistrant le contexte sémantique.

On pourrait considérer celà comme une extension du vote représenté par les backlinks (ou liens entrants) vis à vis du site vers lequel ils pointent. Grosso modo cela reprendrait le principe des digg-like : un clic sur un résultat = un vote.

Matt Mc Alister s’interroge sur le remplacement du PageRank par le ClickRank. En tout état de cause, Google a la possibilité d’améliorer encore ses résultats et de garder longtemps encore l’avantage. Notamment, en utilisant les données d’Analytics et des Webmaster Tools, pour déterminer toujours plus de critères d’évaluation d’une URL ou d’un site en entier au regard d’une requête donnée en prenant en compte le nombre de pages vues sur un site, le temps passés sur ses pages, le nombre de clics effectués, etc.

En bref

Tout ce que Google peut enregistrer grâce à nous, n’a pas finit de lui donner un avantage intellectuel et économique vertigineux. Ce sujet semble inépuisable, mais ce n’est pas mon cas. Je laisse cette conclusion ouverte, et la fin de ce billet en version bêta, c’est-à-dire destinée à s’enrichir avec vos retours d’expériences sur le sujet. Stay tuned and mind the gap!

Articles sur le même sujet

• Aperçu instantané de Google, Webdesign et référencement naturel
• Référencement de sites Web — Chassez le naturel, il revient au SEO !
• Google, le PR fouettard !
• 8 composés HTML pour le logo et la « baseline » et leur potentiel SEO
• Bai(s)se de PageRank : au nom du PR, ainsi soit-il…

Le PageRank n’est plus ce que c’était. Autrefois (il y a deux ou trois ans), le PageRank servait de référence absolue pour situer rapidement un site web. Aujourd’hui, les classements ont pris le relais et j’avoue ne plus en tenir compte dans mon surf quotidien : j’utilise Google Chrome et je n’ai pas d’indicateur pour afficher le PageRank des sites que je visite.

Toutefois, comprendre la façon dont le PR est calculé est toujours intéressant. Il y a mieux encore : utiliser un outil permettant de simuler les transmissions de PR en fonction des liens entrants et sortants sur un nombre de pages déterminées.

C’est ce que propose Hubert Wassner via l’application Java PageRank Demo disponible via l’article L’algorithme pagerank comment ça marche ?

Cliquez une fois pour créer un point représentant une page, autant de fois que nécessaire. Cliquez-glissez entre deux points pour signifier les liens sortants. Enfin, cliquez sur PageRank pour le résultat.

Articles sur le même sujet

• Aperçu instantané de Google, Webdesign et référencement naturel
• Ecrire pour Google : des mots-clés au clickrank
• Bai(s)se de PageRank : au nom du PR, ainsi soit-il…
• Le PR contre-attaque (aujourd'hui, c'est Jedi !)
• css4design vs Google : PR, impasse et manque…