Im riesigen digitalen Ozean des Webs im Jahr 2026 zählt nur Sichtbarkeit. Wenn Content König ist, dann ist der Title-Tag zweifellos seine Krone. Oft vernachlässigt oder hastig verfasst, ist er dennoch der erste Kontaktpunkt zwischen Ihrer Website und dem Nutzer und wirkt wie ein Leuchtfeuer im Sturm der Suchergebnisse.
Kurz gesagt: die Grundlagen für einen leistungsstarken Titel Der Title-Tag ist nach dem Content selbst der einflussreichste Rankingfaktor auf der Seite. Die ideale Länge wird heute in Pixeln gemessen und entspricht in der Regel 50–60 Zeichen. Die Suchintention sollte Vorrang vor der bloßen Platzierung von Keywords haben. Die Einzigartigkeit jedes Titels ist unerlässlich, um interne Kannibalisierung zu vermeiden. Der Titel muss mit der Meta-Beschreibung synergieren, um die Klickrate (CTR) zu maximieren. Strategische Keywords sollten am Anfang der Keyword-Kette platziert werden (Frontloading). Die Funktionsweise des Title-Tags und seine direkte Wirkung verstehen Um im Bereich SEO effektiv zu agieren, ist es wichtig zu verstehen, was ein Title-Tag technisch ist. Er befindet sich im -Bereich Der Titel, Teil des HTML-Codes Ihrer Seite, ist beim Betrachten der Seite selbst unsichtbar, aber allgegenwärtig. Er erscheint in Ihrem Browsertab und ist vor allem der wichtigste anklickbare blaue Link in den Google-Suchergebnissen. Stellen Sie sich das wie Ihr Ladenschild vor: Ist es unbeleuchtet, schmutzig oder unverständlich, wird niemand Ihren Laden betreten, selbst wenn das Innere wunderschön ist.
Die Auswirkungen auf die Suchmaschinenoptimierung (SEO) sind zweifach. Erstens ermöglicht er den Algorithmen, das Thema der Seite sofort zu verstehen und sie korrekt zu indexieren. Zweitens spielt er eine wichtige psychologische Rolle für den Nutzer. Ein gut formulierter Titel vermittelt einen Mehrwert. Wenn Sie in dieser Phase scheitern, bleibt die gesamte Arbeit an Ihrer Inhaltsstruktur, insbesondere an den Hn-Tags und ihrer Hierarchie, für die Öffentlichkeit unsichtbar. Es handelt sich um einen Hebel zur Leistungssteigerung, der nur wenige technische Ressourcen, aber hervorragende Schreibfähigkeiten erfordert.
Die Entwicklung des Google-Algorithmus und der semantischen Intelligenz Im Jahr 2026 ging der Google-Algorithmus über die einfache lexikalische Analyse hinaus. Die bloße Aneinanderreihung von Begriffen reicht nicht mehr aus, um relevant zu sein. Suchmaschinen bewerten heute den Gesamtzusammenhang zwischen Titel, Seiteninhalt und vor allem der Suchintention des Nutzers. Verspricht der Titel eine präzise Antwort, der Inhalt ist aber vage, führt dies sofort zu einer höheren Absprungrate und beeinträchtigt langfristig das Ranking. Die Optimierung muss daher zunächst auf die Bedürfnisse der Nutzer ausgerichtet sein, wobei die technischen Kriterien der Suchmaschinen natürlich berücksichtigt werden müssen.
https://www.youtube.com/watch?v=zoIPIge385w Keyword-Strategie: Platzierung und RelevanzDie Wahl der richtigen Wörter für Ihren Titel ist der entscheidende Schritt, in dem der Erfolg maßgeblich beeinflusst wird. Es geht nicht ums Raten, sondern ums Analysieren. Die Keyword-Integration sollte einer „Frontloading“-Strategie folgen. Das bedeutet konkret: Die wichtigsten Begriffe sollten so früh wie möglich im Titel-Tag erscheinen, idealerweise ganz am Anfang. Suchmaschinen-Crawler gewichten die ersten Wörter stärker, und Nutzer, die die Suchergebnisse in einer „F“-Form durchsuchen, sehen diese Begriffe zuerst. Gründliche Recherche ist unerlässlich, um nicht nur das Suchvolumen, sondern auch die Machbarkeit zu ermitteln. Die Verwendung eines extrem generischen Keywords ist gegen etablierte Marktführer oft Zeitverschwendung. Die Erfolgsstrategie liegt häufig im Long Tail: spezifischere, weniger umkämpfte Phrasen, die besser konvertieren, weil sie eine präzise Suchintention ansprechen. Wählen Sie beispielsweise statt „Sportschuhe“ lieber „Beste Laufschuhe für Marathons 2026“. Vermeiden Sie Überoptimierung und Keyword-Stuffing. Eine Aneinanderreihung von Begriffen ohne grammatikalischen Zusammenhang („Klempner Paris, Klempnernotdienst, Günstige Leckreparatur“) ist nicht nur unleserlich, sondern wird von Suchmaschinen mittlerweile auch als Spam eingestuft. Flüssiger und natürlicher Sprachgebrauch wird belohnt. Ihr Titel sollte einen zusammenhängenden Satz bilden oder ein klares Nutzenversprechen vermitteln.
Darüber hinaus ist Einzigartigkeit entscheidend. Jede Seite Ihrer Website muss einen eindeutigen Titel haben. Wenn mehrere Seiten denselben Titel haben, weiß Google nicht, welche Seite priorisiert werden soll, was Ihr Rankingpotenzial mindert. Dies ist ein häufiges technisches Problem, das sich mitunter durch die korrekte Verwendung des Canonical-Tags beheben oder zumindest abmildern lässt.
→ À lire aussi
Entdecken Sie 18 großartige Alternativen zu Ahrefs, darunter 3 budgetfreundliche Optionen
Organische Referenzierung (SEO) · 17 Juni 2025
Um bei ähnlichen Inhalten auf die Hauptseite hinzuweisen, gilt weiterhin die goldene Regel: eine Seite, ein Zweck, ein eindeutiger Titel.
Titellänge: Eine Frage von Pixeln und Sichtbarkeit
Die Titellänge ist eine strenge technische Beschränkung, die durch den Bildschirmplatz vorgegeben ist. Oft werden 60 Zeichen genannt, doch die Realität ist differenzierter: Google weist eine feste Breite in Pixeln zu (ca. 600 Pixel auf einem Computer). Da nicht alle Buchstaben gleich breit sind (ein „m“ benötigt mehr Platz als ein „i“ oder ein „l“), bleibt die Zeichenanzahl ein Schätzwert.
Überschreitet Ihr Titel diese Grenze, wird er abgeschnitten und durch Auslassungspunkte (…) ersetzt. Dies kann fatal sein, wenn die wichtigsten Informationen oder der Call-to-Action am Ende des Satzes stehen. Umgekehrt ist ein zu kurzer Titel (z. B. „Startseite“) eine verpasste Gelegenheit, Kontext und relevante Keywords hinzuzufügen. Sie sollten die optimale Länge anstreben, in der die Botschaft vollständig und nicht abgeschnitten ist.
→ À lire aussi
SEO-Tipps: Umgang mit 404-Fehlern und Optimierung von Schema-strukturierten Daten für leistungsstarke Suchmaschinenoptimierung
Organische Referenzierung (SEO) · 06 Jan. 2026
Title-Tag-Simulator
Geben Sie Ihren Titel ein, um zu prüfen, ob er die 600-Pixel-Grenze einhält, und sehen Sie ihn sich in den Google-Suchergebnissen an.
-Tag</p>
<p>0 Zeichen</p>
<div id="seo-simulator-2026" class="font-sans antialiased text-slate-800 bg-white p-4 md:p-8 rounded-2xl shadow-2xl border border-slate-100 max-w-4xl mx-auto my-8 overflow-hidden relative">
<!-- Chargement de Tailwind <a href="https://kevin-grillot.fr/">CSS</a> (Version Browser) -->
<!-- Styles personnalisés pour la simulation Google -->
.google-blue { color: #1a0dab; }
.google-green { color: #006621; }
.google-grey { color: #545454; }
.mobile-blue { color: #1558d6; }
/* Simulation de la police Google (Arial/sans-serif approximation) */
.preview-font { font-family: arial, sans-serif; }
/* Animation de la jauge */
.gauge-transition { transition: width 0.3s ease-out, background-color 0.3s ease; }
<!-- En-tête de l'outil -->
<div class="mb-8 text-center">
<div class="inline-block px-3 py-1 mb-2 text-xs font-semibold tracking-wider text-indigo-500 uppercase bg-indigo-50 rounded-full">
Ungefähre Längenbegrenzung (600px)
</div>
<div class="kg-encart-contact" role="complementary" aria-label="Prendre contact">
<div class="kg-encart-contact-inner">
<div class="kg-encart-contact-icon" aria-hidden="true">
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
</div>
<div class="kg-encart-contact-body">
<h4 class="kg-encart-contact-title">Vous avez un projet spécifique ?</h4>
<p class="kg-encart-contact-desc">Kevin Grillot accompagne entrepreneurs et PME en <strong>SEO</strong>, <strong>webmarketing</strong> et <strong>stratégie digitale</strong>. Bénéficiez d'un audit ou d'un accompagnement sur-mesure.</p>
</div>
<a href="https://kevin-grillot.fr/me-contacter" class="kg-encart-contact-btn">
Discutons de votre projet
<svg width="14" height="14" viewBox="0 0 448 512" fill="currentColor" aria-hidden="true"><path d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"/></svg>
</a>
</div>
</div><h2 class="text-2xl md:text-3xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-indigo-600 to-purple-600 mb-2">
0px
</h2>
<p class="text-slate-500 text-sm md:text-base max-w-2xl mx-auto">
0 / 600px <strong>Desktop</strong> Mobil
</p>
</div>
<!-- Zone de Saisie -->
<div class="mb-8 relative group">
<label for="title-input" class="block text-sm font-medium text-slate-700 mb-2 flex justify-between">
<span>G</span>
<span id="char-count" class="text-slate-400 text-xs">ExampleSite.fr</span>
</label>
<div class="relative">
<!-- Indicateur visuel rapide -->
<div class="absolute right-3 top-3.5">
<span id="status-icon" class="text-xl"></span>
</div>
</div>
<!-- Barre de progression Pixel -->
<div class="mt-3 bg-slate-100 h-2.5 rounded-full overflow-hidden w-full relative">
<div id="pixel-bar" class="h-full bg-indigo-500 gauge-transition w-0 relative" role="progressbar"></div>
<!-- Marqueur des 600px -->
<div class="absolute top-0 bottom-0 w-0.5 bg-red-400 opacity-50 z-10" style="left: 90%" title="https://www.examplesite.fr › blog › seo-2026"></div>
<!-- Note: 90% est une approximation visuelle relative à la largeur max définie dans le <a href="https://kevin-grillot.fr/">CSS</a>, ajustée via JS -->
</div>
<div class="flex justify-between mt-1 text-xs">
<span class="text-slate-400">Ihr Titel wird hier angezeigt…</span>
<span id="pixel-count" class="font-bold text-slate-600">Dies ist eine fiktive Beschreibung, die veranschaulicht, wie Ihr Titel in den Suchergebnissen (SERPs) erscheint. Der obige Titel ist das wichtigste Element für Ihre Klickrate (CTR).</span>
</div>
</div>
<!-- Zone de Prévisualisation (Onglets) -->
<div class="bg-slate-50 rounded-xl border border-slate-200 p-1 md:p-2">
<!-- Contrôles des onglets -->
<div class="flex space-x-2 mb-4 p-2">
<button id="btn-desktop" class="flex-1 py-2 px-4 rounded-lg text-sm font-medium transition-all bg-white shadow-sm text-indigo-600 ring-1 ring-indigo-100">
</button>
<button id="btn-mobile" class="flex-1 py-2 px-4 rounded-lg text-sm font-medium transition-all text-slate-500 hover:bg-white hover:text-slate-700">
G
</button>
</div>
<!-- Conteneur Prévisualisation -->
<div class="bg-white rounded-lg p-6 shadow-sm min-h-[160px] border border-slate-100">
<!-- Vue Desktop -->
<div id="view-desktop" class="preview-font max-w-[600px]">
<div class="flex items-center gap-2 mb-1">
<div class="w-7 h-7 bg-slate-100 rounded-full flex items-center justify-center text-xs border border-slate-200">ExampleSite.fr</div>
<div class="flex flex-col leading-tight">
<span class="text-sm text-slate-800 font-medium">https://www.examplesite.fr › blog</span>
<cite class="text-xs text-slate-500 not-italic">Ihr Titel wird hier angezeigt…</cite>
</div>
</div>
<h3 class="text-xl google-blue hover:underline cursor-pointer mb-1 leading-snug truncate-title" id="desktop-preview-title">
Auf Mobilgeräten ist der Platz begrenzt. Stellen Sie sicher, dass Ihre wichtigsten Keywords am Anfang stehen. Optimierung für verschiedene Geräte
</h3>
<p class="text-sm google-grey leading-snug">
Es ist wichtig zu beachten, dass die Darstellung je nach Gerät variiert. Auf Mobilgeräten kann der verfügbare Platz etwas anders sein, und der Titel wird je nach Betriebssystemeinstellungen oft über mehrere Zeilen angezeigt. Die 60-Zeichen-Regel ist jedoch weiterhin eine zuverlässige Garantie dafür, dass Ihre Nachricht auf den meisten Geräten korrekt angezeigt wird. Überprüfen Sie daher immer die visuelle Darstellung Ihrer strategischen Titel.
</p>
</div>
<!-- Vue Mobile -->
<div id="view-mobile" class="preview-font hidden max-w-[380px] mx-auto border-x border-slate-50 px-2">
<div class="flex items-center gap-3 mb-2">
<div class="w-8 h-8 bg-slate-100 rounded-full flex items-center justify-center text-xs border border-slate-200">Klickrate (CTR): Die Kunst, zum Handeln zu animieren</div>
<div class="flex flex-col leading-tight">
<span class="text-sm text-slate-800 font-medium">Auf der ersten Seite sichtbar zu sein ist ein Erfolg, aber Klicks zu generieren ist das ultimative Ziel. Die Klickrate (CTR) ist ein wichtiger Leistungsindikator. Ein technisch perfekter, aber langweiliger Titel wird keinen Traffic generieren. Hier muss der Texter psychologische Tricks anwenden. Die Verwendung von Zahlen (z. B. „7 Methoden, um …“, „Top 10 von …“), Klammern oder eckigen Klammern kann in einer Liste einheitlicher Textlinks die Aufmerksamkeit auf sich ziehen. Handlungsverben und das Versprechen sofortiger Vorteile funktionieren ebenfalls sehr gut. Nutzer fragen sich immer: „Was habe ich davon?“ Ihr Titel sollte diese Frage in weniger als einer Sekunde beantworten. Wählen Sie beispielsweise „Gitarre lernen: Ein Schnellleitfaden“ statt „Gitarrenunterricht“. Emotionale Ansprache oder ein Gefühl der Dringlichkeit (ohne auf irreführende Clickbait-Überschriften zurückzugreifen) sind wirksame Mittel zur Steigerung Ihrer Klickrate (CTR).</span>
<span class="text-xs text-slate-500 truncate"></span>
</div>
</div>
<h3 class="text-lg mobile-blue font-medium mb-1 leading-snug truncate-title" id="mobile-preview-title">
Konsistenz mit der Meta-Beschreibung
</h3>
<p class="text-sm text-slate-600 leading-snug">
Der Titel allein reicht nicht aus. Er bildet ein untrennbares Duo mit der Meta-Beschreibung, dem kurzen Textabschnitt direkt darunter in den Suchergebnissen. Wenn der Titel der Aufhänger ist, ist die Beschreibung der Verkaufstext. Um Ihre Erfolgschancen zu maximieren, ist es unerlässlich, die Meta-Beschreibung in Verbindung mit dem Titel zu optimieren. Sie sollte das Versprechen des Titels bestätigen und Nutzer zum Weiterlesen animieren, während sie gleichzeitig semantische Variationen Ihrer Keywords einbezieht.
</p>
</div>
</div>
</div>
<!-- Conseils dynamiques -->
<div id="seo-tips" class="mt-6 p-4 rounded-lg bg-blue-50 text-blue-800 text-sm hidden border border-blue-100">
<!-- Injecté via JS -->
</div>
<!-- Script de logique -->
/**
* Logique du simulateur de Balise Title
* API: Aucune API externe requise (calcul local pour performance max)
* Méthode: Utilisation d’un Canvas HTML5 invisible pour mesurer la largeur exacte en pixels du texte
* selon la police utilisée par Google (Arial 20px pour Desktop).
*/
(function() {
// Éléments du DOM
const input = document.getElementById(‚title-input‘);
const pixelCountDisplay = document.getElementById(‚pixel-count‘);
const charCountDisplay = document.getElementById(‚char-count‘);
const pixelBar = document.getElementById(‚pixel-bar‘);
const statusIcon = document.getElementById(’status-icon‘);
const desktopTitle = document.getElementById(‚desktop-preview-title‘);
const mobileTitle = document.getElementById(‚mobile-preview-title‘);
const tipsContainer = document.getElementById(’seo-tips‘);
// Configuration Google (Approximations 2026 based on current standards)
const MAX_PIXEL_WIDTH = 600; // La zone de danger commence ici
const SAFE_PIXEL_WIDTH = 580; // Zone sûre
const GOOGLE_FONT = ’20px Arial, sans-serif‘; // Police standard titre Desktop
// Canvas pour mesure précise
const canvas = document.createElement(‚canvas‘);
const context = canvas.getContext(‚2d‘);
// Fonction pour mesurer la largeur en pixels
function getTextWidth(text, font) {
context.font = font;
const metrics = context.measureText(text);
return Math.ceil(metrics.width);
}
// Fonction pour tronquer le texte si trop long (Simulation „…“)
function truncateText(text, maxWidth, font) {
const width = getTextWidth(text, font);
if (width <= maxWidth) return text;
let lo = 0, hi = text.length – 1;
// Recherche binaire pour trouver le point de coupure optimal
while (lo <= hi) {
const mid = Math.floor((lo + hi) / 2);
const currentText = text.slice(0, mid) + '…';
if (getTextWidth(currentText, font) < maxWidth) {
lo = mid + 1;
} else {
hi = mid – 1;
}
}
return text.slice(0, hi) + '…';
}
// Fonction de mise à jour de l'UI
function updateSimulator() {
const text = input.value || "Votre titre apparaîtra ici…";
const charLength = input.value.length;
// Calcul des pixels
const pixelWidth = getTextWidth(input.value, GOOGLE_FONT);
// Mise à jour des compteurs
charCountDisplay.textContent = `${charLength} caractères`;
pixelCountDisplay.textContent = `${pixelWidth} / ${MAX_PIXEL_WIDTH}px`;
// Mise à jour de la barre de progression
// On normalise sur 650px pour laisser un peu de marge rouge à la fin
const percentage = Math.min((pixelWidth / 650) * 100, 100);
pixelBar.style.width = `${percentage}%`;
// Gestion des couleurs et états
let statusColor = 'bg-indigo-500';
let <a href="https://kevin-grillot.fr/projet/ma-selection-de-5-outils-etre-plus-efficace-dans-votre-travail/">icon</a> = '';
let tips = '';
if (charLength === 0) {
statusColor = 'bg-slate-300';
icon = '';
} else if (pixelWidth < 200) {
statusColor = 'bg-yellow-400'; // Trop court
icon = '';
tips = ' <strong>Conseil : Votre titre est un peu court. Profitez de l’espace pour ajouter des mots-clés pertinents.‘;
} else if (pixelWidth <= SAFE_PIXEL_WIDTH) {
statusColor = 'bg-green-500'; // Parfait
icon = '';
tips = ' <strong>Excellent ! La longueur est optimale. Assurez-vous que le titre incite au clic.‘;
} else if (pixelWidth <= MAX_PIXEL_WIDTH) {
statusColor = 'bg-yellow-500'; // Attention limite
icon = '';
tips = ' <strong>Attention : Vous approchez de la limite. Google pourrait couper votre titre sur certains écrans.‘;
} else {
statusColor = ‚bg-red-500‘; // Trop long
icon = “;
tips = ‚ <strong>Trop long : Votre titre sera tronqué par Google. Essayez de reformuler pour rester sous les 600px.‘;
}
pixelBar.className = `h-full gauge-transition w-0 relative ${statusColor}`;
statusIcon.textContent = icon;
pixelCountDisplay.className = `font-bold ${pixelWidth > MAX_PIXEL_WIDTH ? ‚text-red-600‘ : ‚text-slate-600‘}`;
// Affichage des conseils
if (tips && input.value.length > 0) {
tipsContainer.innerHTML = tips;
tipsContainer.className = `mt-6 p-4 rounded-lg text-sm border flex items-start gap-2 ${
pixelWidth > MAX_PIXEL_WIDTH ? ‚bg-red-50 text-red-800 border-red-100‘ :
pixelWidth < 200 ? 'bg-yellow-50 text-yellow-800 border-yellow-100' :
'bg-green-50 text-green-800 border-green-100'
}`;
tipsContainer.classList.remove('hidden');
} else {
tipsContainer.classList.add('hidden');
}
// Mise à jour des aperçus avec troncation simulée
// Desktop: coupe vers 600px
desktopTitle.textContent = truncateText(text, MAX_PIXEL_WIDTH, GOOGLE_FONT);
// Mobile: coupe souvent un peu plus tôt (approx 550px-580px selon device, on simule strict)
mobileTitle.textContent = truncateText(text, 560, GOOGLE_FONT);
}
// Écouteur d'événement
input.addEventListener('input', updateSimulator);
// Init
updateSimulator();
})();
// Fonction globale pour changer les onglets (exposée window)
window.switchView = function(view) {
const btnDesktop = document.getElementById('btn-desktop');
const btnMobile = document.getElementById('btn-mobile');
const viewDesktop = document.getElementById('view-desktop');
const viewMobile = document.getElementById('view-mobile');
if (view === 'desktop') {
viewDesktop.classList.remove('hidden');
viewMobile.classList.add('hidden');
btnDesktop.className = "flex-1 py-2 px-4 rounded-lg text-sm font-medium transition-all bg-white shadow-sm text-indigo-600 ring-1 ring-indigo-100";
btnMobile.className = "flex-1 py-2 px-4 rounded-lg text-sm font-medium transition-all text-slate-500 hover:bg-white hover:text-slate-700";
} else {
viewDesktop.classList.add('hidden');
viewMobile.classList.remove('hidden');
btnMobile.className = "flex-1 py-2 px-4 rounded-lg text-sm font-medium transition-all bg-white shadow-sm text-indigo-600 ring-1 ring-indigo-100";
btnDesktop.className = "flex-1 py-2 px-4 rounded-lg text-sm font-medium transition-all text-slate-500 hover:bg-white hover:text-slate-700";
}
};
</div>
<h3 class="wp-block-heading"></h3>
<p>Wettbewerbsanalyse und Differenzierung</p>
<a href="https://kevin-grillot.fr/de/organische-referenzierung-seo-de/der-einfluss-von-html-kommentaren-auf-seo/" class="kg-encart-article" aria-label="Lire aussi : Der Einfluss von HTML-Kommentaren auf SEO">
<img width="300" height="157" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%20157'%3E%3C/svg%3E" alt="Der Einfluss von HTML-Kommentaren auf SEO" class="kg-encart-img" data-lazy-src="https://kevin-grillot.fr/wp-content/uploads/2025/05/html-comments-seo-300x157.jpg"><noscript><img width="300" height="157" src="https://kevin-grillot.fr/wp-content/uploads/2025/05/html-comments-seo-300x157.jpg" alt="Der Einfluss von HTML-Kommentaren auf SEO" class="kg-encart-img"></noscript>
<div class="kg-encart-text">
<span class="kg-encart-label">→ À lire aussi</span>
<span class="kg-encart-title">Der Einfluss von HTML-Kommentaren auf SEO</span>
<span class="kg-encart-meta">Organische Referenzierung (SEO) · 27 Mai 2025</span>
</div>
</a><h2 class="wp-block-heading">Bevor Sie Ihre endgültige Positionierung festlegen</h2>
<p>Titel-Tag <strong></strong> Beobachten Sie Ihre Konkurrenten. Was tun sie für das Ziel-Keyword? Wenn die ersten zehn Suchergebnisse ähnliche Titel aufweisen, werden Sie durch das Imitieren dieser Struktur in der Masse untergehen. Hier müssen Sie nach einem anderen Ansatz suchen, nach der Schwachstelle Ihrer Konkurrenten.</p>
<p></p>
<h3 class="wp-block-heading">Titeltyp</h3>
<p>Konkretes Beispiel<a href="https://kevin-grillot.fr/de/organische-referenzierung-seo-de/wie-man-den-meta-description-tag-optimiert-um-die-seo-im-jahr-2026-zu-verbessern/">Wettbewerbsvorteil</a> Potenzielles Risiko</p>
<a href="https://kevin-grillot.fr/de/organische-referenzierung-seo-de/google-revise-ses-recommandations-seo-pour-optimiser-le-referencement-des-images-2/" class="kg-encart-article" aria-label="Lire aussi : Google révise ses recommandations SEO pour optimiser le référencement des images">
<img width="300" height="157" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%20157'%3E%3C/svg%3E" alt="Google révise ses recommandations SEO pour optimiser le référencement des images" class="kg-encart-img" data-lazy-src="https://kevin-grillot.fr/wp-content/uploads/2026/03/google-seo-image-optimization-300x157.jpg"><noscript><img width="300" height="157" src="https://kevin-grillot.fr/wp-content/uploads/2026/03/google-seo-image-optimization-300x157.jpg" alt="Google révise ses recommandations SEO pour optimiser le référencement des images" class="kg-encart-img"></noscript>
<div class="kg-encart-text">
<span class="kg-encart-label">→ À lire aussi</span>
<span class="kg-encart-title">Google révise ses recommandations SEO pour optimiser le référencement des images</span>
<span class="kg-encart-meta">Organische Referenzierung (SEO) · 03 März 2026</span>
</div>
</a><h2 class="wp-block-heading">Kurze Beschreibung</h2>
<p>Herren-Wanderschuhe <strong>Sofortige Verständlichkeit</strong>Geringe Tiefe, niedrige Klickrate</p>
<figure class="wp-block-table"><table>
<thead>
<tr>
<th>Versprechen/Nutzen</th>
<th>Schmerzfrei wandern: Unsere getesteten Schuhe</th>
<th>Starker emotionaler Appell</th>
<th>Muss durch Inhalt untermauert werden (Enttäuschungsrisiko)</th>
</tr>
</thead>
<tbody>
<tr>
<td>Frage/Problem</td>
<td>Welche Wanderschuhe sollten Sie 2026 wählen?</td>
<td></td>
<td>Zielt auf Informationsabsicht ab</td>
</tr>
<tr>
<td>Weniger effektiv für Sofortkäufe (Transaktionskäufe)</td>
<td>Liste/Abbildungen</td>
<td>Top 5 leichte Wanderschuhe</td>
<td>Lesbarkeit, beliebtes Format</td>
</tr>
<tr>
<td>Wird bei schlechter Umsetzung als oberflächlicher Inhalt wahrgenommen</td>
<td>Ziel ist es, sich visuell und inhaltlich abzuheben. Wenn alle einen „Kompletten Leitfaden“ anbieten, bieten Sie eine „Schnellmethode“ oder eine „Fallstudie“ an. Diese Differenzierung, kombiniert mit der sinnvollen Verwendung von Struktur-Tags wie Hn-Tags im Inhalt, stärkt die Autorität Ihrer Seite zu einem bestimmten Thema.</td>
<td>Nutzererfahrung (UX) und das Inhaltsversprechen</td>
<td>Die Nutzererfahrung beginnt lange vor dem Besuch der Website. Sie beginnt, sobald der Titel in den Suchergebnissen gelesen wird. Ein irreführender Titel (Clickbait), der eine unglaubliche Enthüllung verspricht, nur um dann zu inhaltsleeren Inhalten zu führen, ist die schlechteste Strategie im Jahr 2026. Nutzer sind misstrauisch und anspruchsvoll geworden. Google wertet „Pogo-Sticking“ (das schnelle Hin- und Herwechseln zwischen der Ergebnisseite und Ihrer Website) als schlechtes Qualitätssignal.</td>
</tr>
<tr>
<td>Ihr Titel sollte den Inhalt präzise widerspiegeln. Kündigen Sie eine Werbeaktion an, sollte diese sofort sichtbar sein. Kündigen Sie ein Tutorial an, sollten das Video oder die Schritt-für-Schritt-Anleitung im Mittelpunkt der Seite stehen. Diese Transparenz stärkt die Leserbindung und sendet positive Signale an Suchmaschinen, was Ihr Ranking verbessert.</td>
<td></td>
<td>Markenmanagement im Titel</td>
<td></td>
</tr>
</tbody>
</table></figure>
<p>Eine häufig gestellte Frage betrifft die Einbindung des Markennamens in den Titel. Generell empfiehlt es sich, den Markennamen am Ende des Titels zu platzieren, getrennt durch einen Bindestrich (-) oder einen senkrechten Strich (|). So können Sie Ihre Markenbekanntheit optimal nutzen, ohne den wertvollen Platz für Keywords am Anfang der Zeile zu beanspruchen. Auf Startseiten oder „Über uns“-Seiten kann die Marke jedoch durchaus an erster Stelle stehen. <a href="https://kevin-grillot.fr/de/organische-referenzierung-seo-de/wie-nutzt-man-hn-tags-richtig-zur-seo-optimierung-im-jahr-2026/"></a> Technische Fehler, die Sie unbedingt vermeiden sollten</p>
<div class="kg-encart-contact" role="complementary" aria-label="Prendre contact">
<div class="kg-encart-contact-inner">
<div class="kg-encart-contact-icon" aria-hidden="true">
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
</div>
<div class="kg-encart-contact-body">
<h4 class="kg-encart-contact-title">Vous avez un projet spécifique ?</h4>
<p class="kg-encart-contact-desc">Kevin Grillot accompagne entrepreneurs et PME en <strong>SEO</strong>, <strong>webmarketing</strong> et <strong>stratégie digitale</strong>. Bénéficiez d'un audit ou d'un accompagnement sur-mesure.</p>
</div>
<a href="https://kevin-grillot.fr/me-contacter" class="kg-encart-contact-btn">
Discutons de votre projet
<svg width="14" height="14" viewBox="0 0 448 512" fill="currentColor" aria-hidden="true"><path d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"/></svg>
</a>
</div>
</div><h2 class="wp-block-heading"></h2>
<p>Auch erfahrene Experten machen Fehler. Im SEO-Bereich können bestimmte technische Fehler in Titel-Tags fatal sein. Der erste ist das vollständige Fehlen eines Titel-Tags oder ein leerer Tag. Google generiert dann automatisch einen Titel anhand Ihrer Inhalte, doch das Ergebnis ist selten optimal. Ein weiterer häufiger Fehler ist die Verwendung von Standardtiteln wie „Neue Seite“ oder „Kein Titel“.<strong></strong> Achten Sie außerdem darauf, dass Ihr CMS (WordPress, Shopify usw.) korrekt konfiguriert ist. Manchmal duplizieren automatische Einstellungen den Seitennamen und erzeugen so lange Titel wie „Artikeltitel – Seitenname – Seitenname“. Dies mindert die Relevanz und verschwendet wertvolle Pixel. Vermeiden Sie schließlich technische Probleme mit doppelten Inhalten, indem Sie das Canonical-Tag korrekt verwenden, um zu verhindern, dass URL-Variationen (z. B. mit Sortierparametern) als separate Seiten mit demselben Titel behandelt werden.</p>
<p></p>
<h3 class="wp-block-heading">https://www.youtube.com/watch?v=P9CfpLsqU0U</h3>
<p>Die Zukunft im Blick: Title-Tags und KI</p>
<a href="https://kevin-grillot.fr/de/organische-referenzierung-seo-de/wie-man-im-jahr-2026-einen-seo-optimierten-slug-auswahlt/" class="kg-encart-article" aria-label="Lire aussi : Wie man im Jahr 2026 einen SEO-optimierten Slug auswählt">
<img width="1200" height="627" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201200%20627'%3E%3C/svg%3E" alt="Wie man im Jahr 2026 einen SEO-optimierten Slug auswählt" class="kg-encart-img" data-lazy-src="https://kevin-grillot.fr/wp-content/uploads/2026/01/seo-slug-optimization.jpg"><noscript><img width="1200" height="627" src="https://kevin-grillot.fr/wp-content/uploads/2026/01/seo-slug-optimization.jpg" alt="Wie man im Jahr 2026 einen SEO-optimierten Slug auswählt" class="kg-encart-img"></noscript>
<div class="kg-encart-text">
<span class="kg-encart-label">→ À lire aussi</span>
<span class="kg-encart-title">Wie man im Jahr 2026 einen SEO-optimierten Slug auswählt</span>
<span class="kg-encart-meta">Organische Referenzierung (SEO) · 09 Jan. 2026</span>
</div>
</a><h2 class="wp-block-heading">Die Zukunft von SEO und des Meta-Title-Tags ist eng mit der Entwicklung generativer künstlicher Intelligenz (KI) verknüpft. Google und andere Suchmaschinen können Ihren Titel in den Suchergebnissen zunehmend dynamisch anpassen, wenn Ihr ursprünglicher Vorschlag nicht optimal zur Suchanfrage des Nutzers passt. Das sollte Sie jedoch nicht davon abhalten, perfekte Titel zu verfassen – ganz im Gegenteil. Ein klarer, prägnanter und optimierter Titel ist nach wie vor der beste Weg, KI zu helfen, Ihre Botschaft zu verstehen. Darüber hinaus liefern eine gute semantische Struktur und eine optimierte Meta-Beschreibung den nötigen Kontext, damit Ihr Titel weiterhin der zentrale Anker Ihrer Strategie bleibt. Im Jahr 2026 ist Optimierung kein Kampf gegen die Maschine, sondern eine Zusammenarbeit, bei der die Klarheit der Botschaft entscheidend ist.</h2>
<p>Wie lang sollte ein Title-Tag im Jahr 2026 idealerweise sein? Die ideale Länge liegt zwischen 50 und 60 Zeichen oder einer Breite von etwa 600 Pixeln. Darüber hinaus kann Google Ihren Titel mit Auslassungspunkten kürzen, was sich negativ auf die Lesbarkeit und die Klickrate auswirken kann.</p>
<p> <a href="https://kevin-grillot.fr/de/organische-referenzierung-seo-de/welchen-zweck-hat-ein-canonical-tag-und-wie-kann-er-im-jahr-2026-effektiv-eingesetzt-werden/">Warum ändert Google manchmal meinen Titel in den Suchergebnissen?</a></p>
<figure class="is-provider-youtube is-type-video wp-block-embed wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
Google kann Ihren Titel überarbeiten, wenn er nicht ausreichend relevant für die Suchintention des Nutzers ist, zu viele Keywords enthält oder zu lang ist. Um dies zu vermeiden, stellen Sie sicher, dass Ihr Titel den Seiteninhalt präzise und kurz beschreibt.
</div></figure>
<a href="https://kevin-grillot.fr/de/organische-referenzierung-seo-de/machen-sie-sich-keine-sorgen-mehr-um-googles-ki-bot-blockierung-ihr-seo-ranking-wird-dadurch-nicht-beeintrachtigt/" class="kg-encart-article" aria-label="Lire aussi : Machen Sie sich keine Sorgen mehr um Googles KI-Bot-Blockierung: Ihr SEO-Ranking wird dadurch nicht beeinträchtigt.">
<img width="1200" height="627" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201200%20627'%3E%3C/svg%3E" alt="Machen Sie sich keine Sorgen mehr um Googles KI-Bot-Blockierung: Ihr SEO-Ranking wird dadurch nicht beeinträchtigt." class="kg-encart-img" data-lazy-src="https://kevin-grillot.fr/wp-content/uploads/2026/02/google-ai-bot-blocking.jpg"><noscript><img width="1200" height="627" src="https://kevin-grillot.fr/wp-content/uploads/2026/02/google-ai-bot-blocking.jpg" alt="Machen Sie sich keine Sorgen mehr um Googles KI-Bot-Blockierung: Ihr SEO-Ranking wird dadurch nicht beeinträchtigt." class="kg-encart-img"></noscript>
<div class="kg-encart-text">
<span class="kg-encart-label">→ À lire aussi</span>
<span class="kg-encart-title">Machen Sie sich keine Sorgen mehr um Googles KI-Bot-Blockierung: Ihr SEO-Ranking wird dadurch nicht beeinträchtigt.</span>
<span class="kg-encart-meta">Organische Referenzierung (SEO) · 09 Feb. 2026</span>
</div>
</a><h2 class="wp-block-heading"></h2>
<p>Sollte ich meinen Firmennamen in jeden Title-Tag einfügen? <strong></strong> Ja, das ist eine gute Branding-Praxis. Es empfiehlt sich jedoch, ihn am Ende des Titels zu platzieren (z. B. „Hauptkeyword – Markenname“). Dadurch werden wichtige Suchbegriffe am Anfang des Tags priorisiert.</p>
<p> <a href="https://kevin-grillot.fr/de/organische-referenzierung-seo-de/wie-man-den-meta-description-tag-optimiert-um-die-seo-im-jahr-2026-zu-verbessern/">Was ist der Unterschied zwischen dem Title-Tag und dem H1-Tag?</a> Der Title-Tag erscheint in den Suchergebnissen und im Browsertab; er dient der externen Suchmaschinenoptimierung (SEO). Der H1-Tag ist die redaktionelle Überschrift, die dem Leser direkt auf der Seite angezeigt wird. Obwohl sie ähnlich sein können, müssen sie nicht identisch sein.</p>
{„@context“:“https://schema.org“,“@type“:“FAQPage“,“mainEntity“:[{„@type“:“Question“,“name“:“Quelle est la longueur idu00e9ale d’une balise title en 2026 ?“,“acceptedAnswer“:{„@type“:“Answer“,“text“:“La longueur idu00e9ale se situe entre 50 et 60 caractu00e8res, soit environ 600 pixels de large. Au-delu00e0, Google risque de tronquer votre titre avec des points de suspension, ce qui peut nuire u00e0 la compru00e9hension et au taux de clic.“}},{„@type“:“Question“,“name“:“Pourquoi Google change-t-il parfois mon titre dans les ru00e9sultats ?“,“acceptedAnswer“:{„@type“:“Answer“,“text“:“Google peut ru00e9u00e9crire votre titre s’il juge que l’original ne correspond pas assez u00e0 l’intention de recherche de l’utilisateur, s’il est bourru00e9 de mots-clu00e9s ou s’il est trop long. Pour u00e9viter cela, assurez-vous que votre titre du00e9crit fidu00e8lement et concisu00e9ment le contenu de la page.“}},{„@type“:“Question“,“name“:“Faut-il mettre le nom de son entreprise dans chaque balise title ?“,“acceptedAnswer“:{„@type“:“Answer“,“text“:“Oui, c’est une bonne pratique pour le branding, mais il est pru00e9fu00e9rable de le placer u00e0 la fin du titre (ex: ‚Mot-clu00e9 principal – Nom de marque‘). Cela laisse la prioritu00e9 aux termes de recherche importants en du00e9but de balise.“}},{„@type“:“Question“,“name“:“Quelle est la diffu00e9rence entre la balise title et la balise H1 ?“,“acceptedAnswer“:{„@type“:“Answer“,“text“:“La balise title apparau00eet dans les ru00e9sultats de recherche et l’onglet du navigateur, c’est le titre pour le SEO ‚externe‘. La balise H1 est le titre u00e9ditorial visible directement sur la page par le lecteur. Bien qu’ils puissent u00eatre similaires, ils n’ont pas obligatoirement u00e0 u00eatre identiques.“}}]}
<h3></h3>
<p></p>
<h3></h3>
<p></p>
<h3></h3>
<p></p>
<h3></h3>
<p></p>
<!-- ENCART LEAD MAGNET CHECKLIST SEO -->
<div style="margin-top:3rem;padding:2rem;border-radius:16px;background:linear-gradient(135deg,rgba(16,185,129,0.08),rgba(37,99,235,0.06));border:1px solid rgba(16,185,129,0.2);">
<div style="display:flex;align-items:flex-start;gap:1rem;flex-wrap:wrap;">
<div style="flex-shrink:0;width:48px;height:48px;border-radius:12px;background:rgba(16,185,129,0.15);display:flex;align-items:center;justify-content:center;">
<svg width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="#10b981" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
</div>
<div style="flex:1;min-width:200px;">
<h3 style="font-family:'Outfit',sans-serif;font-weight:800;font-size:1.2rem;color:#fff;margin-bottom:0.25rem;">
📋 Checklist SEO gratuite — 50 points à vérifier
</h3>
<p style="color:#9ca3af;line-height:1.6;margin-bottom:1rem;font-size:0.95rem;">
Téléchargez ma checklist SEO complète : technique, contenu, netlinking. Le même outil que j'utilise pour mes clients.
</p>
<a href="https://kevin-grillot.fr/checklist-seo/" style="display:inline-flex;align-items:center;gap:8px;padding:10px 20px;border-radius:8px;background:#10b981;color:#fff;font-weight:700;font-size:0.9rem;text-decoration:none;">
<svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/><path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"/></svg>
Télécharger la checklist
</a>
</div>
</div>
</div>
<!-- ENCART SERVICES KEVIN GRILLOT -->
<div style="margin-top:2rem;padding:2rem;border-radius:16px;background:linear-gradient(135deg,rgba(37,99,235,0.08),rgba(16,185,129,0.08));border:1px solid rgba(37,99,235,0.2);">
<h3 style="font-family:'Outfit',sans-serif;font-weight:800;font-size:1.3rem;color:#fff;margin-bottom:0.5rem;">
Besoin de visibilité pour votre activité ?
</h3>
<p style="color:#9ca3af;line-height:1.7;margin-bottom:1.5rem;">
Je suis Kevin Grillot, consultant SEO freelance certifié. J'accompagne les TPE et PME en référencement naturel, Google Ads, Meta Ads et création de site internet.
</p>
<div style="display:flex;flex-wrap:wrap;gap:0.75rem;">
<a href="https://kevin-grillot.fr/seo-geo/" style="display:inline-flex;align-items:center;gap:6px;padding:10px 18px;border-radius:8px;background:#2563eb;color:#fff;font-weight:700;font-size:0.9rem;text-decoration:none;">SEO & GEO</a>
<a href="https://kevin-grillot.fr/google-ads/" style="display:inline-flex;align-items:center;gap:6px;padding:10px 18px;border-radius:8px;background:#f97316;color:#fff;font-weight:700;font-size:0.9rem;text-decoration:none;">Google Ads</a>
<a href="https://kevin-grillot.fr/meta-ads/" style="display:inline-flex;align-items:center;gap:6px;padding:10px 18px;border-radius:8px;background:#e91e8c;color:#fff;font-weight:700;font-size:0.9rem;text-decoration:none;">Meta Ads</a>
<a href="https://kevin-grillot.fr/creation-site/" style="display:inline-flex;align-items:center;gap:6px;padding:10px 18px;border-radius:8px;background:#10b981;color:#fff;font-weight:700;font-size:0.9rem;text-decoration:none;">Création de site</a>
</div>
</div>
<!-- TAGS -->
<div class="mt-12 pt-8 border-t border-white/5 flex flex-wrap gap-2 items-center">
<span class="text-xs text-gray-600 uppercase tracking-widest font-bold mr-2">Tags :</span>
<a href="https://kevin-grillot.fr/de/tag/seo-titel-tag-de/" class="tag-pill">#SEO-Titel-Tag</a>
<a href="https://kevin-grillot.fr/de/tag/titel-der-webseite-de/" class="tag-pill">#Titel der Webseite</a>
<a href="https://kevin-grillot.fr/de/tag/titel-tag-optimieren-de/" class="tag-pill">#Titel-Tag optimieren</a>
</div>
<!-- Signature Auteur -->
<div class="mt-16 bg-[#0a0a0a] rounded-xl p-8 flex flex-col md:flex-row items-center gap-8 shadow-2xl border border-white/5 relative overflow-hidden group">
<div class="absolute inset-0 bg-blue-600/5 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
<div class="relative z-10 flex-shrink-0">
<div class="w-24 h-24 rounded-full p-1 border-2 border-blue-600 shadow-[0_0_20px_rgba(37,99,235,0.3)]">
<div class="w-full h-full rounded-full overflow-hidden bg-gray-800">
<img width="768" height="1024" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20768%201024'%3E%3C/svg%3E" alt="Kevin Grillot" class="!rounded-full w-full h-full object-cover object-top transform hover:scale-110 transition-transform duration-500" data-lazy-src="https://kevin-grillot.fr/wp-content/uploads/2022/01/31-min-768x1024.jpg.avif"><noscript><img width="768" height="1024" src="https://kevin-grillot.fr/wp-content/uploads/2022/01/31-min-768x1024.jpg.avif" alt="Kevin Grillot" class="!rounded-full w-full h-full object-cover object-top transform hover:scale-110 transition-transform duration-500"></noscript>
</div>
</div>
</div>
<div class="relative z-10 text-center md:text-left">
<p class="text-blue-500 text-xs font-black uppercase tracking-[0.15em] mb-2">Écrit par</p>
<h3 class="text-white text-3xl font-bold font-heading leading-tight mb-2">Kevin Grillot</h3>
<p class="text-gray-400 text-sm font-medium leading-relaxed mb-4">Consultant Webmarketing & Expert SEO.</p>
<a href="https://kevin-grillot.fr/blog" class="inline-flex items-center gap-2 text-xs text-blue-400 hover:text-blue-300 transition-colors font-bold uppercase tracking-widest" style="border-bottom:none;text-decoration:none">
Voir tous les articles →
</a>
</div>
</div>
<!-- Lead Magnet — Checklist SEO Local -->
<section class="kg-leadmagnet-section" id="kg-leadmagnet" style="--lm-accent:#2563eb;">
<div class="kg-leadmagnet-container">
<div class="kg-leadmagnet-card">
<div class="kg-leadmagnet-glow"></div>
<div class="kg-leadmagnet-content">
<div class="kg-leadmagnet-badge"><i class="fas fa-gift"></i> Ressource gratuite</div>
<h2 class="kg-leadmagnet-title">Checklist SEO Local gratuite — 15 points à vérifier</h2>
<p class="kg-leadmagnet-sub">Téléchargez notre checklist et vérifiez si votre site est optimisé pour Google.</p>
<ul class="kg-leadmagnet-points">
<li><i class="fas fa-check-circle"></i> 15 points essentiels pour le SEO local</li>
<li><i class="fas fa-check-circle"></i> Format actionnable et imprimable</li>
<li><i class="fas fa-check-circle"></i> Utilisé par +200 entrepreneurs</li>
</ul>
<form class="kg-leadmagnet-form" id="kg-leadmagnet-form" data-ajax="https://kevin-grillot.fr/wp-admin/admin-ajax.php" data-nonce="619cd3c2a1">
<div class="kg-leadmagnet-fields">
<input type="text" name="kg_lm_prenom" placeholder="Votre prénom" required autocomplete="given-name" class="kg-leadmagnet-input">
<input type="email" name="kg_lm_email" placeholder="Votre email" required autocomplete="email" class="kg-leadmagnet-input">
<!-- Honeypot -->
<div style="position:absolute;left:-9999px;" aria-hidden="true">
<input type="text" name="kg_lm_website" tabindex="-1" autocomplete="off">
</div>
<button type="submit" class="kg-leadmagnet-btn">
<i class="fas fa-download"></i> Télécharger gratuitement
</button>
</div>
<p class="kg-leadmagnet-notice"><i class="fas fa-lock"></i> Vos données restent confidentielles. Aucun spam.</p>
</form>
<div class="kg-leadmagnet-success" id="kg-leadmagnet-success" style="display:none;">
<div class="kg-leadmagnet-success-icon"><i class="fas fa-check-circle"></i></div>
<h3>Merci ! Votre checklist est prête.</h3>
<p>Cliquez ci-dessous pour la télécharger :</p>
<a href="" class="kg-leadmagnet-download-link" id="kg-leadmagnet-download" target="_blank" rel="noopener">
<i class="fas fa-file-download"></i> Télécharger la Checklist SEO
</a>
</div>
</div>
</div>
</div>
<style>
.kg-leadmagnet-section { padding: 4rem 1.5rem; position: relative; }
.kg-leadmagnet-container { max-width: 720px; margin: 0 auto; }
.kg-leadmagnet-card {
position: relative; background: rgba(10,10,20,0.85); border: 1px solid rgba(255,255,255,0.08);
border-radius: 1.25rem; padding: 3rem 2.5rem; overflow: hidden;
backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
box-shadow: 0 8px 32px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.05);
}
.kg-leadmagnet-glow {
position: absolute; top: -60px; right: -60px; width: 200px; height: 200px;
background: var(--lm-accent); opacity: 0.08; border-radius: 50%; filter: blur(80px);
pointer-events: none;
}
.kg-leadmagnet-content { position: relative; z-index: 1; }
.kg-leadmagnet-badge {
display: inline-flex; align-items: center; gap: 0.4rem;
background: rgba(37,99,235,0.1); color: var(--lm-accent);
font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
padding: 0.4rem 1rem; border-radius: 999px; margin-bottom: 1.25rem;
border: 1px solid rgba(37,99,235,0.2);
}
.kg-leadmagnet-title {
color: #fff; font-size: 1.75rem; font-weight: 800; line-height: 1.2;
margin: 0 0 0.75rem; font-family: 'Outfit', sans-serif;
}
.kg-leadmagnet-sub { color: #9ca3af; font-size: 0.95rem; margin: 0 0 1.5rem; line-height: 1.6; }
.kg-leadmagnet-points { list-style: none; padding: 0; margin: 0 0 2rem; display: flex; flex-direction: column; gap: 0.5rem; }
.kg-leadmagnet-points li { color: #d1d5db; font-size: 0.85rem; display: flex; align-items: center; gap: 0.6rem; }
.kg-leadmagnet-points li i { color: var(--lm-accent); font-size: 0.8rem; }
.kg-leadmagnet-fields { display: flex; flex-wrap: wrap; gap: 0.75rem; position: relative; }
.kg-leadmagnet-input {
flex: 1 1 180px; padding: 0.85rem 1rem; border-radius: 0.6rem;
border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.04);
color: #e5e7eb; font-size: 0.9rem; outline: none; transition: border-color 0.2s;
}
.kg-leadmagnet-input:focus { border-color: var(--lm-accent); }
.kg-leadmagnet-input::placeholder { color: #6b7280; }
.kg-leadmagnet-btn {
flex: 1 1 100%; padding: 0.9rem 1.5rem; border: none; border-radius: 0.6rem;
background: var(--lm-accent); color: #fff; font-size: 0.95rem; font-weight: 700;
cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
transition: opacity 0.2s, transform 0.2s;
}
.kg-leadmagnet-btn:hover { opacity: 0.9; transform: translateY(-1px); }
.kg-leadmagnet-btn:disabled { opacity: 0.5; cursor: wait; }
.kg-leadmagnet-notice { font-size: 0.7rem; color: #4b5563; text-align: center; margin-top: 0.75rem; }
.kg-leadmagnet-success { text-align: center; }
.kg-leadmagnet-success-icon { font-size: 2.5rem; color: #22c55e; margin-bottom: 1rem; }
.kg-leadmagnet-success h3 { color: #fff; font-size: 1.3rem; font-weight: 700; margin: 0 0 0.5rem; }
.kg-leadmagnet-success p { color: #9ca3af; font-size: 0.9rem; margin: 0 0 1.5rem; }
.kg-leadmagnet-download-link {
display: inline-flex; align-items: center; gap: 0.5rem;
padding: 0.85rem 2rem; border-radius: 0.6rem;
background: var(--lm-accent); color: #fff; font-weight: 700; font-size: 0.95rem;
text-decoration: none; transition: opacity 0.2s;
}
.kg-leadmagnet-download-link:hover { opacity: 0.9; color: #fff; }
@media(max-width:640px) {
.kg-leadmagnet-card { padding: 2rem 1.5rem; }
.kg-leadmagnet-title { font-size: 1.35rem; }
.kg-leadmagnet-fields { flex-direction: column; }
.kg-leadmagnet-input { flex: 1 1 100%; }
}
</style>
</section>
<script type="rocketlazyloadscript">
(function(){
var form = document.getElementById('kg-leadmagnet-form');
if(!form) return;
form.addEventListener('submit', function(e){
e.preventDefault();
var btn = form.querySelector('.kg-leadmagnet-btn');
btn.disabled = true;
btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Envoi en cours...';
var fd = new FormData(form);
fd.append('action', 'kg_lead_magnet_submit');
fd.append('nonce', form.dataset.nonce);
fetch(form.dataset.ajax, { method: 'POST', body: fd })
.then(function(r){ return r.json(); })
.then(function(data){
if(data.success){
form.style.display = 'none';
var successEl = document.getElementById('kg-leadmagnet-success');
successEl.style.display = 'block';
document.getElementById('kg-leadmagnet-download').href = data.data.download_url;
sessionStorage.setItem('kg_lm_filled', '1');
} else {
btn.disabled = false;
btn.innerHTML = '<i class="fas fa-download"></i> T\u00e9l\u00e9charger gratuitement';
alert(data.data || 'Une erreur est survenue.');
}
})
.catch(function(){
btn.disabled = false;
btn.innerHTML = '<i class="fas fa-download"></i> T\u00e9l\u00e9charger gratuitement';
alert('Erreur r\u00e9seau. Veuillez r\u00e9essayer.');
});
});
})();
</script>
</article>
<!-- SIDEBAR DROITE — Derniers articles -->
<aside class="hidden lg:block lg:col-span-3">
<div class="sticky top-32 flex flex-col gap-4">
<p class="text-[10px] uppercase tracking-widest font-bold text-gray-600 mb-1">Derniers articles</p>
<a href="https://kevin-grillot.fr/de/creation-de-site-de/pourquoi-votre-site-internet-ne-genere-aucun-contact-et-comment-y-remedier-2/" class="sidebar-post">
<img width="150" height="150" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20150%20150'%3E%3C/svg%3E" class="sidebar-post-thumb wp-post-image" alt="découvrez comment utiliser l'outil disavow pour désavouer les liens nuisibles et protéger le référencement de votre site web." decoding="async" data-lazy-src="https://kevin-grillot.fr/wp-content/uploads/2026/03/disavow-1-150x150.jpg" /><noscript><img width="150" height="150" src="https://kevin-grillot.fr/wp-content/uploads/2026/03/disavow-1-150x150.jpg" class="sidebar-post-thumb wp-post-image" alt="découvrez comment utiliser l'outil disavow pour désavouer les liens nuisibles et protéger le référencement de votre site web." decoding="async" /></noscript> <div class="flex-1 min-w-0">
<p class="text-white text-sm font-semibold leading-snug line-clamp-2 mb-1">Pourquoi votre site internet ne génère aucun contact (et comment y remédier)</p>
<p class="text-gray-600 text-xs">04 Apr. 2026</p>
</div>
</a>
<a href="https://kevin-grillot.fr/de/meta-ads-de/facebook-ads-vs-google-ads-lequel-choisir-pour-votre-entreprise-locale-2/" class="sidebar-post">
<img width="150" height="150" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20150%20150'%3E%3C/svg%3E" class="sidebar-post-thumb wp-post-image" alt="découvrez comment utiliser l'outil disavow pour désavouer les liens nuisibles et protéger le référencement de votre site web." decoding="async" data-lazy-src="https://kevin-grillot.fr/wp-content/uploads/2026/03/disavow-1-150x150.jpg" /><noscript><img width="150" height="150" src="https://kevin-grillot.fr/wp-content/uploads/2026/03/disavow-1-150x150.jpg" class="sidebar-post-thumb wp-post-image" alt="découvrez comment utiliser l'outil disavow pour désavouer les liens nuisibles et protéger le référencement de votre site web." decoding="async" /></noscript> <div class="flex-1 min-w-0">
<p class="text-white text-sm font-semibold leading-snug line-clamp-2 mb-1">Facebook Ads vs Google Ads : lequel choisir pour votre entreprise locale ?</p>
<p class="text-gray-600 text-xs">04 Apr. 2026</p>
</div>
</a>
<a href="https://kevin-grillot.fr/de/google-ads-sea-de/google-ads-pour-les-pme-guide-complet-pour-ne-pas-gaspiller-son-budget-2/" class="sidebar-post">
<img width="150" height="150" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20150%20150'%3E%3C/svg%3E" class="sidebar-post-thumb wp-post-image" alt="découvrez comment utiliser l'outil disavow pour désavouer les liens nuisibles et protéger le référencement de votre site web." decoding="async" data-lazy-src="https://kevin-grillot.fr/wp-content/uploads/2026/03/disavow-1-150x150.jpg" /><noscript><img width="150" height="150" src="https://kevin-grillot.fr/wp-content/uploads/2026/03/disavow-1-150x150.jpg" class="sidebar-post-thumb wp-post-image" alt="découvrez comment utiliser l'outil disavow pour désavouer les liens nuisibles et protéger le référencement de votre site web." decoding="async" /></noscript> <div class="flex-1 min-w-0">
<p class="text-white text-sm font-semibold leading-snug line-clamp-2 mb-1">Google Ads pour les PME : guide complet pour ne pas gaspiller son budget</p>
<p class="text-gray-600 text-xs">04 Apr. 2026</p>
</div>
</a>
<a href="https://kevin-grillot.fr/de/organische-referenzierung-seo-de/seo-local-comment-apparaitre-en-1ere-page-google-pour-votre-metier-a-lyon-2/" class="sidebar-post">
<img width="150" height="150" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20150%20150'%3E%3C/svg%3E" class="sidebar-post-thumb wp-post-image" alt="découvrez comment utiliser l'outil disavow pour désavouer les liens nuisibles et protéger le référencement de votre site web." decoding="async" data-lazy-src="https://kevin-grillot.fr/wp-content/uploads/2026/03/disavow-1-150x150.jpg" /><noscript><img width="150" height="150" src="https://kevin-grillot.fr/wp-content/uploads/2026/03/disavow-1-150x150.jpg" class="sidebar-post-thumb wp-post-image" alt="découvrez comment utiliser l'outil disavow pour désavouer les liens nuisibles et protéger le référencement de votre site web." decoding="async" /></noscript> <div class="flex-1 min-w-0">
<p class="text-white text-sm font-semibold leading-snug line-clamp-2 mb-1">SEO local : comment apparaître en 1ère page Google pour votre métier à Lyon ?</p>
<p class="text-gray-600 text-xs">04 Apr. 2026</p>
</div>
</a>
<a href="https://kevin-grillot.fr/de/creation-de-site-de/combien-coute-la-creation-dun-site-internet-pour-artisan-en-2026-2/" class="sidebar-post">
<img width="150" height="150" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20150%20150'%3E%3C/svg%3E" class="sidebar-post-thumb wp-post-image" alt="découvrez comment utiliser l'outil disavow pour désavouer les liens nuisibles et protéger le référencement de votre site web." decoding="async" data-lazy-src="https://kevin-grillot.fr/wp-content/uploads/2026/03/disavow-1-150x150.jpg" /><noscript><img width="150" height="150" src="https://kevin-grillot.fr/wp-content/uploads/2026/03/disavow-1-150x150.jpg" class="sidebar-post-thumb wp-post-image" alt="découvrez comment utiliser l'outil disavow pour désavouer les liens nuisibles et protéger le référencement de votre site web." decoding="async" /></noscript> <div class="flex-1 min-w-0">
<p class="text-white text-sm font-semibold leading-snug line-clamp-2 mb-1">Combien coûte la création d’un site internet pour artisan en 2026 ?</p>
<p class="text-gray-600 text-xs">04 Apr. 2026</p>
</div>
</a>
<a href="https://kevin-grillot.fr/blog" class="mt-2 text-center text-xs text-blue-500 hover:text-blue-400 font-bold uppercase tracking-widest transition-colors block" style="text-decoration:none;border-bottom:none">
Voir tous les articles →
</a>
</div>
</aside>
</div>
</div>
<!-- ==========================================
ARTICLES LIÉS (même catégorie)
=========================================== -->
<section class="max-w-7xl mx-auto px-6 mt-24 pt-16 border-t border-white/5">
<div class="flex items-center justify-between mb-10">
<div>
<p class="text-blue-500 text-xs font-black uppercase tracking-widest mb-1">Continuer sur le même sujet</p>
<h2 class="text-white text-3xl font-bold font-heading" style="font-family:'Outfit',sans-serif">Articles liés</h2>
</div>
<a href="https://kevin-grillot.fr/de/category/organische-referenzierung-seo-de/" class="hidden md:flex items-center gap-2 text-xs text-gray-400 hover:text-blue-400 transition-colors font-bold uppercase tracking-widest" style="text-decoration:none;border-bottom:none">
Voir la catégorie
<svg width="12" height="12" viewBox="0 0 448 512" fill="currentColor" aria-hidden="true"><path d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"/></svg>
</a>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<a href="https://kevin-grillot.fr/de/organische-referenzierung-seo-de/entdecken-sie-die-10-fuhrenden-seo-unternehmen-im-jahr-2025/" class="related-card">
<div style="overflow:hidden">
<img width="768" height="401" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20768%20401'%3E%3C/svg%3E" class="related-card-img wp-post-image" alt="découvrez les leaders du seo qui transforment le paysage du marketing numérique. apprenez de leurs stratégies efficaces, astuces et conseils pour améliorer la visibilité de votre site web et dominer les résultats des moteurs de recherche." decoding="async" data-lazy-srcset="https://kevin-grillot.fr/wp-content/uploads/2025/07/seo-leaders-768x401.jpg 768w, https://kevin-grillot.fr/wp-content/uploads/2025/07/seo-leaders-300x157.jpg 300w, https://kevin-grillot.fr/wp-content/uploads/2025/07/seo-leaders-1024x535.jpg 1024w, https://kevin-grillot.fr/wp-content/uploads/2025/07/seo-leaders.jpg 1200w" data-lazy-sizes="(max-width: 768px) 100vw, 768px" data-lazy-src="https://kevin-grillot.fr/wp-content/uploads/2025/07/seo-leaders-768x401.jpg" /><noscript><img width="768" height="401" src="https://kevin-grillot.fr/wp-content/uploads/2025/07/seo-leaders-768x401.jpg" class="related-card-img wp-post-image" alt="découvrez les leaders du seo qui transforment le paysage du marketing numérique. apprenez de leurs stratégies efficaces, astuces et conseils pour améliorer la visibilité de votre site web et dominer les résultats des moteurs de recherche." decoding="async" srcset="https://kevin-grillot.fr/wp-content/uploads/2025/07/seo-leaders-768x401.jpg 768w, https://kevin-grillot.fr/wp-content/uploads/2025/07/seo-leaders-300x157.jpg 300w, https://kevin-grillot.fr/wp-content/uploads/2025/07/seo-leaders-1024x535.jpg 1024w, https://kevin-grillot.fr/wp-content/uploads/2025/07/seo-leaders.jpg 1200w" sizes="(max-width: 768px) 100vw, 768px" /></noscript> </div>
<div class="p-5 flex flex-col flex-1">
<span class="text-blue-500 text-xs font-bold uppercase tracking-widest mb-2">Organische Referenzierung (SEO)</span>
<h3 class="text-white font-bold text-lg leading-snug mb-3 flex-1" style="font-family:'Outfit',sans-serif">Entdecken Sie die 10 führenden SEO-Unternehmen im Jahr 2025</h3>
<div class="flex items-center justify-between text-gray-500 text-xs mt-auto">
<span>13 Juli 2025</span>
<span class="text-blue-500 font-bold">Lire →</span>
</div>
</div>
</a>
<a href="https://kevin-grillot.fr/de/organische-referenzierung-seo-de/wichtige-seo-und-digitalmarketing-trends-die-sie-im-september-2025-im-auge-behalten-sollten/" class="related-card">
<div style="overflow:hidden">
<picture class="related-card-img wp-post-image" decoding="async">
<source type="image/avif" data-lazy-srcset="https://kevin-grillot.fr/wp-content/uploads/2025/12/seo-and-digital-marketing-trends.jpg.avif"/>
<img width="768" height="401" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20768%20401'%3E%3C/svg%3E" alt="découvrez les dernières tendances en seo et marketing digital pour optimiser votre visibilité en ligne et booster votre stratégie numérique en 2024." decoding="async" data-lazy-src="https://kevin-grillot.fr/wp-content/uploads/2025/12/seo-and-digital-marketing-trends.jpg"/><noscript><img width="768" height="401" src="https://kevin-grillot.fr/wp-content/uploads/2025/12/seo-and-digital-marketing-trends.jpg" alt="découvrez les dernières tendances en seo et marketing digital pour optimiser votre visibilité en ligne et booster votre stratégie numérique en 2024." decoding="async"/></noscript>
</picture>
</div>
<div class="p-5 flex flex-col flex-1">
<span class="text-blue-500 text-xs font-bold uppercase tracking-widest mb-2">Organische Referenzierung (SEO)</span>
<h3 class="text-white font-bold text-lg leading-snug mb-3 flex-1" style="font-family:'Outfit',sans-serif">Wichtige SEO- und Digitalmarketing-Trends, die Sie im September 2025 im Auge behalten sollten</h3>
<div class="flex items-center justify-between text-gray-500 text-xs mt-auto">
<span>27 Dez. 2025</span>
<span class="text-blue-500 font-bold">Lire →</span>
</div>
</div>
</a>
<a href="https://kevin-grillot.fr/de/organische-referenzierung-seo-de/%e2%96%b7-die-5-wichtigsten-bucher-fur-umfassende-seo-kenntnisse/" class="related-card">
<div style="overflow:hidden">
<img width="768" height="401" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20768%20401'%3E%3C/svg%3E" class="related-card-img wp-post-image" alt="découvrez notre sélection des meilleurs livres sur le seo pour améliorer votre référencement naturel et booster la visibilité de votre site web." decoding="async" data-lazy-src="https://kevin-grillot.fr/wp-content/uploads/2026/01/seo-books.jpg" /><noscript><img width="768" height="401" src="https://kevin-grillot.fr/wp-content/uploads/2026/01/seo-books.jpg" class="related-card-img wp-post-image" alt="découvrez notre sélection des meilleurs livres sur le seo pour améliorer votre référencement naturel et booster la visibilité de votre site web." decoding="async" /></noscript> </div>
<div class="p-5 flex flex-col flex-1">
<span class="text-blue-500 text-xs font-bold uppercase tracking-widest mb-2">Organische Referenzierung (SEO)</span>
<h3 class="text-white font-bold text-lg leading-snug mb-3 flex-1" style="font-family:'Outfit',sans-serif">▷ Die 5 wichtigsten Bücher für umfassende SEO-Kenntnisse</h3>
<div class="flex items-center justify-between text-gray-500 text-xs mt-auto">
<span>21 Jan. 2026</span>
<span class="text-blue-500 font-bold">Lire →</span>
</div>
</div>
</a>
</div>
</section>
<!-- ==========================================
DERNIERS ARTICLES (4 cartes)
=========================================== -->
<section class="max-w-7xl mx-auto px-6 mt-20 pt-16 border-t border-white/5">
<div class="flex items-center justify-between mb-10">
<div>
<p class="text-gray-500 text-xs font-black uppercase tracking-widest mb-1">Ne manquez rien</p>
<h2 class="text-white text-3xl font-bold font-heading" style="font-family:'Outfit',sans-serif">Derniers articles</h2>
</div>
<a href="https://kevin-grillot.fr/blog" class="hidden md:flex items-center gap-2 text-xs text-gray-400 hover:text-blue-400 transition-colors font-bold uppercase tracking-widest" style="text-decoration:none;border-bottom:none">
Tout voir
<svg width="12" height="12" viewBox="0 0 448 512" fill="currentColor" aria-hidden="true"><path d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"/></svg>
</a>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5">
<a href="https://kevin-grillot.fr/de/creation-de-site-de/pourquoi-votre-site-internet-ne-genere-aucun-contact-et-comment-y-remedier-2/" class="related-card">
<div style="overflow:hidden">
<img width="300" height="157" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%20157'%3E%3C/svg%3E" class="related-card-img wp-post-image" alt="découvrez comment utiliser l'outil disavow pour désavouer les liens nuisibles et protéger le référencement de votre site web." decoding="async" data-lazy-srcset="https://kevin-grillot.fr/wp-content/uploads/2026/03/disavow-1-300x157.jpg 300w, https://kevin-grillot.fr/wp-content/uploads/2026/03/disavow-1-1024x535.jpg 1024w, https://kevin-grillot.fr/wp-content/uploads/2026/03/disavow-1-768x401.jpg 768w, https://kevin-grillot.fr/wp-content/uploads/2026/03/disavow-1.jpg 1200w" data-lazy-sizes="(max-width: 300px) 100vw, 300px" data-lazy-src="https://kevin-grillot.fr/wp-content/uploads/2026/03/disavow-1-300x157.jpg" /><noscript><img width="300" height="157" src="https://kevin-grillot.fr/wp-content/uploads/2026/03/disavow-1-300x157.jpg" class="related-card-img wp-post-image" alt="découvrez comment utiliser l'outil disavow pour désavouer les liens nuisibles et protéger le référencement de votre site web." decoding="async" srcset="https://kevin-grillot.fr/wp-content/uploads/2026/03/disavow-1-300x157.jpg 300w, https://kevin-grillot.fr/wp-content/uploads/2026/03/disavow-1-1024x535.jpg 1024w, https://kevin-grillot.fr/wp-content/uploads/2026/03/disavow-1-768x401.jpg 768w, https://kevin-grillot.fr/wp-content/uploads/2026/03/disavow-1.jpg 1200w" sizes="(max-width: 300px) 100vw, 300px" /></noscript> </div>
<div class="p-4 flex flex-col flex-1">
<span class="text-blue-500 text-xs font-bold uppercase tracking-widest mb-2">Création de site</span>
<h3 class="text-white font-bold text-base leading-snug mb-3 flex-1" style="font-family:'Outfit',sans-serif">Pourquoi votre site internet ne génère aucun contact (et comment y remédier)</h3>
<p class="text-gray-500 text-xs">04 Apr. 2026</p>
</div>
</a>
<a href="https://kevin-grillot.fr/de/meta-ads-de/facebook-ads-vs-google-ads-lequel-choisir-pour-votre-entreprise-locale-2/" class="related-card">
<div style="overflow:hidden">
<img width="300" height="157" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%20157'%3E%3C/svg%3E" class="related-card-img wp-post-image" alt="découvrez comment utiliser l'outil disavow pour désavouer les liens nuisibles et protéger le référencement de votre site web." decoding="async" data-lazy-srcset="https://kevin-grillot.fr/wp-content/uploads/2026/03/disavow-1-300x157.jpg 300w, https://kevin-grillot.fr/wp-content/uploads/2026/03/disavow-1-1024x535.jpg 1024w, https://kevin-grillot.fr/wp-content/uploads/2026/03/disavow-1-768x401.jpg 768w, https://kevin-grillot.fr/wp-content/uploads/2026/03/disavow-1.jpg 1200w" data-lazy-sizes="(max-width: 300px) 100vw, 300px" data-lazy-src="https://kevin-grillot.fr/wp-content/uploads/2026/03/disavow-1-300x157.jpg" /><noscript><img width="300" height="157" src="https://kevin-grillot.fr/wp-content/uploads/2026/03/disavow-1-300x157.jpg" class="related-card-img wp-post-image" alt="découvrez comment utiliser l'outil disavow pour désavouer les liens nuisibles et protéger le référencement de votre site web." decoding="async" srcset="https://kevin-grillot.fr/wp-content/uploads/2026/03/disavow-1-300x157.jpg 300w, https://kevin-grillot.fr/wp-content/uploads/2026/03/disavow-1-1024x535.jpg 1024w, https://kevin-grillot.fr/wp-content/uploads/2026/03/disavow-1-768x401.jpg 768w, https://kevin-grillot.fr/wp-content/uploads/2026/03/disavow-1.jpg 1200w" sizes="(max-width: 300px) 100vw, 300px" /></noscript> </div>
<div class="p-4 flex flex-col flex-1">
<span class="text-blue-500 text-xs font-bold uppercase tracking-widest mb-2">Meta Ads</span>
<h3 class="text-white font-bold text-base leading-snug mb-3 flex-1" style="font-family:'Outfit',sans-serif">Facebook Ads vs Google Ads : lequel choisir pour votre entreprise locale ?</h3>
<p class="text-gray-500 text-xs">04 Apr. 2026</p>
</div>
</a>
<a href="https://kevin-grillot.fr/de/google-ads-sea-de/google-ads-pour-les-pme-guide-complet-pour-ne-pas-gaspiller-son-budget-2/" class="related-card">
<div style="overflow:hidden">
<img width="300" height="157" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%20157'%3E%3C/svg%3E" class="related-card-img wp-post-image" alt="découvrez comment utiliser l'outil disavow pour désavouer les liens nuisibles et protéger le référencement de votre site web." decoding="async" data-lazy-srcset="https://kevin-grillot.fr/wp-content/uploads/2026/03/disavow-1-300x157.jpg 300w, https://kevin-grillot.fr/wp-content/uploads/2026/03/disavow-1-1024x535.jpg 1024w, https://kevin-grillot.fr/wp-content/uploads/2026/03/disavow-1-768x401.jpg 768w, https://kevin-grillot.fr/wp-content/uploads/2026/03/disavow-1.jpg 1200w" data-lazy-sizes="(max-width: 300px) 100vw, 300px" data-lazy-src="https://kevin-grillot.fr/wp-content/uploads/2026/03/disavow-1-300x157.jpg" /><noscript><img width="300" height="157" src="https://kevin-grillot.fr/wp-content/uploads/2026/03/disavow-1-300x157.jpg" class="related-card-img wp-post-image" alt="découvrez comment utiliser l'outil disavow pour désavouer les liens nuisibles et protéger le référencement de votre site web." decoding="async" srcset="https://kevin-grillot.fr/wp-content/uploads/2026/03/disavow-1-300x157.jpg 300w, https://kevin-grillot.fr/wp-content/uploads/2026/03/disavow-1-1024x535.jpg 1024w, https://kevin-grillot.fr/wp-content/uploads/2026/03/disavow-1-768x401.jpg 768w, https://kevin-grillot.fr/wp-content/uploads/2026/03/disavow-1.jpg 1200w" sizes="(max-width: 300px) 100vw, 300px" /></noscript> </div>
<div class="p-4 flex flex-col flex-1">
<span class="text-blue-500 text-xs font-bold uppercase tracking-widest mb-2">Google Ads (SEA)</span>
<h3 class="text-white font-bold text-base leading-snug mb-3 flex-1" style="font-family:'Outfit',sans-serif">Google Ads pour les PME : guide complet pour ne pas gaspiller son budget</h3>
<p class="text-gray-500 text-xs">04 Apr. 2026</p>
</div>
</a>
<a href="https://kevin-grillot.fr/de/organische-referenzierung-seo-de/seo-local-comment-apparaitre-en-1ere-page-google-pour-votre-metier-a-lyon-2/" class="related-card">
<div style="overflow:hidden">
<img width="300" height="157" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%20157'%3E%3C/svg%3E" class="related-card-img wp-post-image" alt="découvrez comment utiliser l'outil disavow pour désavouer les liens nuisibles et protéger le référencement de votre site web." decoding="async" data-lazy-srcset="https://kevin-grillot.fr/wp-content/uploads/2026/03/disavow-1-300x157.jpg 300w, https://kevin-grillot.fr/wp-content/uploads/2026/03/disavow-1-1024x535.jpg 1024w, https://kevin-grillot.fr/wp-content/uploads/2026/03/disavow-1-768x401.jpg 768w, https://kevin-grillot.fr/wp-content/uploads/2026/03/disavow-1.jpg 1200w" data-lazy-sizes="(max-width: 300px) 100vw, 300px" data-lazy-src="https://kevin-grillot.fr/wp-content/uploads/2026/03/disavow-1-300x157.jpg" /><noscript><img width="300" height="157" src="https://kevin-grillot.fr/wp-content/uploads/2026/03/disavow-1-300x157.jpg" class="related-card-img wp-post-image" alt="découvrez comment utiliser l'outil disavow pour désavouer les liens nuisibles et protéger le référencement de votre site web." decoding="async" srcset="https://kevin-grillot.fr/wp-content/uploads/2026/03/disavow-1-300x157.jpg 300w, https://kevin-grillot.fr/wp-content/uploads/2026/03/disavow-1-1024x535.jpg 1024w, https://kevin-grillot.fr/wp-content/uploads/2026/03/disavow-1-768x401.jpg 768w, https://kevin-grillot.fr/wp-content/uploads/2026/03/disavow-1.jpg 1200w" sizes="(max-width: 300px) 100vw, 300px" /></noscript> </div>
<div class="p-4 flex flex-col flex-1">
<span class="text-blue-500 text-xs font-bold uppercase tracking-widest mb-2">Organische Referenzierung (SEO)</span>
<h3 class="text-white font-bold text-base leading-snug mb-3 flex-1" style="font-family:'Outfit',sans-serif">SEO local : comment apparaître en 1ère page Google pour votre métier à Lyon ?</h3>
<p class="text-gray-500 text-xs">04 Apr. 2026</p>
</div>
</a>
</div>
<!-- Bouton mobile "Voir tous" -->
<div class="mt-8 text-center md:hidden">
<a href="https://kevin-grillot.fr/blog" class="inline-flex items-center gap-2 px-6 py-3 border border-white/10 rounded-full text-sm text-gray-300 hover:border-blue-500 hover:text-blue-400 transition-all font-medium" style="text-decoration:none;border-bottom:none">
Voir tous les articles
</a>
</div>
</section>
<!-- ==========================================
NAVIGATION PRÉCÉDENT / SUIVANT
=========================================== -->
<div class="max-w-7xl mx-auto px-6 mt-20 border-t border-white/10 pt-16">
<h3 class="text-center text-gray-500 text-xs uppercase tracking-widest mb-10">Continuer la lecture</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<a href="https://kevin-grillot.fr/de/organische-referenzierung-seo-de/wie-man-den-meta-description-tag-optimiert-um-die-seo-im-jahr-2026-zu-verbessern/" class="nav-card p-8 rounded-2xl block group text-left" style="text-decoration:none;border-bottom:none">
<span class="text-xs text-gray-500 font-bold uppercase tracking-widest mb-3 block group-hover:text-blue-500 transition-colors">← Article précédent</span>
<h4 class="text-xl font-bold text-white font-heading leading-snug group-hover:text-blue-400 transition-colors" style="font-family:'Outfit',sans-serif">
Wie man den Meta-Description-Tag optimiert, um die SEO im Jahr 2026 zu verbessern </h4>
</a>
<a href="https://kevin-grillot.fr/de/organische-referenzierung-seo-de/von-seo-zu-geo-wie-ki-laut-julian-ferrand-livingpackets-das-uberleben-von-marken-neu-definiert/" class="nav-card p-8 rounded-2xl block group text-right" style="text-decoration:none;border-bottom:none">
<span class="text-xs text-gray-500 font-bold uppercase tracking-widest mb-3 block group-hover:text-blue-500 transition-colors">Article suivant →</span>
<h4 class="text-xl font-bold text-white font-heading leading-snug group-hover:text-blue-400 transition-colors" style="font-family:'Outfit',sans-serif">
Von SEO zu GEO: Wie KI laut Julian Ferrand (LivingPackets) das Überleben von Marken neu definiert </h4>
</a>
</div>
</div>
</main>
<!-- ==========================================
BARRE FLOTTANTE "LIRE ENSUITE"
Apparaît à 70% de lecture
=========================================== -->
<div id="read-next-bar" aria-label="Lire l'article suivant" role="complementary">
<div class="max-w-4xl mx-auto px-4 py-3 flex items-center gap-4">
<!-- Miniature -->
<img width="1200" height="627" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201200%20627'%3E%3C/svg%3E" alt="" class="read-next-thumb" style="width:48px;height:48px;object-fit:cover;border-radius:6px;flex-shrink:0" data-lazy-src="https://kevin-grillot.fr/wp-content/uploads/2025/12/brand-survival.jpg"><noscript><img width="1200" height="627" src="https://kevin-grillot.fr/wp-content/uploads/2025/12/brand-survival.jpg" alt="" class="read-next-thumb" style="width:48px;height:48px;object-fit:cover;border-radius:6px;flex-shrink:0"></noscript>
<!-- Texte -->
<div class="flex-1 min-w-0">
<p class="text-gray-500 text-xs font-bold uppercase tracking-widest mb-0.5">Article suivant</p>
<p class="text-white text-sm font-semibold truncate">Von SEO zu GEO: Wie KI laut Julian Ferrand (LivingPackets) das Überleben von Marken neu definiert</p>
</div>
<!-- CTA -->
<a href="https://kevin-grillot.fr/de/organische-referenzierung-seo-de/von-seo-zu-geo-wie-ki-laut-julian-ferrand-livingpackets-das-uberleben-von-marken-neu-definiert/" class="flex-shrink-0 bg-blue-600 hover:bg-blue-500 text-white text-xs font-bold uppercase tracking-widest px-5 py-2.5 rounded-full transition-colors" style="text-decoration:none;border-bottom:none;white-space:nowrap">
Lire →
</a>
<!-- Fermer -->
<button id="close-next-bar" aria-label="Fermer" class="flex-shrink-0 w-8 h-8 rounded-full bg-white/5 hover:bg-white/10 flex items-center justify-center transition-colors">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
</button>
</div>
</div>
<!-- SCRIPTS -->
<script type="rocketlazyloadscript">
(function() {
// ---- 1. BARRE DE PROGRESSION ----
var progressBar = document.getElementById('reading-progress');
window.addEventListener('scroll', function() {
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var scrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
if (progressBar && scrollHeight > 0) {
progressBar.style.width = (scrollTop / scrollHeight * 100) + '%';
}
}, { passive: true });
// ---- 2. TABLE DES MATIÈRES ----
var tocSidebar = document.getElementById('toc-sidebar');
var sidebarLeft = document.getElementById('sidebar-left');
var fixedLeft = null;
var fixedWidth = null;
var STICKY_TOP = 110; // px — sous la nav
// Enregistre les coordonnées de la sidebar pour le mode fixed
function recordSidebarPos() {
if (!sidebarLeft) return;
var rect = sidebarLeft.getBoundingClientRect();
fixedLeft = Math.round(rect.left + window.scrollX);
fixedWidth = Math.round(rect.width);
}
// Bascule sticky → fixed quand le grid se termine (pour rester "toujours visible")
function updateSidebarMode() {
if (!tocSidebar || !sidebarLeft || window.innerWidth < 1024) {
if (tocSidebar) tocSidebar.style.cssText = '';
return;
}
if (fixedLeft === null) recordSidebarPos();
var asideRect = sidebarLeft.getBoundingClientRect();
if (asideRect.top > STICKY_TOP) {
// Au-dessus du contenu : laisser le sticky CSS gérer
tocSidebar.style.cssText = '';
} else if (asideRect.bottom < STICKY_TOP + tocSidebar.offsetHeight + 20) {
// Fin du grid : passer en fixed pour rester visible
tocSidebar.style.position = 'fixed';
tocSidebar.style.top = STICKY_TOP + 'px';
tocSidebar.style.left = fixedLeft + 'px';
tocSidebar.style.width = fixedWidth + 'px';
tocSidebar.style.maxHeight = 'calc(100vh - 130px)';
tocSidebar.style.overflowY = 'auto';
} else {
// Dans la zone de lecture : sticky normal
tocSidebar.style.cssText = '';
}
}
window.addEventListener('resize', function() { recordSidebarPos(); updateSidebarMode(); }, { passive: true });
window.addEventListener('scroll', updateSidebarMode, { passive: true });
function buildTOC() {
var headings = document.querySelectorAll('.article-body h2, .article-body h3');
if (!headings.length) {
var emptyMsg = document.getElementById('toc-empty-msg');
if (emptyMsg) emptyMsg.style.display = '';
return;
}
var tocList = document.getElementById('toc-list');
var tocMobileList = document.getElementById('toc-mobile-list');
if (!tocList && !tocMobileList) return;
var items = [];
headings.forEach(function(h, idx) {
if (!h.id) {
h.id = 'h-' + idx + '-' + h.textContent.trim().toLowerCase()
.replace(/[^\w\s-]/g, '').replace(/\s+/g, '-').substring(0, 40);
}
items.push({ id: h.id, text: h.textContent.trim(), level: h.tagName });
});
function buildList(listEl, isMobile) {
if (!listEl) return;
items.forEach(function(item) {
var li = document.createElement('li');
if (item.level === 'H3' && isMobile) li.className = 'toc-h3-item';
var a = document.createElement('a');
a.href = '#' + item.id;
a.textContent = item.text;
if (item.level === 'H3' && !isMobile) a.classList.add('toc-h3');
a.addEventListener('click', function(e) {
e.preventDefault();
var target = document.getElementById(item.id);
if (target) {
window.scrollTo({ top: target.getBoundingClientRect().top + window.pageYOffset - 100, behavior: 'smooth' });
}
});
li.appendChild(a);
listEl.appendChild(li);
});
}
buildList(tocList, false);
buildList(tocMobileList, true);
// Surlignage dynamique du titre courant
var tocLinks = tocList ? tocList.querySelectorAll('a') : [];
window.addEventListener('scroll', function() {
var scrollPos = window.pageYOffset + 130;
var current = '';
items.forEach(function(item) {
var el = document.getElementById(item.id);
if (el && el.offsetTop <= scrollPos) current = item.id;
});
tocLinks.forEach(function(link) {
link.classList.toggle('toc-active', link.getAttribute('href') === '#' + current);
});
}, { passive: true });
}
// ---- 3. TOC MOBILE TOGGLE ----
var tocToggle = document.getElementById('toc-toggle');
var tocContent = document.getElementById('toc-mobile-content');
var tocChevron = document.getElementById('toc-chevron');
if (tocToggle && tocContent) {
tocToggle.addEventListener('click', function() {
var isOpen = tocContent.classList.toggle('open');
tocChevron.style.transform = isOpen ? 'rotate(180deg)' : 'rotate(0)';
});
}
// ---- 4. BARRE FLOTTANTE "LIRE ENSUITE" ----
var bar = document.getElementById('read-next-bar');
var closeBtn = document.getElementById('close-next-bar');
var barShown = false;
var barDismissed = false;
if (bar) {
window.addEventListener('scroll', function() {
if (barDismissed) return;
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var scrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var pct = scrollHeight > 0 ? (scrollTop / scrollHeight * 100) : 0;
if (pct > 70 && !barShown) {
bar.classList.add('bar-visible');
barShown = true;
} else if (pct <= 60 && barShown) {
bar.classList.remove('bar-visible');
barShown = false;
}
}, { passive: true });
if (closeBtn) {
closeBtn.addEventListener('click', function() {
bar.classList.remove('bar-visible');
bar.classList.add('bar-dismissed');
barDismissed = true;
});
}
}
// ---- INIT ----
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', function() {
recordSidebarPos();
buildTOC();
});
} else {
recordSidebarPos();
buildTOC();
}
// Recalcul après images chargées (layout peut changer)
window.addEventListener('load', function() {
recordSidebarPos();
updateSidebarMode();
});
})();
</script>
<!-- DÉBUT DU FOOTER PERSONNALISÉ -->
<style>
/* Styles spécifiques au footer (isolés pour ne pas casser le reste) */
.custom-footer {
font-family: 'Inter', sans-serif;
background-color: #000000;
color: white;
position: relative;
overflow: hidden;
width: 100%;
margin-top: auto; /* Pousse le footer en bas si la page est courte */
}
.font-heading { font-family: 'Outfit', sans-serif; }
/* Couleurs */
.text-brand-blue { color: #0055ff; }
.bg-brand-blue { background-color: #0055ff; }
/* Liens Footer */
.footer-link {
position: relative;
color: #9ca3af; /* gray-400 */
text-decoration: none;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.5rem;
}
.footer-link:hover {
color: #ffffff;
transform: translateX(5px);
}
.footer-link::before {
content: '';
width: 0;
height: 1px;
background-color: #0055ff;
transition: width 0.3s ease;
}
.footer-link:hover::before {
width: 10px;
}
/* Cartes - voir hover amélioré ci-dessous */
/* Icones */
.icon-circle {
width: 3rem; height: 3rem;
border-radius: 50%;
background-color: rgba(0, 85, 255, 0.1);
display: flex; align-items: center; justify-content: center;
color: #0055ff; font-size: 1.25rem;
transition: all 0.3s ease;
margin-bottom: 1rem;
}
.footer-card:hover .icon-circle {
background-color: #0055ff; color: white;
box-shadow: 0 0 20px rgba(0, 85, 255, 0.4);
}
/* Compétences */
.footer-skill {
display: flex; align-items: center; gap: 10px;
padding: 10px 14px; border-radius: 10px; font-size: 0.85rem; font-weight: 700;
background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
color: var(--sk-color, #9ca3af); text-decoration: none;
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.footer-skill:hover {
background: color-mix(in srgb, var(--sk-color) 12%, transparent);
border-color: color-mix(in srgb, var(--sk-color) 40%, transparent);
color: var(--sk-color);
transform: translateX(6px);
box-shadow: 0 0 20px color-mix(in srgb, var(--sk-color) 15%, transparent);
}
.footer-skill i { width: 1.2em; text-align: center; }
/* Hover animation cartes footer */
.footer-card {
padding: 1.5rem;
border-radius: 1rem;
border: 1px solid rgba(255, 255, 255, 0.03);
background: linear-gradient(145deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0) 100%);
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.footer-card:hover {
border-color: rgba(0, 85, 255, 0.25);
background: linear-gradient(145deg, rgba(255,255,255,0.04) 0%, rgba(0,85,255,0.03) 100%);
transform: translateY(-4px);
box-shadow: 0 12px 40px rgba(0, 85, 255, 0.08), 0 0 0 1px rgba(0, 85, 255, 0.1);
}
/* Bouton */
.btn-glow {
background: linear-gradient(90deg, #0055ff, #0044cc);
color: white;
padding: 12px 24px;
border-radius: 8px;
font-weight: bold;
text-transform: uppercase;
font-size: 0.8rem;
letter-spacing: 0.05em;
transition: all 0.3s ease;
box-shadow: 0 0 15px rgba(0, 85, 255, 0.2);
display: inline-flex;
align-items: center;
gap: 8px;
}
.btn-glow:hover {
box-shadow: 0 0 25px rgba(0, 85, 255, 0.5);
transform: translateY(-2px);
color: white;
}
</style>
<footer class="custom-footer pt-24 pb-8 border-t border-white/5">
<!-- Lumières d'ambiance (Background) -->
<div class="absolute top-0 right-0 w-[500px] h-[500px] bg-blue-600/5 rounded-full blur-[120px] -z-10 pointer-events-none"></div>
<div class="absolute bottom-0 left-0 w-[400px] h-[400px] bg-blue-900/5 rounded-full blur-[100px] -z-10 pointer-events-none"></div>
<div class="max-w-[1400px] mx-auto px-6">
<!-- En-tête du Footer (CTA) -->
<div class="mb-16 md:flex justify-between items-end border-b border-white/5 pb-10">
<div>
<h2 class="font-heading text-3xl md:text-5xl font-black uppercase tracking-tight mb-2 text-white">
Prêt à <span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-500 to-white">décoller ?</span>
</h2>
<p class="text-gray-400 max-w-md">Transformons votre présence digitale en véritable levier de croissance.</p>
</div>
<div class="mt-6 md:mt-0">
<a href="https://kevin-grillot.fr/me-contacter/" class="btn-glow">
Démarrer un projet <i class="fas fa-arrow-right"></i>
</a>
</div>
</div>
<!-- Grid Principale (5 Colonnes) -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-6 lg:gap-8 mb-20">
<!-- 1. CONTACT -->
<div class="footer-card">
<div class="icon-circle"><i class="fas fa-envelope"></i></div>
<h3 class="font-heading font-bold text-lg uppercase tracking-wider mb-6 text-white">Contact</h3>
<div class="space-y-4">
<a href="mailto:grillotkevin@gmail.com" class="flex items-center gap-3 group text-gray-400 hover:text-white transition-colors">
<span class="w-8 h-8 rounded bg-white/5 flex items-center justify-center text-blue-500 group-hover:bg-brand-blue group-hover:text-white transition-all"><i class="fas fa-at text-xs"></i></span>
<span class="text-sm font-medium">grillotkevin@gmail.com</span>
</a>
<a href="tel:0667570018" class="flex items-center gap-3 group text-gray-400 hover:text-white transition-colors">
<span class="w-8 h-8 rounded bg-white/5 flex items-center justify-center text-blue-500 group-hover:bg-brand-blue group-hover:text-white transition-all"><i class="fas fa-phone text-xs"></i></span>
<span class="text-sm font-medium">06 67 57 00 18</span>
</a>
<a href="https://wa.me/33667570018?text=Bonjour%20Kevin%2C%20je%20souhaite%20un%20devis%20pour%20mon%20projet." target="_blank" rel="noopener" class="flex items-center gap-3 group text-gray-400 hover:text-white transition-colors">
<span class="w-8 h-8 rounded bg-white/5 flex items-center justify-center text-green-500 group-hover:bg-green-600 group-hover:text-white transition-all"><i class="fab fa-whatsapp text-xs"></i></span>
<span class="text-sm font-medium">WhatsApp direct</span>
</a>
</div>
</div>
<!-- 2. NAVIGATION -->
<div class="footer-card">
<div class="icon-circle"><i class="fas fa-compass"></i></div>
<h3 class="font-heading font-bold text-lg uppercase tracking-wider mb-6 text-white">Navigation</h3>
<nav class="flex flex-col space-y-2 text-sm font-medium">
<a href="https://kevin-grillot.fr/mes-experiences/" class="footer-link">Mes Expériences</a>
<a href="https://kevin-grillot.fr/mes-formations/" class="footer-link">Mes Formations</a>
<a href="https://kevin-grillot.fr/mes-etudes/" class="footer-link">Mes Études</a>
<a href="https://kevin-grillot.fr/a-propos/" class="footer-link">À Propos</a>
<a href="https://kevin-grillot.fr/blog/" class="footer-link">Le Blog</a>
<a href="https://kevin-grillot.fr/creation-site-internet/" class="footer-link">Création Site Web</a>
</nav>
</div>
<!-- 3. RÉSEAUX -->
<div class="footer-card">
<div class="icon-circle"><i class="fas fa-share-alt"></i></div>
<h3 class="font-heading font-bold text-lg uppercase tracking-wider mb-6 text-white">Réseaux</h3>
<p class="text-gray-400 text-sm mb-6">Suivez mon actualité et mes conseils quotidiens.</p>
<div class="flex gap-4">
<a href="https://www.linkedin.com/in/kevin-grillot-036652159/" target="_blank" class="w-12 h-12 rounded-lg bg-white/5 flex items-center justify-center text-white hover:bg-[#0077b5] hover:scale-110 transition-all duration-300 shadow-lg">
<i class="fab fa-linkedin-in text-xl"></i>
</a>
<a href="https://www.instagram.com/kevingr04/" target="_blank" class="w-12 h-12 rounded-lg bg-white/5 flex items-center justify-center text-white hover:bg-gradient-to-tr hover:from-yellow-400 hover:via-red-500 hover:to-purple-500 hover:scale-110 transition-all duration-300 shadow-lg">
<i class="fab fa-instagram text-xl"></i>
</a>
</div>
</div>
<!-- 3b. COMPÉTENCES -->
<div class="footer-card">
<div class="icon-circle"><i class="fas fa-rocket"></i></div>
<h3 class="font-heading font-bold text-lg uppercase tracking-wider mb-6 text-white">Compétences</h3>
<div class="space-y-3">
<a href="https://kevin-grillot.fr/seo-geo/" class="footer-skill" style="--sk-color:#2563eb;">
<i class="fas fa-search"></i> SEO & GEO
</a>
<a href="https://kevin-grillot.fr/google-ads/" class="footer-skill" style="--sk-color:#f97316;">
<i class="fab fa-google"></i> Google Ads
</a>
<a href="https://kevin-grillot.fr/meta-ads/" class="footer-skill" style="--sk-color:#e91e8c;">
<i class="fab fa-meta"></i> Meta Ads
</a>
<a href="https://kevin-grillot.fr/creation-site/" class="footer-skill" style="--sk-color:#10b981;">
<i class="fas fa-code"></i> Création de site
</a>
</div>
</div>
<!-- 4. EXPERTISE (Liste Enrichie) -->
<div class="footer-card">
<div class="icon-circle"><i class="fas fa-certificate"></i></div>
<h3 class="font-heading font-bold text-lg uppercase tracking-wider mb-6 text-white">Expertise</h3>
<div class="space-y-3 mb-6">
<!-- SEMrush -->
<div class="flex items-center gap-3 p-2 rounded bg-white/5 border border-white/5 hover:border-orange-500/30 transition-colors">
<i class="fas fa-fire text-orange-500 text-lg"></i>
<span class="font-bold text-sm text-gray-200">SEMrush</span>
</div>
<!-- Google Looker Studio -->
<div class="flex items-center gap-3 p-2 rounded bg-white/5 border border-white/5 hover:border-blue-400/30 transition-colors">
<i class="fas fa-chart-area text-blue-400 text-lg"></i>
<span class="font-bold text-sm text-gray-200">Looker Studio</span>
</div>
<!-- Meta Ads -->
<div class="flex items-center gap-3 p-2 rounded bg-white/5 border border-white/5 hover:border-blue-600/30 transition-colors">
<i class="fab fa-meta text-blue-600 text-lg"></i>
<span class="font-bold text-sm text-gray-200">Meta Ads</span>
</div>
<!-- Google Ads -->
<div class="flex items-center gap-3 p-2 rounded bg-white/5 border border-white/5 hover:border-blue-500/30 transition-colors">
<i class="fab fa-google text-blue-500 text-lg"></i>
<span class="font-bold text-sm text-gray-200">Google Ads</span>
</div>
</div>
<a href="https://kevin-grillot.fr/mes-cerfications" class="text-xs font-bold text-blue-500 hover:text-white uppercase tracking-widest transition-colors flex items-center gap-2 group justify-center">
Toutes les certifs <i class="fas fa-long-arrow-alt-right transform group-hover:translate-x-1 transition-transform"></i>
</a>
</div>
</div>
<!-- Copyright & Mentions -->
<div class="border-t border-white/5 pt-8 flex flex-col md:flex-row justify-between items-center text-xs text-gray-600 font-medium">
<p>
© <span id="current-year"></span> <span class="text-white font-bold">KEVIN GRILLOT</span>. Tous droits réservés.
</p>
<div class="mt-4 md:mt-0 flex flex-wrap justify-center gap-6">
<span class="hidden md:inline text-white/10">|</span>
<a href="https://kevin-grillot.fr/mentions-legales" class="hover:text-blue-500 transition-colors">Mentions Légales</a>
<a href="https://kevin-grillot.fr/cv-foot/" class="hover:text-blue-500 transition-colors">CV Foot</a>
<span class="text-gray-700">Dev with 💙 by Me</span>
</div>
</div>
</div>
</footer>
<script type="rocketlazyloadscript">
// Mise à jour auto de l'année
document.getElementById('current-year').textContent = new Date().getFullYear();
</script>
<!-- FIN DU FOOTER PERSONNALISÉ -->
<!-- BOUTON WHATSAPP FLOTTANT -->
<style>
.whatsapp-float {
position: fixed;
bottom: 28px;
right: 28px;
z-index: 9999;
display: flex;
align-items: center;
gap: 10px;
background: #25D366;
color: white;
padding: 12px 20px 12px 16px;
border-radius: 50px;
font-weight: 700;
font-size: 14px;
text-decoration: none;
box-shadow: 0 4px 20px rgba(37, 211, 102, 0.45);
transition: all 0.3s ease;
font-family: 'Inter', sans-serif;
}
.whatsapp-float:hover {
background: #1ebe5d;
transform: translateY(-3px);
box-shadow: 0 8px 30px rgba(37, 211, 102, 0.55);
color: white;
}
.whatsapp-float i { font-size: 22px; }
@media (max-width: 640px) {
.whatsapp-float span { display: none; }
.whatsapp-float { padding: 14px; border-radius: 50%; }
}
</style>
<a href="https://wa.me/33667570018?text=Bonjour%20Kevin%2C%20je%20souhaite%20un%20devis%20pour%20mon%20projet."
class="whatsapp-float" target="_blank" rel="noopener"
title="Contacter Kevin Grillot sur WhatsApp">
<i class="fab fa-whatsapp"></i>
<span>Devis rapide</span>
</a>
<!-- FIN BOUTON WHATSAPP FLOTTANT -->
<script type="speculationrules">
{"prefetch":[{"source":"document","where":{"and":[{"href_matches":"\/*"},{"not":{"href_matches":["\/wp-*.php","\/wp-admin\/*","\/wp-content\/uploads\/*","\/wp-content\/*","\/wp-content\/plugins\/*","\/wp-content\/themes\/kevin-grillot\/*","\/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]}
</script>
<script id="rocket-browser-checker-js-after">
"use strict";var _createClass=function(){function defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,"value"in descriptor&&(descriptor.writable=!0),Object.defineProperty(target,descriptor.key,descriptor)}}return function(Constructor,protoProps,staticProps){return protoProps&&defineProperties(Constructor.prototype,protoProps),staticProps&&defineProperties(Constructor,staticProps),Constructor}}();function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor))throw new TypeError("Cannot call a class as a function")}var RocketBrowserCompatibilityChecker=function(){function RocketBrowserCompatibilityChecker(options){_classCallCheck(this,RocketBrowserCompatibilityChecker),this.passiveSupported=!1,this._checkPassiveOption(this),this.options=!!this.passiveSupported&&options}return _createClass(RocketBrowserCompatibilityChecker,[{key:"_checkPassiveOption",value:function(self){try{var options={get passive(){return!(self.passiveSupported=!0)}};window.addEventListener("test",null,options),window.removeEventListener("test",null,options)}catch(err){self.passiveSupported=!1}}},{key:"initRequestIdleCallback",value:function(){!1 in window&&(window.requestIdleCallback=function(cb){var start=Date.now();return setTimeout(function(){cb({didTimeout:!1,timeRemaining:function(){return Math.max(0,50-(Date.now()-start))}})},1)}),!1 in window&&(window.cancelIdleCallback=function(id){return clearTimeout(id)})}},{key:"isDataSaverModeOn",value:function(){return"connection"in navigator&&!0===navigator.connection.saveData}},{key:"supportsLinkPrefetch",value:function(){var elem=document.createElement("link");return elem.relList&&elem.relList.supports&&elem.relList.supports("prefetch")&&window.IntersectionObserver&&"isIntersecting"in IntersectionObserverEntry.prototype}},{key:"isSlowConnection",value:function(){return"connection"in navigator&&"effectiveType"in navigator.connection&&("2g"===navigator.connection.effectiveType||"slow-2g"===navigator.connection.effectiveType)}}]),RocketBrowserCompatibilityChecker}();
</script>
<script id="rocket-preload-links-js-extra">
var RocketPreloadLinksConfig = {"excludeUris":"\/(?:.+\/)?feed(?:\/(?:.+\/?)?)?$|\/(?:.+\/)?embed\/|\/(index\\.php\/)?wp\\-json(\/.*|$)|\/logkevgriin\/|\/wp-admin\/|\/logout\/|\/logkevgriin\/|\/refer\/|\/go\/|\/recommend\/|\/recommends\/","usesTrailingSlash":"1","imageExt":"jpg|jpeg|gif|png|tiff|bmp|webp|avif|pdf|doc|docx|xls|xlsx|php","fileExt":"jpg|jpeg|gif|png|tiff|bmp|webp|avif|pdf|doc|docx|xls|xlsx|php|html|htm","siteUrl":"https:\/\/kevin-grillot.fr","onHoverDelay":"100","rateThrottle":"3"};
</script>
<script id="rocket-preload-links-js-after">
(function() {
"use strict";var r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},e=function(){function i(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(e,t,n){return t&&i(e.prototype,t),n&&i(e,n),e}}();function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var t=function(){function n(e,t){i(this,n),this.browser=e,this.config=t,this.options=this.browser.options,this.prefetched=new Set,this.eventTime=null,this.threshold=1111,this.numOnHover=0}return e(n,[{key:"init",value:function(){!this.browser.supportsLinkPrefetch()||this.browser.isDataSaverModeOn()||this.browser.isSlowConnection()||(this.regex={excludeUris:RegExp(this.config.excludeUris,"i"),images:RegExp(".("+this.config.imageExt+")$","i"),fileExt:RegExp(".("+this.config.fileExt+")$","i")},this._initListeners(this))}},{key:"_initListeners",value:function(e){-1<this.config.onHoverDelay&&document.addEventListener("mouseover",e.listener.bind(e),e.listenerOptions),document.addEventListener("mousedown",e.listener.bind(e),e.listenerOptions),document.addEventListener("touchstart",e.listener.bind(e),e.listenerOptions)}},{key:"listener",value:function(e){var t=e.target.closest("a"),n=this._prepareUrl(t);if(null!==n)switch(e.type){case"mousedown":case"touchstart":this._addPrefetchLink(n);break;case"mouseover":this._earlyPrefetch(t,n,"mouseout")}}},{key:"_earlyPrefetch",value:function(t,e,n){var i=this,r=setTimeout(function(){if(r=null,0===i.numOnHover)setTimeout(function(){return i.numOnHover=0},1e3);else if(i.numOnHover>i.config.rateThrottle)return;i.numOnHover++,i._addPrefetchLink(e)},this.config.onHoverDelay);t.addEventListener(n,function e(){t.removeEventListener(n,e,{passive:!0}),null!==r&&(clearTimeout(r),r=null)},{passive:!0})}},{key:"_addPrefetchLink",value:function(i){return this.prefetched.add(i.href),new Promise(function(e,t){var n=document.createElement("link");n.rel="prefetch",n.href=i.href,n.onload=e,n.onerror=t,document.head.appendChild(n)}).catch(function(){})}},{key:"_prepareUrl",value:function(e){if(null===e||"object"!==(void 0===e?"undefined":r(e))||!1 in e||-1===["http:","https:"].indexOf(e.protocol))return null;var t=e.href.substring(0,this.config.siteUrl.length),n=this._getPathname(e.href,t),i={original:e.href,protocol:e.protocol,origin:t,pathname:n,href:t+n};return this._isLinkOk(i)?i:null}},{key:"_getPathname",value:function(e,t){var n=t?e.substring(this.config.siteUrl.length):e;return n.startsWith("/")||(n="/"+n),this._shouldAddTrailingSlash(n)?n+"/":n}},{key:"_shouldAddTrailingSlash",value:function(e){return this.config.usesTrailingSlash&&!e.endsWith("/")&&!this.regex.fileExt.test(e)}},{key:"_isLinkOk",value:function(e){return null!==e&&"object"===(void 0===e?"undefined":r(e))&&(!this.prefetched.has(e.href)&&e.origin===this.config.siteUrl&&-1===e.href.indexOf("?")&&-1===e.href.indexOf("#")&&!this.regex.excludeUris.test(e.href)&&!this.regex.images.test(e.href))}}],[{key:"run",value:function(){"undefined"!=typeof RocketPreloadLinksConfig&&new n(new RocketBrowserCompatibilityChecker({capture:!0,passive:!0}),RocketPreloadLinksConfig).init()}}]),n}();t.run();
}());
</script>
<script type="rocketlazyloadscript">
(function() {
var expirationDate = new Date();
expirationDate.setTime( expirationDate.getTime() + 31536000 * 1000 );
document.cookie = "pll_language=de; expires=" + expirationDate.toUTCString() + "; path=/; secure; SameSite=Lax";
}());
</script>
<!-- Exit-Intent Popup -->
<div id="kg-exit-popup" class="kg-exit-overlay" style="display:none;">
<div class="kg-exit-backdrop"></div>
<div class="kg-exit-card">
<button class="kg-exit-close" id="kg-exit-close" aria-label="Fermer">×</button>
<div class="kg-exit-glow"></div>
<div class="kg-exit-content" id="kg-exit-content">
<div class="kg-exit-badge"><i class="fas fa-gift"></i> Avant de partir</div>
<h2 class="kg-exit-title">Attendez ! Votre audit SEO gratuit</h2>
<p class="kg-exit-sub">Avant de partir, téléchargez notre checklist SEO locale — 15 points essentiels pour votre visibilité.</p>
<form class="kg-exit-form" id="kg-exit-form" data-ajax="https://kevin-grillot.fr/wp-admin/admin-ajax.php" data-nonce="619cd3c2a1">
<input type="text" name="kg_lm_prenom" placeholder="Votre prénom" required autocomplete="given-name" class="kg-exit-input">
<input type="email" name="kg_lm_email" placeholder="Votre email" required autocomplete="email" class="kg-exit-input">
<div style="position:absolute;left:-9999px;" aria-hidden="true">
<input type="text" name="kg_lm_website" tabindex="-1" autocomplete="off">
</div>
<button type="submit" class="kg-exit-btn">
<i class="fas fa-download"></i> Télécharger gratuitement
</button>
<p class="kg-exit-notice"><i class="fas fa-lock"></i> Aucun spam. Données confidentielles.</p>
</form>
<div class="kg-exit-success" id="kg-exit-success" style="display:none;">
<div style="font-size:2.5rem;color:#22c55e;margin-bottom:1rem;"><i class="fas fa-check-circle"></i></div>
<h3 style="color:#fff;font-size:1.2rem;font-weight:700;margin:0 0 0.5rem;">Merci ! Votre checklist est prête.</h3>
<a href="" class="kg-exit-download" id="kg-exit-download" target="_blank" rel="noopener">
<i class="fas fa-file-download"></i> Télécharger la Checklist
</a>
</div>
</div>
</div>
</div>
<style>
.kg-exit-overlay {
position: fixed; inset: 0; z-index: 99999;
display: flex; align-items: center; justify-content: center;
opacity: 0; transition: opacity 0.3s ease;
}
.kg-exit-overlay.visible { opacity: 1; }
.kg-exit-backdrop {
position: absolute; inset: 0;
background: rgba(0,0,0,0.75); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.kg-exit-card {
position: relative; z-index: 1; max-width: 520px; width: 90%;
background: rgba(12,12,24,0.95); border: 1px solid rgba(255,255,255,0.08);
border-radius: 1.25rem; padding: 2.5rem 2rem; overflow: hidden;
box-shadow: 0 24px 64px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.05);
transform: translateY(20px) scale(0.95); transition: transform 0.3s ease;
}
.kg-exit-overlay.visible .kg-exit-card { transform: translateY(0) scale(1); }
.kg-exit-close {
position: absolute; top: 1rem; right: 1rem; z-index: 2;
background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
color: #9ca3af; font-size: 1.5rem; width: 36px; height: 36px;
border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center;
transition: background 0.2s, color 0.2s; line-height: 1;
}
.kg-exit-close:hover { background: rgba(255,255,255,0.1); color: #fff; }
.kg-exit-glow {
position: absolute; top: -50px; left: 50%; transform: translateX(-50%);
width: 200px; height: 200px; background: #2563eb; opacity: 0.1;
border-radius: 50%; filter: blur(80px); pointer-events: none;
}
.kg-exit-content { position: relative; z-index: 1; text-align: center; }
.kg-exit-badge {
display: inline-flex; align-items: center; gap: 0.4rem;
background: rgba(37,99,235,0.1); color: #2563eb;
font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
padding: 0.4rem 1rem; border-radius: 999px; margin-bottom: 1rem;
border: 1px solid rgba(37,99,235,0.2);
}
.kg-exit-title { color: #fff; font-size: 1.5rem; font-weight: 800; line-height: 1.2; margin: 0 0 0.75rem; font-family: 'Outfit', sans-serif; }
.kg-exit-sub { color: #9ca3af; font-size: 0.9rem; margin: 0 0 1.5rem; line-height: 1.5; }
.kg-exit-form { display: flex; flex-direction: column; gap: 0.75rem; position: relative; }
.kg-exit-input {
padding: 0.85rem 1rem; border-radius: 0.6rem;
border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.04);
color: #e5e7eb; font-size: 0.9rem; outline: none; transition: border-color 0.2s;
width: 100%; box-sizing: border-box;
}
.kg-exit-input:focus { border-color: #2563eb; }
.kg-exit-input::placeholder { color: #6b7280; }
.kg-exit-btn {
padding: 0.9rem 1.5rem; border: none; border-radius: 0.6rem;
background: #2563eb; color: #fff; font-size: 0.95rem; font-weight: 700;
cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
transition: opacity 0.2s, transform 0.2s; width: 100%;
}
.kg-exit-btn:hover { opacity: 0.9; transform: translateY(-1px); }
.kg-exit-btn:disabled { opacity: 0.5; cursor: wait; }
.kg-exit-notice { font-size: 0.7rem; color: #4b5563; text-align: center; margin: 0; }
.kg-exit-download {
display: inline-flex; align-items: center; gap: 0.5rem;
padding: 0.85rem 2rem; border-radius: 0.6rem; margin-top: 1rem;
background: #2563eb; color: #fff; font-weight: 700; font-size: 0.95rem;
text-decoration: none; transition: opacity 0.2s;
}
.kg-exit-download:hover { opacity: 0.9; color: #fff; }
@media(max-width:480px) {
.kg-exit-card { padding: 2rem 1.25rem; }
.kg-exit-title { font-size: 1.25rem; }
}
</style>
<script type="rocketlazyloadscript">
(function(){
var popup = document.getElementById('kg-exit-popup');
if(!popup) return;
var shown = false;
function showPopup(){
if(shown) return;
if(sessionStorage.getItem('kg_exit_shown')) return;
if(sessionStorage.getItem('kg_lm_filled')) return;
if(window.location.pathname.indexOf('me-contacter') !== -1) return;
shown = true;
sessionStorage.setItem('kg_exit_shown', '1');
popup.style.display = 'flex';
requestAnimationFrame(function(){
requestAnimationFrame(function(){
popup.classList.add('visible');
});
});
}
function hidePopup(){
popup.classList.remove('visible');
setTimeout(function(){ popup.style.display = 'none'; }, 300);
}
// Desktop only: mouseleave
if(window.innerWidth > 768){
document.addEventListener('mouseleave', function(e){
if(e.clientY < 5) showPopup();
});
}
document.getElementById('kg-exit-close').addEventListener('click', hidePopup);
popup.querySelector('.kg-exit-backdrop').addEventListener('click', hidePopup);
document.addEventListener('keydown', function(e){
if(e.key === 'Escape' && popup.classList.contains('visible')) hidePopup();
});
// Form submit
var form = document.getElementById('kg-exit-form');
form.addEventListener('submit', function(e){
e.preventDefault();
var btn = form.querySelector('.kg-exit-btn');
btn.disabled = true;
btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Envoi...';
var fd = new FormData(form);
fd.append('action', 'kg_lead_magnet_submit');
fd.append('nonce', form.dataset.nonce);
fetch(form.dataset.ajax, { method: 'POST', body: fd })
.then(function(r){ return r.json(); })
.then(function(data){
if(data.success){
form.style.display = 'none';
var s = document.getElementById('kg-exit-success');
s.style.display = 'block';
document.getElementById('kg-exit-download').href = data.data.download_url;
sessionStorage.setItem('kg_lm_filled', '1');
} else {
btn.disabled = false;
btn.innerHTML = '<i class="fas fa-download"></i> T\u00e9l\u00e9charger gratuitement';
alert(data.data || 'Erreur.');
}
})
.catch(function(){
btn.disabled = false;
btn.innerHTML = '<i class="fas fa-download"></i> T\u00e9l\u00e9charger gratuitement';
alert('Erreur reseau.');
});
});
})();
</script>
<script>window.lazyLoadOptions=[{elements_selector:"img[data-lazy-src],.rocket-lazyload,iframe[data-lazy-src]",data_src:"lazy-src",data_srcset:"lazy-srcset",data_sizes:"lazy-sizes",class_loading:"lazyloading",class_loaded:"lazyloaded",threshold:300,callback_loaded:function(element){if(element.tagName==="IFRAME"&&element.dataset.rocketLazyload=="fitvidscompatible"){if(element.classList.contains("lazyloaded")){if(typeof window.jQuery!="undefined"){if(jQuery.fn.fitVids){jQuery(element).parent().fitVids()}}}}}},{elements_selector:".rocket-lazyload",data_src:"lazy-src",data_srcset:"lazy-srcset",data_sizes:"lazy-sizes",class_loading:"lazyloading",class_loaded:"lazyloaded",threshold:300,}];window.addEventListener('LazyLoad::Initialized',function(e){var lazyLoadInstance=e.detail.instance;if(window.MutationObserver){var observer=new MutationObserver(function(mutations){var image_count=0;var iframe_count=0;var rocketlazy_count=0;mutations.forEach(function(mutation){for(var i=0;i<mutation.addedNodes.length;i++){if(typeof mutation.addedNodes[i].getElementsByTagName!=='function'){continue}
if(typeof mutation.addedNodes[i].getElementsByClassName!=='function'){continue}
images=mutation.addedNodes[i].getElementsByTagName('img');is_image=mutation.addedNodes[i].tagName=="IMG";iframes=mutation.addedNodes[i].getElementsByTagName('iframe');is_iframe=mutation.addedNodes[i].tagName=="IFRAME";rocket_lazy=mutation.addedNodes[i].getElementsByClassName('rocket-lazyload');image_count+=images.length;iframe_count+=iframes.length;rocketlazy_count+=rocket_lazy.length;if(is_image){image_count+=1}
if(is_iframe){iframe_count+=1}}});if(image_count>0||iframe_count>0||rocketlazy_count>0){lazyLoadInstance.update()}});var b=document.getElementsByTagName("body")[0];var config={childList:!0,subtree:!0};observer.observe(b,config)}},!1)</script><script data-no-minify="1" async src="https://kevin-grillot.fr/wp-content/plugins/wp-rocket/assets/js/lazyload/17.5/lazyload.min.js"></script><script>function lazyLoadThumb(e){var t='<img data-lazy-src="https://i.ytimg.com/vi/ID/hqdefault.jpg" alt="" width="480" height="360"><noscript><img src="https://i.ytimg.com/vi/ID/hqdefault.jpg" alt="" width="480" height="360"></noscript>',a='<button class="play" aria-label="play Youtube video"></button>';return t.replace("ID",e)+a}function lazyLoadYoutubeIframe(){var e=document.createElement("iframe"),t="ID?autoplay=1";t+=0===this.parentNode.dataset.query.length?'':'&'+this.parentNode.dataset.query;e.setAttribute("src",t.replace("ID",this.parentNode.dataset.src)),e.setAttribute("frameborder","0"),e.setAttribute("allowfullscreen","1"),e.setAttribute("allow", "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"),this.parentNode.parentNode.replaceChild(e,this.parentNode)}document.addEventListener("DOMContentLoaded",function(){var e,t,p,a=document.getElementsByClassName("rll-youtube-player");for(t=0;t<a.length;t++)e=document.createElement("div"),e.setAttribute("data-id",a[t].dataset.id),e.setAttribute("data-query", a[t].dataset.query),e.setAttribute("data-src", a[t].dataset.src),e.innerHTML=lazyLoadThumb(a[t].dataset.id),a[t].appendChild(e),p=e.querySelector('.play'),p.onclick=lazyLoadYoutubeIframe});</script>
</body>
</html>
<!-- This website is like a Rocket, isn't it? Performance optimized by WP Rocket. Learn more: https://wp-rocket.me --> 
