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.
Imagine : au lieu de modifier le monde du jeu directement (le code source), tu places des checkpoints intermédiaires entre le joueur et le serveur. Ces checkpoints peuvent modifier, enrichir ou optimiser ce que le joueur reçoit, en temps réel, sans redéployer le jeu. C'est le Edge computing.
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
Imagine que chaque serveur de jeu a un proxy local dans chaque pays. Au lieu que tous les joueurs français se connectent à un serveur US, ils passent par un relais à Paris. C'est ça le Edge rapide parce que proche.
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);
}
};Le HTMLRewriter de Cloudflare, c'est un mod qui modifie le jeu en temps réel sans toucher aux fichiers originaux. Tu interceptes le HTML et tu l'enrichis au passage, transparent pour l'utilisateur et pour Google.
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;
}
};Les headers de cache, c'est comme le fast travel dans ton jeu une fois que tu as visité une zone, tu n'as pas besoin de refaire tout le chemin, le navigateur réutilise ce qu'il a déjà téléchargé. Résultat chargement quasi instantané pour les visiteurs récurrents.