- acquis et configuré le nom de domaine
- 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
Déroulement de la séance
A Choix et finalisation de la page d'attente
Vous avez du finaliser par binome la page d'attente que vous souhaitez publier, il faut désormais que chaque équipe choisisse une version de cette page d'attente (éventuellement que vous repreniez certains éléments intéressants dans différentes versions et que vous les fusionniez) pour que chaque équipe me soumette cette page pendant la séance de TP. Je passerai voir chaque équipe pour vérifier cette page.B 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
C Choix et achat du nom de domaine
Après avoir vérifié la disponibilité du nom de domaine cible vous allez me transmettre votre choix par mail : contact@natural-net.fr (1 mail par équipe/projet) avec comme sujet "projet web : choix du nom de domaine".Suivant le temps disponible nous réaliserons l'achat pendant les TP ou en dehors.
D 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
- cf http://www.formation-web.info/impression-print.html pour les grands principes
- cf http://www.alsacreations.com/tuto/lire/586-feuille-style-css-print-impression.html pour savoir comment intervenir et réaliser ces optimisations
- 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
- à 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)
- 1 seul heading de niveau 1 dans la page :
- 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
- 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 :
E 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 :
- http://www.amaranthe.be/blog/analytics-theme/installer-google-analytics
- https://support.google.com/analytics/answer/1008080?hl=fr
F 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.G Nouvelles vérifications et optimisations
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
- avec l'outil www.responsinator.com par exemple
- 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
- avec l'outil https://www.site-analyzer.com par exemple
- 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
- tranférez vos fichiers modifiés à distance
- vérifier leur bon fonctionnement
H 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
- google+
- et sur d'autres réseaux 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.
- Open graph facebook