28111 sujets

CSS et mise en forme, CSS3

Bonjour,

Je suis Wordpress et j'ai installé un plugin de "Related Posts", qui met les titres en Hn, ce qui n'est pas bon pour mon SEO. Evidemment, je pourrais modifier ces titres Hn directement depuis le code du plugin, mais cela va impacter les prochaines mises à jour.

Du coup, est-il possible de supprimer ce Hn depuis la CSS, avec une commande particulière ? J'ai eu beau cherché mais je n'arrive pas à trouver pour supprimer le Hn.

Si d'autres personnes ont déjà rencontré le problème, je suis preneur Smiley smile

Merci
Modérateur
Bonjour,

En Css, à part changer l'apparence des Hn vous ne pourrez rien en faire car tout se passe du côté du html généré.

Une solution radicale est d'appliquer en sur-couche un script qui va s'occuper de remplacer ces balises titre par ce que bon vous semble.

Je ne connais que fort peu Wordpress mais je pense ceci quasie infaisable en php* sans mettre le boxon mais en JS c'est facilement réalisable.

Qu'en pensez-vous ?


*: à moins que vous utilisiez un tampon de mémoire pour générer la sortie en PHP.
Modifié par Greg_Lumiere (28 Sep 2020 - 14:13)
Salut,
Il devrait y avoir des "hooks" wordpress sur lesquels tu peux agir pour modifier le contenu de tes éléments avant sauvegarde ou avant affichage.
Administrateur
Bonjour,

les moteurs de recherche - à l'ancienne - utilisent avant tout le code HTML généré pour faire leur boulot, sans tenir compte de CSS ou JS. Il faut donc agir sur le markup.
On ne peut pas en CSS "supprimer" un titre : on peut le cacher avec display: none ou visibility: hidden; (ou opacity: 0; ou font-size: 0; ou autre horreur) mais sans effet sur un bot (par contre sur les lecteurs d'écran oui : c'est comme si ça n'avait jamais été là). On peut les restyler mais idem.

Googlebot utilise aussi un moteur équivalent à un navigateur avec compréhension fine de CSS et JS (à base de V8/Blink/Chromium/Chrome pour résumer) mais il passe rarement et n'a d'utilité que pour les sites dont le code HTML se résume à <div id="app"></div> d'une part et pour analyser la différence avec le code HTML d'autre part (cacher des titres et liens, une bien bonne idée pour se faire repérer à tricher avec le référencement...).
Je rencontrais exactement le même soucis que MakiWaki, mais au vu des réponses, je pense que je vais changer de plugin. Mes connaissances en php sont limitées, et dans tous les cas, j'y passerai plus de temps, avec une efficacité non assurée.
Modérateur
Bonjour,
MakiWaki a écrit :
Je suis Wordpress et j'ai installé un plugin de "Related Posts", qui met les titres en Hn, ce qui n'est pas bon pour mon SEO. Evidemment, je pourrais modifier ces titres Hn directement depuis le code du plugin, mais cela va impacter les prochaines mises à jour.

Déjà, je ne vois pas trop comment on peut arriver à la conclusion que ça pourrait être mauvais pour le SEO (à moins d'être un expert google ou bing, et qui a mis les mains dans le code depuis moins d'un an). Mais bon, admettons ! Smiley smile

On va donc essayer de répondre à la question d'un point de vue purement technique (et la question est vraiment intéressante de ce point de vue).

Pour ce qui est des solutions à base de javascript, s'il s'agit de SEO, ça me parait peu approprié car rien ne garantit qu'un moteur de recherche ne va pas choper le code html sans tenir compte des modifications faites par javascript.

Il faut donc intervenir avant d'envoyer le html au navigateur ce qui veut dire modification en php dans le cas de wordpress. C'est sans doute ce qu'entendait Marvin Le Rouge en évoquant des "hooks".

Et comme le fait remarquer Felipe, c'est le html de la page qu'il faut modifier et non le css, car rien ne garantit qu'un moteur de recherche ne va pas choper le code html sans tenir compte des modifications faites par css.

Par ailleurs, MakiWaki souhaite, si j'ai bien compris, faire la modification sans toucher au code d'un plugin qui modifie "des trucs".

En résumé il faut donc un code php qui modifie le html généré par un plugin, et qui de préférence soit extérieur au code du plugin.

Une possibilité est d'utiliser un autre plugin qui s'exécuterait après le plugin qui pose problème, mais c'est lourd.

Une possibilité plus simple selon moi est de filtrer le contenu via un "mu-plugin". Ce sont des sortes de plugins simplifiés. À titre d'exemple, si je souhaite remplacer tous les <Hn> du contenu et les remplacer par des balises <p> (je dis bien ici "contenu", s'il y a des titres hors du contenu ils ne seront pas modifiés par le code ci-dessous), et en supposant qu'ils n'ont aucun attribut (sinon il faudra modifier la fonction my_magic_hn_to_p) :

1) on crée le répertoire wp-content/mu-plugins s'il n'existe pas déjà.
2) on crée un script php qu'on met dans ce répertoire (on peut lui donner n'importe quel nom, je vais supposer qu'on lui donne le nom "my-magic.php").
3) on met dans ce script le code suivant :
<?php
add_filter('the_content','my_magic_hn_to_p');
function my_magic_hn_to_p($content)
{
	$content=preg_replace("#<(/?)h[1-6]>#i","<$1p>",$content);
	return $content;
}
?>

Pour les "related-posts" modifiés par le plugin de MakiWaki, il faudra modifier les paramètres de la fonction add_filter ci-dessus (on n'a pas assez de détails pour répondre à cette question pour l'instant), et sans doute adapter la fonction my_magic_hn_to_p().

Et il faudra enfin espérer que ce filtre passe bien "après" les modifications du plugin ! Smiley lol Smiley lol Smiley lol

Amicalement,
Modifié par parsimonhi (04 Oct 2020 - 11:07)
Modérateur
Bonjour,

On aurait peut-être dû commencer par là : c'est quel plugin exactement (avec un lien, ce serait l'idéal pour qu'on puisse se faire une idée).

Si le plugin ne propose pas de possibilité de filtrer son contenu, on peut (comme l'a suggéré Greg_Lumiere un peu plus haut) utiliser une méthode bourine qui filtre sur l'ensemble du contenu de la page en passant par un tampon.

On peut alors par exemple utiliser le script suivant (qu'on appelle à nouveau my-magic.php et qu'on met à nouveau dans le répertoire "wp-content/mu-plugins" de wordpress). Dans ce code, on suppose que les "related-contents" commencent par '<div class="related-posts' et finissent par '<!-- .related-posts -->' . Le code remplace tous les <hn> par une balise <p>. Il tient compte des éventuels attributs présents et les conservent tels quels. Si ce n'est pas l'effet souhaité, il conviendra de modifier la ligne $m[2]=preg_replace("#<(/?)h[1-6]([^>]*)>#i","<$1p$2>",$m[2]);
function magic_set_up_buffer()
{
    if (is_feed()||is_admin()) return;
    ob_start('hn_to_p_in_related_posts');
}

add_action('wp','magic_set_up_buffer',10,0);

function hn_to_p_in_related_posts($html)
{
	$r='#(.*)<div class="related-posts(.*)<\!-- \.related-posts -->(.*)#s';
	if (preg_match($r,$html,$m))
	{
		$m[2]=preg_replace("#<(/?)h[1-6]([^>]*)>#i","<$1p$2>",$m[2]);
		return $m[1].'<div class="related-posts'.$m[2].'<!-- .related-posts -->'.$m[3];
	}
    return $html;
}

Avec un peu de chance, ça devrait tomber en marche direct !

Amicalement,