• Support de formation 2018-2019

TP 6 (08/11/2016)

Fait suite à l'ouverture technique du site et à la configuration Google Analytics et Google Webmaster tools

Accès aux projets par équipe 

Les objectifs du TP

Les objectifs de ce TP sont d'avancer sur le projet de réalisation de site web : 
  • 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 
  • Ouverture d'une présence sur les réseaux sociaux de votre choix et relier cette présence à votre site 
  • Eventuellement : configurer une boite mail du type contact@votrenomdedomaine.fr
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. 

Points à traiter durant la séance  

A. Définition d'une liste d'expressions clés stratégiques 

Dans votre dossier partagé sur google drive vous devez créer un document dans lequel :
  • vous allez lister une cinquantaine d'expressions clés très stratégiques (une expression clé = 2 à 5 termes différents) 
  • sur la base de cette liste vous allez choisir et mettre en valeur les 3 expressions clés les plus stratégiques pour la réussite de votre projet web 

B. 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 
    • vérification du potentiel SEO 
    • 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 
        • à 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
  • 5. le contenu en tant que tel 
    • pensez à disposer d'un contenu pertinent, clair et précis pour les cibles
  • 6. les fonctionnalités de type formulaire 
    • si vous pensiez mettre en place des formulaires sur votre page d'attente pour vous contacter, collecter des abonnements à une newsletter,... c'est une bonne idée,... mais l'espace d'hébergement souscrit ne le permet pas. 
    • dans ce cas et temporairement (nous pourrons le faire dès que nous disposerons d'une version avec CMS du site) nous vous invitons à utiliser des outils de gestion de formulaire tels que Typeform (en mode gratuit) que vous pourrez proposer en mode plus ou moins intégré sur votre site. 

C. Configuration outil analyse d'audience 

  • Il faut vérifier le bon fonctionnement de l'outil google analytics en vous connectant à cette interface
  • vous devez également configurer des droits de consultation et de modification pour ce compte google analytics pour l'adresse mail : naturalnetericemery@gmail.com

D. 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 développer une présence sur les réseaux sociaux et faire de votre nom de domaine le point central de votre communication. Nous vous invitons donc à : 
  • à l'aide de l'adresse gmail spécifique du type NOMDUPROJET@gmail.com 
  • ouvrir avec cette adresse gmail une présence à minima sur : 
    • facebook : page de marque 
    • 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.

Déroulement de la séance 

  • 9h à 11h15 : travaux par équipe + réponses à vos questions 
  • 11h15 à 13h : point projet par équipe + audit rapide de votre projet 

Prochain jalon...

L'objectif est de permettre une "ouverture commerciale" au plus tard le 17/11/2016