.htaccess pour le Seo – Jérémy Allard

Je suppose que si vous êtes ici, c’est parce que vous savez ce qu’est un fichier .htaccess et vous voudriez quelques astuces pour améliorer le SEO de votre site grâce à ce fichier caché.

Pour faire un rappel rapide, le fichier .htaccess (avec un point devant) est un fichier Apache (serveur) qui donne des directives le comportement général d’un site internet.

On peut donc l’utiliser pour pas mal de choses:

.htaccess pour accélérer le chargement d’un site

La première astuce .htaccess pour augmenter la vitesse de la page est la compression Gzip. L’utilisation de la compression GZip et DEFLATE peut réduire la taille des fichiers HTML, JS et CSS de 60 % à 80 % ?

Compression Gzip

<IfModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</IfModule>

<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE "application/atom+xml" \
"application/javascript" \
"application/json" \
"application/ld+json" \
"application/manifest+json" \
"application/rdf+xml" \
"application/rss+xml" \
"application/schema+json" \
"application/vnd.geo+json" \
"application/vnd.ms-fontobject" \
"application/x-font" \
"application/x-font-opentype" \
"application/x-font-otf" \
"application/x-font-truetype" \
"application/x-font-ttf" \
"application/x-javascript" \
"application/x-web-app-manifest+json" \
"application/xhtml+xml" \
"application/xml" \
"font/eot" \
"font/otf" \
"font/ttf" \
"font/opentype" \
"image/bmp" \
"image/svg+xml" \
"image/vnd.microsoft.icon" \
"image/x-icon" \
"text/cache-manifest" \
"text/css" \
"text/html" \
"text/javascript" \
"text/plain" \
"text/vcard" \
"text/vnd.rim.location.xloc" \
"text/vtt" \
"text/x-component" \
"text/x-cross-domain-policy" \
"text/xml"
</IfModule>

Activez la mise en cache navigateur grâce au .htaccess

Les navigateurs mettent en cache de nombreuses données (feuilles de style, images, fichiers JavaScript, etc.) afin que lorsqu’un utilisateur revient sur votre site, le navigateur n’ait pas à recharger la page complète. Dans de nombreux cas, à moins que la conception de votre site Web ne change constamment, un an est un délai raisonnable. Pour activer la mise en cache du navigateur, ajoutez le code .htaccess suivant pour augmenter la vitesse de la page.

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/x-icon "access 1 year"
ExpiresByType image/svg+xml "access plus 1 month"
ExpiresByType audio/ogg "access plus 1 year"
ExpiresByType video/mp4 "access plus 1 year"
ExpiresByType video/ogg "access plus 1 year"
ExpiresByType video/webm "access plus 1 year"
ExpiresByType application/atom+xml "access plus 1 hour"
ExpiresByType application/rss+xml "access plus 1 hour"
ExpiresByType application/pdf "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType text/x-component "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType font/opentype "access plus 1 month"
ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
ExpiresByType application/x-font-ttf "access plus 1 month"
ExpiresByType application/font-woff "access plus 1 month"
ExpiresByType application/font-woff2 "access plus 1 month"
ExpiresDefault "access 1 month"
</IfModule>

On y ajoute un contrôle du cache pour que ça fonctionne:

<ifModule mod_headers.c>
<filesMatch "\.(ico|jpe?g|png|gif|swf)$">
Header set Cache-Control "public"
</filesMatch>
<filesMatch "\.(css)$">
Header set Cache-Control "public"
</filesMatch>
<filesMatch "\.(js)$">
Header set Cache-Control "private"
</filesMatch>
<filesMatch "\.(x?html?|php)$">
Header set Cache-Control "private, must-revalidate"
</filesMatch>
</ifModule>

Désactivez le Hotlinking d’image

Cette pratique, on ne la voit pas venir mais elle pompe de la ressource serveur. Si quelqu’un s’amuse a mettre vos images sur son site web, au chargement de sa page, ça viendra chercher l’image chez vous tout simplement. Inutile de vous dire que les spammeurs se foutent complètement de télécharger vos images avant de s’en servir. Vous avez donc tout intérêt à vous défendre de ce genre de chose. Quelques lignes suffisent pour gagner encore en vitesse de chargement:

RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?votresite.com [NC]
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?google.com [NC]
RewriteRule \.(jpg|jpeg|png|gif)$ — [NC,F,L]

Voilà quelques bonnes lignes pour accélérer déjà votre site web.

Passons maintenant aux gestions d’erreurs:

Gérer les erreurs avec .htaccess pour rediriger le trafic.

Vous aviez un article qui vous rapportait quelques visiteurs mais sans plus. Et puis un beau jour, vous avez décidé de supprimer ce contenu obsolète. Mais qu’avez-vous fait des visiteurs qui continuent de se rendre sur cette page ? On peut faire 2 choses (on voit la seconde dans la réécriture d’url):

Afficher une belle page 404 ou autre…

Le premier reflexe, c’est d’afficher un message sympa. On créé une page qu’on nomme 404.html, on la met sur le serveur et on met dans le .htaccess:

ErrorDocument 404 /404.html

Pensez à intégrer un lien vers votre page d’accueil ou un formulaire de recherche pour aider vos visiteurs à retrouver des infos.

On peut également prendre en compte d’autres erreurs courantes.

Gérer les autres erreurs courantes

401 – Unauthorized – Quand un visiteur tente d’accéder à un contenu protégé par mot de passe, sans avoir le mot de passe.
403 – Forbidden – Quand un visiteur tente de lire un fichier sans les droits necessaires.
500 – Internal Server Error – Problème de serveur… c’est courant quand on développe ^^

Code:

ErrorDocument 500 /500.html
ErrorDocument 401 /401.html
ErrorDocument 403 /403.html

Faites vos pages comme bon vous semble.

Maintenant, partie un peu plus amusante, on va réécrire nos urls

.htaccess pour la redirection et la réécriture d’url

Bon, si vous faites un site en html, rien de bien compliqué, vous avez les bonnes pratiques en tête. Votre fichier sera nommé titre-de-mon-article.html. C’est propre.

En revanche, si vous utilisez un script PHP pour enregistrer vos contenu dans une base de données, ça change tout.

Votre code va par exemple charger article.php?id=125 ou 125 est le 125ème article que vous avez fait.

C’est pas super beau ! Ni pour votre visiteur, ni pour les moteurs de recherche qui contrôlent les urls pour voir si elles contiennent des mots clés. On va donc jouer avec tout ça. Si vous utilisez WordPress, passez votre chemin, il gère déjà très bien tout ça.

Mais on va voir comment justement.

Imaginons cet article dont l’url est:

https://jeremy-allard.com/htaccess-pour-le-seo.html

Je demande à mon WordPress d’afficher le slug (htaccess-pour-le-seo) + .html

Derrière, WordPress récupére mon slug (le reste il s’en fout) et va chercher dans ma base de données l’article dont slug= htaccess-pour-le-seo

En gros un truc du genre:

$GLOBALS["wp_query"] = new WP_Query( "pagename=htaccess-pour-le-seo") );

Il peut donc facilement retrouver mon article et l’afficher sans avoir besoin de la moindre référence numérique (comme l’id par exemple)

Si on voulait faire la même chose, il nous faudrait dans une table sql d’article avoir la possibilité d’enregistrer un slug (url)

Et dans le .htaccess, ce code:

# Le serveur doit suivre les liens symboliques :
Options +FollowSymlinks

# Activation du module de réécriture d'URL :
RewriteEngine on

# On récupère le slug et c'est la page get.php qui se charge de trouver l'article et
# l'affiche :
RewriteRule ^(.*).html$   /get.php?slug=$1 [L]

La redirection d’une ancienne url vers la nouvelle.

On l’a vu plus haut, il est possible d’afficher une 404 personnalisée pour rediriger ses propres visiteurs.

Ou alors, on peut les renvoyer vers un nouveau contenu:

Redirect permanent /ancienne-page.html https://site.com/nouvelle-page.html

HTTPS ou HTTP ? avec WWW ou SANS ?

Il y en a des paramètres aujourd’hui dans une url. Il vous faut tout d’abord un site sécurisé en https. Mais il est possible que vous ayez d’anciens liens qui pointent vers http://votresite.fr … ça se corrige avec le .htaccess.

Idem pour les www. Idéalement aujourd’hui, on veut des urls les plus courtes possibles. Mais on a aussi parfois des personnes qui font des liens vers nous les www.

Il faut donc remédier à tout ça rapidement.

Je ne vous mets pas les codes de tout ce qu’on peut faire… inutile de savoir comment passer de SANS WWW à AVEC ou encore de revenir en http si vous êtes déjà en HTTPS, ça n’a pas de sens.

Le code ci-dessous redirige tout lien http vers son équivalent exact commençant par https ET dans le même processus redirige tout lien www vers son équivalent sans www dans l’URL :

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTPS} off [OR]
RewriteCond %{HTTP_HOST} ^www\. [NC]
RewriteCond %{HTTP_HOST} ^(?:www\.)?(.+)$ [NC]
RewriteRule ^ https://%1%{REQUEST_URI} [L,NE,R=301]
</IfModule>

Vous avez d’autres trucs en tête à ajouter au .htaccess ? N’hésitez pas dans les commentaires.