1392 sujets

Web Mobile et responsive web design

Bonjour,

J'ai reçu récemment un e-mail de Google indiquant que mon site web présentait des problèmes d'affichage sur mobile, ce qui est actuellement un critère essentiel de référencement (ou de déclassement!).

Jusqu'à présent, mon site s'affiche sans problème sur pc ainsi que les différents supports mobiles que j'ai testés.

J'ai été voir sur la page qui donne le détail des problèmes et qui permet de les corriger (et de le signaler à Google pour rentrer en faveur) :
https://search.google.com/search-console/mobile-usability/drilldown?resource_id=http%3A%2F%2Fwww.evedanse.be%2F&item_key=CAw&hl=fr

J'ai pu corriger certains détails, mais il y a des "erreurs" qui paraissent absurdes ou que je ne vois pas du tout comment corriger :

1) le plus gros souci, en citant Google :
"Texte illisible, car trop petit + Éléments cliquables trop rapprochés + Fenêtre d'affichage non configurée"
Le souci est que la seule "page" incriminée n'est pas une page, mais un dossier ! C'est le dossier que j'ai nommé "IMG", rassemblant toutes les images du site pour en faciliter la gestion, ce qui était une bonne pratique à l'époque. Si on tape l'adresse en question (www.evedanse.be/IMG/) dans la barre de navigation, on obtient une page html pure, générée automatiquement par le navigateur, à ma connaissance, qui liste simplement les fichiers contenus dans ce dossier. Je ne vois pas qui s'amuserait à aller faire cela (à part un développeur curieux) et le public ne verra donc en principe jamais cette "page" qui n'a pas pour but d'être vue et que je ne peux ni éviter, ni modifier.

Que faire alors ? Y a-t-il moyen de modifier cette "page" tout de même ? Ou alors il ne faut plus mettre les photos (ni autres documents comme des fichiers son ou des pdf) dans des dossiers, et tout laisser en bloc avec les pages html dans le dossier principal (et tant pis pour le mal de crâne lors des mises à jour) ?

2) Autre souci dans des pages du site
Si je vérifie les (vraies) pages html de mon site dans le "Test d'optimisation mobile" https://search.google.com/test/mobile-friendly?hl=fr, toutes les pages sont considérées comme "adaptées" aux mobiles, mais la plupart avec "Problèmes de chargement de la page". En cliquant pour voir les détails, je vois notamment des problèmes de script liés à l'intégration d'une fenêtre facebook, des vidéos Youtube ou d'un calendrier Google. Or, ce sont les scripts donnés par ces sites que l'on copie-colle sur nos pages html, je ne vois en quoi il faut les modifier.

3) Dans ces mêmes "Problèmes de chargement de la page",
Google m'indique que certaines pages de mon site s'affichent sans css et sans photos, comme s'il n'y avait pas de fichier css ou pas de lien avec les photos. Or, toutes mes pages sont bien liées à mon fichier css de la même manière, les photos sont bien présentes et tout cela s'affiche sans problème sur des supports réels. Alors pourquoi certaines pages sont considérées comme n'ayant "Aucun problème de chargement" (comme p.ex. www.evedanse.be/coursdanseorientale.htm) et d'autres considérées comme sans css ni photos par Google (comme p.ex. http://evedanse.be/stagesdanseorientale.htm) ?

Et, pire encore, je reteste aujourd'hui une page qui était hier OK à 100%, et maintenant le test Google me dit " Page inaccessible. Il est possible que la page soit indisponible ou bloquée par un fichier robots.txt."

De plus en plus absurde !

Quelqu'un a-t-il déjà eu ces problèmes avec Google ? Merci de m'aider car c'est mon métier et si Google me déclasse des résultats, vous imaginez les conséquences !
Bonjour, j’ai le même problème depuis quelques temps avec Google qui m’avertit de «?texte illisible car trop petit?» et d’«?éléments cliquables trop rapprochés?» et encore de «?contenu plus large que l’écran?» sur plusieurs pages, sans que mes modifications changent la donne et sans moyen de savoir quel est le contenu précis qui pose ces problèmes...

Il y a sûrement un moyen de modifier l’affichage du dossier IMG en redirigeant cette adresse vers une vraie page, mais le plus simple ce serait de l’ajouter au fichier robots.txt pour la désindexer.
Modérateur
Bonjour,

1) Pour le dossier IMG, si on veut que la liste des fichiers soit "invisible", on peut rajouter un script index.php ou index.html dans le dossier "IMG" avec ce qu'on veut comme contenu dedans. Ainsi, en cas d'affichage du dossier "IMG", c'est ce script qui sera affiché et non plus la liste des fichiers qu'il contient.

2) J'ai remarqué qu'à certains endroits dans ton code HTML, tu as mis des balises <p> qui contiennent tout un tas d'autres balises comme des balises <h3>. C'est incorrect. Il ne faut mettre que des balises de type inline à l'intérieur d'une balise <p>.

3) Pour les autres problèmes signalés par le rapport google, je dirais qu'il devrait suffire de faire du mieux possible pour la taille des textes et des boutons, et de le tester sur mobile, et ensuite d'attendre tranquillement : la Terre continuera de tourner. Après bon, les robots qui analysent tout ça, ils ne sont surement pas parfaits aussi.

Amicalement,
Modifié par parsimonhi (04 Nov 2019 - 14:20)
Bonjour, merci pour ces premières réponses et voici la suite :

@ Parsimonhi :

1) J'ai mis une copie de la page Contact.html de mon site dans le dossier IMG (tant qu'à faire, une page déjà validée pour la responsivité), mis cela en ligne, puis cliqué sur la validation de la correction dans la console Google… et rien n'a changé car Google s'obstine à dire que cette "page" http://www.evedanse.be/IMG/ est toujours concernée par le problème. Manifestement Google ne rescanne pas l'ensemble du site pour voir que maintenant une vraie page html existe à la suite de l'extension du dossier.

2) A ma connaissance, la balise <p> est de type block (voir p.ex. sur https://www.w3schools.com/html/html_blocks.asp) et peut donc contenir d'autres balises block ou inline. Ou alors il y a une règle particulière pour la balise <p> ? Ici je mets souvent les titres à l'intérieur de la balise <p> pour qu'ils puissent bénéficier des propriétés de <p> (p.ex. espacements). C'est sûr, mon code est loin d'être parfait (fait maison) et je l'améliore quand je peux. Donc si vous pouviez m'envoyer une copie du code qui vous semble erroné, et/ou un lien vers un article qui parle de cela, cela me serait certainement très utile (mais peut-être devons-nous aller dans un autre thème du forum).

3) cf 1) Pour la taille des textes, distance entre les boutons, etc., cela ne semble concerner que la "page" http://www.evedanse.be/IMG/. Les autres pages de mon site sont considérées comme "adaptées aux mobiles", comme je l'expliquais dans mon 1er post.

@ Anedja (et ceci je l'écris quelques heures plus tard)

Votre suggestion de désindexer la "page" http://www.evedanse.be/IMG/ via le fichier robot.txt semble avoir été LA solution !

J'ai mis en ligne un fichier robots.txt avec ceci :
User-agent: *
Allow: /
Disallow: /IMG/

Tout d'abord, cela n'a rien changé, mais il fallait signaler le chargement de ce nouveau fichier via le bouton "envoyer" en bas de la page (fallait deviner) + attendre quelques minutes. Sinon, Google reste à sa dernière version vue il y a un mois.

Ensuite, j'ai refait le test complet du site via la Google Search Console, et là, miracle ! tout est validé et il ne signale même plus les petits problèmes de "chargement de la page" liés aux pages valides (css, photos etc.). C'est tout aussi inexplicable, alors que je n'ai fait que désindexer le dossier IMG… Mais bon, l'essentiel est que Google nous considère comme valides !

PAR CONTRE, nouveau bémol, je refais le test sur différentes pages qui passaient hier, et aujourd'hui la console m'indique qu'elles ne sont pas et ne peuvent pas être indexées. Je reviens poster dès que j'en sais plus sur ce problème des pages qui ne sont plus indexées dans le test.

Et vous Anedja, vous avez bien fait valider vos corrections via l'interface https://search.google.com/test/mobile-friendly?hl=fr ? Ca n'a quand même pas marché ?

Au passage, voici un article utile concernant l'indexation des pages (et la différence entre "crawlable" et "indexable"), c'est ce qui m'a permis de créer ce fichier :
https://www.webrankinfo.com/dossiers/indexation/comment-desindexer

Entre temps, grand merci à vous deux et j'espère que cette expérience en aidera d'autres !
Modérateur
Bonjour,
evedanse a écrit :
...A ma connaissance, la balise &lt;p&gt; est de type block (voir p.ex. sur https://www.w3schools.com/html/html_blocks.asp) et peut donc contenir d'autres balises block ou inline. Ou alors il y a une règle particulière pour la balise &lt;p&gt; ?

J'aurais dû écrire que <p> ne pouvait contenir que du "contenu phrasé" (voir https://developer.mozilla.org/fr/docs/Web/HTML/Element/p et https://developer.mozilla.org/fr/docs/Web/Guide/HTML/Cat%C3%A9gories_de_contenu#Contenu_phras%C3%A9 )

Si tu mets autre chose, comme un <h3>, ça a pour effet de fermer automatiquement la balise <p>, et du coup, un peu plus loin, tu auras des balises </p> ne correspondant à rien. Pour t'en convaincre, tu peux tester le code ci-dessous. On affiche un <h3 dans un <p> puis un autre <h3> dans un <div>. Et on donne un fond jaune au <p> et au <div>. On voit clairement alors que le <p> n'englobe pas le <h3>, contrairement au <div>.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
p,div {background:yellow;}
</style>
<title>P tag</title>
</head>
<body>
<p>Toto va à la plage
<h3>Argh !</h3>
</p>
<div>Maman, je n'ai rien aux dents !
<h3>Argh !</h3>
</div>
</body>
</html>


Amicalement,
Je ne comprend rien à ce que tu écrit,
1) il t'a été dit de bloquer l’accès que nous avons tous à toutes tes images http://www.evedanse.be/IMG/
mets dans ce répertoire un index.php

<?php
 header('Location:  http://evedanse.be/');
 
 exit;
?>


D'autre part on y trouve
http://www.evedanse.be/IMG/contact.htm trés bien visible par nous toutes et tous ... mais pas Google puisque tu lui à interdit dans ton robots.txt

User-agent: *
Allow: /
Disallow: /IMG/
Je te signales par ailleur que google risque de te déréférencé, car tes plus grandes images sont présentes sur plus de 10.000 sites dans le monde ! fais attention à ce point très sensible actuellement par exemple clic droit sur cette image de toi et fait rechercher l'image !!
upload/1573351649-74200-contactoulednail.jpg
Pour répondre à Evedanse : J’ai toujours une page que Google considère comme affectée de trois problèmes de lisibilité sur mobile, mais comme « adaptée aux mobiles » quand je la passe au Test d’optimisation mobile. Je ne sais pas quoi faire à part redemander la validation et attendre que Google comprenne qu’il n’y a pas de problème.
Anedja a écrit :
Pour répondre à Evedanse : J’ai toujours une page que Google considère comme affectée de trois problèmes de lisibilité sur mobile, mais comme « adaptée aux mobiles » quand je la passe au Test d’optimisation mobile. Je ne sais pas quoi faire à part redemander la validation et attendre que Google comprenne qu’il n’y a pas de problème.

Si il y a des gros problèmes puisque
1) Google n'a pas accés à IMG et tout son contenu
2) les boutons sur mon portable sont impossibles à cliquer (trop proches entre eux)
3) apparemment son site n'est pas clair au niveau syntaxe du DOCTYPE
4) IMG est toujours piratable puisque non protégé
EXEMPLE DE CODE incohérent:

<meta charset="UTF-8">
<meta http-equiv=Content-Type content="text/html, charset=iso-8859-1">

Quel code en fait ???
Modifié par Jean-Pierre-Bruneau (10 Nov 2019 - 16:55)