RENCONTRE DEVELOPR6 14 JUIN 2013
PRÉSENTATION de Smile Chiffres clés, chiffres d'affaires, nombre de salariés, nombre d'agence, croissance annuelle, années d'expérience, etc.
PRÉSENTATION DE SMILE SYNTHÉSE 21 ans d expérience 1 er intégrateur européen de Solutions open source 700 experts de l open source 16 agences dans le monde 38 M de CA en 2011 35% de croissance par an
PRÉSENTATION DE SMILE NOS SERVICES Consulting Agence Ingénierie Système Exploitation Avant-projet Cahiers des charges Choix de solutions AMOA Audits Benchmark Identité visuelle Iconographie Stratégie éditoriale Ergonomie, accessibilité Storyboard Conception graphique Expertise sur différentes gammes de solutions Mise en œuvre et intégration de solutions Dévelopts spécifiques Méthodologie et conduite de projet Architectures Tests de charge Expertise système Préparation des plateformes Virtualisation Hébergement Tierce Maintenance Applicative (TMA) Formation Formation, Certification, Assistance, Conduite du changement
PRÉSENTATION DE SMILE EXTRAIT DE NOTRE OFFRE
PRÉSENTATION DE SMILE FOCUS SMILE DIGITAL 20 collaborateurs Situés sur Paris, Lyon, Montpellier, Nantes date de création 2000 Profils Chefs de projet Ergonomes Directeurs de création Directeurs artistique Webdesigners Flasheurs Consultants emarketing Experts Webanalytics Experts SEO Consultants éditorial Agence intégrée au groupe SMILE
PRÉSENTATION DE SMILE FOCUS SMILE DIGITAL MARKETING ERGONOMIE Audits ergonomiques AMOA Rubricage Conception ergonomique Accessibilité Tests utilisateurs Tri par carte DESIGN Benchmark graphique Planche tendance Chartes Graphiques Logos Animations Flash Motion Design Déclinaisons Benchmarks Recommandations stratégiques Référencement naturel Webanalytics Réseaux Sociaux Webmastering EDITORIAL Cartographie des contenus Charte éditoriale Accompagnement à la rédaction de contenus
PRÉSENTATION DE SMILE EXTRAIT DE NOS RÉFÉRENCES Macif, Cadremploi, Dassault Systemes, Caisse D Epargne, Bureau Veritas, Sport24, Inra, Bouygues Telecom, Vinci, Ministère de l Emploi, Hachette Filipacchi, Prisma Presse, Explorimmo, Renault, Spie, Crédit Coopératif, La Poste, ETS, Gîtes de France, Yves Rocher, Bouygues Construction, Longchamp, Dior, PagesJaunes, Merck, Zodiac, Souriau, Arjowiggins, Sanef, Conseil Régional Ile de France, Ministère de l Environnement, Commissariat à l Energie Atomique, Ministère du Tourisme, JCDecaux, HEC, Véolia, Groupama, Société Générale,
& WEB ANALYTICS QUELQUES RÉFÉRENCES
PRÉSENTATION DE SMILE NOS LIVRES BLANCS
SYNTHESE Visibilité Respect des bonnes pratiques Trafic qualifié & durable Notre livre blanc : Référencement, ce qu il faut savoir Mesure de la performance Indicateurs clés
- RESPECT DES BONNES PRATIQUES DE DÉVELOPPEMENT - MISE EN PLACE D'UN "NOUVEAU" BALISAGE
RAPPEL DES BASES Se préoccuper du référencement naturel (SEO) c est se préoccuper de la notion de visibilité de ses contenus. Cela pour augmenter votre visibilité de façon durable afin de gagner un trafic qualifié sur votre place de marché. Mais attention le SEO est un travail sans fin! Vos concurrents travaillent leur positionnement comme vous et veulent passer devant vous.
& WEB ANALYTICS ETHIQUE SEO Nombre de référenceurs peuvent avoir des résultats rapides en utilisant des techniques classées comme «blackhat». C'est-à-dire des techniques qui sont interdites par Google et d autres moteurs. Rien d illégal la dedans, notre métier de SEO n a rien de «naturel», nous tentons de détourner les règles dictées par les outils de recherche pour améliorer votre positionnement. Cependant certaines techniques (spam pour récolter du lien, cloaking ) ne font pas partie de notre arsenal. Nous croyons plutôt à une approche sur le long terme : respect des guidelines technique et bonne gestion éditoriale de votre contenu. Le référencement naturel n est pas une campagne sur quelques semaines, mais bien une façon de récolter un trafic qualifié et pérenne.
LES PILIERS DU SEO 3 2 1
La base en référencement naturel : S assurer que votre site est correctement développé pour les outils de recherche. Un site rapide, sans erreur de développement et respectant les guidelines SEO se positionnera mieux dans les résultats de recherche. Mais surtout, vous vous assurez de l indexation de vos contenus
1 ère règle de développement : S assurer que sa pré-production soit protégée
1 ère règle de développement : S assurer que sa pré-production soit protégée Eviter la duplication de contenu lors de la mise en ligne Eviter que les internautes découvrent trop tôt un site web Le robots.txt? Insuffisant et peu sécurisé si on sort du SEO.
Les bonnes méthodes : La restriction par IP : via votre fichier.htaccess ou dans la configuration de l hôte virtuelle de votre site de dev. Cela implique des IP fixes. La restriction par mot de passe : cela peut compléter la méthode précédente. Il en existe d autres. L idée est de sécuriser sa préproduction.
2 ème règle de développement : Rediriger ses contenus Lors de la mise en place d un nouveau site web, pas de soucis, tout part de zéro. Mais lors d une refonte, il est plutôt recommandé de ne pas perdre le travail effectué depuis, souvent, plusieurs années.
2 ème règle de développement : Redirection 301 la seule méthode a retenir Ces redirections de type 301 (définitives donc) sont nécessaires afin de conserver les acquis en terme de positionnement sur les outils de recherche. Ce type de redirection permet de conserver l historique SEO (backlinks, date d indexation )
2 ème règle de développement : Redirection 301 la seule méthode a retenir Chacune de vos URL doivent être redirigées au niveau du serveur via le fichier.htaccess, ou via code source (Php). Les autres méthodes, JavaScript par exemple ou les redirections 302 (redirections temporaires), enverront un mauvais signal à Google, voir feront disparaître vos résultats de recherche (SERP).
2 ème règle de développement : Redirection 301 la seule méthode a retenir Méthode : chaque ancienne page doit être redirigée vers sa nouvelle URL : page catégorie niveau 2 catégorie niveau 1 autre page éditoriale éventuelle homepage Chaque page doit être redirigée vers le contenu éditorial le plus proche. Si aucune page n est trouvée, la homepage doit être la dernière solution évoquée.
2 ème règle de développement : Redirection 301 la seule méthode a retenir C est la même méthode utilisée pour les noms de domaines : www.smile.fr & smile.fr Mais aussi www.smile.fr/accueil.html Source de duplication de contenu pour le SEO, mais aussi pour le web analytics
3 ème règle de développement : Quelques bonnes pratiques de développement (et montage) La base technique doit pouvoir faciliter le passage des robots de «crawling», mais aussi faciliter leur compréhension du contenu et de l environnement web de vos sites web.
3 ème règle de développement : La structure de votre site Arborescence / Ergonomie / Design : les premiers choix fait avant tout développement aura un impact sur votre indexation. La règle des «3 clics» pour accéder à un contenu est toujours vraie. Un internaute veut accéder vite à ce qu il cherche, un outil de recherche aussi.
3 ème règle de développement : Le maillage interne Les outils de recherche doivent accéder à vos nouveaux contenus ainsi qu a vos anciens contenu. Aidez les! - Articles relatifs ou de produits associés. - Créer des modules d'articles à la une, de publications populaires - Créer une page «Plan de site» qui récence tous vos contenus.
3 ème règle de développement : La vitesse de chargement L accès a votre contenu, un critère important pour Google (PageSpeed)
3 ème règle de développement : La vitesse de chargement - Séparer le contenu (code html) du code de présentation (css) et du code interactif (JavaScript). - Ne pas utiliser de code css ou JavaScript directement dans le code source. - Optimiser la compression des fichiers. - Regrouper les fichiers.css dans une feuille de style externe unique. - Regrouper les fichiers.js dans un fichier JavaScript externe unique. - Optimiser l'ordre du code pour un téléchargement parallèle des ressources, appeler les css avant le JavaScript. - Optimiser la gestion du cache (système ou navigateur) - Respect des normes W3C
4 ème règle de développement : Les fichiers «annexes» Souvent oubliés, ils sont pourtant indispensables pour pouvoir gérer correctement son référencement naturel. Le sitemap.xml & le robots.txt Ils ne permettront pas un meilleur positionnement sur les outils de recherche, mais vous aideront a optimiser votre indexation.
4 ème règle de développement : Le sitemap.xml Le fichier «sitemap.xml» a été créé pour faciliter le travail des moteurs en listant les différentes pages et rubriques contenues dans le portail et en donnant des informations supplémentaires sur chacune d entre-elles. Ce fichier doit être généré automatiquement selon l'arborescence du portail et mis à jour à chaque mise en ligne. Un sitemap se limite à 50 000 URL. Si dépassement, il faudra envisager un fichier index de sitemap.
4 ème règle de développement : Le robots.txt Le «robots.txt» a été créé pour donner des directives aux robots d'indexations lorsqu ils explorent votre portail, le but étant de leur préciser le contenu qu ils peuvent ou non indexer. Fichier devenu incontournable depuis les mises a jour de l algorithme de Google. Il suffit ensuite de lister les répertoires ou pages web interdites aux robots d'indexations grâce à la commande «disallow: /» Attention de bien ajouter le lien vers le sitemap.xml dans le robots.txt
4 ème règle de développement : Le robots.txt A cacher des moteurs de recherche (afin d éviter la duplication de contenu ou le contenu de mauvaise qualité pour les outils de recherche) Flux RSS Wishliste éventuelle Comparaisons de produits Pages de contact Les résultats avancés Pages de tri (facettes).
Aide au développement : Google Webmaster Tools Un outil devenu incontournable : Vérification de son trafic Vérification de l indexation des contenus Microformats Sitemap.xml / robots.txt Duplication de contenu Backlinks
5 ème règle de développement : Retoucher le backoffice du CMS utilisé Les CMS actuels font des efforts vers le SEO, mais cela ne suffit pas. Améliorez les choses pour : -Optimiser les balises META (automatique / manuelle) -Vérification de la gestion des images -Balisage Canonical (duplication de contenu) -Ajoutez d autres balises - Chaque client a son besoin, le backoffice doit s adapter pour que l optimisation SEO reste possible.
5 ème règle de développement : Retoucher le backoffice du CMS utilisé Optimisations obligatoires : -Sémantique de base (Hn) -Balises META et élément Title -Textes alternatifs (liens, images)
6 ème règle de développement : Réécriture des URL L URL rewriting est une méthode de réécriture des URL techniques générées par les outils de backoffice. Cela consiste à transformer une URL technique comportant plus ou moins de paramètres dynamiques par sa traduction en mots clés compréhensibles par un internaute. ex : http://www.smile.fr/produits/ez-publish
6 ème règle de développement : Réécriture des URL Les outils de recherche peuvent cependant suivre et prendre en compte une URL dynamique. Ce n est pas un point qui bloquera ou améliorera fortement votre référencement naturel. Ce choix doit aussi être fait pour aider l internaute à naviguer sur votre portail. Comme pour un fil d Ariane.
6 ème règle de développement : Réécriture des URL Attention cependant sur le choix d optimisation de ce type, l URL rewriting doit respecter certaines règles et ne pas trop en faire. En effet, il ne sert à rien de multiplier les mots clés dans ces URL (que ce soit pour le nom des répertoires ou le nom de la page). Les outils de recherche ne prendront pas en compte l ensemble des mots clés et iront même parfois jusqu'à pénaliser votre page ou votre portail en entier. Il vaut mieux se limiter aux mots clés principaux définissant votre contenu.
6 ème règle de développement : Réécriture des URL : quelques recommandations - L'édition des titres de pages ou contenus éditoriaux doit être indépendante du nommage des URL : Changer le titre éditorial d'une page ne doit pas impliquer de changement de l'url - L'édition des balises Title doit être indépendante du nommage des URLs : Changer la balise Title d'une page ne doit pas impliquer de changement de l'url ni du titre éditorial. - Toute modification effectuée via le remplissage d un champ URL ou du champ titre générant la clé d URL implique obligatoirement une redirection 301 automatique de l'ancienne version de l'url vers la nouvelle
Balisage supplémentaire : OPEN GRAPH PROTOCOL Ce protocole permet d ajouter du sens à vos contenus pour le partage sur les réseaux sociaux. Cela rend le partage de vos pages web sur les réseaux sociaux plus efficace et améliore par la même occasion leur référencement naturel. Ces balises vont permettre à vos pages web d avoir des liens générés sur Facebook & Google+ (via les boutons «j aime» ou G+1) beaucoup plus parlant et percutant. C est vous qui maitrisez ce qui est publié.
Balisage supplémentaire : OPEN GRAPH PROTOCOL En effet, l information est mise en valeur et vous permettra de récupérer du trafic sur votre site web. Vu la puissance du partage des contenus sur les réseaux sociaux, présenter vos contenus de façon ludique et efficace (image/vidéo + description + URL) nous semble être aujourd hui indispensable a tout développement. Plus d informations ici sur ce protocole : http://ogp.me/
Balisage supplémentaire : MICRO DONNEES Les microformats (ou aussi microdonnées), c est une nouvelle technique (lancée en 2003 tout de même) pour définir sémantiquement votre contenu. Donner du sens à son contenu est devenu un vrai défi pour les développeurs de sites. L arrivée de la version «knowledge graph» du moteur de recherche Google va accélérer la mise en place de ces attributs. Quel est le nom du produit, sa catégorie, est ce que le produit est en stock, quel est son prix, les votes des internautes? Mais aussi des événements, des personnes, des avis
Balisage supplémentaire : MICRO DONNEES Tout cela peut être défini avec les microdonnées. C est aujourd hui très largement utilisé par les sites e-commerce. Mais pas forcément toujours pris en compte par Google
Balisage supplémentaire : MICRO DONNEES, deux formats différents Microformat : <address class="vcard"> <p> <span class="fn">jean Bout</span><br/> <span class="org">société Exemple</span><br/> <span class="tel">604-555-1234</span><br/> <a class="url" href="http://exemple.com/">http://exemple.com/</a> </p> </address> Microdata (microdonnées) : <div itemprop="rating" itemscope itemtype="http://datavocabulary.org/rating"> Note : <span itemprop="value">8,5</span> <meta itemprop="best" content="10" /> </div> Plus d informations ici : http://schema.org/
Balisage supplémentaire : MICRO DONNEES Nouveau : L affichage du logo de l'entreprise dans les SERP (résultats de recherche). Une autre manière de mettre en avant votre site visuellement dans les résultats de recherche. <div itemscope itemtype="http://schema.org/organization"> <a itemprop="url" href="http://www.example.com/">home</a> <img itemprop="logo" src="http://www.example.com/logo.png" /> </div>
MERCI! PIERRE BARTHELEMY-IVANOFF CONSULTANT REFERENCEMENT NATUREL & WEBANALYTICS SMILE - AGENCES DE NANTES / LYON pierre.barthelemy@smile.fr http://www.smile.fr Sur Twitter : @ivanoff