В огромном цифровом океане Интернета в 2026 году видимость — единственный определяющий фактор. Если контент — король, то заголовок, несомненно, является его короной. Часто игнорируемый или написанный наспех, он, тем не менее, является первой точкой контакта между вашим сайтом и пользователем, выступая в качестве маяка в буре результатов поиска.
Вкратце: основы высокоэффективного заголовка Заголовок — наиболее влиятельный фактор ранжирования на странице после самого контента. Идеальная длина теперь измеряется в пикселях, обычно эквивалентных 50-60 символам. Поисковое намерение должно иметь приоритет над простым размещением ключевых слов. Уникальность каждого заголовка крайне важна для предотвращения внутренней каннибализации.
Заголовок должен работать в синергии с метаописанием для максимизации коэффициента кликабельности (CTR). Стратегические ключевые слова следует размещать в начале цепочки ключевых слов (фронтальное размещение). Понимание механики тега заголовка и его прямого влияния
Для эффективного продвижения в SEO необходимо понимать, что технически представляет собой тег заголовка. Он находится в разделе SEO двоякое. Во-первых, это позволяет алгоритмам мгновенно понять тему страницы и правильно её проиндексировать. Во-вторых, это играет важную психологическую роль для пользователя. Хорошо составленный заголовок выступает в качестве обещания ценности. Если вы потерпите неудачу на этом этапе, вся работа, проделанная над структурой вашего контента, особенно с тегами Hn и их иерархией, останется невидимой для широкой публики. Это рычаг повышения эффективности, требующий минимальных технических ресурсов, но отличных навыков письма.
Эволюция алгоритма Google и семантического интеллектаВ 2026 году алгоритм Google
вышел за рамки простого лексического анализа. Простое соединение ключевых слов уже недостаточно для релевантности. Поисковые системы теперь оценивают общую согласованность между заголовком, содержанием страницы и, прежде всего, намерением пользователя. Если ваш заголовок обещает точный ответ, но содержание расплывчато, это немедленно приведет к снижению показателя отказов, что негативно скажется на вашем долгосрочном рейтинге. Поэтому оптимизация должна разрабатываться с учетом потребностей людей, а не машин, при этом соблюдая технические критерии последних.
→ À lire aussi
Откройте для себя новый тренинг SEMrush: оптимизируйте SEO с помощью проверенных стратегий!
Органические ссылки (SEO) · 23 Июн 2025
https://www.youtube.com/watch?v=zoIPIge385w Стратегия ключевых слов: размещение и релевантность Выбор правильных слов для заголовка — решающий этап, на котором разворачивается основная борьба. Речь идёт не о догадках, а об анализе. Интеграция ключевых слов должна следовать стратегии «впереди». На практике это означает, что наиболее важные термины должны появляться как можно раньше в теге заголовка, в идеале — в самом начале. Поисковые роботы придают больший вес первым словам, и пользователи, просматривающие результаты в форме буквы «F», видят эти термины первыми. Тщательное исследование необходимо для определения не только объёма поиска, но и осуществимости. Нацеливание на ультра-общие ключевые слова часто является пустой тратой времени в борьбе с признанными гигантами. Выигрышная стратегия часто заключается в длинном хвосте: более конкретных, менее конкурентных фразах, которые лучше конвертируются, потому что они отвечают точному поисковому запросу. Например, вместо «Спортивная обувь» выберите «Лучшие кроссовки для бега на марафонские дистанции 2026 года». Избегайте чрезмерной оптимизации и перенасыщения ключевыми словами. Однако будьте осторожны, чтобы не попасть в ловушку «перенасыщения ключевыми словами». Последовательность терминов без грамматической связи («Сантехник Париж, Аварийный сантехник, Дешевый ремонт протечек») не только неприятна для чтения, но и воспринимается поисковыми системами как спам. Беглость речи и естественный синтаксис поощряются. Ваш заголовок должен представлять собой связное предложение или четкое ценностное предложение.
Кроме того, уникальность имеет решающее значение. Каждая страница вашего сайта должна иметь уникальный заголовок. Если несколько страниц имеют одинаковый заголовок, Google не будет знать, какой из них приоритезировать, что снизит ваш потенциал ранжирования. Это распространенная техническая проблема, которую иногда можно решить или устранить с помощью правильного использования канонического тега. Чтобы указать на главную страницу в случае аналогичного контента, золотое правило остается неизменным: одна страница, одна цель, один уникальный заголовок.
Длина заголовка: вопрос пикселей и видимости
Длина заголовка
— это строгое техническое ограничение, накладываемое пространством экрана. Хотя часто упоминается 60 символов, в реальности все сложнее: Google выделяет фиксированную ширину в пикселях (примерно 600 пикселей на компьютере). Поскольку не все буквы имеют одинаковую ширину (буква «м» занимает больше места, чем «и» или «л»), количество символов остается приблизительным. Если ваш заголовок превышает этот лимит, он будет обрезан и заменен многоточием (…). Это может быть катастрофой, если важная информация или призыв к действию находятся в конце предложения. И наоборот, слишком короткий заголовок (например, «Дом») — это упущенная возможность добавить контекст и релевантные ключевые слова. Необходимо стремиться к оптимальному пространству, где сообщение будет полным, но не будет обрезано.
→ À lire aussi
SEO-оптимизация: использование ИИ с ChatGPT, Perplexity и Gemini
Органические ссылки (SEO) · 19 Июн 2025
SEO-инструмент 2026
Симулятор тега заголовка Введите свой заголовок, чтобы проверить, соответствует ли он ограничению в 600 пикселей, и просмотрите его в результатах поиска Google.
Ваш тег
</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 символов
</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">
Приблизительное ограничение (600px)
</h2>
<p class="text-slate-500 text-sm md:text-base max-w-2xl mx-auto">
0px <strong>0 / 600px</strong> Для настольных компьютеров
</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>Для мобильных устройств</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">Ваш заголовок будет отображаться здесь…</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">
Это вымышленное описание, иллюстрирующее, как ваш заголовок будет отображаться в результатах поиска. Заголовок выше является наиболее важным элементом для вашего 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">
Ваш заголовок будет отображаться здесь…
</h3>
<p class="text-sm google-grey leading-snug">
На мобильных устройствах пространство более ограничено. Убедитесь, что ваши основные ключевые слова находятся в начале.
</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"></div>
<div class="flex flex-col leading-tight">
<span class="text-sm text-slate-800 font-medium">Оптимизация для разных устройств</span>
<span class="text-xs text-slate-500 truncate">Важно помнить, что отображение зависит от устройства. На мобильных устройствах доступное пространство может немного отличаться, и заголовок часто отображается в несколько строк в зависимости от настроек ОС. Однако правило 60 символов остается надежной гарантией корректного отображения вашего сообщения на большинстве устройств. Всегда проверяйте визуальное отображение ваших стратегических заголовков.</span>
</div>
</div>
<h3 class="text-lg mobile-blue font-medium mb-1 leading-snug truncate-title" id="mobile-preview-title">
Коэффициент кликабельности (CTR): Искусство стимулирования действий
</h3>
<p class="text-sm text-slate-600 leading-snug">
Присутствие на первой странице — это победа, но получение кликов — это высшее достижение. Коэффициент кликабельности (CTR) — ключевой показатель эффективности. Технически идеальный, но скучный заголовок не привлечет трафик. Именно здесь копирайтеру необходимо использовать психологию. Использование чисел (например, «7 способов…», «Топ-10 из…»), скобок или квадратных скобок может визуально привлечь внимание в списке однообразных текстовых ссылок. Глаголы действия и обещания немедленных преимуществ также очень хорошо работают. Пользователи всегда спрашивают себя: «Что мне это даст?» Ваш заголовок должен отвечать на этот вопрос менее чем за секунду. Например, выберите «Научиться играть на гитаре: краткое руководство» вместо «Уроки игры на гитаре». Эмоциональное воздействие или ощущение срочности (без использования вводящего в заблуждение кликбейта) — мощные инструменты для повышения коэффициента кликабельности (CTR).
</p>
</div>
</div>
</div>
<!-- Conseils dynamiques -->
<div id="seo-tips" class="mt-6 p-4 rounded-lg bg-blue-50 text-blue-800 text-sm hidden border border-blue-100">
<!-- Injecté via JS -->
</div>
<!-- Script de logique -->
/**
* Logique du simulateur de Balise Title
* API: Aucune API externe requise (calcul local pour performance max)
* Méthode: Utilisation d’un Canvas HTML5 invisible pour mesurer la largeur exacte en pixels du texte
* selon la police utilisée par Google (Arial 20px pour Desktop).
*/
(function() {
// Éléments du DOM
const input = document.getElementById(‘title-input’);
const pixelCountDisplay = document.getElementById(‘pixel-count’);
const charCountDisplay = document.getElementById(‘char-count’);
const pixelBar = document.getElementById(‘pixel-bar’);
const statusIcon = document.getElementById(‘status-icon’);
const desktopTitle = document.getElementById(‘desktop-preview-title’);
const mobileTitle = document.getElementById(‘mobile-preview-title’);
const tipsContainer = document.getElementById(‘seo-tips’);
// Configuration Google (Approximations 2026 based on current standards)
const MAX_PIXEL_WIDTH = 600; // La zone de danger commence ici
const SAFE_PIXEL_WIDTH = 580; // Zone sûre
const GOOGLE_FONT = ’20px Arial, sans-serif’; // Police standard titre Desktop
// Canvas pour mesure précise
const canvas = document.createElement(‘canvas’);
const context = canvas.getContext(‘2d’);
// Fonction pour mesurer la largeur en pixels
function getTextWidth(text, font) {
context.font = font;
const metrics = context.measureText(text);
return Math.ceil(metrics.width);
}
// Fonction pour tronquer le texte si trop long (Simulation «…»)
function truncateText(text, maxWidth, font) {
const width = getTextWidth(text, font);
if (width <= maxWidth) return text;
let lo = 0, hi = text.length — 1;
// Recherche binaire pour trouver le point de coupure optimal
while (lo <= hi) {
const mid = Math.floor((lo + hi) / 2);
const currentText = text.slice(0, mid) + '…';
if (getTextWidth(currentText, font) < maxWidth) {
lo = mid + 1;
} else {
hi = mid — 1;
}
}
return text.slice(0, hi) + '…';
}
// Fonction de mise à jour de l'UI
function updateSimulator() {
const text = input.value || "Votre titre apparaîtra ici…";
const charLength = input.value.length;
// Calcul des pixels
const pixelWidth = getTextWidth(input.value, GOOGLE_FONT);
// Mise à jour des compteurs
charCountDisplay.textContent = `${charLength} caractères`;
pixelCountDisplay.textContent = `${pixelWidth} / ${MAX_PIXEL_WIDTH}px`;
// Mise à jour de la barre de progression
// On normalise sur 650px pour laisser un peu de marge rouge à la fin
const percentage = Math.min((pixelWidth / 650) * 100, 100);
pixelBar.style.width = `${percentage}%`;
// Gestion des couleurs et états
let statusColor = 'bg-indigo-500';
let <a href="https://kevin-grillot.fr/projet/ma-selection-de-5-outils-etre-plus-efficace-dans-votre-travail/">icon</a> = '';
let tips = '';
if (charLength === 0) {
statusColor = 'bg-slate-300';
icon = '';
} else if (pixelWidth < 200) {
statusColor = 'bg-yellow-400'; // Trop court
icon = '';
tips = ' <strong>Conseil : Votre titre est un peu court. Profitez de l’espace pour ajouter des mots-clés pertinents.’;
} else if (pixelWidth <= SAFE_PIXEL_WIDTH) {
statusColor = 'bg-green-500'; // Parfait
icon = '';
tips = ' <strong>Excellent ! La longueur est optimale. Assurez-vous que le titre incite au clic.’;
} else if (pixelWidth <= MAX_PIXEL_WIDTH) {
statusColor = 'bg-yellow-500'; // Attention limite
icon = '';
tips = ' <strong>Attention : Vous approchez de la limite. Google pourrait couper votre titre sur certains écrans.’;
} else {
statusColor = ‘bg-red-500’; // Trop long
icon = »;
tips = ‘ <strong>Trop long : Votre titre sera tronqué par Google. Essayez de reformuler pour rester sous les 600px.’;
}
pixelBar.className = `h-full gauge-transition w-0 relative ${statusColor}`;
statusIcon.textContent = icon;
pixelCountDisplay.className = `font-bold ${pixelWidth > MAX_PIXEL_WIDTH ? ‘text-red-600’ : ‘text-slate-600’}`;
// Affichage des conseils
if (tips && input.value.length > 0) {
tipsContainer.innerHTML = tips;
tipsContainer.className = `mt-6 p-4 rounded-lg text-sm border flex items-start gap-2 ${
pixelWidth > MAX_PIXEL_WIDTH ? ‘bg-red-50 text-red-800 border-red-100’ :
pixelWidth < 200 ? 'bg-yellow-50 text-yellow-800 border-yellow-100' :
'bg-green-50 text-green-800 border-green-100'
}`;
tipsContainer.classList.remove('hidden');
} else {
tipsContainer.classList.add('hidden');
}
// Mise à jour des aperçus avec troncation simulée
// Desktop: coupe vers 600px
desktopTitle.textContent = truncateText(text, MAX_PIXEL_WIDTH, GOOGLE_FONT);
// Mobile: coupe souvent un peu plus tôt (approx 550px-580px selon device, on simule strict)
mobileTitle.textContent = truncateText(text, 560, GOOGLE_FONT);
}
// Écouteur d'événement
input.addEventListener('input', updateSimulator);
// Init
updateSimulator();
})();
// Fonction globale pour changer les onglets (exposée window)
window.switchView = function(view) {
const btnDesktop = document.getElementById('btn-desktop');
const btnMobile = document.getElementById('btn-mobile');
const viewDesktop = document.getElementById('view-desktop');
const viewMobile = document.getElementById('view-mobile');
if (view === 'desktop') {
viewDesktop.classList.remove('hidden');
viewMobile.classList.add('hidden');
btnDesktop.className = "flex-1 py-2 px-4 rounded-lg text-sm font-medium transition-all bg-white shadow-sm text-indigo-600 ring-1 ring-indigo-100";
btnMobile.className = "flex-1 py-2 px-4 rounded-lg text-sm font-medium transition-all text-slate-500 hover:bg-white hover:text-slate-700";
} else {
viewDesktop.classList.add('hidden');
viewMobile.classList.remove('hidden');
btnMobile.className = "flex-1 py-2 px-4 rounded-lg text-sm font-medium transition-all bg-white shadow-sm text-indigo-600 ring-1 ring-indigo-100";
btnDesktop.className = "flex-1 py-2 px-4 rounded-lg text-sm font-medium transition-all text-slate-500 hover:bg-white hover:text-slate-700";
}
};
</div>
<h3 class="wp-block-heading"></h3>
<p>Соответствие метаописанию</p>
<a href="https://kevin-grillot.fr/ru/%d0%be%d1%80%d0%b3%d0%b0%d0%bd%d0%b8%d1%87%d0%b5%d1%81%d0%ba%d0%b8%d0%b5-%d1%81%d1%81%d1%8b%d0%bb%d0%ba%d0%b8-seo-ru/seo-%d1%81%d0%bf%d0%bb%d0%b5%d1%82%d0%bd%d0%b8-%d0%bf%d0%be%d0%bd%d0%b8%d0%bc%d0%b0%d0%bd%d0%b8%d0%b5-%d0%b8%d0%b7%d0%bc%d0%b5%d0%bd%d1%87%d0%b8%d0%b2%d0%be%d1%81%d1%82%d0%b8-%d0%bf%d0%be%d0%b7%d0%b8/" class="kg-encart-article" aria-label="Lire aussi : SEO-сплетни: Понимание изменчивости позиций в поисковой выдаче">
<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="SEO-сплетни: Понимание изменчивости позиций в поисковой выдаче" class="kg-encart-img" data-lazy-src="https://kevin-grillot.fr/wp-content/uploads/2026/02/seo-rankings-volatility.jpg"><noscript><img width="1200" height="627" src="https://kevin-grillot.fr/wp-content/uploads/2026/02/seo-rankings-volatility.jpg" alt="SEO-сплетни: Понимание изменчивости позиций в поисковой выдаче" class="kg-encart-img"></noscript>
<div class="kg-encart-text">
<span class="kg-encart-label">→ À lire aussi</span>
<span class="kg-encart-title">SEO-сплетни: Понимание изменчивости позиций в поисковой выдаче</span>
<span class="kg-encart-meta">Органические ссылки (SEO) · 03 Фев 2026</span>
</div>
</a><h2 class="wp-block-heading">Заголовок не работает сам по себе. Он образует неразрывный дуэт с метаописанием — коротким абзацем текста, расположенным непосредственно под ним в результатах поиска. Если заголовок — это «крючок», то описание — это рекламное предложение. Чтобы максимизировать ваши шансы, важно оптимизировать метаописание в сочетании с заголовком. Оно должно подтверждать обещание заголовка и побуждать пользователей узнать больше, а также включать семантические вариации ваших ключевых слов.</h2>
<p> <strong>Конкурентный анализ и дифференциация</strong> Перед окончательным утверждением вашего</p>
<p>Заголовок</p>
<h3 class="wp-block-heading"></h3>
<p>Обратите внимание на горизонт. Что делают ваши конкуренты по целевому ключевому слову? Если все десять первых результатов имеют похожие заголовки, имитация этой структуры сделает вас незаметными в толпе. Именно здесь вам нужно искать другой ракурс атаки, «слабое место» в сети конкурента.<a href="https://kevin-grillot.fr/ru/%d0%be%d1%80%d0%b3%d0%b0%d0%bd%d0%b8%d1%87%d0%b5%d1%81%d0%ba%d0%b8%d0%b5-%d1%81%d1%81%d1%8b%d0%bb%d0%ba%d0%b8-seo-ru/%d0%ba%d0%b0%d0%ba-%d0%be%d0%bf%d1%82%d0%b8%d0%bc%d0%b8%d0%b7%d0%b8%d1%80%d0%be%d0%b2%d0%b0%d1%82%d1%8c-%d0%bc%d0%b5%d1%82%d0%b0%d1%82%d0%b5%d0%b3-%d0%be%d0%bf%d0%b8%d1%81%d0%b0%d0%bd%d0%b8%d1%8f/"></a> Тип заголовка</p>
<a href="https://kevin-grillot.fr/ru/%d0%be%d1%80%d0%b3%d0%b0%d0%bd%d0%b8%d1%87%d0%b5%d1%81%d0%ba%d0%b8%d0%b5-%d1%81%d1%81%d1%8b%d0%bb%d0%ba%d0%b8-seo-ru/%d0%b8%d0%b7%d1%83%d1%87%d0%b5%d0%bd%d0%b8%d0%b5-%d1%81%d0%b8%d0%bd%d0%b5%d1%80%d0%b3%d0%b8%d0%b8-%d0%bc%d0%b5%d0%b6%d0%b4%d1%83-seo-%d0%b8-%d0%b0%d0%bb%d0%b3%d0%be%d1%80%d0%b8%d1%82%d0%bc%d0%b0%d0%bc/" class="kg-encart-article" aria-label="Lire aussi : Изучение синергии между SEO и алгоритмами искусственного интеллекта">
<img width="300" height="157" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%20157'%3E%3C/svg%3E" alt="Изучение синергии между SEO и алгоритмами искусственного интеллекта" class="kg-encart-img" data-lazy-src="https://kevin-grillot.fr/wp-content/uploads/2025/08/seo-26-300x157.jpg"><noscript><img width="300" height="157" src="https://kevin-grillot.fr/wp-content/uploads/2025/08/seo-26-300x157.jpg" alt="Изучение синергии между SEO и алгоритмами искусственного интеллекта" class="kg-encart-img"></noscript>
<div class="kg-encart-text">
<span class="kg-encart-label">→ À lire aussi</span>
<span class="kg-encart-title">Изучение синергии между SEO и алгоритмами искусственного интеллекта</span>
<span class="kg-encart-meta">Органические ссылки (SEO) · 20 Авг 2025</span>
</div>
</a><h2 class="wp-block-heading">Конкретный пример</h2>
<p>Конкурентное преимущество <strong>Потенциальный риск</strong>Простое описание</p>
<figure class="wp-block-table"><table>
<thead>
<tr>
<th>Мужские походные ботинки</th>
<th>Быстрая ясность</th>
<th>Недостаток глубины, низкий коэффициент кликабельности</th>
<th>Обещание/Преимущество</th>
</tr>
</thead>
<tbody>
<tr>
<td>Походы без боли: наши протестированные ботинки</td>
<td>Сильный эмоциональный посыл</td>
<td>Должен быть подкреплен контентом (риск разочарования)</td>
<td>Вопрос/Проблема</td>
</tr>
<tr>
<td>Какие походные ботинки выбрать в 2026 году?</td>
<td></td>
<td>Целенаправленная информационная направленность</td>
<td>Менее эффективно для немедленной (транзакционной) покупки</td>
</tr>
<tr>
<td>Список / Рисунки</td>
<td>Топ-5 легких прогулочных туфель</td>
<td>Читабельность, популярный формат</td>
<td>Воспринимается как поверхностный контент, если плохо реализован</td>
</tr>
<tr>
<td>Цель — выделиться визуально и семантически. Если все предлагают «Полное руководство», предложите «Быстрый метод» или «Пример из практики». Это отличие в сочетании с хорошим использованием структурных тегов, таких как теги Hn, в вашем контенте, укрепляет авторитет вашей страницы по определенной теме.</td>
<td>Пользовательский опыт (UX) и обещание контента</td>
<td>Пользовательский опыт начинается задолго до попадания на сайт. Он начинается, как только заголовок прочитан в результатах поиска. Вводящий в заблуждение заголовок (кликбейт), обещающий невероятное откровение, но ведущий к пустому контенту, — худшая стратегия в 2026 году. Пользователи стали настороженными и требовательными. Google измеряет «пого-стикинг» (быстрое перемещение между страницей результатов и вашим сайтом) как сигнал низкого качества.</td>
<td>Заголовок должен точно отражать содержание. Если вы объявляете о рекламной акции, он должен быть сразу виден. Если вы объявляете о руководстве, видео или пошаговая инструкция должны быть в центре внимания страницы. Такая интеллектуальная честность укрепляет лояльность читателей и посылает позитивные сигналы поисковым системам, тем самым укрепляя ваши позиции в поисковой выдаче.</td>
</tr>
</tbody>
</table></figure>
<p>Управление брендом в заголовке <a href="https://kevin-grillot.fr/ru/%d0%be%d1%80%d0%b3%d0%b0%d0%bd%d0%b8%d1%87%d0%b5%d1%81%d0%ba%d0%b8%d0%b5-%d1%81%d1%81%d1%8b%d0%bb%d0%ba%d0%b8-seo-ru/%d0%ba%d0%b0%d0%ba-%d0%bf%d1%80%d0%b0%d0%b2%d0%b8%d0%bb%d1%8c%d0%bd%d0%be-%d0%b8%d1%81%d0%bf%d0%be%d0%bb%d1%8c%d0%b7%d0%be%d0%b2%d0%b0%d1%82%d1%8c-hn-%d1%82%d0%b5%d0%b3%d0%b8-%d0%b4%d0%bb%d1%8f-%d0%be/">Часто задаваемый вопрос касается включения названия бренда в тег заголовка. Как правило, рекомендуется размещать название бренда в конце заголовка, отделяя его дефисом (-) или вертикальной чертой (|). Это позволяет использовать узнаваемость бренда, не занимая ценное пространство, зарезервированное для ключевых слов в начале строки. Однако для главных страниц или страниц «О нас» бренд может законно занимать первое место.</a> Технические ошибки, которых следует избегать</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">Даже самые опытные специалисты могут совершать ошибки. В SEO некоторые технические ошибки в тегах заголовка могут быть фатальными. Первая — это полное отсутствие тега заголовка или пустой тег. Google автоматически сгенерирует заголовок, используя ваш контент, но результат редко бывает оптимальным. Ещё одна распространённая ошибка — использование заголовков по умолчанию, таких как «Новая страница» или «Без заголовка».</h2>
<p><strong>Также необходимо убедиться, что ваша CMS (WordPress, Shopify и т. д.) правильно настроена. Иногда автоматические настройки дублируют название сайта, создавая длинные заголовки, например, «Заголовок статьи — Название сайта — Название сайта». Это снижает релевантность и тратит ценные пиксели. Наконец, убедитесь, что вы правильно управляете техническими проблемами дублирования контента, используя канонический тег, чтобы предотвратить ситуацию, когда варианты URL (например, с параметрами сортировки) рассматриваются как отдельные страницы с одинаковым заголовком.</strong> </p>
<p><div class="rll-youtube-player" data-src="https://www.youtube.com/embed/P9CfpLsqU0U" data-id="P9CfpLsqU0U" data-query="feature=oembed"></div><noscript><iframe title="Balise titre : Comment optimiser une balise title ? Tuto pour rédacteur web" width="500" height="281" src="https://www.youtube.com/embed/P9CfpLsqU0U?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></noscript></p>
<h3 class="wp-block-heading">Предвидение будущего: заголовки и ИИ</h3>
<p>Будущее SEO и метатегов заголовка тесно связано с эволюцией генеративного искусственного интеллекта. Google и другие поисковые системы все чаще способны динамически переписывать ваш заголовок в результатах поиска, если они определяют, что ваше первоначальное предложение не соответствует конкретному запросу пользователя. Это не должно отпугивать вас от написания идеальных заголовков; совсем наоборот. Четкий, лаконичный и оптимизированный заголовок остается лучшим способом направить ИИ на понимание вашего сообщения. Кроме того, хорошая общая семантическая структура и оптимизированное метаописание обеспечивают необходимый контекст для того, чтобы ваш заголовок оставался основным элементом вашей стратегии. В 2026 году оптимизация — это не битва с машиной, а сотрудничество, где ясность передаваемого сигнала имеет первостепенное значение.</p>
<a href="https://kevin-grillot.fr/ru/%d0%be%d1%80%d0%b3%d0%b0%d0%bd%d0%b8%d1%87%d0%b5%d1%81%d0%ba%d0%b8%d0%b5-%d1%81%d1%81%d1%8b%d0%bb%d0%ba%d0%b8-seo-ru/%d0%be%d0%bf%d1%82%d0%b8%d0%bc%d0%b8%d0%b7%d0%b8%d1%80%d1%83%d0%b9%d1%82%d0%b5-%d1%81%d0%b2%d0%be%d0%b5-seo-%d0%b2-2025-%d0%b3%d0%be%d0%b4%d1%83-%d1%81-%d0%bf%d0%be%d0%bc%d0%be%d1%89%d1%8c%d1%8e/" class="kg-encart-article" aria-label="Lire aussi : Оптимизируйте свое SEO в 2025 году с помощью этих 5 практических советов">
<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="Оптимизируйте свое SEO в 2025 году с помощью этих 5 практических советов" class="kg-encart-img" data-lazy-src="https://kevin-grillot.fr/wp-content/uploads/2025/05/seo-91-300x157.jpg"><noscript><img width="300" height="157" src="https://kevin-grillot.fr/wp-content/uploads/2025/05/seo-91-300x157.jpg" alt="Оптимизируйте свое SEO в 2025 году с помощью этих 5 практических советов" class="kg-encart-img"></noscript>
<div class="kg-encart-text">
<span class="kg-encart-label">→ À lire aussi</span>
<span class="kg-encart-title">Оптимизируйте свое SEO в 2025 году с помощью этих 5 практических советов</span>
<span class="kg-encart-meta">Органические ссылки (SEO) · 31 Май 2025</span>
</div>
</a><h2 class="wp-block-heading">Какова идеальная длина тега заголовка в 2026 году? Идеальная длина составляет от 50 до 60 символов, или около 600 пикселей в ширину. Кроме того, Google может сократить ваш заголовок многоточием, что негативно скажется на читаемости и коэффициенте кликабельности.</h2>
<p>Почему Google иногда меняет мой заголовок в результатах поиска?</p>
<p>Google может переписать ваш заголовок, если посчитает исходный недостаточно релевантным поисковому запросу пользователя, если он перегружен ключевыми словами или слишком длинный. Чтобы этого избежать, убедитесь, что ваш заголовок точно и кратко описывает содержимое страницы. <a href="https://kevin-grillot.fr/ru/%d0%be%d1%80%d0%b3%d0%b0%d0%bd%d0%b8%d1%87%d0%b5%d1%81%d0%ba%d0%b8%d0%b5-%d1%81%d1%81%d1%8b%d0%bb%d0%ba%d0%b8-seo-ru/%d0%ba%d0%b0%d0%ba%d0%be%d0%b2%d0%be-%d0%bd%d0%b0%d0%b7%d0%bd%d0%b0%d1%87%d0%b5%d0%bd%d0%b8%d0%b5-%d0%ba%d0%b0%d0%bd%d0%be%d0%bd%d0%b8%d1%87%d0%b5%d1%81%d0%ba%d0%be%d0%b3%d0%be-%d1%82%d0%b5%d0%b3/">Следует ли включать название моей компании в каждый тег заголовка?</a>Да, это хорошая практика брендинга, но предпочтительнее размещать его в конце заголовка (например, «Основное ключевое слово — Название бренда»). Это позволяет разместить важные поисковые запросы в начале тега.</p>
<figure class="is-provider-youtube is-type-video wp-block-embed wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
В чем разница между тегом заголовка и тегом H1?
</div></figure>
<a href="https://kevin-grillot.fr/ru/%d0%be%d1%80%d0%b3%d0%b0%d0%bd%d0%b8%d1%87%d0%b5%d1%81%d0%ba%d0%b8%d0%b5-%d1%81%d1%81%d1%8b%d0%bb%d0%ba%d0%b8-seo-ru/dofollow-%d0%b8%d0%bb%d0%b8-nofollow-%d0%ba%d0%b0%d0%ba%d1%83%d1%8e-%d1%81%d1%82%d1%80%d0%b0%d1%82%d0%b5%d0%b3%d0%b8%d1%8e-%d1%81%d0%bb%d0%b5%d0%b4%d1%83%d0%b5%d1%82-%d0%b2%d1%8b%d0%b1%d1%80%d0%b0/" class="kg-encart-article" aria-label="Lire aussi : Dofollow или nofollow: какую стратегию следует выбрать для оптимизации SEO в 2026 году?">
<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="Dofollow или nofollow: какую стратегию следует выбрать для оптимизации SEO в 2026 году?" class="kg-encart-img" data-lazy-src="https://kevin-grillot.fr/wp-content/uploads/2026/01/seo-strategy.jpg"><noscript><img width="1200" height="627" src="https://kevin-grillot.fr/wp-content/uploads/2026/01/seo-strategy.jpg" alt="Dofollow или nofollow: какую стратегию следует выбрать для оптимизации SEO в 2026 году?" class="kg-encart-img"></noscript>
<div class="kg-encart-text">
<span class="kg-encart-label">→ À lire aussi</span>
<span class="kg-encart-title">Dofollow или nofollow: какую стратегию следует выбрать для оптимизации SEO в 2026 году?</span>
<span class="kg-encart-meta">Органические ссылки (SEO) · 02 Янв 2026</span>
</div>
</a><h2 class="wp-block-heading">Тег title отображается в результатах поиска и во вкладке браузера; это заголовок для «внешней» SEO-оптимизации. Тег H1 — это редакционный заголовок, видимый читателю непосредственно на странице. Хотя они могут быть похожими, они не обязательно должны быть идентичными.</h2>
<p> <strong></strong> </p>
<p> <a href="https://kevin-grillot.fr/ru/%d0%be%d1%80%d0%b3%d0%b0%d0%bd%d0%b8%d1%87%d0%b5%d1%81%d0%ba%d0%b8%d0%b5-%d1%81%d1%81%d1%8b%d0%bb%d0%ba%d0%b8-seo-ru/%d0%ba%d0%b0%d0%ba-%d0%be%d0%bf%d1%82%d0%b8%d0%bc%d0%b8%d0%b7%d0%b8%d1%80%d0%be%d0%b2%d0%b0%d1%82%d1%8c-%d0%bc%d0%b5%d1%82%d0%b0%d1%82%d0%b5%d0%b3-%d0%be%d0%bf%d0%b8%d1%81%d0%b0%d0%bd%d0%b8%d1%8f/"></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/ru/tag/seo-%d1%82%d0%b5%d0%b3-%d0%b7%d0%b0%d0%b3%d0%be%d0%bb%d0%be%d0%b2%d0%ba%d0%b0-ru/" class="tag-pill">#SEO-тег заголовка</a>
<a href="https://kevin-grillot.fr/ru/tag/%d0%b7%d0%b0%d0%b3%d0%be%d0%bb%d0%be%d0%b2%d0%be%d0%ba-%d0%b2%d0%b5%d0%b1-%d1%81%d1%82%d1%80%d0%b0%d0%bd%d0%b8%d1%86%d1%8b-ru/" class="tag-pill">#заголовок веб-страницы</a>
<a href="https://kevin-grillot.fr/ru/tag/%d0%be%d0%bf%d1%82%d0%b8%d0%bc%d0%b8%d0%b7%d0%b8%d1%80%d0%be%d0%b2%d0%b0%d1%82%d1%8c-%d1%82%d0%b5%d0%b3-%d0%b7%d0%b0%d0%b3%d0%be%d0%bb%d0%be%d0%b2%d0%ba%d0%b0-ru/" class="tag-pill">#оптимизировать тег заголовка</a>
<a href="https://kevin-grillot.fr/ru/tag/%d1%81%d0%be%d0%b2%d0%b5%d1%82%d1%8b-%d0%bf%d0%be-seo-ru/" class="tag-pill">#Советы по SEO</a>
</div>
<!-- Signature Auteur -->
<div class="mt-16 bg-[#0a0a0a] rounded-xl p-8 flex flex-col md:flex-row items-center gap-8 shadow-2xl border border-white/5 relative overflow-hidden group">
<div class="absolute inset-0 bg-blue-600/5 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
<div class="relative z-10 flex-shrink-0">
<div class="w-24 h-24 rounded-full p-1 border-2 border-blue-600 shadow-[0_0_20px_rgba(37,99,235,0.3)]">
<div class="w-full h-full rounded-full overflow-hidden bg-gray-800">
<img width="768" height="1024" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20768%201024'%3E%3C/svg%3E" alt="Kevin Grillot" class="!rounded-full w-full h-full object-cover object-top transform hover:scale-110 transition-transform duration-500" data-lazy-src="https://kevin-grillot.fr/wp-content/uploads/2022/01/31-min-768x1024.jpg.avif"><noscript><img width="768" height="1024" src="https://kevin-grillot.fr/wp-content/uploads/2022/01/31-min-768x1024.jpg.avif" alt="Kevin Grillot" class="!rounded-full w-full h-full object-cover object-top transform hover:scale-110 transition-transform duration-500"></noscript>
</div>
</div>
</div>
<div class="relative z-10 text-center md:text-left">
<p class="text-blue-500 text-xs font-black uppercase tracking-[0.15em] mb-2">Écrit par</p>
<h3 class="text-white text-3xl font-bold font-heading leading-tight mb-2">Kevin Grillot</h3>
<p class="text-gray-400 text-sm font-medium leading-relaxed mb-4">Consultant Webmarketing & Expert SEO.</p>
<a href="https://kevin-grillot.fr/blog" class="inline-flex items-center gap-2 text-xs text-blue-400 hover:text-blue-300 transition-colors font-bold uppercase tracking-widest" style="border-bottom:none;text-decoration:none">
Voir tous les articles →
</a>
</div>
</div>
<!-- Lead Magnet — Checklist SEO Local -->
<section class="kg-leadmagnet-section" id="kg-leadmagnet" style="--lm-accent:#2563eb;">
<div class="kg-leadmagnet-container">
<div class="kg-leadmagnet-card">
<div class="kg-leadmagnet-glow"></div>
<div class="kg-leadmagnet-content">
<div class="kg-leadmagnet-badge"><i class="fas fa-gift"></i> Ressource gratuite</div>
<h2 class="kg-leadmagnet-title">Checklist SEO Local gratuite — 15 points à vérifier</h2>
<p class="kg-leadmagnet-sub">Téléchargez notre checklist et vérifiez si votre site est optimisé pour Google.</p>
<ul class="kg-leadmagnet-points">
<li><i class="fas fa-check-circle"></i> 15 points essentiels pour le SEO local</li>
<li><i class="fas fa-check-circle"></i> Format actionnable et imprimable</li>
<li><i class="fas fa-check-circle"></i> Utilisé par +200 entrepreneurs</li>
</ul>
<form class="kg-leadmagnet-form" id="kg-leadmagnet-form" data-ajax="https://kevin-grillot.fr/wp-admin/admin-ajax.php" data-nonce="619cd3c2a1">
<div class="kg-leadmagnet-fields">
<input type="text" name="kg_lm_prenom" placeholder="Votre prénom" required autocomplete="given-name" class="kg-leadmagnet-input">
<input type="email" name="kg_lm_email" placeholder="Votre email" required autocomplete="email" class="kg-leadmagnet-input">
<!-- Honeypot -->
<div style="position:absolute;left:-9999px;" aria-hidden="true">
<input type="text" name="kg_lm_website" tabindex="-1" autocomplete="off">
</div>
<button type="submit" class="kg-leadmagnet-btn">
<i class="fas fa-download"></i> Télécharger gratuitement
</button>
</div>
<p class="kg-leadmagnet-notice"><i class="fas fa-lock"></i> Vos données restent confidentielles. Aucun spam.</p>
</form>
<div class="kg-leadmagnet-success" id="kg-leadmagnet-success" style="display:none;">
<div class="kg-leadmagnet-success-icon"><i class="fas fa-check-circle"></i></div>
<h3>Merci ! Votre checklist est prête.</h3>
<p>Cliquez ci-dessous pour la télécharger :</p>
<a href="" class="kg-leadmagnet-download-link" id="kg-leadmagnet-download" target="_blank" rel="noopener">
<i class="fas fa-file-download"></i> Télécharger la Checklist SEO
</a>
</div>
</div>
</div>
</div>
<style>
.kg-leadmagnet-section { padding: 4rem 1.5rem; position: relative; }
.kg-leadmagnet-container { max-width: 720px; margin: 0 auto; }
.kg-leadmagnet-card {
position: relative; background: rgba(10,10,20,0.85); border: 1px solid rgba(255,255,255,0.08);
border-radius: 1.25rem; padding: 3rem 2.5rem; overflow: hidden;
backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
box-shadow: 0 8px 32px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.05);
}
.kg-leadmagnet-glow {
position: absolute; top: -60px; right: -60px; width: 200px; height: 200px;
background: var(--lm-accent); opacity: 0.08; border-radius: 50%; filter: blur(80px);
pointer-events: none;
}
.kg-leadmagnet-content { position: relative; z-index: 1; }
.kg-leadmagnet-badge {
display: inline-flex; align-items: center; gap: 0.4rem;
background: rgba(37,99,235,0.1); color: var(--lm-accent);
font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
padding: 0.4rem 1rem; border-radius: 999px; margin-bottom: 1.25rem;
border: 1px solid rgba(37,99,235,0.2);
}
.kg-leadmagnet-title {
color: #fff; font-size: 1.75rem; font-weight: 800; line-height: 1.2;
margin: 0 0 0.75rem; font-family: 'Outfit', sans-serif;
}
.kg-leadmagnet-sub { color: #9ca3af; font-size: 0.95rem; margin: 0 0 1.5rem; line-height: 1.6; }
.kg-leadmagnet-points { list-style: none; padding: 0; margin: 0 0 2rem; display: flex; flex-direction: column; gap: 0.5rem; }
.kg-leadmagnet-points li { color: #d1d5db; font-size: 0.85rem; display: flex; align-items: center; gap: 0.6rem; }
.kg-leadmagnet-points li i { color: var(--lm-accent); font-size: 0.8rem; }
.kg-leadmagnet-fields { display: flex; flex-wrap: wrap; gap: 0.75rem; position: relative; }
.kg-leadmagnet-input {
flex: 1 1 180px; padding: 0.85rem 1rem; border-radius: 0.6rem;
border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.04);
color: #e5e7eb; font-size: 0.9rem; outline: none; transition: border-color 0.2s;
}
.kg-leadmagnet-input:focus { border-color: var(--lm-accent); }
.kg-leadmagnet-input::placeholder { color: #6b7280; }
.kg-leadmagnet-btn {
flex: 1 1 100%; padding: 0.9rem 1.5rem; border: none; border-radius: 0.6rem;
background: var(--lm-accent); color: #fff; font-size: 0.95rem; font-weight: 700;
cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
transition: opacity 0.2s, transform 0.2s;
}
.kg-leadmagnet-btn:hover { opacity: 0.9; transform: translateY(-1px); }
.kg-leadmagnet-btn:disabled { opacity: 0.5; cursor: wait; }
.kg-leadmagnet-notice { font-size: 0.7rem; color: #4b5563; text-align: center; margin-top: 0.75rem; }
.kg-leadmagnet-success { text-align: center; }
.kg-leadmagnet-success-icon { font-size: 2.5rem; color: #22c55e; margin-bottom: 1rem; }
.kg-leadmagnet-success h3 { color: #fff; font-size: 1.3rem; font-weight: 700; margin: 0 0 0.5rem; }
.kg-leadmagnet-success p { color: #9ca3af; font-size: 0.9rem; margin: 0 0 1.5rem; }
.kg-leadmagnet-download-link {
display: inline-flex; align-items: center; gap: 0.5rem;
padding: 0.85rem 2rem; border-radius: 0.6rem;
background: var(--lm-accent); color: #fff; font-weight: 700; font-size: 0.95rem;
text-decoration: none; transition: opacity 0.2s;
}
.kg-leadmagnet-download-link:hover { opacity: 0.9; color: #fff; }
@media(max-width:640px) {
.kg-leadmagnet-card { padding: 2rem 1.5rem; }
.kg-leadmagnet-title { font-size: 1.35rem; }
.kg-leadmagnet-fields { flex-direction: column; }
.kg-leadmagnet-input { flex: 1 1 100%; }
}
</style>
</section>
<script type="rocketlazyloadscript">
(function(){
var form = document.getElementById('kg-leadmagnet-form');
if(!form) return;
form.addEventListener('submit', function(e){
e.preventDefault();
var btn = form.querySelector('.kg-leadmagnet-btn');
btn.disabled = true;
btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Envoi en cours...';
var fd = new FormData(form);
fd.append('action', 'kg_lead_magnet_submit');
fd.append('nonce', form.dataset.nonce);
fetch(form.dataset.ajax, { method: 'POST', body: fd })
.then(function(r){ return r.json(); })
.then(function(data){
if(data.success){
form.style.display = 'none';
var successEl = document.getElementById('kg-leadmagnet-success');
successEl.style.display = 'block';
document.getElementById('kg-leadmagnet-download').href = data.data.download_url;
sessionStorage.setItem('kg_lm_filled', '1');
} else {
btn.disabled = false;
btn.innerHTML = '<i class="fas fa-download"></i> T\u00e9l\u00e9charger gratuitement';
alert(data.data || 'Une erreur est survenue.');
}
})
.catch(function(){
btn.disabled = false;
btn.innerHTML = '<i class="fas fa-download"></i> T\u00e9l\u00e9charger gratuitement';
alert('Erreur r\u00e9seau. Veuillez r\u00e9essayer.');
});
});
})();
</script>
</article>
<!-- SIDEBAR DROITE — Derniers articles -->
<aside class="hidden lg:block lg:col-span-3">
<div class="sticky top-32 flex flex-col gap-4">
<p class="text-[10px] uppercase tracking-widest font-bold text-gray-600 mb-1">Derniers articles</p>
<a href="https://kevin-grillot.fr/ru/creation-de-site-ru/pourquoi-votre-site-internet-ne-genere-aucun-contact-et-comment-y-remedier-9/" 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 Апр 2026</p>
</div>
</a>
<a href="https://kevin-grillot.fr/ru/meta-ads-ru/facebook-ads-vs-google-ads-lequel-choisir-pour-votre-entreprise-locale-9/" 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 Апр 2026</p>
</div>
</a>
<a href="https://kevin-grillot.fr/ru/google-%d1%80%d0%b5%d0%ba%d0%bb%d0%b0%d0%bc%d0%b0-%d1%8e%d0%b2%d0%b0-ru/google-ads-pour-les-pme-guide-complet-pour-ne-pas-gaspiller-son-budget-9/" 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 Апр 2026</p>
</div>
</a>
<a href="https://kevin-grillot.fr/ru/%d0%be%d1%80%d0%b3%d0%b0%d0%bd%d0%b8%d1%87%d0%b5%d1%81%d0%ba%d0%b8%d0%b5-%d1%81%d1%81%d1%8b%d0%bb%d0%ba%d0%b8-seo-ru/seo-local-comment-apparaitre-en-1ere-page-google-pour-votre-metier-a-lyon-9/" 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 Апр 2026</p>
</div>
</a>
<a href="https://kevin-grillot.fr/ru/creation-de-site-ru/combien-coute-la-creation-dun-site-internet-pour-artisan-en-2026-9/" 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 Апр 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/ru/category/%d0%be%d1%80%d0%b3%d0%b0%d0%bd%d0%b8%d1%87%d0%b5%d1%81%d0%ba%d0%b8%d0%b5-%d1%81%d1%81%d1%8b%d0%bb%d0%ba%d0%b8-seo-ru/" 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/ru/%d0%be%d1%80%d0%b3%d0%b0%d0%bd%d0%b8%d1%87%d0%b5%d1%81%d0%ba%d0%b8%d0%b5-%d1%81%d1%81%d1%8b%d0%bb%d0%ba%d0%b8-seo-ru/%d0%bb%d1%83%d1%87%d1%88%d0%b8%d0%b5-seo-%d0%b0%d0%b3%d0%b5%d0%bd%d1%82%d1%81%d1%82%d0%b2%d0%b0-%d1%84%d1%80%d0%b0%d0%bd%d1%86%d0%b8%d0%b8-%d1%81%d0%bf%d0%b5%d1%86%d0%b8%d0%b0%d0%bb%d0%b8%d0%b7%d0%b8/" 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 meilleures agences seo spécialisées webflow en france pour 2026, optimisez votre présence en ligne avec des experts locaux et boostez votre visibilité sur les moteurs de recherche." decoding="async" data-lazy-src="https://kevin-grillot.fr/wp-content/uploads/2026/01/webflow-seo-agencies-france-2026.jpg" /><noscript><img width="768" height="401" src="https://kevin-grillot.fr/wp-content/uploads/2026/01/webflow-seo-agencies-france-2026.jpg" class="related-card-img wp-post-image" alt="découvrez les meilleures agences seo spécialisées webflow en france pour 2026, optimisez votre présence en ligne avec des experts locaux et boostez votre visibilité sur 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">Органические ссылки (SEO)</span>
<h3 class="text-white font-bold text-lg leading-snug mb-3 flex-1" style="font-family:'Outfit',sans-serif">Лучшие SEO-агентства Франции, специализирующиеся на Webflow, на 2026 год: наш рейтинг и полное руководство.</h3>
<div class="flex items-center justify-between text-gray-500 text-xs mt-auto">
<span>15 Янв 2026</span>
<span class="text-blue-500 font-bold">Lire →</span>
</div>
</div>
</a>
<a href="https://kevin-grillot.fr/ru/%d0%be%d1%80%d0%b3%d0%b0%d0%bd%d0%b8%d1%87%d0%b5%d1%81%d0%ba%d0%b8%d0%b5-%d1%81%d1%81%d1%8b%d0%bb%d0%ba%d0%b8-seo-ru/%d0%ba%d0%b0%d0%ba-%d0%be%d0%bf%d1%82%d0%b8%d0%bc%d0%b8%d0%b7%d0%b8%d1%80%d0%be%d0%b2%d0%b0%d1%82%d1%8c-%d0%b8%d0%bd%d0%b4%d0%b5%d0%ba%d1%81%d0%b0%d1%86%d0%b8%d1%8e-%d0%b2%d0%b0%d1%88%d0%b5%d0%b3/" 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 meilleures techniques d'optimisation du web crawling pour améliorer l'efficacité de l'exploration des sites web et maximiser la collecte de données." decoding="async" data-lazy-src="https://kevin-grillot.fr/wp-content/uploads/2026/01/web-crawling-optimization.jpg" /><noscript><img width="768" height="401" src="https://kevin-grillot.fr/wp-content/uploads/2026/01/web-crawling-optimization.jpg" class="related-card-img wp-post-image" alt="découvrez les meilleures techniques d'optimisation du web crawling pour améliorer l'efficacité de l'exploration des sites web et maximiser la collecte de données." 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">Органические ссылки (SEO)</span>
<h3 class="text-white font-bold text-lg leading-snug mb-3 flex-1" style="font-family:'Outfit',sans-serif">Как оптимизировать индексацию вашего сайта в 2026 году</h3>
<div class="flex items-center justify-between text-gray-500 text-xs mt-auto">
<span>01 Янв 2026</span>
<span class="text-blue-500 font-bold">Lire →</span>
</div>
</div>
</a>
<a href="https://kevin-grillot.fr/ru/%d0%be%d1%80%d0%b3%d0%b0%d0%bd%d0%b8%d1%87%d0%b5%d1%81%d0%ba%d0%b8%d0%b5-%d1%81%d1%81%d1%8b%d0%bb%d0%ba%d0%b8-seo-ru/geo-%d0%ba%d0%b0%d0%ba-%d0%b8%d1%81%d0%ba%d1%83%d1%81%d1%81%d1%82%d0%b2%d0%b5%d0%bd%d0%bd%d1%8b%d0%b9-%d0%b8%d0%bd%d1%82%d0%b5%d0%bb%d0%bb%d0%b5%d0%ba%d1%82-%d1%80%d0%b5%d0%b2%d0%be%d0%bb%d1%8e%d1%86/" 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">Органические ссылки (SEO)</span>
<h3 class="text-white font-bold text-lg leading-snug mb-3 flex-1" style="font-family:'Outfit',sans-serif">GEO: Как искусственный интеллект революционизирует правила SEO</h3>
<div class="flex items-center justify-between text-gray-500 text-xs mt-auto">
<span>01 Янв 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/ru/creation-de-site-ru/pourquoi-votre-site-internet-ne-genere-aucun-contact-et-comment-y-remedier-9/" 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 Апр 2026</p>
</div>
</a>
<a href="https://kevin-grillot.fr/ru/meta-ads-ru/facebook-ads-vs-google-ads-lequel-choisir-pour-votre-entreprise-locale-9/" 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 Апр 2026</p>
</div>
</a>
<a href="https://kevin-grillot.fr/ru/google-%d1%80%d0%b5%d0%ba%d0%bb%d0%b0%d0%bc%d0%b0-%d1%8e%d0%b2%d0%b0-ru/google-ads-pour-les-pme-guide-complet-pour-ne-pas-gaspiller-son-budget-9/" 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 Реклама (ЮВА)</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 Апр 2026</p>
</div>
</a>
<a href="https://kevin-grillot.fr/ru/%d0%be%d1%80%d0%b3%d0%b0%d0%bd%d0%b8%d1%87%d0%b5%d1%81%d0%ba%d0%b8%d0%b5-%d1%81%d1%81%d1%8b%d0%bb%d0%ba%d0%b8-seo-ru/seo-local-comment-apparaitre-en-1ere-page-google-pour-votre-metier-a-lyon-9/" 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">Органические ссылки (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 Апр 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/ru/%d0%be%d1%80%d0%b3%d0%b0%d0%bd%d0%b8%d1%87%d0%b5%d1%81%d0%ba%d0%b8%d0%b5-%d1%81%d1%81%d1%8b%d0%bb%d0%ba%d0%b8-seo-ru/%d0%ba%d0%b0%d0%ba-%d0%be%d0%bf%d1%82%d0%b8%d0%bc%d0%b8%d0%b7%d0%b8%d1%80%d0%be%d0%b2%d0%b0%d1%82%d1%8c-%d0%bc%d0%b5%d1%82%d0%b0%d1%82%d0%b5%d0%b3-%d0%be%d0%bf%d0%b8%d1%81%d0%b0%d0%bd%d0%b8%d1%8f/" 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">
Как оптимизировать метатег описания для улучшения SEO в 2026 году </h4>
</a>
<a href="https://kevin-grillot.fr/ru/%d0%be%d1%80%d0%b3%d0%b0%d0%bd%d0%b8%d1%87%d0%b5%d1%81%d0%ba%d0%b8%d0%b5-%d1%81%d1%81%d1%8b%d0%bb%d0%ba%d0%b8-seo-ru/%d0%be%d1%82-seo-%d0%ba-geo-%d0%ba%d0%b0%d0%ba-%d0%b8%d1%81%d0%ba%d1%83%d1%81%d1%81%d1%82%d0%b2%d0%b5%d0%bd%d0%bd%d1%8b%d0%b9-%d0%b8%d0%bd%d1%82%d0%b5%d0%bb%d0%bb%d0%b5%d0%ba%d1%82-%d0%bc%d0%b5%d0%bd/" 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">
От SEO к GEO: как искусственный интеллект меняет представление о выживании бренда, по мнению Джулиана Ферранда (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">От SEO к GEO: как искусственный интеллект меняет представление о выживании бренда, по мнению Джулиана Ферранда (LivingPackets)</p>
</div>
<!-- CTA -->
<a href="https://kevin-grillot.fr/ru/%d0%be%d1%80%d0%b3%d0%b0%d0%bd%d0%b8%d1%87%d0%b5%d1%81%d0%ba%d0%b8%d0%b5-%d1%81%d1%81%d1%8b%d0%bb%d0%ba%d0%b8-seo-ru/%d0%be%d1%82-seo-%d0%ba-geo-%d0%ba%d0%b0%d0%ba-%d0%b8%d1%81%d0%ba%d1%83%d1%81%d1%81%d1%82%d0%b2%d0%b5%d0%bd%d0%bd%d1%8b%d0%b9-%d0%b8%d0%bd%d1%82%d0%b5%d0%bb%d0%bb%d0%b5%d0%ba%d1%82-%d0%bc%d0%b5%d0%bd/" class="flex-shrink-0 bg-blue-600 hover:bg-blue-500 text-white text-xs font-bold uppercase tracking-widest px-5 py-2.5 rounded-full transition-colors" style="text-decoration:none;border-bottom:none;white-space:nowrap">
Lire →
</a>
<!-- Fermer -->
<button id="close-next-bar" aria-label="Fermer" class="flex-shrink-0 w-8 h-8 rounded-full bg-white/5 hover:bg-white/10 flex items-center justify-center transition-colors">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
</button>
</div>
</div>
<!-- SCRIPTS -->
<script type="rocketlazyloadscript">
(function() {
// ---- 1. BARRE DE PROGRESSION ----
var progressBar = document.getElementById('reading-progress');
window.addEventListener('scroll', function() {
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var scrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
if (progressBar && scrollHeight > 0) {
progressBar.style.width = (scrollTop / scrollHeight * 100) + '%';
}
}, { passive: true });
// ---- 2. TABLE DES MATIÈRES ----
var tocSidebar = document.getElementById('toc-sidebar');
var sidebarLeft = document.getElementById('sidebar-left');
var fixedLeft = null;
var fixedWidth = null;
var STICKY_TOP = 110; // px — sous la nav
// Enregistre les coordonnées de la sidebar pour le mode fixed
function recordSidebarPos() {
if (!sidebarLeft) return;
var rect = sidebarLeft.getBoundingClientRect();
fixedLeft = Math.round(rect.left + window.scrollX);
fixedWidth = Math.round(rect.width);
}
// Bascule sticky → fixed quand le grid se termine (pour rester "toujours visible")
function updateSidebarMode() {
if (!tocSidebar || !sidebarLeft || window.innerWidth < 1024) {
if (tocSidebar) tocSidebar.style.cssText = '';
return;
}
if (fixedLeft === null) recordSidebarPos();
var asideRect = sidebarLeft.getBoundingClientRect();
if (asideRect.top > STICKY_TOP) {
// Au-dessus du contenu : laisser le sticky CSS gérer
tocSidebar.style.cssText = '';
} else if (asideRect.bottom < STICKY_TOP + tocSidebar.offsetHeight + 20) {
// Fin du grid : passer en fixed pour rester visible
tocSidebar.style.position = 'fixed';
tocSidebar.style.top = STICKY_TOP + 'px';
tocSidebar.style.left = fixedLeft + 'px';
tocSidebar.style.width = fixedWidth + 'px';
tocSidebar.style.maxHeight = 'calc(100vh - 130px)';
tocSidebar.style.overflowY = 'auto';
} else {
// Dans la zone de lecture : sticky normal
tocSidebar.style.cssText = '';
}
}
window.addEventListener('resize', function() { recordSidebarPos(); updateSidebarMode(); }, { passive: true });
window.addEventListener('scroll', updateSidebarMode, { passive: true });
function buildTOC() {
var headings = document.querySelectorAll('.article-body h2, .article-body h3');
if (!headings.length) {
var emptyMsg = document.getElementById('toc-empty-msg');
if (emptyMsg) emptyMsg.style.display = '';
return;
}
var tocList = document.getElementById('toc-list');
var tocMobileList = document.getElementById('toc-mobile-list');
if (!tocList && !tocMobileList) return;
var items = [];
headings.forEach(function(h, idx) {
if (!h.id) {
h.id = 'h-' + idx + '-' + h.textContent.trim().toLowerCase()
.replace(/[^\w\s-]/g, '').replace(/\s+/g, '-').substring(0, 40);
}
items.push({ id: h.id, text: h.textContent.trim(), level: h.tagName });
});
function buildList(listEl, isMobile) {
if (!listEl) return;
items.forEach(function(item) {
var li = document.createElement('li');
if (item.level === 'H3' && isMobile) li.className = 'toc-h3-item';
var a = document.createElement('a');
a.href = '#' + item.id;
a.textContent = item.text;
if (item.level === 'H3' && !isMobile) a.classList.add('toc-h3');
a.addEventListener('click', function(e) {
e.preventDefault();
var target = document.getElementById(item.id);
if (target) {
window.scrollTo({ top: target.getBoundingClientRect().top + window.pageYOffset - 100, behavior: 'smooth' });
}
});
li.appendChild(a);
listEl.appendChild(li);
});
}
buildList(tocList, false);
buildList(tocMobileList, true);
// Surlignage dynamique du titre courant
var tocLinks = tocList ? tocList.querySelectorAll('a') : [];
window.addEventListener('scroll', function() {
var scrollPos = window.pageYOffset + 130;
var current = '';
items.forEach(function(item) {
var el = document.getElementById(item.id);
if (el && el.offsetTop <= scrollPos) current = item.id;
});
tocLinks.forEach(function(link) {
link.classList.toggle('toc-active', link.getAttribute('href') === '#' + current);
});
}, { passive: true });
}
// ---- 3. TOC MOBILE TOGGLE ----
var tocToggle = document.getElementById('toc-toggle');
var tocContent = document.getElementById('toc-mobile-content');
var tocChevron = document.getElementById('toc-chevron');
if (tocToggle && tocContent) {
tocToggle.addEventListener('click', function() {
var isOpen = tocContent.classList.toggle('open');
tocChevron.style.transform = isOpen ? 'rotate(180deg)' : 'rotate(0)';
});
}
// ---- 4. BARRE FLOTTANTE "LIRE ENSUITE" ----
var bar = document.getElementById('read-next-bar');
var closeBtn = document.getElementById('close-next-bar');
var barShown = false;
var barDismissed = false;
if (bar) {
window.addEventListener('scroll', function() {
if (barDismissed) return;
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var scrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var pct = scrollHeight > 0 ? (scrollTop / scrollHeight * 100) : 0;
if (pct > 70 && !barShown) {
bar.classList.add('bar-visible');
barShown = true;
} else if (pct <= 60 && barShown) {
bar.classList.remove('bar-visible');
barShown = false;
}
}, { passive: true });
if (closeBtn) {
closeBtn.addEventListener('click', function() {
bar.classList.remove('bar-visible');
bar.classList.add('bar-dismissed');
barDismissed = true;
});
}
}
// ---- INIT ----
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', function() {
recordSidebarPos();
buildTOC();
});
} else {
recordSidebarPos();
buildTOC();
}
// Recalcul après images chargées (layout peut changer)
window.addEventListener('load', function() {
recordSidebarPos();
updateSidebarMode();
});
})();
</script>
<!-- DÉBUT DU FOOTER PERSONNALISÉ -->
<style>
/* Styles spécifiques au footer (isolés pour ne pas casser le reste) */
.custom-footer {
font-family: 'Inter', sans-serif;
background-color: #000000;
color: white;
position: relative;
overflow: hidden;
width: 100%;
margin-top: auto; /* Pousse le footer en bas si la page est courte */
}
.font-heading { font-family: 'Outfit', sans-serif; }
/* Couleurs */
.text-brand-blue { color: #0055ff; }
.bg-brand-blue { background-color: #0055ff; }
/* Liens Footer */
.footer-link {
position: relative;
color: #9ca3af; /* gray-400 */
text-decoration: none;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.5rem;
}
.footer-link:hover {
color: #ffffff;
transform: translateX(5px);
}
.footer-link::before {
content: '';
width: 0;
height: 1px;
background-color: #0055ff;
transition: width 0.3s ease;
}
.footer-link:hover::before {
width: 10px;
}
/* Cartes - voir hover amélioré ci-dessous */
/* Icones */
.icon-circle {
width: 3rem; height: 3rem;
border-radius: 50%;
background-color: rgba(0, 85, 255, 0.1);
display: flex; align-items: center; justify-content: center;
color: #0055ff; font-size: 1.25rem;
transition: all 0.3s ease;
margin-bottom: 1rem;
}
.footer-card:hover .icon-circle {
background-color: #0055ff; color: white;
box-shadow: 0 0 20px rgba(0, 85, 255, 0.4);
}
/* Compétences */
.footer-skill {
display: flex; align-items: center; gap: 10px;
padding: 10px 14px; border-radius: 10px; font-size: 0.85rem; font-weight: 700;
background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
color: var(--sk-color, #9ca3af); text-decoration: none;
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.footer-skill:hover {
background: color-mix(in srgb, var(--sk-color) 12%, transparent);
border-color: color-mix(in srgb, var(--sk-color) 40%, transparent);
color: var(--sk-color);
transform: translateX(6px);
box-shadow: 0 0 20px color-mix(in srgb, var(--sk-color) 15%, transparent);
}
.footer-skill i { width: 1.2em; text-align: center; }
/* Hover animation cartes footer */
.footer-card {
padding: 1.5rem;
border-radius: 1rem;
border: 1px solid rgba(255, 255, 255, 0.03);
background: linear-gradient(145deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0) 100%);
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.footer-card:hover {
border-color: rgba(0, 85, 255, 0.25);
background: linear-gradient(145deg, rgba(255,255,255,0.04) 0%, rgba(0,85,255,0.03) 100%);
transform: translateY(-4px);
box-shadow: 0 12px 40px rgba(0, 85, 255, 0.08), 0 0 0 1px rgba(0, 85, 255, 0.1);
}
/* Bouton */
.btn-glow {
background: linear-gradient(90deg, #0055ff, #0044cc);
color: white;
padding: 12px 24px;
border-radius: 8px;
font-weight: bold;
text-transform: uppercase;
font-size: 0.8rem;
letter-spacing: 0.05em;
transition: all 0.3s ease;
box-shadow: 0 0 15px rgba(0, 85, 255, 0.2);
display: inline-flex;
align-items: center;
gap: 8px;
}
.btn-glow:hover {
box-shadow: 0 0 25px rgba(0, 85, 255, 0.5);
transform: translateY(-2px);
color: white;
}
</style>
<footer class="custom-footer pt-24 pb-8 border-t border-white/5">
<!-- Lumières d'ambiance (Background) -->
<div class="absolute top-0 right-0 w-[500px] h-[500px] bg-blue-600/5 rounded-full blur-[120px] -z-10 pointer-events-none"></div>
<div class="absolute bottom-0 left-0 w-[400px] h-[400px] bg-blue-900/5 rounded-full blur-[100px] -z-10 pointer-events-none"></div>
<div class="max-w-[1400px] mx-auto px-6">
<!-- En-tête du Footer (CTA) -->
<div class="mb-16 md:flex justify-between items-end border-b border-white/5 pb-10">
<div>
<h2 class="font-heading text-3xl md:text-5xl font-black uppercase tracking-tight mb-2 text-white">
Prêt à <span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-500 to-white">décoller ?</span>
</h2>
<p class="text-gray-400 max-w-md">Transformons votre présence digitale en véritable levier de croissance.</p>
</div>
<div class="mt-6 md:mt-0">
<a href="https://kevin-grillot.fr/me-contacter/" class="btn-glow">
Démarrer un projet <i class="fas fa-arrow-right"></i>
</a>
</div>
</div>
<!-- Grid Principale (5 Colonnes) -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-6 lg:gap-8 mb-20">
<!-- 1. CONTACT -->
<div class="footer-card">
<div class="icon-circle"><i class="fas fa-envelope"></i></div>
<h3 class="font-heading font-bold text-lg uppercase tracking-wider mb-6 text-white">Contact</h3>
<div class="space-y-4">
<a href="mailto:grillotkevin@gmail.com" class="flex items-center gap-3 group text-gray-400 hover:text-white transition-colors">
<span class="w-8 h-8 rounded bg-white/5 flex items-center justify-center text-blue-500 group-hover:bg-brand-blue group-hover:text-white transition-all"><i class="fas fa-at text-xs"></i></span>
<span class="text-sm font-medium">grillotkevin@gmail.com</span>
</a>
<a href="tel:0667570018" class="flex items-center gap-3 group text-gray-400 hover:text-white transition-colors">
<span class="w-8 h-8 rounded bg-white/5 flex items-center justify-center text-blue-500 group-hover:bg-brand-blue group-hover:text-white transition-all"><i class="fas fa-phone text-xs"></i></span>
<span class="text-sm font-medium">06 67 57 00 18</span>
</a>
<a href="https://wa.me/33667570018?text=Bonjour%20Kevin%2C%20je%20souhaite%20un%20devis%20pour%20mon%20projet." target="_blank" rel="noopener" class="flex items-center gap-3 group text-gray-400 hover:text-white transition-colors">
<span class="w-8 h-8 rounded bg-white/5 flex items-center justify-center text-green-500 group-hover:bg-green-600 group-hover:text-white transition-all"><i class="fab fa-whatsapp text-xs"></i></span>
<span class="text-sm font-medium">WhatsApp direct</span>
</a>
</div>
</div>
<!-- 2. NAVIGATION -->
<div class="footer-card">
<div class="icon-circle"><i class="fas fa-compass"></i></div>
<h3 class="font-heading font-bold text-lg uppercase tracking-wider mb-6 text-white">Navigation</h3>
<nav class="flex flex-col space-y-2 text-sm font-medium">
<a href="https://kevin-grillot.fr/mes-experiences/" class="footer-link">Mes Expériences</a>
<a href="https://kevin-grillot.fr/mes-formations/" class="footer-link">Mes Formations</a>
<a href="https://kevin-grillot.fr/mes-etudes/" class="footer-link">Mes Études</a>
<a href="https://kevin-grillot.fr/a-propos/" class="footer-link">À Propos</a>
<a href="https://kevin-grillot.fr/blog/" class="footer-link">Le Blog</a>
<a href="https://kevin-grillot.fr/creation-site-internet/" class="footer-link">Création Site Web</a>
</nav>
</div>
<!-- 3. RÉSEAUX -->
<div class="footer-card">
<div class="icon-circle"><i class="fas fa-share-alt"></i></div>
<h3 class="font-heading font-bold text-lg uppercase tracking-wider mb-6 text-white">Réseaux</h3>
<p class="text-gray-400 text-sm mb-6">Suivez mon actualité et mes conseils quotidiens.</p>
<div class="flex gap-4">
<a href="https://www.linkedin.com/in/kevin-grillot-036652159/" target="_blank" class="w-12 h-12 rounded-lg bg-white/5 flex items-center justify-center text-white hover:bg-[#0077b5] hover:scale-110 transition-all duration-300 shadow-lg">
<i class="fab fa-linkedin-in text-xl"></i>
</a>
<a href="https://www.instagram.com/kevingr04/" target="_blank" class="w-12 h-12 rounded-lg bg-white/5 flex items-center justify-center text-white hover:bg-gradient-to-tr hover:from-yellow-400 hover:via-red-500 hover:to-purple-500 hover:scale-110 transition-all duration-300 shadow-lg">
<i class="fab fa-instagram text-xl"></i>
</a>
</div>
</div>
<!-- 3b. COMPÉTENCES -->
<div class="footer-card">
<div class="icon-circle"><i class="fas fa-rocket"></i></div>
<h3 class="font-heading font-bold text-lg uppercase tracking-wider mb-6 text-white">Compétences</h3>
<div class="space-y-3">
<a href="https://kevin-grillot.fr/seo-geo/" class="footer-skill" style="--sk-color:#2563eb;">
<i class="fas fa-search"></i> SEO & GEO
</a>
<a href="https://kevin-grillot.fr/google-ads/" class="footer-skill" style="--sk-color:#f97316;">
<i class="fab fa-google"></i> Google Ads
</a>
<a href="https://kevin-grillot.fr/meta-ads/" class="footer-skill" style="--sk-color:#e91e8c;">
<i class="fab fa-meta"></i> Meta Ads
</a>
<a href="https://kevin-grillot.fr/creation-site/" class="footer-skill" style="--sk-color:#10b981;">
<i class="fas fa-code"></i> Création de site
</a>
</div>
</div>
<!-- 4. EXPERTISE (Liste Enrichie) -->
<div class="footer-card">
<div class="icon-circle"><i class="fas fa-certificate"></i></div>
<h3 class="font-heading font-bold text-lg uppercase tracking-wider mb-6 text-white">Expertise</h3>
<div class="space-y-3 mb-6">
<!-- SEMrush -->
<div class="flex items-center gap-3 p-2 rounded bg-white/5 border border-white/5 hover:border-orange-500/30 transition-colors">
<i class="fas fa-fire text-orange-500 text-lg"></i>
<span class="font-bold text-sm text-gray-200">SEMrush</span>
</div>
<!-- Google Looker Studio -->
<div class="flex items-center gap-3 p-2 rounded bg-white/5 border border-white/5 hover:border-blue-400/30 transition-colors">
<i class="fas fa-chart-area text-blue-400 text-lg"></i>
<span class="font-bold text-sm text-gray-200">Looker Studio</span>
</div>
<!-- Meta Ads -->
<div class="flex items-center gap-3 p-2 rounded bg-white/5 border border-white/5 hover:border-blue-600/30 transition-colors">
<i class="fab fa-meta text-blue-600 text-lg"></i>
<span class="font-bold text-sm text-gray-200">Meta Ads</span>
</div>
<!-- Google Ads -->
<div class="flex items-center gap-3 p-2 rounded bg-white/5 border border-white/5 hover:border-blue-500/30 transition-colors">
<i class="fab fa-google text-blue-500 text-lg"></i>
<span class="font-bold text-sm text-gray-200">Google Ads</span>
</div>
</div>
<a href="https://kevin-grillot.fr/mes-cerfications" class="text-xs font-bold text-blue-500 hover:text-white uppercase tracking-widest transition-colors flex items-center gap-2 group justify-center">
Toutes les certifs <i class="fas fa-long-arrow-alt-right transform group-hover:translate-x-1 transition-transform"></i>
</a>
</div>
</div>
<!-- Copyright & Mentions -->
<div class="border-t border-white/5 pt-8 flex flex-col md:flex-row justify-between items-center text-xs text-gray-600 font-medium">
<p>
© <span id="current-year"></span> <span class="text-white font-bold">KEVIN GRILLOT</span>. Tous droits réservés.
</p>
<div class="mt-4 md:mt-0 flex flex-wrap justify-center gap-6">
<span class="hidden md:inline text-white/10">|</span>
<a href="https://kevin-grillot.fr/mentions-legales" class="hover:text-blue-500 transition-colors">Mentions Légales</a>
<a href="https://kevin-grillot.fr/cv-foot/" class="hover:text-blue-500 transition-colors">CV Foot</a>
<span class="text-gray-700">Dev with 💙 by Me</span>
</div>
</div>
</div>
</footer>
<script type="rocketlazyloadscript">
// Mise à jour auto de l'année
document.getElementById('current-year').textContent = new Date().getFullYear();
</script>
<!-- FIN DU FOOTER PERSONNALISÉ -->
<!-- BOUTON WHATSAPP FLOTTANT -->
<style>
.whatsapp-float {
position: fixed;
bottom: 28px;
right: 28px;
z-index: 9999;
display: flex;
align-items: center;
gap: 10px;
background: #25D366;
color: white;
padding: 12px 20px 12px 16px;
border-radius: 50px;
font-weight: 700;
font-size: 14px;
text-decoration: none;
box-shadow: 0 4px 20px rgba(37, 211, 102, 0.45);
transition: all 0.3s ease;
font-family: 'Inter', sans-serif;
}
.whatsapp-float:hover {
background: #1ebe5d;
transform: translateY(-3px);
box-shadow: 0 8px 30px rgba(37, 211, 102, 0.55);
color: white;
}
.whatsapp-float i { font-size: 22px; }
@media (max-width: 640px) {
.whatsapp-float span { display: none; }
.whatsapp-float { padding: 14px; border-radius: 50%; }
}
</style>
<a href="https://wa.me/33667570018?text=Bonjour%20Kevin%2C%20je%20souhaite%20un%20devis%20pour%20mon%20projet."
class="whatsapp-float" target="_blank" rel="noopener"
title="Contacter Kevin Grillot sur WhatsApp">
<i class="fab fa-whatsapp"></i>
<span>Devis rapide</span>
</a>
<!-- FIN BOUTON WHATSAPP FLOTTANT -->
<script type="speculationrules">
{"prefetch":[{"source":"document","where":{"and":[{"href_matches":"\/*"},{"not":{"href_matches":["\/wp-*.php","\/wp-admin\/*","\/wp-content\/uploads\/*","\/wp-content\/*","\/wp-content\/plugins\/*","\/wp-content\/themes\/kevin-grillot\/*","\/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]}
</script>
<script id="rocket-browser-checker-js-after">
"use strict";var _createClass=function(){function defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,"value"in descriptor&&(descriptor.writable=!0),Object.defineProperty(target,descriptor.key,descriptor)}}return function(Constructor,protoProps,staticProps){return protoProps&&defineProperties(Constructor.prototype,protoProps),staticProps&&defineProperties(Constructor,staticProps),Constructor}}();function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor))throw new TypeError("Cannot call a class as a function")}var RocketBrowserCompatibilityChecker=function(){function RocketBrowserCompatibilityChecker(options){_classCallCheck(this,RocketBrowserCompatibilityChecker),this.passiveSupported=!1,this._checkPassiveOption(this),this.options=!!this.passiveSupported&&options}return _createClass(RocketBrowserCompatibilityChecker,[{key:"_checkPassiveOption",value:function(self){try{var options={get passive(){return!(self.passiveSupported=!0)}};window.addEventListener("test",null,options),window.removeEventListener("test",null,options)}catch(err){self.passiveSupported=!1}}},{key:"initRequestIdleCallback",value:function(){!1 in window&&(window.requestIdleCallback=function(cb){var start=Date.now();return setTimeout(function(){cb({didTimeout:!1,timeRemaining:function(){return Math.max(0,50-(Date.now()-start))}})},1)}),!1 in window&&(window.cancelIdleCallback=function(id){return clearTimeout(id)})}},{key:"isDataSaverModeOn",value:function(){return"connection"in navigator&&!0===navigator.connection.saveData}},{key:"supportsLinkPrefetch",value:function(){var elem=document.createElement("link");return elem.relList&&elem.relList.supports&&elem.relList.supports("prefetch")&&window.IntersectionObserver&&"isIntersecting"in IntersectionObserverEntry.prototype}},{key:"isSlowConnection",value:function(){return"connection"in navigator&&"effectiveType"in navigator.connection&&("2g"===navigator.connection.effectiveType||"slow-2g"===navigator.connection.effectiveType)}}]),RocketBrowserCompatibilityChecker}();
</script>
<script id="rocket-preload-links-js-extra">
var RocketPreloadLinksConfig = {"excludeUris":"\/(?:.+\/)?feed(?:\/(?:.+\/?)?)?$|\/(?:.+\/)?embed\/|\/(index\\.php\/)?wp\\-json(\/.*|$)|\/logkevgriin\/|\/wp-admin\/|\/logout\/|\/logkevgriin\/|\/refer\/|\/go\/|\/recommend\/|\/recommends\/","usesTrailingSlash":"1","imageExt":"jpg|jpeg|gif|png|tiff|bmp|webp|avif|pdf|doc|docx|xls|xlsx|php","fileExt":"jpg|jpeg|gif|png|tiff|bmp|webp|avif|pdf|doc|docx|xls|xlsx|php|html|htm","siteUrl":"https:\/\/kevin-grillot.fr","onHoverDelay":"100","rateThrottle":"3"};
</script>
<script id="rocket-preload-links-js-after">
(function() {
"use strict";var r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},e=function(){function i(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(e,t,n){return t&&i(e.prototype,t),n&&i(e,n),e}}();function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var t=function(){function n(e,t){i(this,n),this.browser=e,this.config=t,this.options=this.browser.options,this.prefetched=new Set,this.eventTime=null,this.threshold=1111,this.numOnHover=0}return e(n,[{key:"init",value:function(){!this.browser.supportsLinkPrefetch()||this.browser.isDataSaverModeOn()||this.browser.isSlowConnection()||(this.regex={excludeUris:RegExp(this.config.excludeUris,"i"),images:RegExp(".("+this.config.imageExt+")$","i"),fileExt:RegExp(".("+this.config.fileExt+")$","i")},this._initListeners(this))}},{key:"_initListeners",value:function(e){-1<this.config.onHoverDelay&&document.addEventListener("mouseover",e.listener.bind(e),e.listenerOptions),document.addEventListener("mousedown",e.listener.bind(e),e.listenerOptions),document.addEventListener("touchstart",e.listener.bind(e),e.listenerOptions)}},{key:"listener",value:function(e){var t=e.target.closest("a"),n=this._prepareUrl(t);if(null!==n)switch(e.type){case"mousedown":case"touchstart":this._addPrefetchLink(n);break;case"mouseover":this._earlyPrefetch(t,n,"mouseout")}}},{key:"_earlyPrefetch",value:function(t,e,n){var i=this,r=setTimeout(function(){if(r=null,0===i.numOnHover)setTimeout(function(){return i.numOnHover=0},1e3);else if(i.numOnHover>i.config.rateThrottle)return;i.numOnHover++,i._addPrefetchLink(e)},this.config.onHoverDelay);t.addEventListener(n,function e(){t.removeEventListener(n,e,{passive:!0}),null!==r&&(clearTimeout(r),r=null)},{passive:!0})}},{key:"_addPrefetchLink",value:function(i){return this.prefetched.add(i.href),new Promise(function(e,t){var n=document.createElement("link");n.rel="prefetch",n.href=i.href,n.onload=e,n.onerror=t,document.head.appendChild(n)}).catch(function(){})}},{key:"_prepareUrl",value:function(e){if(null===e||"object"!==(void 0===e?"undefined":r(e))||!1 in e||-1===["http:","https:"].indexOf(e.protocol))return null;var t=e.href.substring(0,this.config.siteUrl.length),n=this._getPathname(e.href,t),i={original:e.href,protocol:e.protocol,origin:t,pathname:n,href:t+n};return this._isLinkOk(i)?i:null}},{key:"_getPathname",value:function(e,t){var n=t?e.substring(this.config.siteUrl.length):e;return n.startsWith("/")||(n="/"+n),this._shouldAddTrailingSlash(n)?n+"/":n}},{key:"_shouldAddTrailingSlash",value:function(e){return this.config.usesTrailingSlash&&!e.endsWith("/")&&!this.regex.fileExt.test(e)}},{key:"_isLinkOk",value:function(e){return null!==e&&"object"===(void 0===e?"undefined":r(e))&&(!this.prefetched.has(e.href)&&e.origin===this.config.siteUrl&&-1===e.href.indexOf("?")&&-1===e.href.indexOf("#")&&!this.regex.excludeUris.test(e.href)&&!this.regex.images.test(e.href))}}],[{key:"run",value:function(){"undefined"!=typeof RocketPreloadLinksConfig&&new n(new RocketBrowserCompatibilityChecker({capture:!0,passive:!0}),RocketPreloadLinksConfig).init()}}]),n}();t.run();
}());
</script>
<script type="rocketlazyloadscript">
(function() {
var expirationDate = new Date();
expirationDate.setTime( expirationDate.getTime() + 31536000 * 1000 );
document.cookie = "pll_language=ru; expires=" + expirationDate.toUTCString() + "; path=/; secure; SameSite=Lax";
}());
</script>
<!-- Exit-Intent Popup -->
<div id="kg-exit-popup" class="kg-exit-overlay" style="display:none;">
<div class="kg-exit-backdrop"></div>
<div class="kg-exit-card">
<button class="kg-exit-close" id="kg-exit-close" aria-label="Fermer">×</button>
<div class="kg-exit-glow"></div>
<div class="kg-exit-content" id="kg-exit-content">
<div class="kg-exit-badge"><i class="fas fa-gift"></i> Avant de partir</div>
<h2 class="kg-exit-title">Attendez ! Votre audit SEO gratuit</h2>
<p class="kg-exit-sub">Avant de partir, téléchargez notre checklist SEO locale — 15 points essentiels pour votre visibilité.</p>
<form class="kg-exit-form" id="kg-exit-form" data-ajax="https://kevin-grillot.fr/wp-admin/admin-ajax.php" data-nonce="619cd3c2a1">
<input type="text" name="kg_lm_prenom" placeholder="Votre prénom" required autocomplete="given-name" class="kg-exit-input">
<input type="email" name="kg_lm_email" placeholder="Votre email" required autocomplete="email" class="kg-exit-input">
<div style="position:absolute;left:-9999px;" aria-hidden="true">
<input type="text" name="kg_lm_website" tabindex="-1" autocomplete="off">
</div>
<button type="submit" class="kg-exit-btn">
<i class="fas fa-download"></i> Télécharger gratuitement
</button>
<p class="kg-exit-notice"><i class="fas fa-lock"></i> Aucun spam. Données confidentielles.</p>
</form>
<div class="kg-exit-success" id="kg-exit-success" style="display:none;">
<div style="font-size:2.5rem;color:#22c55e;margin-bottom:1rem;"><i class="fas fa-check-circle"></i></div>
<h3 style="color:#fff;font-size:1.2rem;font-weight:700;margin:0 0 0.5rem;">Merci ! Votre checklist est prête.</h3>
<a href="" class="kg-exit-download" id="kg-exit-download" target="_blank" rel="noopener">
<i class="fas fa-file-download"></i> Télécharger la Checklist
</a>
</div>
</div>
</div>
</div>
<style>
.kg-exit-overlay {
position: fixed; inset: 0; z-index: 99999;
display: flex; align-items: center; justify-content: center;
opacity: 0; transition: opacity 0.3s ease;
}
.kg-exit-overlay.visible { opacity: 1; }
.kg-exit-backdrop {
position: absolute; inset: 0;
background: rgba(0,0,0,0.75); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.kg-exit-card {
position: relative; z-index: 1; max-width: 520px; width: 90%;
background: rgba(12,12,24,0.95); border: 1px solid rgba(255,255,255,0.08);
border-radius: 1.25rem; padding: 2.5rem 2rem; overflow: hidden;
box-shadow: 0 24px 64px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.05);
transform: translateY(20px) scale(0.95); transition: transform 0.3s ease;
}
.kg-exit-overlay.visible .kg-exit-card { transform: translateY(0) scale(1); }
.kg-exit-close {
position: absolute; top: 1rem; right: 1rem; z-index: 2;
background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
color: #9ca3af; font-size: 1.5rem; width: 36px; height: 36px;
border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center;
transition: background 0.2s, color 0.2s; line-height: 1;
}
.kg-exit-close:hover { background: rgba(255,255,255,0.1); color: #fff; }
.kg-exit-glow {
position: absolute; top: -50px; left: 50%; transform: translateX(-50%);
width: 200px; height: 200px; background: #2563eb; opacity: 0.1;
border-radius: 50%; filter: blur(80px); pointer-events: none;
}
.kg-exit-content { position: relative; z-index: 1; text-align: center; }
.kg-exit-badge {
display: inline-flex; align-items: center; gap: 0.4rem;
background: rgba(37,99,235,0.1); color: #2563eb;
font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
padding: 0.4rem 1rem; border-radius: 999px; margin-bottom: 1rem;
border: 1px solid rgba(37,99,235,0.2);
}
.kg-exit-title { color: #fff; font-size: 1.5rem; font-weight: 800; line-height: 1.2; margin: 0 0 0.75rem; font-family: 'Outfit', sans-serif; }
.kg-exit-sub { color: #9ca3af; font-size: 0.9rem; margin: 0 0 1.5rem; line-height: 1.5; }
.kg-exit-form { display: flex; flex-direction: column; gap: 0.75rem; position: relative; }
.kg-exit-input {
padding: 0.85rem 1rem; border-radius: 0.6rem;
border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.04);
color: #e5e7eb; font-size: 0.9rem; outline: none; transition: border-color 0.2s;
width: 100%; box-sizing: border-box;
}
.kg-exit-input:focus { border-color: #2563eb; }
.kg-exit-input::placeholder { color: #6b7280; }
.kg-exit-btn {
padding: 0.9rem 1.5rem; border: none; border-radius: 0.6rem;
background: #2563eb; color: #fff; font-size: 0.95rem; font-weight: 700;
cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
transition: opacity 0.2s, transform 0.2s; width: 100%;
}
.kg-exit-btn:hover { opacity: 0.9; transform: translateY(-1px); }
.kg-exit-btn:disabled { opacity: 0.5; cursor: wait; }
.kg-exit-notice { font-size: 0.7rem; color: #4b5563; text-align: center; margin: 0; }
.kg-exit-download {
display: inline-flex; align-items: center; gap: 0.5rem;
padding: 0.85rem 2rem; border-radius: 0.6rem; margin-top: 1rem;
background: #2563eb; color: #fff; font-weight: 700; font-size: 0.95rem;
text-decoration: none; transition: opacity 0.2s;
}
.kg-exit-download:hover { opacity: 0.9; color: #fff; }
@media(max-width:480px) {
.kg-exit-card { padding: 2rem 1.25rem; }
.kg-exit-title { font-size: 1.25rem; }
}
</style>
<script type="rocketlazyloadscript">
(function(){
var popup = document.getElementById('kg-exit-popup');
if(!popup) return;
var shown = false;
function showPopup(){
if(shown) return;
if(sessionStorage.getItem('kg_exit_shown')) return;
if(sessionStorage.getItem('kg_lm_filled')) return;
if(window.location.pathname.indexOf('me-contacter') !== -1) return;
shown = true;
sessionStorage.setItem('kg_exit_shown', '1');
popup.style.display = 'flex';
requestAnimationFrame(function(){
requestAnimationFrame(function(){
popup.classList.add('visible');
});
});
}
function hidePopup(){
popup.classList.remove('visible');
setTimeout(function(){ popup.style.display = 'none'; }, 300);
}
// Desktop only: mouseleave
if(window.innerWidth > 768){
document.addEventListener('mouseleave', function(e){
if(e.clientY < 5) showPopup();
});
}
document.getElementById('kg-exit-close').addEventListener('click', hidePopup);
popup.querySelector('.kg-exit-backdrop').addEventListener('click', hidePopup);
document.addEventListener('keydown', function(e){
if(e.key === 'Escape' && popup.classList.contains('visible')) hidePopup();
});
// Form submit
var form = document.getElementById('kg-exit-form');
form.addEventListener('submit', function(e){
e.preventDefault();
var btn = form.querySelector('.kg-exit-btn');
btn.disabled = true;
btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Envoi...';
var fd = new FormData(form);
fd.append('action', 'kg_lead_magnet_submit');
fd.append('nonce', form.dataset.nonce);
fetch(form.dataset.ajax, { method: 'POST', body: fd })
.then(function(r){ return r.json(); })
.then(function(data){
if(data.success){
form.style.display = 'none';
var s = document.getElementById('kg-exit-success');
s.style.display = 'block';
document.getElementById('kg-exit-download').href = data.data.download_url;
sessionStorage.setItem('kg_lm_filled', '1');
} else {
btn.disabled = false;
btn.innerHTML = '<i class="fas fa-download"></i> T\u00e9l\u00e9charger gratuitement';
alert(data.data || 'Erreur.');
}
})
.catch(function(){
btn.disabled = false;
btn.innerHTML = '<i class="fas fa-download"></i> T\u00e9l\u00e9charger gratuitement';
alert('Erreur reseau.');
});
});
})();
</script>
<script>window.lazyLoadOptions=[{elements_selector:"img[data-lazy-src],.rocket-lazyload,iframe[data-lazy-src]",data_src:"lazy-src",data_srcset:"lazy-srcset",data_sizes:"lazy-sizes",class_loading:"lazyloading",class_loaded:"lazyloaded",threshold:300,callback_loaded:function(element){if(element.tagName==="IFRAME"&&element.dataset.rocketLazyload=="fitvidscompatible"){if(element.classList.contains("lazyloaded")){if(typeof window.jQuery!="undefined"){if(jQuery.fn.fitVids){jQuery(element).parent().fitVids()}}}}}},{elements_selector:".rocket-lazyload",data_src:"lazy-src",data_srcset:"lazy-srcset",data_sizes:"lazy-sizes",class_loading:"lazyloading",class_loaded:"lazyloaded",threshold:300,}];window.addEventListener('LazyLoad::Initialized',function(e){var lazyLoadInstance=e.detail.instance;if(window.MutationObserver){var observer=new MutationObserver(function(mutations){var image_count=0;var iframe_count=0;var rocketlazy_count=0;mutations.forEach(function(mutation){for(var i=0;i<mutation.addedNodes.length;i++){if(typeof mutation.addedNodes[i].getElementsByTagName!=='function'){continue}
if(typeof mutation.addedNodes[i].getElementsByClassName!=='function'){continue}
images=mutation.addedNodes[i].getElementsByTagName('img');is_image=mutation.addedNodes[i].tagName=="IMG";iframes=mutation.addedNodes[i].getElementsByTagName('iframe');is_iframe=mutation.addedNodes[i].tagName=="IFRAME";rocket_lazy=mutation.addedNodes[i].getElementsByClassName('rocket-lazyload');image_count+=images.length;iframe_count+=iframes.length;rocketlazy_count+=rocket_lazy.length;if(is_image){image_count+=1}
if(is_iframe){iframe_count+=1}}});if(image_count>0||iframe_count>0||rocketlazy_count>0){lazyLoadInstance.update()}});var b=document.getElementsByTagName("body")[0];var config={childList:!0,subtree:!0};observer.observe(b,config)}},!1)</script><script data-no-minify="1" async src="https://kevin-grillot.fr/wp-content/plugins/wp-rocket/assets/js/lazyload/17.5/lazyload.min.js"></script><script>function lazyLoadThumb(e){var t='<img data-lazy-src="https://i.ytimg.com/vi/ID/hqdefault.jpg" alt="" width="480" height="360"><noscript><img src="https://i.ytimg.com/vi/ID/hqdefault.jpg" alt="" width="480" height="360"></noscript>',a='<button class="play" aria-label="play Youtube video"></button>';return t.replace("ID",e)+a}function lazyLoadYoutubeIframe(){var e=document.createElement("iframe"),t="ID?autoplay=1";t+=0===this.parentNode.dataset.query.length?'':'&'+this.parentNode.dataset.query;e.setAttribute("src",t.replace("ID",this.parentNode.dataset.src)),e.setAttribute("frameborder","0"),e.setAttribute("allowfullscreen","1"),e.setAttribute("allow", "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"),this.parentNode.parentNode.replaceChild(e,this.parentNode)}document.addEventListener("DOMContentLoaded",function(){var e,t,p,a=document.getElementsByClassName("rll-youtube-player");for(t=0;t<a.length;t++)e=document.createElement("div"),e.setAttribute("data-id",a[t].dataset.id),e.setAttribute("data-query", a[t].dataset.query),e.setAttribute("data-src", a[t].dataset.src),e.innerHTML=lazyLoadThumb(a[t].dataset.id),a[t].appendChild(e),p=e.querySelector('.play'),p.onclick=lazyLoadYoutubeIframe});</script>
</body>
</html>
<!-- This website is like a Rocket, isn't it? Performance optimized by WP Rocket. Learn more: https://wp-rocket.me --> 
