SEO at the Edge : optimiser avec Cloudflare
Découvre comment utiliser Cloudflare Workers et l'edge computing pour injecter des métadonnées SEO ultra-rapidement.
9.1C'est quoi le Edge ?
Le « Edge » (bord), c'est un réseau de serveurs répartis dans le monde entier, proches des utilisateurs. Au lieu de tout centraliser sur un seul serveur, ton contenu est distribué sur des centaines de points de présence.
- CDN classique distribue tes fichiers statiques (images, CSS, JS)
- Edge Workers exécute du code au plus proche du visiteur
- Cloudflare Workers le plus populaire, gratuit jusqu'à 100k requêtes/jour
9.2Injecter des balises SEO à la volée
Avec un Cloudflare Worker, tu peux intercepter la réponse HTML et ajouter ou modifier des balises SEO sans toucher au code source. C'est puissant pour les sites dont tu ne contrôles pas le back-end.
// Cloudflare Worker - Injecter des meta tags à la volée
export default {
async fetch(request) {
const response = await fetch(request);
// Utilise HTMLRewriter pour modifier le HTML au passage
return new HTMLRewriter()
.on('head', {
element(element) {
// Ajoute une meta description si absente
element.append(
'<meta name="description" content="Guide SEO complet pour débutants" />',
{ html: true }
);
// Ajoute les Open Graph tags
element.append(
'<meta property="og:title" content="Guide SEO" />',
{ html: true }
);
}
})
.transform(response);
}
};9.3Redirections et réécriture d'URL
Le Edge est aussi parfait pour gérer les redirections SEO (anciennes URLs vers les nouvelles) sans configurer le serveur d'origine.
// Cloudflare Worker - Redirections SEO 301
const REDIRECTS = {
'/old-blog/seo-guide': '/seo/carte-du-monde',
'/ancien-cours/html': '/html/structure-base',
'/pages/about': '/a-propos',
};
export default {
async fetch(request) {
const url = new URL(request.url);
const redirect = REDIRECTS[url.pathname];
if (redirect) {
// 301 = redirection permanente (Google transfère le SEO)
return Response.redirect(url.origin + redirect, 301);
}
return fetch(request);
}
};- 301 redirection permanente (transfère le « jus SEO »)
- 302 redirection temporaire (ne transfère pas le SEO)
- Avantage Edge exécuté avant même d'atteindre ton serveur (ultra rapide)
9.4Headers de cache et sécurité
Le Edge permet aussi d'ajouter des headers HTTP qui améliorent à la fois le SEO et la sécurité, sans modifier le code du serveur.
// Cloudflare Worker - Headers de performance et sécurité
export default {
async fetch(request) {
const response = await fetch(request);
const newResponse = new Response(response.body, response);
// Cache les fichiers statiques pendant 1 an
if (request.url.match(/\.(js|css|webp|avif|woff2)$/)) {
newResponse.headers.set(
'Cache-Control', 'public, max-age=31536000, immutable'
);
}
// Sécurité headers recommandés
newResponse.headers.set('X-Content-Type-Options', 'nosniff');
newResponse.headers.set('X-Frame-Options', 'DENY');
newResponse.headers.set('Referrer-Policy', 'strict-origin-when-cross-origin');
return newResponse;
}
};