Le 14 septembre 2017, nous avons publié une version actualisée de notre Politique de confidentialité. En utilisant video2brain.com vous vous engagez à respecter ces documents mis à jour. Veuillez donc prendre quelques minutes pour les consulter.

Joomla! : Optimisation du référencement

Créer un site mobile ready

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Pour apparaître dans les résultats de recherche pour mobiles, votre site doit s'afficher correctement sur tous les écrans et supports. Suivez ces quelques conseils et générez des AMP (accelerated mobile pages for Joomla!) avec un plug-in.

Transcription

Etes-vous bien sûr que votre site est bien compatible avec les mobiles et autres tablettes ? Nous allons voir comment le vérifier, éventuellement apporter des améliorations à votre site Joomla. Et nous aborderons le nouveau format AMP, « Accelerated Mobile Pages. » L'objectif de cette séquence est, bien entendu, d'éviter ce genre de résultat. Donc, sur l'outil test de compatibilité mobile de Google Developper, ici, nous avons des petits soucis. On va pouvoir corriger, c'est pas bien grave, mais par rapport à la largeur de l'écran, et aux liens qui sont trop rapprochés. Si vous utilisez une version récente de Joomla, vous devriez être compatibles avec les mobiles et les tablettes. Et l'élément principal de cette compatibilité, reste le template. Donc, Protostar est un template qui est compatible, qui est « responsive », donc qui s'adapte à toutes les tailles d'écran. Ici, nous avons un autre template, Yoo_master, et dans les propriétés de ce template, par défaut, nous avons le viewport, qui permet effectivement de détecter les formats d'écran, et d'adapter le CSS, en fonction des ces écrans, qui est activé, donc, on ne va sûrement pas le désactiver. Avant de choisir un template, vérifiez bien ses propriétés, et même faites des tests. Un autre outil Google de test, c'est Resizer, ne pas confondre avec un module qu'on peut installer facilement, sur son navigateur Firefox ou autre, qui permet aussi de tester, en fonction des caractéristiques des écrans. Là, c'est un test en ligne, qui est peut-être plus sympa que le module qu'on va trouver dans Firefox. Rapidement, on va pouvoir tester ici les formats sur différentes taille d'écran de portable ici 840, mais on peut faire du 960. On peut faire du 1280 sur un écran d'ordinateur portable. Ou plus petit. Ici, notre barre d'outils se transforme bien, et en cliquant sur le hamburger, vous avez ici les liens du menu. Même chose sur un téléphone mobile, on va retrouver ce menu. Et on va pouvoir tester les différentes tailles d'écran, de façon à avoir un site bien adapté aux mobiles. Une chose importante mais qui est assez facile à faire, c'est le format des images. Donc, préférez plutôt un format vectoriel pour vos images, et le format vectoriel standard sur le web, c'est le format PNG. Le PNG a l'avantage de s'adapter à toutes les tailles, et de se redimensionner assez bien, quelque soit la largeur de l'écran. Préférez donc les images PNG, pour décorer vos sites. Pensez aussi aux vidéos, même à celles récupérées sur YouTube, un petit code CSS dans le fichier de surcharge, CSS pourra aussi faire l'affaire pour adapter vos vidéos à la taille de l'écran. Autre outil que vous allez trouver dans la Search Console de Google. C'est: Explorer comme Google, c'est dans le menu exploration. Explorer comme Google. Vous tapez l'URL d'une page précise, ou si c'est votre page d'accueil, vous laissez votre page comme ça. Vous pouvez inspecter page par page. Explorer et afficher, parce qu'il va vous permettre d'avoir des informations détaillées sur les corrections que Google aimerait que vous apportiez à votre page. Alors, on va aller voir le résultat ici, de cette analyse. D'un côté, on a la page telle que Google l'a vue. Le robot de Google, Googlebot, et tel qu'on voit la page. Il y a une petite différence, et là, on a un certain nombre de conseils, pour modifier certaines choses. Alors en général, il faut aller dans le fichier robots.txt pour aller débloquer l'accès à certains fichiers qui sont dans votre template. Fichiers script, etc, il y a un grand débat là dessus. Dans le robot.txt récent, on autorise l'accès, en tous cas, on n'interdit plus l'accès au template. C'est quand même un peu risqué, parce que le robot.txt, est accessible à tout le monde, et on peut avoir des adresses pour accéder à des fichiers Java Script ou autres, et ça peut être assez dangereux. Mais dans la pratique, il faut prendre son robot.txt, et autoriser l'accès à ces fichiers. Refaire un test, de façon à avoir un résultat propre. Donc une fois que Googlebot est content, qu'il a bien tout vérifié, vous pouvez envoyer le résultat pour l'indexation dans le moteur Google. Autre outil dans cette console. C'est ici dans apparence, dans les résultats de recherche. Vous avez un nouveau format de page, qui s'appelle AMP, « Accelerated Mobile Pages. » Avant de tester vos pages, nous allons paramétrer un plugin Joomla, pour les rendre compatibles. Nous venons d'installer le plugin WBAMP, donc nous allons le rechercher, en tapant son nom pour aller plus vite. En fait, nous avons deux plugins qui ont été installés. Celui qui permet les paramétrages, c'est le premier, WBAMP. Alors, le principe de ce format, c'est de créer des pages qui vont s'afficher plus vite sur les mobiles, un exemple ici, il faut activer, avant tout, la réécriture des URL, comme nous l'avons vu dans cette formation. Puisqu’elles vont être transformées à partir d'une URL réécrite. Et là, vous avez des exemple, mapage/amp, ou .amp. html, sont les formats qui vont être acceptés par les mobiles. Alors, vous avez la possibilité de faire des réglages, de personnaliser vos pages, il faut commencer par le choix des pages. On peut sélectionner que certaines pages avec leur numéro d'identification, leur numéro d'ID. SI vous voulez utiliser toutes les pages, c'est l'astérisque, en général, on va accélérer les pages les plus importantes. Les articles d'un blog, les fiches produits d'une boutique. Ces pages peuvent avoir un lien sur des pages plus traditionnelles, des pages enrichies plus traditionnelles, un peu plus lourdes à télécharger. Évitez les formulaires de contact. Évitez les pages de catégories. Donc, c'est vraiment les articles qu'on va mettre en avant, d'ailleurs, c'est ce qui est prévu ici, donc, on va laisser comme ça. Les tâches, ne mettez rien, ça va être si l'article va être publié, si il est archivé, etc, donc ça, on n'en a pas besoin. Et, on va ici, chercher les catégories, qui contiennent les contenus qu'on veut accélérer. On va prendre la catégorie, la route du thé, les articles de la route du thé. Et même, si on prend tous les articles pour l'expérience, il faut quand même renseigner ici, avec un astérisque. Mais, on pourrait bien sûr, ne sélectionner que les identifiants des articles qui nous intéressent. Voilà, en fait, ce plugin fonctionne avec des règles, qu'il faut un peu paramétrer au début. Ici, c'est la plus importante. Après, il y a des règles qui vont concerner les extensions que vous rajoutez, les composants déjà intégrés, comme le composant banière, le composant contact, mais on a aussi osmap, donc, les composants installés sur votre site. Ça peut être K2, ça peut être d'autres composants. N'oubliez pas de renseigner les méta données, avec le nom du site, l'URL de l'image, la formation sur le reponsable de publication. Vous avez des options pour faire la liaison avec Google Analytics. Dans personnalisation, vous pouvez aussi ajouter des boutons de partage, pour les réseaux sociaux, par exemple. Et puis, conserver des liens avec des réseaux de publicité, comme AdSense. WBAMP, donc un plugin très complet, pour rendre ces pages accélérées pour les mobiles. Nous venons de voir dans cette séquence quelques outils et un plugin, pour améliorer le positionnement de vos pages dans les résultats de recherche, pour mobiles.

Joomla! : Optimisation du référencement

​Intégrez le référencement dans le processus de création de vos sites Joomla!. Augmentez la visibilité de vos pages en optimisant l’utilisation des hyperliens, balises meta, etc.

2h13 (30 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Thématiques :
Design web
Marketing
CMS
SEO
Spécial abonnés
Date de parution :14 avr. 2016

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !