Ah, voilà d’un message que je voudrais te foutre dans le crâne chef !!! Vois-tu avant de mettre le nez dans le Javascript, je pensais que faire un site bien référencé avec du javascript était un peu tordu. Seulement voici quelques petites astuces qui m’ont radicalement fait changer de point de vue sur cette relation des deux extrême.
Ah, Jquery…mon dieu, quelle beauté.
Avec la création de KOMET et mon apprentissage d’un autre language orienté client, mon crâne a fait deux tours sur lui-même et des tas d’idées me sont déjà venues à l’esprit pour mêler référencement et design Web, particulièrement avec le Javascript.
Sommaire
Voici donc quelques astuces qui te feront changer d’avis si comme moi il y a encore 15 jours, tu penses que le javascript ne peut pas t’aider à référencer un site.
IMPORTANT: Tout ce que je vais te raconter n’est pas forcément à faire hein. Les SERPS ne lisent pas encore le JS ou très peu…Donc il va falloir réflechir un peu.
W3C & le target _blank ?
Ne me demande pas pourquoi, moi aussi il y a des infos que je ne fais que lire en travers. Toujours est-il que coller un target= »_blank » dans le code d’une page HTML n’est pas des plus beau. Ok, mais si ce n’est pas le critère phare du positionnement d’un site, le temps passé sur un site influe un petit peu. Ton visiteur vois un lien sur ton site, clic et une nouvelle fenêtre s’ouvre à côté de la page de ton site. Pendant qu’il lit tranquillement autre chose, la page de ton site reste ouverte.
Alors on fait mine de rien, gentil comme on est, on ne met pas de target blank. En revanche un petit coup de jquery règlera ça en moins de d’une seconde.
CODE:
/*inclusion de jquery*/
$(document).ready(function() {
$("a[href^='http:']:not([href*='" + window.location.host + "'])")
.live('click', function(){
$(this)
.attr({
target: '_blank'
});
});
});
Rapide et éfficace, tous les liens externes au domaine se verront attribuer un target blank sans que l’on ai touché au code source de notre page. Tout reste propre.
Un coup de Pingomatic ???
Pingomatic sert à avertir un bon nombre de moteurs de recherche que ton Site/Blog vient d’être mis à jour. Si tu utilises WordPress par exemple, à chaque publication d’un article, le moteur de votre Blog va lancer une requête vers pingomatic ( par défaut, tu peux en ajouter d’autres ).
Allez hop, on va permettre à tes charmants lecteurs de pinguer ton article. COOL NON ??? et on va le faire de façon aléatoire pour ne pas trop bourriner.
CODE:
$(document).ready(function() {
//tirage au sort
var ranNum= Math.floor(Math.random()*100);
//liste d'urls'
var pingomaticUrl = 'http://pingomatic.com/ping/?
%20title='+encodeURIComponent(document.title)%20+'
&blogurl='+encodeURIComponent(location.href)%20+'
&chk_weblogscom=on&chk_blogs=on&chk_technorati=on&chk_feedburner%20=on&
chk_syndic8=on&chk_newsgator=on&chk_myyahoo=on&
chk_pubsubco%20m=on&chk_blogdigger=on&chk_blogrolling=on&
chk_blogstreet=on&chk_mo%20reover=on&chk_weblogalot=on&
chk_icerocket=on&chk_newsisfree=on&chk_%20topicexchange=on&
chk_google=on&chk_tailrank=on&chk_bloglines=on&chk%20_aiderss=on&
chk_skygrid=on&chk_audioweblogs=on&chk_rubhub=on&chk_%20geourl=on&
chk_a2b=on&chk_blogshares=on';
//si inferieur a 10 on ping
if (ranNum < 10){
//on ajoute
$('<iframe>').attr('src',pingomaticUrl).hide().appendTo('body');
//on retire
setTimeout(function(){
$('iframe').remove();
}, 10);
}
});
Faire bosser un script en tâche de fond
Je ne sais pas si tu l’as vu ici, sur ce blog, mais le pagerank des liens externes au blog s’affiche au survol de la souris. Derrière, c’est une petite fonction PHP qui va chercher le Pagerank pour le renvoyer au javascript…ce qui prendrait un peu plus de temps si cette opération était fait avant l’affichage de la page. Un gain de rapidité incroyable.
La question d’afficher le PR des pages n’est pas top SEO en soit, mais l’execution d’un script en arrière plan te permet de charger plus rapidement tes pages. toujours bon pour les moteurs de recherche. Si tu fais un coup de Google Search, tu trouveras le moyen de charger ton site complet avec du Javascript…idéal pour diviser par /2 ton temps de chargement.
Mais afficher le PR peut-être sympa…tu sais sur ton site/blog par exemple, rapidement ou se trouve le bon Link Juice ;)…
Je te filerais la fonction de l’affichage du PR dans un prochain article. Mais personnellement, je pense que ça en fait rester plus d’un sur mes pages a chercher le bon pti lien PR 4 ou 5 :) … de quoi faire joujou tout en référençant ton site
Auto Link Building
Autant c’est impossible en PHP qu’en Javascript tu peux t’amuser a modifier le copier/coller d’un de tes visiteurs à la volée. Il va te copier: « Autant c’est impossible en PHP qu’en Javascript tu peux t’amuser a modifier le copier/coller d’un de tes visiteurs à la volée » MAIS va se retrouver avec: « Autant c’est impossible en PHP qu’en Javascript tu peux t’amuser a modifier le copier/coller d’un de tes visiteurs à la volée By http://tonsite.com«
Un Texte mal placé. Pas bon pour les moteurs.
Il arrive, sur un thème de blog Wp par exemple qu’un widget en sidebar te permette d’ajouter un bon texte bien optimisé SEO. Le hic bien souvent est que ce Widget va apparaitre dans ta source en bas de page après tout le contenu. Hors, niveau SEO, il serait plus avantageux que les moteurs le trouve en premier.
Tu sais que ton Widget est dans une DIV, il te suffit de la déplacer et de la remettre en place lors d’une visite humaine.
CODE:
/**
* Tu copies ton contenu avec ses balises en haut de page avec par exemple un display:none qui
* le rendra invisible par défaut. Essentiel ici pour ne pas gacher le design en cas de non
* activation du JS
*/
$(document).ready(function($){
//il suffit alors de replacer, question design, le contenu à la bonne place
//dans les widgets et de le montrer.
$('#divmoncontenu').prependTo('.divwidget').show();
});
Voilà, ton contenu SEO, tu peux a présent le coller en footer comme dans ton header…il se retrouveras toujours dans la sidebar avec les autres Widgets. Au niveau SEO, il est donc possible de le coller juste en dessous de la balise BODY
Une dérive de l’astuce ci-dessus, la landing-page.
Tu as une page de home ou une landing page des plus belles, géniale…c’est elle qui est censée convertir un max. de visiteurs. Seulement voilà, si tu n’utilise pas Adwords ou autre…Qui dit landing-page dit contenu pauvre ( il faut éviter sur une page de capture de distraire le visiteur avec des cochonneries hein !
Alors tout simple sur le même principe que ci-dessus, on cache une DIV que l’on va afficher après un clic sur un bouton par exemple. Niveau Design, ni vu ni connu si le bouton en question fait 1px :D, niveau SEO, c’est du contenu en plus pour les Crawlers qui ne vont même as se rendre compte que tu cloak ton contenu ;) car le display:none cette fois ci sera directement dans le code JS .
CODE:
<script type="text/javascript">
$(document).ready(function () {
//on cache la div par défaut
$('#info').hide(); // ou .css('display','none')
//au clic sur le bouton on l'affiche
$('.info').click(function(){
$('#info').animate({
opacity: .8,
height: 'toggle'
},500);
return false;
});
});
</script>
<button href="#" class="info">Plus D'information</button>
<div id="info">
du contenu a gogo et utile ici du contenu a gogo et
utile ici du contenu a gogo et utile ici du contenu a
gogo et utile ici du contenu a gogo et utile ici du
contenu a gogo et utile ici du contenu a gogo et utile ici
</div>
Ni vu, ni connu…c’est un peu comme revenir aux anciennes techniques CSS avec le left:-9999px ou même jouer avec les couleurs du texte ( tu sais texte blanc sur fond blanc ? Coquin va ! )
Voilà, j’ai d’autres idées en tête mais comme ça ne fait qu’une semaine que je m’adapte à ce nouveau language, je vais un peu me calmer. J’en dirais peut-être davantage dans un prochain article. En attendant, j’espère t’avoir prouver que mélanger JS et SEO n’était pas toujours NUL comme te le diront certains référenceurs ;)
A toi de jouer !!!
(382 lectures)