• Support de cours 2015-2016

S2 - TP 8

Séance du 16 mai 

Rappel : éléments à livrer avant la séance du 16 mai  

Chaque équipe doit m'adresser par mail (contact@natural-net.fr) au plus tard le 15 mai un dossier compressé :

  • contenant un fichier HTML (page d'attente dans sa version la plus aboutie) nommé index.html
  • les fichiers et dossiers CSS JS images associés à cette page web

Travaux sur la page d'attente 

Lors de cette nouvelle séance vous allez travailler par équipe pour mettre en place votre page d'attente qui devra répondre aux exigences suivantes

  • posséder un aspect professionnel 
  • être adaptée aux mobiles et tablettes 
  • disposer d'un contenu expliquant clairement votre concept et favorable au référencement naturel 
  • favoriser un bon accueil des cibles 
  • disposer d'un graphisme soigné en phase avec votre activité 
  • favoriser les engagements des internautes : le partage sur les réseaux sociaux, la collecte d'adresse email (newsletter),... 
  • disposer d'un favicon 
  • être adaptée à l'impression 
  • respecter un maximum des bonnes pratiques / qualités évoquées lors de l'audit sur les aspects qualité techniques, performances, interopérabilité, utilité, utilisabilité, visibilité,...  
Les objectifs de ce TP sont d'avancer sur le projet de réalisation de site web en permettant à la fin de la séance d'avoir : 
  • publié une page d'attente de manière à ce qu'elle soit accessible via le nom de domaine choisi 
  • mis en place les outils d'analyse d'audience et qualité google analytics et google webmaster tools 
  • réalisé une première série de vérifications et d'optimisation concernant les adaptations aux mobiles et tablettes, l'impression, le potentiel de SEO (référencement naturel) de la page d'attente 
  • ouvrir une présence sur les réseaux sociaux de votre choix 
Comme vous le verrez il y a de nombreuses étapes à traiter, pour certaines vous avez déjà les moyens de les traiter en autonomie pour d'autres vous aurez besoin soit de notre aide soit de chercher sur le web des informations pour avancer. Ne bloquez pas sur un point pendant des heures, mieux vaut passer à un autre point et vous renseigner en parallèle pour reprendre ce sujet ensuite. 

Déroulement de la séance 

A Corrections et optimisations de la page d'attente

Une fois la page d'attente prête par équipe vous allez réaliser un certain nombre de vérifications et optimisations vous obligeant à réaliser des modifications au niveau du code HTML et CSS : 
  • 1. affichage en mobile et tablette (à l'aide de l'inspecteur web) et corrections si nécessaire 
  • 2. présence/mise en place des favicons 
    • cf https://fr.wikipedia.org/wiki/Favicon pour savoir ce que c'est 
    • créer un fichier image (photoshop, gimp,...) de 256 x 256px dans lequel vous mettez en place le design du favicon (un design très imple car l'image sera ffichée en tout petit) > exemple de favicon : http://www.formation-web.info/theme/fr/templates/favicon.png
    • http://www.favicon.cc/ ou outil équivalent pour générer par import d'un png les différents favicon à produire 
    • vous allez ainsi récupérer différents formats de favicon disponibles, les déposer à la racine de votre site ou dans un répertoire à l'intérieur du site 
    • vous devez ensuite modifier le code HTML de la page pour faire appel à ces fichiers 
    • vous devez ensuite tester si l'association entre la page et les favicon fonctionne correctement en testant la page dans différents navigateurs et en vérifiant si la page affiche bien le favicon que vous avez produit. 
  • 3. affichage lors de l'impression et corrections si nécessaire
  • 4. potentiel SEO de la page web 
    • sur la base des 3 expressions clés majeures pour le référencement de votre site vous devez auditer votre page web et réaliser les modifications nécessaires de manière à respecter les points suivants : 
      • 1 seul heading de niveau 1 dans la page : 
        • indiquant votre concept 
        • reprenant une ou plusieurs des 3 expressions clés majeures 
      • meta title 
        • De 55 à 65 caractères conseillés (espacements compris). Le titre de la page doit contenir les principaux mots-clés de la page, ainsi que le nom de votre organisation. Cela ne doit pas être une simple liste de mots-clés, mais doit refléter le contenu de la page. Chaque page doit avoir un titre unique, clair et personnalisé. Evitez d'y insérer des mots vides (le, la, de, du…).
        • Plus votre titre est long, moins il aura de chance d'être affiché entièrement sur un moteur de recherche.
        • La balise title doit être placée avant toutes les autres balises dans le head de votre document HTML après le meta charset.
      • meta description 
        • Entre 140 et 170 caractères conseillés (espacements compris). La meta description d'une page web est une balise meta qui joue dans l'indexation d'une page dans les moteurs de recherche et les annuaires.
        • Cette balise doit décrire succinctement le contenu de la page mais ne doit pas être une liste de mots-clés. En revanche, elle doit contenir les expressions clés les plus importantes de la page. Assurez-vous que chaque page de votre site ait une meta description différente. Evitez les caractères spéciaux.
        • La balise meta description est à placer après la balise title, dans la balise head de votre document HTML.
      • vérifier l'usage des h2, h3, h4,... 
        • de manière à ce que les contenus de ces balises soient en phase avec les expressions clés sur lesquelles vous travaillez 
        • une balise h2 ou h3 dont le contenu est "contactez-nous" n'a aucun intérêt du point de vue SEO, vous devez dans ce cas ou les cas équivalents 
          • modifier le contenu du headings de manière à ce qu'ils contiennent des expressions clés ayant du sens
          • remplacer ce heading par une autre balise ayant moins d'importance du point de vue SEO 
      • vérifier l'ensemble du contenu de la page de manière : 
        • à disposer d'un contenu assez riche en termes de volume 
        • à disposer d'un contenu permettant de travailler sur vos 3 expressions clés stratégiques d'après les 3 cocons sémantiques fournis 
        • à vérifier si les expressions clés majeures sont bien reprises plusieurs fois dans les textes 
        • à vérifier si les expressions clés majeures sont mises en valeur dans des balises strong et em (balises d'emphase) 
        • à vérifier que les contenus textuels sont bien structurés via des <p> et des éléments de liste (ul et li) 
    • pour ces optimisations SEO "on site" (sur la page web) vous pouvez aussi vous appuyer sur les informations présentées ici : http://www.formation-web.info/cours-2.html

B. Configuration outil analyse d'audience 

Nous allons utiliser google analytic pour suivre l'audience de votre site et en premier lieu de votre page d'attente. Vous devez donc ouvrir un compte google analytic (il vous faut une adresse gmail) puis créer un tag de suivi pour ce site. 
Ce tag de suivi devra être mis en place en bas du code HTML de votre page web. 

Plus d'infos :  Une fois le compte créer pour le suivi du site web mecri de donner les droits d'accès en tant qu'administrateur à naturalnetericemery@gmail.com

C. Dépot de votre page d'attente et des fichiers associés sur votre espace d'hébergement 

Une fois le nom de domaine et l'espace d'hébergement acquis vous pourrez à l'aide d'un outil de transfert de fichier (type filezilla) transférer vos fichiers vers le serveur distant de l'hébergeur. Une fois ce transfert effectué en accédant à votre nom de domaine vous devrez pouvoir accéder à la page web que vous avez produit, si la page ne s'affiche pas correctement c'est soit parce que vous avez oublié de transférer certains fichiers et répertoires soit parce qu'il y a des erreurs de liens dans vos appels de fichiers depuis la page web. 

Les accès ftp par noms de domaine sont les suivants :
  • pabz.fr
    • Nom d'hôte (serveur FTP) : ftp.cluster021.hosting.ovh.net
    • Identifiant (login FTP) : pabzfreibh
    • Mot de passe (password FTP) : 7pRxNBbRB8C2
    • Port : 21
  • weartbdx.fr
    • Nom d'hôte (serveur FTP) : ftp.cluster021.hosting.ovh.net
      Identifiant (login FTP) : weartbdxys
      Mot de passe (password FTP) : YyDG8Cs5Ds5s
      Port : 21
  • swapshareculture.fr
    • Nom d'hôte (serveur FTP) : ftp.cluster021.hosting.ovh.net
    • Identifiant (login FTP) : swapsharwr
    • Mot de passe (password FTP) : q5tEVJSCyFzE
    • Port : 21
  • kaktus-france.com
    • Nom d'hôte (serveur FTP) : ftp.cluster021.hosting.ovh.net
    • Identifiant (login FTP) : kaktusfrif
    • Mot de passe (password FTP) : Mzv3qVGADE2f
    • Port : 21
  • fripinbordeaux.com
    • Nom d'hôte (serveur FTP) : ftp.cluster021.hosting.ovh.net
    • Identifiant (login FTP) : fripinbodi
    • Mot de passe (password FTP) : sgNgJ43HmYFg
    • Port : 21
  • digitup-bordeaux.fr
    • Nom d'hôte (serveur FTP) : ftp.cluster021.hosting.ovh.net
    • Identifiant (login FTP) : digitupbyr
    • Mot de passe (password FTP) : ppGtzccSKFvD
    • Port : 21

D. Soumission du site aux annuaires et moteurs de recherches + nouvelles vérifications et optimisations 

Une fois votre page d'attente mise en production vous pouvez soumettre votre site pour favoriser son indexation par les moteurs de recherche et annuaires au travers par exemple des formulaires :  Si vous accédez correctement à votre page web via votre nom de domaine, c'est que vous avez effectué vos transferts correctement. Vous devez néanmoins réaliser un certain nombre de vérifications : 
  • affichage correct en version mobile et tablette
  • affichage correct des favicons 
  • vérifications de tous les liens pour voir s'ils sont tous fonctionnels 
  • vérification de la présence du tag google analytic 
    • dans le code HTML
    • en vérifiant si google analytic remonte bien des informations lorsque vous vous connectez au nom de domaine (onglet temps réel de google analytic) 
  • vérification des optimisations pour le print 
  • vérification du potentiel SEO 
Pour toutes ces vérifications vous aurez peut être de nouvelles corrections à effectuer, le principe sera toujours le même : 
  • sauvegarder les éléments que vous allez devoir modifier avant toute modification 
  • ouvrez les fichiers à modifier sur votre ordinateur (en local) et réalisez les corrections 
  • vérifiez les modifications en local 
  • transférez vos fichiers modifiés à distance 
  • vérifier leur bon fonctionnement 

E. Présence sur les réseaux sociaux 

Dès lors que le nom de domaine et la page d'attente sont en place vous allez pouvoir communiquer sur les réseaux sociaux et faire de votre nom de domaine le point central de votre communication. Nous vous invitons donc à : 
  • créer une adresse gmail spécifique du type NOMDUPROJET@gmail.com 
  • ouvrir avec cette adresse gmail une présence à minima sur : 
    • facebook : page de marque 
    • twitter 
    • google+
    • et sur d'autres réseaux sociaux 
Vous devrez ensuite mettre en place votre communication sur ces comptes sociaux (logo,...), permettre un renvoi vers le site web, animer ces comptes sociaux,... et relier votre site web à ces comptes sociaux : 
  • liens depuis le site renvoyant vers les comptes sociaux 
  • modification du code HTML du site pour mettre en place des liens entre le site et les comptes sociaux 
    • Open graph facebook 
      • Le protocole open graph (OGP: Open Graph Procotol) est un protocole créé par Facebook qui permet à n'importe quelle page web de définir le contenu d'un partage Facebook.
      • Remplissez le plus de balises open graph possibles et définissez un visuel correspondant au contenu de votre page plutôt qu'un simple logo.
    • Twitter card 
      • Les Twitter cards sont des miniatures générées lors du partage d'un lien vers votre site. Elle permettent d'enrichir votre tweet de métadonnées comme les Open_Graph de Facebook et Google+ Publisher.
      • Définissez un titre et une description correspondant au contenu de votre page. Ajoutez un visuel à vos Twitter cards, les tweets illustrées sont 150% plus retweetés que les tweets essentiellement textuels.
    • Google+ 
      • Ajoutez une balise link rel="publisher" au code entête HTML de votre page pour lier votre compte Google+ à votre site.

Votre marque existe désormais sur le web 

  • Avant la séance du 23/05/2018 seront vérifiés les points suivants : 
    • bon fonctionnement de votre page sur le nom de domaine en production 
    • respect des consignes pour la production de cette page d'attente 
    • bon fonctionnement de google analytics
    • mise en place de la présence sur les réseaux sociaux 
  • La séance du 23/05 vous permettra de peaufiner et d'ajuster la page d'attente, il en découlera ensuite une note par équipe.