un thème optimisé SEO

bg62 · août 2015

bonjour;)
Un petit essai de création et surtout d'optimisation au niveau ' SEO ' d'un thème pour PluXml 5.4.
visible ici : http://refok.fr/beigeseo/
Le principe:
- obtenir une compatibilité maximum pour tous les supports d'affichage.
- obtenir une vitesse maximum optimale.
- varier, les header, footer, sidebar et autre afin d’obtenir une meilleure prise en compte des articles, des pages statiques, des rubriques, du site, etc ... par les moteurs de recherche, notamment en variant ainsi ces paramètres, en essayant le plus possible d'éviter le 'duplicate content' éventuel.

Avant de le mettre à disposition de tous : tous les conseils et critiques seront les bienvenus !!!
-- aucun plugin n'est 'activé', il s'agit bel et bien du travail sur le 'template'.

nota, en passant : j'ai essayé d'éviter au maximum l'utilisation des "px" ( merci Joss et autres : http://forum.pluxml.org/viewtopic.php?id=5144 )

@pluche

- premier point, déjà: sur GTMetrix j'ai ceci:

Compressing the following resources with gzip could reduce their transfer size by 17.0KiB (76% reduction).

Compressing http://refok.fr/beigeseo/themes/beige/css/plucss.css could save 12.9KiB (79% reduction).
Compressing http://refok.fr/beigeseo/themes/beige/css/theme.css could save 3.5KiB (72% reduction).
Compressing http://refok.fr/beigeseo/themes/beige/css/home.css could save 565B (55% reduction).

seul problème: la compression GZip est déjà activée ...

- second point:

The following images are resized in HTML or CSS. Serving scaled images could save 23.6KiB (43% reduction).

http://refok.fr/beigeseo/data/medias/0001/coucher-de-soleil.jpg is resized in HTML or CSS from 800x435 to 609x331. Serving a scaled image could save 23.6KiB (43% reduction).

mais quid des autres résolution d'écran ?

- troisième point:

The following image(s) are missing width and/or height attributes.

http://refok.fr/beigeseo/data/medias/0001/coucher-de-soleil.jpg (Dimensions: 800 x 435)

?? comment y parvenir ??

- quatrième:

This page has 4 external stylesheets. Try combining them into one.

euh oui, comment ??

bankai · août 2015

Pour le premier point la compression Gzip ne suffit pas, il faut minifier tes fichiers CSS : http://www.cleancss.com/css-minify/
Pour le deuxième point tu dois redimensionner les images dans le CSS : responsive et viewport seront tes amis

Pour le troisième voici le code : <img src="data/medias/0001/coucher-de-soleil.jpg" alt="coucher de soleil " height="349" width="641" >
Pour le quatrième : combine les CSS peu volumineux dans ton style.css

Mes deux articles t'aideront dans ton travail :
audit-et-performance-analyser-son-site-ou-blog-facilement
reduire-et-optimiser-les-images-de-son-site-sans-affecter-la-qualite

DjbWebmaster · août 2015

Hello,

Il te reste des petites modifs pour le passer aux normes W3C

bye,

bg62 · août 2015

bankai a écrit:

Pour le premier point la compression Gzip ne suffit pas, il faut minifier tes fichiers CSS : http://www.cleancss.com/css-minify/
Pour le deuxième point tu dois redimensionner les images dans le CSS : responsive et viewport seront tes amis
Pour le troisième voici le code : <img src="data/medias/0001/coucher-de-soleil.jpg" alt="coucher de soleil " height="349" width="641" >
Pour le quatrième : combine les CSS peu volumineux dans ton style.css

merci à toi

mais je sors de GTMetrix d'où ces interrogations que je n'arrive pas à résoudre...
- les css sont 'minifiées', je viens d'en grouper 2 en une seule, cela ne change rien au problème signalé, qui n'a l'air de ne pouvoir être solutionné que via un .htaccess ...
- pour les images, et leur taille, ça je sais aussi, mais le problème qui se pose est que là, optimisée ou non, elles sont importée via l'éditeur de PluXml qui n'indique pas les dimensions d'office

-- comment les redimensionner via le css ??? ( la base de celui-ci est le thème par défaut ) et surtout également comment indiquer les dimensions 'automatiquement' quelque soit le support ???
- autres tests faits:
https://www.google.com/webmasters/tools/mobile-friendly/ = OK
https://jigsaw.w3.org/css-validator/ = OK

DjbWebmaster a écrit:

Hello,

Il te reste des petites modifs pour le passer aux normes W3C

bye,

là je pense que tu dois parler de https://validator.w3.org/nu/
mais il y a pas mal de notifications que je ne comprends pas et ne sais pas résoudre ....
dont, par exemple :
- tous les 'warnings' parlant des attributs "role" qui sont aussi ceux du thème par defaut sur lequel je me suis basé ...

@+

chriss · août 2015

Bonjour,

bg62 a écrit:

là je pense que tu dois parler de https://validator.w3.org/nu/
mais il y a pas mal de notifications que je ne comprends pas et ne sais pas résoudre ....
dont, par exemple :
- tous les 'warnings' parlant des attributs "role" qui sont aussi ceux du thème par defaut sur lequel je me suis basé ...

@+

les élements Header, Nav, Main n,ont pas besoin de 'role' d,après le W3C

et toujours d'après le W3C ce n'est pas nécessaire pour les élements Article.

bg62 · août 2015

chriss a écrit:

Bonjour,

les élements Header, Nav, Main n,ont pas besoin de 'role' d,après le W3C

et toujours d'après le W3C ce n'est pas nécessaire pour les élements Article.

donc si je te comprends bien, la ligne:

[== Indéfini ==]
<nav class="nav" role="navigation">

est erronée est devrait être:

[== Indéfini ==]
<nav class="nav">

ainsi que les autres que tu me cites
???
suis un peu plus que perdu là ....
;-)

je viens de faire un test en local en supprimant toutes les 'role= ....'
effectivement cela à l'air d'être plus que bon, MAIS il me reste un problème dans la css:

[== CSS ==]
header[role=banner]{color:inherit;background:url('../img/pamukkale_22.jpg') no-repeat center fixed;-webkit-background-size:cover;background-size:cover;min-height:18.75rem;border:none;border-radius:0.625rem;-moz-border-radius:0.625rem;-webkit-border-radius:0.625rem;}

que je ne parviens pas à résoudre, l'image ne s'affichant plus ...
@+

chriss · août 2015

Bonjour,
C'est ce que dit le W3C, mais cela parait logique... Si ton site est bien écrit NAV étant l'une des balises sémantiques html5. Généralement, dans cette section on va trouver des liens permettant d’accéder soit à d’autres pages du site, soit à différents contenus de la page. Et donc pas besoin de le redire, cela ferait double emploi, pareil pour HEADER et MAIN

chriss · août 2015

bg62 a écrit:
....... MAIS il me reste un problème dans la css:
[== CSS ==]
header[role=banner]{color:inherit;background:url('../img/pamukkale_22.jpg') no-repeat center fixed;-webkit-background-size:cover;background-size:cover;min-height:18.75rem;border:none;border-radius:0.625rem;-moz-border-radius:0.625rem;-webkit-border-radius:0.625rem;}
que je ne parviens pas à résoudre, l'image ne s'affichant plus ...
@+

????? pas de problème pour moi ou je ne comprends pas ta question..
Par contre tu peut supprimer ceci: -moz-border-radius:0.625rem;-webkit-border-radius:0.625rem;
Border-radius:0.625rem est suffisant.

bg62 · août 2015

chriss a écrit:
bg62 a écrit:
....... MAIS il me reste un problème dans la css:
[== CSS ==]
header[role=banner]{color:inherit;background:url('../img/pamukkale_22.jpg') no-repeat center fixed;-webkit-background-size:cover;background-size:cover;min-height:18.75rem;border:none;border-radius:0.625rem;-moz-border-radius:0.625rem;-webkit-border-radius:0.625rem;}
que je ne parviens pas à résoudre, l'image ne s'affichant plus ...
@+
????? pas de problème pour moi ou je ne comprends pas ta question..
Par contre tu peut supprimer ceci: -moz-border-radius:0.625rem;-webkit-border-radius:0.625rem;
Border-radius:0.625rem est suffisant.

apparemment si, "role banner" étant supprimé dans le 'header.php' il n'est plus "relié" à cette partie de la css et donc le fichier image ne s'affiche pas ... c'est là où je coince, pour 'ce' problème : recréer une bonne ligne de code CSS

chriss · août 2015

bg62 a écrit:

......
apparemment si, "role banner" étant supprimé dans le 'header.php' il n'est plus "relié" à cette partie de la css et donc le fichier image ne s'affiche pas ... c'est là où je coince, pour 'ce' problème : recréer une bonne ligne de code CSS

Ok si j'ai bien compris, tu veux supprimer "role banner" dans le HTML et le CSS.?

Mais comme tu as plusieurs Header, il faut bien spécifier chaque Header, le mieux serait de donner une classe.

DjbWebmaster · août 2015

Hello,

Il faut toujours mettre une class dans le header pour éviter les conflits si plusieurs header dans ton template.

Par habitude il ne faut pas styliser le header mais la class associée.

bye

bg62 · août 2015

Jormun a écrit:

Hello,
Quelques petits soucis :

Quand je clic sur le premier article, le menu disparait.
Quand je clic sur categorie 1, le menu réapparait mais j'ai un ":" au début de la description de la catégorie
Les liens sociaux n'ont pas l'air opérationnels ? si tu les inclus d'office dans ton theme il faudrait prévoir le blabla légal sur les cookies...

Pour un theme "responsive" c'est dommage d'avoir autant de vide a droite et a gauche en fullscreen sur un écran 1080p

Sinon j'aime bien le style global

pour ta première remarque = c'est voulu

de manière à n'afficher que le contenu éditorial de l'article

( avec ensuite l'intégration de ' breadcrumbs ' il n'y aura plus de problèmes ...
pour la seconde = les " : " proviennent certainement du ' codage ' de la 5.4, je ne les ai pas mis personnellement !!!

[== PHP ==]
		<section class="col sml-12 med-8">
		 : description de la première catégorie, partie visible par les internautes, à remplir dans tous les cas ;)</li>	

			
			<article class="article" role="article" id="post-1">

( bug ou ??? = comment faire ??? )
pour les liens sociaux, c'est aussi normal, puisque c'est une 'demo' quant au 'blabla' pour les cookies, là ausi ce sera à faire ensuite:
http://longuetraine.fr/index.php?article32/site-conforme-loi
http://refok.fr/index.php?article48/cookies-js
pour l'instant, le js, n'est pas intégré, le texte non plus ...

quant au dernier point, la largeur, que verrais-tu comme modifications ???
@+

bg62 · août 2015

DjbWebmaster a écrit:

Hello,

Il faut toujours mettre une class dans le header pour éviter les conflits si plusieurs header dans ton template.

Par habitude il ne faut pas styliser le header mais la class associée.

bye

Je n'y arrive pas ...
j'ai un 'headerhome.php' dans lequel j'ai ceci:

[== HTML ==]
<body id="top">
<div class="container">
	<header class="header sml-text-center med-text-center">

				<h1 class="bigtitlehome"><?php $plxShow->mainTitle('link'); ?></h1>

		<h2 class="h5 no-margin"><?php $plxShow->subTitle(); ?></h2>
		<h3 class="h5 no-margin">Un Thème 100% optimisé SEO et Responsive Web Design pour un référencement optimal.</h3>
		<!--<?php eval($plxShow->callHook("MyCoinSlider")) ?>-->
	</header>

et dans la css liée :

[== CSS ==]
header[role=banner]{color:inherit;background:url('../img/pamukkale_22.jpg') no-repeat center fixed;-webkit-background-size:cover;background-size:cover;min-height:18.75rem;border:none;border-radius:0.625rem;-moz-border-radius:0.625rem;-webkit-border-radius:0.625rem;}

qui donc ne fonctionne plus depuis que j'ai supprimé tous les 'role' .....
où et comment rajouter une autre ' class ' ??? alors là ...

DjbWebmaster · août 2015

Remplace

[== CSS ==]
header[role=banner]

par

[== CSS ==]
header.header

chriss · août 2015

ceci est un exemple et pas testé:

<header class="header sml-text-center med-text-center header_banner">

[del]header[role=banner][/del].header_banner {color:inherit;background:url('../img/pamukkale_22.jpg') no-repeat center fixed;-webkit-background-size:cover;background-size:cover;min-height:18.75rem;border:none;border-radius:0.625rem;-moz-border-radius:0.625rem;-webkit-border-radius:0.625rem;}

bg62 · août 2015

DjbWebmaster a écrit:
Remplace
[== CSS ==]
header[role=banner]
par
[== CSS ==]
header.header

super !!!
ça fonctionne nickel

facile, hein quand on a la connaissance, grand merci donc...
maintenant je vais essayer de passer à la suite, car il reste encore des erreurs sur le W3c ^^

bg62 · août 2015

re ... voilà où j'en suis maintenant:
sur https://validator.w3.org/unicorn/
la 'conformité générale' est OK
mais il reste encore quelques problèmes pour les mobiles:
https://validator.w3.org/unicorn/#validate-by-uri+task_mobileok
pas évident à régler ça !!!
si vous avez des idées ...

@+

bg62 · août 2015

encore une erreur que je n'arrive pas à solutionner !!!
et là, je pense, à cause d'un plugin... ( MySkinSelect )
le lien des tests:
http://refok.fr/pluxmlthemesSEO2/
si je le passe sur https://validator.w3.org/unicorn/
il me restaient 2 erreurs:
- la première est corrigée avec ceci:
http://forum.pluxml.org/viewtopic.php?pid=37207#p37207
- mais pour la seconde, j'ai ce signalement:

220 7 No p element in scope but a p end tag seen.

dans le code source de la page, j'ai bien ceci :

[== PHP ==]
<aside class="aside col sml-12 med-4" >
		<h5>Sélecteur de Th&egrave;mes :</h5>
<form action="/pluxmlthemesSEO2/" method="post"><select id="id_style" name="style">
	<option value="defaut">defaut</option>
	<option value="bordeaux">bordeaux</option>
	<option value="blueseo">blueseo</option>
	<option value="blancseo">blancseo</option>
	<option value="beigesimpleapersonnaliser">beigesimpleapersonnaliser</option>
	<option value="beigeseo" selected="selected">beigeseo</option>
</select>
<input type="submit" value="ok"/></form><div class="searchform">
	<form action="http://refok.fr/pluxmlthemesSEO2/index.php?search" method="post">
				<div class="searchfields">
						<input type="text" placeholder="rechercher ..." class="searchfield" name="searchfield" value="" />
			<input type="submit" class="searchbutton" name="searchbutton" value="Ok" />
			</p>
		</div>
	</form>
</div>

avec donc le fameux 'p' à problèmes 4 lignes avant la fin, MAIS de où sort-il et comment corriger cela ???
là je n'ai pas trouvé
@+

DjbWebmaster · août 2015

Hello,

Supprime la ligne 220 , car tu n'as pas ouvert de , regarde bien ton code

bg62 · août 2015

DjbWebmaster a écrit:

Hello,

Supprime la ligne 220 , car tu n'as pas ouvert de , regarde bien ton code

ben pas évident, elle est générée par ceci :

[== PHP ==]
	<aside class="aside col sml-12 med-4" >
		<h5>Sélecteur de Th&egrave;mes :</h5>
<?php eval($plxShow->callHook('MySkinSelect')) ?>
<?php eval($plxShow->callHook('MySearchForm')) ?>
		<h3 class="marque">
			<?php $plxShow->lang('CATEGORIES'); ?>
		</h3>

je pense que c'est donc dans le plugin lui-même qu'il faudrait intervenir, mais je ne trouve pas où ....

DjbWebmaster · août 2015

non je pense pas que ce soit le plugin,

fichier plxMySkinSelect.php du plugin

[== PHP ==]
public function MySkinSelect() {
		# Récuperation de la liste des thèmes
		$this->getSkins();
		# Mise en place du sélecteur
		$plxMotor = plxMotor::getInstance();
		$current_skin = plxUtils::getValue($_COOKIE['plxMySkinSelect'], $plxMotor->style);
		echo '<form action="'.plxUtils::strCheck($_SERVER['REQUEST_URI']).'" method="post">';
		plxUtils::printSelect('style', $this->aSkins, $current_skin);
		echo '<input type="submit" value="ok"/ >';
		echo '</form>';
	}

Il n'y a pas de balise

Edit: c'est le plugin plxMySearch,

à la ligne 191 fichier plxMySearch.php dans le dossier plxMySearch

tu peux supprimer , ligne 191 ou tu peux aussi ajouter à la ligne 188

[== HTML ==]
			?><p>

Regarde la source : plxMySearch.php

bg62 · août 2015

're' grand merci à toi, là oui c'est bon / corrigé et valide

Faudrait que quelqu'un prenne le temps de corriger toutes ces petites histoires de pinaillage, dans les plugins et ailleurs, pour ne pas avoir de nouveau le même genre de questions ...
@+

un thème optimisé SEO

Réponses