Javascript et référencement


 

Vous pensez que le javascript est l’ennemi juré du référencement, vous vous trompez !

Moi, je vous dis qu’il est un son allié le plus fidèle…

Javascript l’ennemi du référencement

Depuis le début de l’ère de la recherche sur internet, le javascript et le SEO sont 2 mondes qui ne se croisent quasiment jamais, en effet les moteurs de recherche n’exécutant pas le javascript, un langage client, votre référenceur vous dit tout le temps d’éviter le javascript pour n’importe quelle action qu’il soit. A la limite, votre référenceur vous dit de l’utiliser pour camoufler des actions ou des « liens » qu’il ne souhaite pas voir indexé, par exemple les liens sortants.

Cette situation qui dure depuis plus de dix ans, nous fait croire que les référenceurs détestent le javascript.

JQuery l’ami du SEO

Pourtant le javascript et tout spécialement le JQuery peut être construit sur l’amélioration de l’affichage d’une page web à la fin du chargement. Il peut alors, par exemple, être utilisé pour réaliser rapidement des affichages complexes sans pour autant gêner le « code source » d’une page optimisée pour le référencement.

D’autre part, coder en JQuery c’est réduire par deux les lignes de codes javascript ! Et rendre donc votre code plus propre.

Je vais vous montrer quelques exemples d’utilisations qui font du javascript l’ami du SEO :

Afficher une animation Flash

Pour afficher du Flash, de manière classique, on utilise les . Cette balise propose à la suite un pour y préciser le contenu alternatif qui sera lu par les moteurs de recherche. Mais on connait le pauvre poids de cette balise alternative…</p> <p>La solution c’est l’utilisation du SWFObject qui vous permettra tout simplement de placer votre contenu alternatif dans une </p> <div> classique qui sera en réalité surcharger par l’affichage du Flash pour les utilisateurs ayant exécuté le javascript. Votre contenu alternatif a alors le poids d’un contenu classique aux yeux des moteurs.</p> <p>Remarque, vous pouvez également utiliser <a href='http://plugins.jquery.com/project/jquery_flash' target='_blank'>jQuery.Flash Plugin</a></p> <h2>Augmenter l’affordance d’une box</h2> <p>Regardez ce <a href='http://www.la-revanche-des-sites.fr/blogs'>super blog sur le référencement</a>, tout référenceur vous demandera de mettre le lien <a href> sur le titre des articles (en H2 d’ailleurs), mais tout ergonome vous demandera de rendre cliquable toute la zone présentant l’article (le teaser) pour augmenter l&rsquo;affordance.</p> <p>L’astuce est simple et tient en quelques lignes. Cette box dont la classe est « teaser » contient un lien href situé sur le titre, le Jquery doit alors faire les actions suivantes :</p> <ol> <li>Si le visiteur clique sur le teaser</li> <li>Récupère la cible du lien href contenu dans ce teaser</li> <li>Et charge cette cible url, le tour est joué…</li> </ol> <p>Voici les quelques lignes :</p> <div class='codeblock'>$(&lsquo;div.teaser&rsquo;).click(function() {<br />    var cible = $(this).find(&lsquo;a&rsquo;).attr(&lsquo;href&rsquo;);<br />    location.href = cible;<br />    return false;<br />});</div> <p>Seul inconvénient, pas de CTRL+clic possible…</p> <h2>Analyse d’audience et JQuery</h2> <p>D’autre part, le JQuery peut également être utile à l’analyse d’audience notamment par la personnalisation rapide du tag de Google Analytics grace à <a href='http://plugins.jquery.com/project/gaTracker' target='_blank'>GAtracker</a>.</p> <h2>Et vous ?</h2> <p>Cette liste est de loin non-exhaustive, mais vous montre simplement quelques exemples variés de la puissance du javascript au service du référencement.</p> <p>Alors amis référenceurs, vous l’aimez maintenant le javascript ?</p> </div> <footer> <p></p> </footer> < <nav class="navigation post-navigation" role="navigation"> <h2 class="screen-reader-text">Navigation de l’article</h2> <div class="nav-links"><div class="nav-previous"><a href="https://www.la-revanche-des-sites.fr/blog/avantages-et-inconvenients-de-ladwords" rel="prev">Avantages et Inconvénients de l&rsquo;Adwords</a></div><div class="nav-next"><a href="https://www.la-revanche-des-sites.fr/blog/notre-100eme-article-de-blog" rel="next">Notre 100ème article de blog</a></div></div> </nav> <div id="disqus_thread"></div> </div> </div> </article> </div> </div> </section> </div> <div class="tiny reveal text-center" id="phone-contact-modal" data-reveal data-animation-in="scale-in-up fast"> <button class="close-button" data-close aria-label="Close modal" type="button"> <span aria-hidden="true">&times;</span> </button> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 48 48" xml:space="preserve" width="48" height="48"><g class="nc-icon-wrapper" fill="#1f54a2"><path fill="none" stroke="#1f54a2" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" d="M34,30l-6,6L12,20l6-6L8,4 l-6,6c0,19.882,16.118,36,36,36l6-6L34,30z" stroke-linejoin="miter"></path> <path data-color="color-2" fill="none" stroke="#f6a124" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" d="M28,2 c9.941,0,18,8.059,18,18" stroke-linejoin="miter"></path> <path data-color="color-2" fill="none" stroke="#f6a124" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" d="M28,10 c5.523,0,10,4.477,10,10" stroke-linejoin="miter"></path></g></svg> <div id="phone-contact-modal-loading" style="display: none; padding: 6rem 0;"> <i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw text-color-primary"></i> <span class="sr-only">Loading...</span> </div> <div id="phone-contact-modal-success" style="display: none; padding: 6rem 2rem;"> <i class="fa fa-paper-plane-o fa-3x fa-fw text-color-success"></i> <br/><br/> <p>Demande envoyée avec succès, vous serez contacté dans les plus brefs délais.</p> </div> <form style="margin-top: 2rem;" action="javascript:void(null);" method="POST" id="phone_contact_form"> <div class="row"> <div class="medium-6 columns"> <label> <input type="text" placeholder="Prénom *" name="prenom" id="phone_contact_prenom" required="true"> </label> </div> <div class="medium-6 columns"> <label> <input type="text" placeholder="Nom *" name="nom" id="phone_contact_nom" required="true"> </label> </div> </div> <div class="row"> <div class="medium-6 columns"> <label> <input type="text" placeholder="Société *" name="societe" id="phone_contact_societe" required="true"> </label> </div> <div class="medium-6 columns"> <label> <input type="tel" placeholder="Téléphone *" name="telephone" id="phone_contact_telephone" required="true"> </label> </div> </div> <div class="row"> <div class="medium-12 columns"> <label> <input type="email" placeholder="Email" name="email" id="phone_contact_email"> </label> </div> </div> <div class="row"> <div class="medium-12 columns"> <input type="hidden" name="action" value="lrds_phone_contact_form"/> <button class="button expanded large warning" type="submit" value="Submit" style="font-weight: 700; color: #fff;">Rappelez-moi</button> </div> </div> </form> <div class="row"> <div class="medium-12 columns"> <hr/> <p class="text-center" style="color: #cacaca;">ou contactez-nous au</p> </div> </div> <div class="row"> <div class="medium-12 columns"> <div class="callout text-center"> <a href="callto:0953338656" style="font-weight: 700"><i class="fa fa-phone fa-fw"></i> (+33) 09 53 33 86 56</a> </div> </div> </div> <div class="row"> <div class="medium-12 columns"> <div class="callout text-center"> <a href="/contact" style="font-weight: 700"><i class="fa fa-envelope-o fa-fw"></i> Formulaire contact</a> </div> </div> </div> </div> </div> <div class="footer-container"> <div id="contacts-widgets"> <section class="section-inverted"> <div class="container"> <div class="row align-middle"> <div class="column large-8 small-12"> <h2>Vous avez un projet ?</h2> <p class="lead">Parlons en ensemble autour d'un café !</p> </div> <div class="column cta-wrapper"> <a href="https://www.la-revanche-des-sites.fr/contact" class="button large warning cta" style="margin-bottom: 0;">Parlons-en</a> </div> </div> </div> </section> </div> <footer class="footer"> <div id="agencies-widgets" class="container"> <div class="row"> <div class="small-12 large-expand column"> <div class="media-object"> <div class="media-object-section"> </div> <div class="media-object-section main-section"> <div class="footer-title">Lille <small>Euratechnologies</small></div> <a href="mailto:lille@la-revanche-des-sites.fr">lille@la-revanche-des-sites.fr</a><br/> <a href="https://www.la-revanche-des-sites.fr/agence/lille" class="link-arrow">En savoir plus</a> </div> </div> </div> <div class="small-12 large-expand column"> <div class="media-object"> <div class="media-object-section"> </div> <div class="media-object-section main-section"> <div class="footer-title">Paris</div> <a href="mailto:paris@la-revanche-des-sites.fr">paris@la-revanche-des-sites.fr</a><br/> <a href="https://www.la-revanche-des-sites.fr/agence/paris" class="link-arrow">En savoir plus</a> </div> </div> </div> <div class="small-12 large-expand column"> <div class="media-object"> <div class="media-object-section"> </div> <div class="media-object-section main-section"> <div class="footer-title">Annecy <small>La Cordée</small></div> <a href="mailto:annecy@la-revanche-des-sites.fr">annecy@la-revanche-des-sites.fr</a><br/> <a href="https://www.la-revanche-des-sites.fr/agence/annecy" class="link-arrow">En savoir plus</a> </div> </div> </div> </div> </div> <div id="footer-widgets" class="container"><div id="text-2" class="small-12 large-expand columns widget widget_text"><div class="footer-title">la revanche des sites</div> <div class="textwidget"><ul> <li>Agence SXO/SEO</li> <li><i class="fa fa-fw fa-map-marker"></i> 2 allée de la Haye du Temple</li> <li><i class="fa fa-fw"></i> 59160 LILLE</li> <li><i class="fa fa-fw fa-phone"></i> <a href="callto:0953338656">09 53 33 86 56</a></li> <li><i class="fa fa-fw fa-paper-plane-o"></i> <a href="mailto:contact@lrds.fr">contact@lrds.fr</a></li> </ul> </div> </div><div id="nav_menu-2" class="small-12 large-expand columns widget widget_nav_menu"><div class="footer-title">Nos métiers</div><div class="menu-metiers-container"><ul id="menu-metiers" class=""><li id="menu-item-1983" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1983"><a href="https://www.la-revanche-des-sites.fr/expertise-seo">Expertise SEO</a></li> <li id="menu-item-1982" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1982"><a href="https://www.la-revanche-des-sites.fr/accompagnement">Accompagnement à la performance et conseils sur-mesure</a></li> <li id="menu-item-1980" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1980"><a href="https://www.la-revanche-des-sites.fr/formation">Formation SEO</a></li> <li id="menu-item-1979" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1979"><a href="https://www.la-revanche-des-sites.fr/innovation">Innovation</a></li> <li id="menu-item-1981" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1981"><a href="https://www.la-revanche-des-sites.fr/references">Quelques références en référencement</a></li> </ul></div></div><div id="nav_menu-3" class="small-12 large-expand columns widget widget_nav_menu"><div class="footer-title">À propos</div><div class="menu-about-container"><ul id="menu-about" class=""><li id="menu-item-1936" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1936"><a href="https://www.la-revanche-des-sites.fr/agence">Agence de référencement naturel</a></li> <li id="menu-item-1985" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1985"><a href="https://www.la-revanche-des-sites.fr/recrutement">Recrutement</a></li> <li id="menu-item-1986" class="menu-item menu-item-type-post_type menu-item-object-page current_page_parent menu-item-1986"><a href="https://www.la-revanche-des-sites.fr/blog">Blog, actualités et conseils sur le SEO &#038; SXO</a></li> <li id="menu-item-1987" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1987"><a href="https://www.la-revanche-des-sites.fr/contact">Contact</a></li> </ul></div></div><div id="enhancedtextwidget-2" class="small-12 large-expand columns widget widget_text enhanced-text-widget"><div class="textwidget widget-text"><div class="footer-title">Newsletter</div> <!-- Begin MailChimp Signup Form --> <div id="mc_embed_signup"> <form action="https://la-revanche-des-sites.us5.list-manage.com/subscribe/post?u=ac698b97e955aaa14dce40d48&amp;id=366aaec2cb" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate> <div class="input-group"> <input type="email" value="" name="EMAIL" class="required email input-group-field" id="mce-EMAIL" placeholder="Email" style="padding: 0 10px;"> <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_ac698b97e955aaa14dce40d48_366aaec2cb" tabindex="-1" value=""></div> <div class="input-group-button"> <input type="submit" value="Go" name="subscribe" id="mc-embedded-subscribe" class="button"> </div> </div> </form> </div> <!--End mc_embed_signup--> <div class="footer-title">Retrouvez nous</div> <ul class="menu simple"> <li><a href="https://www.facebook.com/la.revanche.des.sites/" target="_blank" itemprop="url" rel="nofollow"><i class="fa fa-facebook"></i></a></li> <li><a href="https://twitter.com/revanchesites" target="_blank" itemprop="url" rel="nofollow"><i class="fa fa-twitter"></i></a></li> <li><a href="https://www.instagram.com/larevanchedessites/" target="_blank" itemprop="url" rel="nofollow"><i class="fa fa-instagram"></i></a></li> <li><a href="https://www.youtube.com/user/RevancheSites" target="_blank" itemprop="url" rel="nofollow"><i class="fa fa-youtube"></i></a></li> <li><a href="https://plus.google.com/+La-revanche-des-sitesFr" target="_blank" itemprop="url" rel="nofollow"><i class="fa fa-google-plus"></i></a></li> </ul></div></div></div> <div id="subfooter-widgets" class="container"><div id="text-3" class="small-12 large-expand columns widget widget_text"> <div class="textwidget"><ul> <li>Tous droits réservés la-revanche-des-sites.fr</li> <li>2017</li> <li><a href="https://www.la-revanche-des-sites.fr/mentions-legales">Mentions légales</a></li> <li>Made with <span class="text-color-alert">♡</span> in Lille</li> </ul> </div> </div></div> </footer> </div> </div> <script type='text/javascript'> /* <![CDATA[ */ var countVars = {"disqusShortname":"larevanchedessites"}; /* ]]> */ </script> <script type="text/javascript" src="https://www.la-revanche-des-sites.fr/wp-content/cache/minify/f8767.js"></script> <script type='text/javascript'> /* <![CDATA[ */ var embedVars = {"disqusConfig":{"integration":"wordpress 3.0.12"},"disqusIdentifier":"1198 ","disqusShortname":"larevanchedessites","disqusTitle":"Javascript et r\u00e9f\u00e9rencement","disqusUrl":"https:\/\/www.la-revanche-des-sites.fr\/blog\/javascript-et-referencement","postId":"1198"}; /* ]]> */ </script> <script type="text/javascript" src="https://www.la-revanche-des-sites.fr/wp-content/cache/minify/a6af3.js"></script> <script type='text/javascript'> /* <![CDATA[ */ var wp_ajax = {"url":"https:\/\/www.la-revanche-des-sites.fr\/wp-admin\/admin-ajax.php","nonce":"b75fd1a660"}; /* ]]> */ </script> <script type="text/javascript" src="https://www.la-revanche-des-sites.fr/wp-content/cache/minify/cd475.js"></script> <div id="cookie-notice" role="banner" class="cn-bottom bootstrap" style="color: #fff; background-color: #000;"><div class="cookie-notice-container"><span id="cn-notice-text">Nous utilisons des cookies pour vous garantir la meilleure expérience sur notre site. Si vous continuez à utiliser ce dernier, nous considérerons que vous acceptez l'utilisation des cookies.</span><a href="#" id="cn-accept-cookie" data-cookie-set="accept" class="cn-set-cookie button bootstrap">Ok</a> </div> </div></body> </html> <!-- Performance optimized by W3 Total Cache. Learn more: https://www.w3-edge.com/products/ Page Caching using disk: enhanced Mibnifié utilisant disk Served from: www.la-revanche-des-sites.fr @ 2018-02-21 06:01:17 by W3 Total Cache -->