In the vast digital ocean that is the Web in 2026, visibility is the only course that matters. If content is king, then the title tag is undoubtedly its crown. Often neglected or hastily written, it is nevertheless the first point of contact between your site and the user, acting as a beacon in the storm of search results. SEO optimization of this HTML title isn’t just about satisfying search engine robots; it’s crucial for capturing human attention and triggering the decisive click. At a time when artificial intelligence is reshaping browsing habits, understanding the mechanics of a high-performing title is no longer an option, but an absolute necessity for anyone who wants to keep their site afloat in the SERPs (search engine results pages).
In short: the fundamentals for a high-performing title The title tag is the most influential on-page ranking factor after the content itself. The ideal length is now measured in pixels, generally equivalent to 50-60 characters. Search intent should take precedence over simply placing keywords. The uniqueness of each title is imperative to avoid internal cannibalization. The title must work in synergy with the meta description to maximize the click-through rate (CTR).
Strategic keywords should be placed at the beginning of the keyword chain (front-loading). Understanding the mechanics of the title tag and its direct impact To navigate the waters of SEO effectively, it is essential to understand what a title tag technically is. Located in the
section The title, part of your page’s HTML code, is invisible on the page itself when viewed, but it’s omnipresent elsewhere. It’s what appears in your browser tab, and most importantly, it’s the main clickable blue link in Google search results. Think of it like your shop sign: if it’s unlit, dirty, or incomprehensible, no one will walk through the door, even if the interior is beautiful. The impact on SEO is twofold. First, it allows algorithms to instantly understand the page’s topic and index it correctly. Second, it plays a major psychological role for the user. A well-crafted title acts as a promise of value. If you fail at this stage, all the work done on your content structure, particularly with Hn tags and their hierarchy, will remain invisible to the general public. It’s a performance lever that requires few technical resources but great writing skill.
The evolution of the Google algorithm and semantic intelligence
In 2026, theGoogle algorithm has gone beyond simple lexical analysis. Simply stringing terms together is no longer enough to be relevant. Search engines now evaluate the overall coherence between the title, the page content, and, above all, the user’s intent. If your title tag promises a precise answer but the content is vague, the penalty is immediate in terms of bounce rate, which will negatively affect your long-term ranking. Optimization must therefore be designed with humans in mind before machines, while still respecting the latter’s technical criteria.
→ À lire aussi
Is netlinking obsolete? It all depends on the context.
Organic referencing (SEO) · 26 Jan 2026
https://www.youtube.com/watch?v=zoIPIge385w Keyword strategy: placement and relevance
Choosing the right words for your title is the crucial stage where much of the battle is fought. It’s not about guessing, but about analysis. Keyword integration should follow a “front-loading” strategy. In practical terms, this means the most important terms should appear as early as possible in the title tag, ideally at the very beginning. Search engine crawlers give more weight to the first words, and users, who scan results in an “F” shape, see these terms first. Thorough research is essential to identify not only search volume but also feasibility. Targeting an ultra-generic keyword is often a waste of time against established giants. The winning strategy often lies in the long tail: more specific, less competitive phrases that convert better because they address a precise search intent. For example, instead of “Sports shoes,” opt for “Best running shoes for marathons 2026.” Avoid over-optimization and keyword stuffing However, be careful not to fall into the trap of “keyword stuffing.” A string of terms with no grammatical connection (“Plumber Paris, Emergency Plumber, Cheap Leak Repair”) is not only unpleasant to read, but it is now interpreted as spam by search engines. Fluency and natural syntax are rewarded. Your title should form a coherent sentence or a clear value proposition.
Furthermore, uniqueness is crucial. Each page of your site must have a unique title. If several pages share the same title, Google won’t know which one to prioritize, thus diluting your ranking potential. This is a common technical issue that can sometimes be resolved or managed through proper use of the canonical tag. to indicate the main page in case of similar content, but the golden rule remains: one page, one purpose, one unique title. Title length: a matter of pixels and visibility
The
title length
is a strict technical constraint imposed by screen display space. While 60 characters is often mentioned, the reality is more nuanced: Google allocates a fixed width in pixels (approximately 600 pixels on a computer). Since not all letters have the same width (an “m” takes up more space than an “i” or an “l”), the character count remains an estimate. If your title exceeds this limit, it will be truncated and replaced with ellipses (…). This can be disastrous if the crucial information or the call to action was at the end of the sentence. Conversely, a title that is too short (e.g., “Home”) is a missed opportunity to add context and relevant keywords. You must aim for the optimal space where the message is complete without being cut off.
→ À lire aussi
What is a topic cluster and how can you use it to improve your SEO?
Organic referencing (SEO) · 16 Jan 2026
SEO Tool 2026
Title Tag Simulator Enter your title to see if it meets the 600-pixel limit and preview it in Google search results.
Your
tag</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">
0 characters
</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">
Approximate limit (600px)
</h2>
<p class="text-slate-500 text-sm md:text-base max-w-2xl mx-auto">
0px <strong>0 / 600px</strong> Desktop
</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>Mobile</span>
<span id="char-count" class="text-slate-400 text-xs">G</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="ExampleSite.fr"></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">https://www.examplesite.fr › blog › seo-2026</span>
<span id="pixel-count" class="font-bold text-slate-600">Your title will appear here…</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">
This is a fictitious description to illustrate how your title will appear in SERPs. The title above is the most important element for your CTR.
</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">
</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">G</div>
<div class="flex flex-col leading-tight">
<span class="text-sm text-slate-800 font-medium">ExampleSite.fr</span>
<cite class="text-xs text-slate-500 not-italic">https://www.examplesite.fr › blog</cite>
</div>
</div>
<h3 class="text-xl google-blue hover:underline cursor-pointer mb-1 leading-snug truncate-title" id="desktop-preview-title">
Your title will appear here…
</h3>
<p class="text-sm google-grey leading-snug">
On mobile, space is more limited. <a href="https://kevin-grillot.fr/entrepreneuriat/automa-vs-make-le-duel-des-titans-de-lautomatisation/">Make</a> sure your main keywords are at the beginning.
</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">Optimization for different devices</div>
<div class="flex flex-col leading-tight">
<span class="text-sm text-slate-800 font-medium">It’s important to remember that display varies depending on the device. On mobile, the available space may be slightly different, and the title often appears on multiple lines depending on the OS settings. However, the 60-character rule remains a reliable safeguard to ensure your message is displayed correctly on most devices. Always check the visual rendering of your strategic titles.</span>
<span class="text-xs text-slate-500 truncate">Click-Through Rate (CTR): The Art of Driving Action</span>
</div>
</div>
<h3 class="text-lg mobile-blue font-medium mb-1 leading-snug truncate-title" id="mobile-preview-title">
Being visible on the first page is a victory, but getting clicks is the ultimate achievement. The click-through rate (CTR) is a key performance indicator. A technically perfect but boring title won’t generate traffic. This is where the copywriter needs to use psychology. The use of numbers (e.g., “7 methods to…”, “Top 10 of…”), parentheses, or brackets can visually draw the eye in a list of uniform text links. Action verbs and promises of immediate benefits also work very well. Users are always asking themselves, “What’s in it for me?” Your title should answer this question in under a second. For example, choose “Learn Guitar: A Quick Guide” over “Guitar Lessons.” Emotional appeal or a sense of urgency (without resorting to misleading clickbait) are powerful tools for improving your click-through rate (CTR).
</h3>
<p class="text-sm text-slate-600 leading-snug">
</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">Consistency with the Meta Description</h3>
<p>The title doesn’t work alone. It forms an inseparable duo with the meta description, that short paragraph of text located just below it in the search results. If the title is the hook, the description is the sales pitch. To maximize your chances, it’s essential to optimize the meta description in conjunction with the title. It should confirm the promise of the title and entice users to learn more, while also incorporating semantic variations of your keywords.</p>
<a href="https://kevin-grillot.fr/en/organic-referencing-seo-en/analysis-of-2-5-million-internal-links-what-seo-strategies-really-reveal/" class="kg-encart-article" aria-label="Lire aussi : Analysis of 2.5 million internal links: what SEO strategies really reveal">
<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="Analysis of 2.5 million internal links: what SEO strategies really reveal" class="kg-encart-img" data-lazy-src="https://kevin-grillot.fr/wp-content/uploads/2026/02/seo-16.jpg"><noscript><img width="1200" height="627" src="https://kevin-grillot.fr/wp-content/uploads/2026/02/seo-16.jpg" alt="Analysis of 2.5 million internal links: what SEO strategies really reveal" class="kg-encart-img"></noscript>
<div class="kg-encart-text">
<span class="kg-encart-label">→ À lire aussi</span>
<span class="kg-encart-title">Analysis of 2.5 million internal links: what SEO strategies really reveal</span>
<span class="kg-encart-meta">Organic referencing (SEO) · 05 Feb 2026</span>
</div>
</a><h2 class="wp-block-heading"></h2>
<p>Competitive Analysis and Differentiation <strong>Before finalizing your</strong> Title tag</p>
<p></p>
<h3 class="wp-block-heading">Observe the horizon. What are your competitors doing for the target keyword? If the top ten results all display similar titles, imitating this structure will make you invisible in the crowd. This is where you need to look for a different angle of attack, the “weak point” in the opponent’s net.</h3>
<p><a href="https://kevin-grillot.fr/en/organic-referencing-seo-en/how-to-optimize-the-meta-description-tag-to-improve-seo-in-2026/">Title Type</a> Concrete Example</p>
<a href="https://kevin-grillot.fr/en/organic-referencing-seo-en/the-ins-and-outs-of-seo-indexing-login-pages-structured-data-and-essential-optimizations/" class="kg-encart-article" aria-label="Lire aussi : The ins and outs of SEO: indexing, login pages, structured data, and essential optimizations">
<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="The ins and outs of SEO: indexing, login pages, structured data, and essential optimizations" class="kg-encart-img" data-lazy-src="https://kevin-grillot.fr/wp-content/uploads/2025/07/seo-102-300x157.jpg"><noscript><img width="300" height="157" src="https://kevin-grillot.fr/wp-content/uploads/2025/07/seo-102-300x157.jpg" alt="The ins and outs of SEO: indexing, login pages, structured data, and essential optimizations" class="kg-encart-img"></noscript>
<div class="kg-encart-text">
<span class="kg-encart-label">→ À lire aussi</span>
<span class="kg-encart-title">The ins and outs of SEO: indexing, login pages, structured data, and essential optimizations</span>
<span class="kg-encart-meta">Organic referencing (SEO) · 25 Jul 2025</span>
</div>
</a><h2 class="wp-block-heading">Competitive Advantage</h2>
<p>Potential Risk <strong>Simple Description</strong>Men’s Hiking Shoes</p>
<figure class="wp-block-table"><table>
<thead>
<tr>
<th>Immediate Clarity</th>
<th>Lack of Depth, Low Click-Through Rate</th>
<th>Promise/Benefit</th>
<th>Hike Pain-Free: Our Tested Shoes</th>
</tr>
</thead>
<tbody>
<tr>
<td>Strong Emotional Appeal</td>
<td>Must be Supported by Content (Risk of Disappointment)</td>
<td>Question/Problem</td>
<td>Which Hiking Shoes Should You Choose in 2026?</td>
</tr>
<tr>
<td></td>
<td>Targets information intent</td>
<td>Less effective for immediate (transactional) purchase</td>
<td>List / Figures</td>
</tr>
<tr>
<td>Top 5 lightweight walking shoes</td>
<td>Readability, popular format</td>
<td>Perceived as superficial content if poorly executed</td>
<td>The goal is to stand out visually and semantically. If everyone is offering a “Complete Guide,” offer a “Quick Method” or a “Case Study.” This differentiation, combined with good use of structural tags like Hn tags within your content, strengthens your page’s authority on a specific topic.</td>
</tr>
<tr>
<td>User Experience (UX) and the Content Promise</td>
<td>The user experience begins well before arriving on the site. It starts as soon as the title is read in the SERPs. A misleading title (clickbait) that promises an incredible revelation only to lead to empty content is the worst possible strategy in 2026. Users have become wary and demanding. Google measures “pogo-sticking” (the rapid back-and-forth between the results page and your site) as a poor quality signal.</td>
<td>Your title should accurately reflect the content. If you’re announcing a promotion, it should be immediately visible. If you’re announcing a tutorial, the video or step-by-step instructions should be the focus of the page. This intellectual honesty builds reader loyalty and sends positive signals to search engines, thus solidifying your rankings.</td>
<td>Brand Management in the Title</td>
</tr>
</tbody>
</table></figure>
<p>A recurring question concerns including the brand name in the title tag. As a general rule, it’s advisable to place the brand name at the end of the title, separated by a hyphen (-) or a vertical bar (|). This allows you to capitalize on your brand recognition without encroaching on the valuable space reserved for keywords at the beginning of the line. However, for homepages or “About” pages, the brand can legitimately take first place. <a href="https://kevin-grillot.fr/en/organic-referencing-seo-en/how-to-properly-use-hn-tags-to-optimize-your-seo-in-2026/">Technical Mistakes to Absolutely Avoid</a> Even the most experienced sailors can make mistakes. In SEO, certain technical errors in title tags can be fatal. The first is the complete absence of a title tag, or an empty tag. Google will then automatically generate a title by pulling from your content, but the result is rarely optimal. Another common mistake is using default titles like “New Page” or “No Title.”</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>You also need to ensure your CMS (WordPress, Shopify, etc.) is properly configured. Sometimes, automatic settings duplicate the site name, creating lengthy titles like “Article Title – Site Name – Site Name.” This dilutes relevance and wastes valuable pixels. Finally, make sure you manage technical content duplication issues by using the canonical tag correctly to prevent URL variations (with sorting parameters, for example) from being considered separate pages with the same title.<strong></strong> https://www.youtube.com/watch?v=P9CfpLsqU0U</p>
<p>Anticipating the Future: Title Tags and AI</p>
<h3 class="wp-block-heading">The future of SEO and the meta title tag is closely linked to the evolution of generative artificial intelligence. Increasingly, Google and other search engines are able to dynamically rewrite your title in the results if they determine that your original suggestion doesn’t adequately match the user’s specific query. This shouldn’t discourage you from writing perfect titles; quite the opposite. Providing a clear, concise, and optimized title remains the best way to guide AI to respect your message. Furthermore, a good overall semantic structure and an optimized meta description provide the necessary context for your title to remain the primary anchor of your strategy. In 2026, optimization isn’t a battle against the machine, but a collaboration where the clarity of the signal sent is paramount.</h3>
<p>What is the ideal length for a title tag in 2026? The ideal length is between 50 and 60 characters, or about 600 pixels wide. Beyond that, Google may truncate your title with ellipses, which can negatively impact readability and click-through rates.</p>
<a href="https://kevin-grillot.fr/en/organic-referencing-seo-en/agentic-search-when-seo-loses-its-power-as-a-traffic-engine/" class="kg-encart-article" aria-label="Lire aussi : Agentic Search: When SEO Loses Its Power as a Traffic Engine">
<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="Agentic Search: When SEO Loses Its Power as a Traffic Engine" class="kg-encart-img" data-lazy-src="https://kevin-grillot.fr/wp-content/uploads/2026/01/agentic-search.jpg"><noscript><img width="1200" height="627" src="https://kevin-grillot.fr/wp-content/uploads/2026/01/agentic-search.jpg" alt="Agentic Search: When SEO Loses Its Power as a Traffic Engine" class="kg-encart-img"></noscript>
<div class="kg-encart-text">
<span class="kg-encart-label">→ À lire aussi</span>
<span class="kg-encart-title">Agentic Search: When SEO Loses Its Power as a Traffic Engine</span>
<span class="kg-encart-meta">Organic referencing (SEO) · 22 Jan 2026</span>
</div>
</a><h2 class="wp-block-heading">Why does Google sometimes change my title in the results?</h2>
<p>Google may rewrite your title if it deems the original insufficiently relevant to the user’s search intent, if it’s stuffed with keywords, or if it’s too long. To avoid this, ensure your title accurately and concisely describes the page’s content.</p>
<p>Should I include my company name in every title tag? <a href="https://kevin-grillot.fr/en/organic-referencing-seo-en/what-is-the-purpose-of-a-canonical-tag-and-how-can-it-be-used-effectively-in-2026/">Yes, it’s good branding practice, but it’s preferable to place it at the end of the title (e.g., ‘Main Keyword – Brand Name’). This prioritizes important search terms at the beginning of the tag.</a>What is the difference between the title tag and the H1 tag?</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">
The title tag appears in search results and the browser tab; it’s the title for ‘external’ SEO. The H1 tag is the editorial title visible directly on the page to the reader. Although they can be similar, they don’t necessarily have to be identical.
</div></figure>
<a href="https://kevin-grillot.fr/en/organic-referencing-seo-en/awi-at-the-semy-awards-seo-asserts-itself-as-a-real-lever-for-growth-2/" class="kg-encart-article" aria-label="Lire aussi : AWi at the Semy Awards: SEO asserts itself as a real lever for growth">
<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="AWi at the Semy Awards: SEO asserts itself as a real lever for growth" class="kg-encart-img" data-lazy-src="https://kevin-grillot.fr/wp-content/uploads/2025/05/seo-66-300x157.jpg"><noscript><img width="300" height="157" src="https://kevin-grillot.fr/wp-content/uploads/2025/05/seo-66-300x157.jpg" alt="AWi at the Semy Awards: SEO asserts itself as a real lever for growth" class="kg-encart-img"></noscript>
<div class="kg-encart-text">
<span class="kg-encart-label">→ À lire aussi</span>
<span class="kg-encart-title">AWi at the Semy Awards: SEO asserts itself as a real lever for growth</span>
<span class="kg-encart-meta">Organic referencing (SEO) · 27 May 2025</span>
</div>
</a><h2 class="wp-block-heading"></h2>
<p> <strong></strong> </p>
<p> <a href="https://kevin-grillot.fr/en/organic-referencing-seo-en/how-to-optimize-the-meta-description-tag-to-improve-seo-in-2026/"></a> </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/en/tag/optimize-title-tag-en/" class="tag-pill">#optimize title tag</a>
<a href="https://kevin-grillot.fr/en/tag/seo-title-tag-en/" class="tag-pill">#seo title tag</a>
<a href="https://kevin-grillot.fr/en/tag/web-page-title-en/" class="tag-pill">#web page title</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="84a0c7fa54">
<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/en/creation-de-site-en/pourquoi-votre-site-internet-ne-genere-aucun-contact-et-comment-y-remedier-4/" 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/en/meta-ads-en/facebook-ads-vs-google-ads-lequel-choisir-pour-votre-entreprise-locale-4/" 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/en/google-ads-sea-en/google-ads-pour-les-pme-guide-complet-pour-ne-pas-gaspiller-son-budget-4/" 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/en/organic-referencing-seo-en/seo-local-comment-apparaitre-en-1ere-page-google-pour-votre-metier-a-lyon-4/" 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/en/creation-de-site-en/combien-coute-la-creation-dun-site-internet-pour-artisan-en-2026-4/" 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/en/category/organic-referencing-seo-en/" 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/en/organic-referencing-seo-en/geo-how-artificial-intelligence-is-revolutionizing-the-rules-of-seo/" 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 dernières avancées et applications de l'intelligence artificielle, une technologie révolutionnaire qui transforme nos vies et les entreprises." decoding="async" data-lazy-src="https://kevin-grillot.fr/wp-content/uploads/2026/01/artificial-intelligence.jpg" /><noscript><img width="768" height="401" src="https://kevin-grillot.fr/wp-content/uploads/2026/01/artificial-intelligence.jpg" class="related-card-img wp-post-image" alt="découvrez les dernières avancées et applications de l'intelligence artificielle, une technologie révolutionnaire qui transforme nos vies et les entreprises." 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">Organic referencing (SEO)</span>
<h3 class="text-white font-bold text-lg leading-snug mb-3 flex-1" style="font-family:'Outfit',sans-serif">GEO: How artificial intelligence is revolutionizing the rules of SEO</h3>
<div class="flex items-center justify-between text-gray-500 text-xs mt-auto">
<span>01 Jan 2026</span>
<span class="text-blue-500 font-bold">Lire →</span>
</div>
</div>
</a>
<a href="https://kevin-grillot.fr/en/organic-referencing-seo-en/how-to-optimize-your-xml-sitemap-to-improve-seo-in-2026/" 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="optimisez votre sitemap xml pour améliorer le référencement de votre site web et faciliter l'indexation par les moteurs de recherche." decoding="async" data-lazy-src="https://kevin-grillot.fr/wp-content/uploads/2026/01/xml-sitemap-optimization.jpg" /><noscript><img width="768" height="401" src="https://kevin-grillot.fr/wp-content/uploads/2026/01/xml-sitemap-optimization.jpg" class="related-card-img wp-post-image" alt="optimisez votre sitemap xml pour améliorer le référencement de votre site web et faciliter l'indexation par les moteurs de recherche." 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">Organic referencing (SEO)</span>
<h3 class="text-white font-bold text-lg leading-snug mb-3 flex-1" style="font-family:'Outfit',sans-serif">How to optimize your XML sitemap to improve SEO in 2026</h3>
<div class="flex items-center justify-between text-gray-500 text-xs mt-auto">
<span>08 Jan 2026</span>
<span class="text-blue-500 font-bold">Lire →</span>
</div>
</div>
</a>
<a href="https://kevin-grillot.fr/en/organic-referencing-seo-en/seo-gossip-understanding-the-volatility-of-search-results/" 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 ce qu'est la volatilité seo et comment elle impacte les classements dans les moteurs de recherche. apprenez à analyser et gérer les fluctuations pour optimiser votre stratégie digitale." decoding="async" data-lazy-src="https://kevin-grillot.fr/wp-content/uploads/2026/02/seo-volatility.jpg" /><noscript><img width="768" height="401" src="https://kevin-grillot.fr/wp-content/uploads/2026/02/seo-volatility.jpg" class="related-card-img wp-post-image" alt="découvrez ce qu'est la volatilité seo et comment elle impacte les classements dans les moteurs de recherche. apprenez à analyser et gérer les fluctuations pour optimiser votre stratégie digitale." 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">Organic referencing (SEO)</span>
<h3 class="text-white font-bold text-lg leading-snug mb-3 flex-1" style="font-family:'Outfit',sans-serif">SEO Gossip: Understanding the Volatility of Search Results</h3>
<div class="flex items-center justify-between text-gray-500 text-xs mt-auto">
<span>07 Feb 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/en/creation-de-site-en/pourquoi-votre-site-internet-ne-genere-aucun-contact-et-comment-y-remedier-4/" 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/en/meta-ads-en/facebook-ads-vs-google-ads-lequel-choisir-pour-votre-entreprise-locale-4/" 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/en/google-ads-sea-en/google-ads-pour-les-pme-guide-complet-pour-ne-pas-gaspiller-son-budget-4/" 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/en/organic-referencing-seo-en/seo-local-comment-apparaitre-en-1ere-page-google-pour-votre-metier-a-lyon-4/" 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">Organic referencing (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/en/organic-referencing-seo-en/how-to-optimize-the-meta-description-tag-to-improve-seo-in-2026/" 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">
How to optimize the meta description tag to improve SEO in 2026 </h4>
</a>
<a href="https://kevin-grillot.fr/en/organic-referencing-seo-en/from-seo-to-geo-how-ai-is-redefining-brand-survival-according-to-julian-ferrand-livingpackets/" 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">
From SEO to GEO: How AI is redefining brand survival according to Julian Ferrand (LivingPackets) </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">From SEO to GEO: How AI is redefining brand survival according to Julian Ferrand (LivingPackets)</p>
</div>
<!-- CTA -->
<a href="https://kevin-grillot.fr/en/organic-referencing-seo-en/from-seo-to-geo-how-ai-is-redefining-brand-survival-according-to-julian-ferrand-livingpackets/" 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);
}
// Sticky natif + masquage automatique quand l'article est dépassé.
function updateSidebarMode() {
if (!tocSidebar) return;
if (window.innerWidth < 1024) {
tocSidebar.style.cssText = '';
return;
}
tocSidebar.style.position = '';
tocSidebar.style.left = '';
tocSidebar.style.width = '';
tocSidebar.style.top = '';
tocSidebar.style.maxHeight = 'calc(100vh - 130px)';
tocSidebar.style.overflowY = 'auto';
// Masquer le TOC si on a scrollé au-delà de la fin de l'article
var article = document.querySelector('.article-body');
if (article) {
var rect = article.getBoundingClientRect();
var passed = rect.bottom < 130; // article entièrement au-dessus du viewport
tocSidebar.style.opacity = passed ? '0' : '1';
tocSidebar.style.pointerEvents = passed ? 'none' : '';
tocSidebar.style.visibility = passed ? 'hidden' : '';
tocSidebar.style.transition = 'opacity .25s';
}
}
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) {
// Texte propre = uniquement les nodes texte directs (pas les attrs d'images)
var cleanText = '';
h.childNodes.forEach(function(n) {
if (n.nodeType === Node.TEXT_NODE) cleanText += n.textContent;
else if (n.nodeType === Node.ELEMENT_NODE && n.tagName !== 'IMG') cleanText += n.textContent;
});
cleanText = cleanText.trim();
// Ignorer les H2/H3 sans texte (uniquement images, vides, ou HTML parasite)
if (!cleanText || cleanText.length < 2) return;
if (!h.id) {
h.id = 'h-' + idx + '-' + cleanText.toLowerCase()
.replace(/[^\w\s-]/g, '').replace(/\s+/g, '-').substring(0, 40);
}
items.push({ id: h.id, text: cleanText, 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>
<!-- Réalisations / Cas clients -->
<div class="border-t border-white/5 pt-8 pb-6">
<p class="text-xs text-gray-500 uppercase tracking-widest mb-3 text-center md:text-left">Réalisations sélectionnées</p>
<div class="flex flex-wrap justify-center md:justify-start gap-x-6 gap-y-2 text-xs text-gray-500">
<a href="https://cleaning-angels.com/" target="_blank" rel="noopener" class="hover:text-blue-500 transition-colors">Cleaning Angels — Nettoyage Lyon & Suisse</a>
<span class="text-white/10">|</span>
<a href="https://concierge-angels.com/" target="_blank" rel="noopener" class="hover:text-blue-500 transition-colors">Concierge Angels — Conciergerie Airbnb</a>
<span class="text-white/10">|</span>
<a href="https://giterural-ardeche.com/" target="_blank" rel="noopener" class="hover:text-blue-500 transition-colors">Gîte Rural Ardèche</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=en; 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="84a0c7fa54">
<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 - Debug: cached@1779687082 --> 
