Introduction
Ayant fait quelques modifications sur le blog, je me suis dit qu'il serait bien de partager celle-ci. Il faut savoir coder, utiliser le css ou modifier le htaccess pour comprendre correctement mes explications. Bon en même temps, c'est pas compliqué ... il suffit de s'inspirer de mes exemples et de les modifier pour votre blog. Sinon, ça peut constituer un début d'aide et c'est déjà pas mal. Vous ne trouvez pas ? Pika Pika chuuuu !
Avec ou sans www
Bon je n'y pensais plus depuis quelques années ... le duplicate content. Bon avec les autoblogs, je ne sais pas si Google considére mon contenu comme du contenu dépliqué. Le truc qui peut jouer sur les moteurs de recherches, c'est d'afficher son site avec les www ou sans les www. Ce qui est une très mauvaise idée, les moteurs de recherches vont considérés que c'est deux contenus différents. Ils risquent donc de vous sanctionnez en croyant que vous faites du black - seo ou alors de ne pas afficher certaines requêtes. Pour résoudre le problème, j'ai inclus ses lignes là dans le htaccess à la racine de mon blog : "RewriteEngine On", puis "RewriteCond %{HTTP_HOST} !^julien-et-nel\.be [NC]"et pour finir "RewriteRule (.*) http://julien-et-nel.be/$1 [QSA,R=301,L]" pour afficher uniquement sans le www (Ajouter le www pour l'inverse).
Un css imprimable
Un autre truc que j'avais oublié, c'est que les gens aiment bien lire le contenu d'un blog sur du papier en imprimant les articles qui les intéressent. Ainsi, ils peuvent les lires plus tard dans leurs lits, fauteuils ou autre en n'étant pas sur leur ordinateur ou tablette. Bon, c'est compréhensible et on pourrait trés bien imaginé une scéne : "Le gars a seulement un pc fixe et ça sa femme part au lit ... si il veut lire vos articles, il fait comment ? Bah il les imprimes pour les lires tranquillement dans son lit". C'est pour ça que les sites doivent avoir un css imprimable. Pour mettre en place, j'ai combiné les deux techniques existantes pour être tranquille. J'ai commencé d'abbord par le code et j'ai mis entre les balises head ceci : "<link type="text/css" rel="stylesheet" href="/themes/defaut/style.css" media="print" />". Ensuite, je me suis attaqué à la partie du css et c'est super simple. On établit la règle suivante "@media print {}", dans les {} on fait du css comme on le ferait normalement. On ajoute déjà des {display:none;} pour supprimé tous les éléments qui n'ont rien à foutre sur du papier, on laisse seulement le logo et la div pour le contenu. Dans le body, on indique ceci : "color:black;background-color:white;" et ceci permettra d'éviter de gaspiller de l'ancre. Les Px sont mal compris par les imprimantes, j'ai mis ceci pour ma part "font-size:12pt;" et "margin: 1em; padding: 1em;" pour avoir une police d'écriture à 12, un saut de ligne à 1 ligne et une marge de 1 ligne.
Afficher son logo
Afficher son logo partout, c'est cool. Donc pour la favicon, j'utilise ceci "<link rel="shortcut icon" type="image/x-icon" href="http://julien-et-nel.be/JulienEtNel.png" sizes="16x16" />" et ceci "<link rel="icon" type="image/x-icon" href="http://julien-et-nel.be/JulienEtNel.png" sizes="16x16" />". Normalement pour IE, il faut avoir forcément une ico, sinon ça ne risque pas de s'afficher. En ce qui me concerne, j'utilise seulement une png ... IE est le seul navigateur à ne pas savoir utiliser autre chose que les ico et donc ce navigateur peut allé se faire foutre. Pour les Apples'Fans, j'utilise ceci "<link rel="apple-touch-icon" href="http://julien-et-nel.be/JulienEtNel.png" />" et ceci "<link rel="apple-touch-icon-precomposed" href="http://julien-et-nel.be/JulienEtNel.png" />", comme ça ils ont une belle petite icône (la taille de l'image doit être au minimum de 114px sur 114px pour avoir un affichage correct sur l'ipad et les différents iphones). Pour choisir le logo qui s'affichera sur les réseaux sociaux et sur l'accès rapide d'Opera, j'utilise ceci :"<meta property="og:image" content="http://julien-et-nel.be/JulienEtNel.png" />" et je m'assure que l'image fait au minimum 300 pixels. Et op, on a son logo un peu partout ;) . C'est la classe internationale :)
Ascreen
Il est rare que les moteurs de recherches utilisent les ascreens, par contre les annuaires adorent cette technologie. Mais c'est quoi le ascreen, ça se résume simplement à avoir une miniature prés établi pour les annuaires. Certains annuaires n'afficheront que la miniature, si vous avez un ascreen. L'image doit faire en Largeur "120 pixels" et en Hauteur "90 pixels", sinon ceci ne marchera pas. Elle doit être nommé comme ceci "ascreen.jpg" et être placé à la racine de votre site, sinon ça ne marchera pas non plus ^^.
Un css Mobile
Il y a deux méthodes dans le css mobile : "On détecte l'user agent et on affiche une version du css en fonction de celui-ci" ou "On utilise le css3 et on affiche selon la résolution". Pour ma part, je n'ai pas utilisé l'user agent et pour une bonne raison "Le gars ne veut pas forcément un affichage mobile sur sa tablette et l'utilisateur d'ordinateur ne veut pas forcément un affiche normal sur son ordinateur". Donc j'ai pris la décision de ne pas utilisé la méthode de l'user agent pour éviter d'imposer automatiquement une version du site en fonction de la machine de l'utilisateur. J'ai utilisé pour les mobiles ceci "@media (max-width: 799px) {}" et pour les tablettes ceci "@media (max-width: 1024px) and (min-width: 800px) {}". Si j'ai un conseil à vous donnez pour le css Mobile, on n'utilise pas les pixels et on évite le design à colonnes. On fout tous sur une seule colonne qui est régler selon le pourcentage. En ce qui concerne les pourcentages en Css, c'est utile seulement si le site possède une seule colonne car avec plusieurs colonnes, car après c'est vraiment le bordel.
Utiliser les H1, H2 et H3
Bon, cette partie va être rapide ... si j'ai bien compris, les balises H peuvent jouer sur le référencement. Bon personnellement, c'est comme les mots clés ... je ne sais pas si c'est vraiment vrai aujourd'hui et ceci l'était peut être avant. Donc j'ai utilisé ses balises de hauteurs pour le menu, les catégories, les titres et sous titres. Je ne dirais rien sur cette partie, je ne sais pas si marche vraiment. Soit disant, ça serait une technique SEO.
Conclusion
Quand on fait des modifications de temps en temps dans son code, son css ou le htaccess ... on se dit que c'est sympa de pouvoir tous modifier comme ça. Je me rappelle quand j'avais un skyblog ou un overblog, on ne pouvait pas vraiment y faire de modifications. Même en ce qui concerne les blogs sur Wordpress.com, il faut payer pour pouvoir faire des modifications ... c'est un peu abusé non ? Le mieux reste d'avoir son blog héberger sur son ftp, car les blogs sur les plateformes sont peu modifiables. Après, si on recherche la facilité ... les plateformes c'est mieux c'est sûr. Cependant, si on sait utilisé au minimum un ftp et on connait un peu de html ou de php, alors avoir son blog héberger sur un ftp où on peut avoir l'accès ... bah c'est super.