{"id":1631,"date":"2026-04-05T06:06:39","date_gmt":"2026-04-05T06:06:39","guid":{"rendered":"https:\/\/www.mogacode.ma\/blog\/"},"modified":"2026-05-23T16:06:13","modified_gmt":"2026-05-23T14:02:33","slug":"blog","status":"publish","type":"page","link":"https:\/\/www.mogacode.ma\/en\/blog\/","title":{"rendered":"Blog \u2014 WordPress, SEO &amp; IA"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1631\" class=\"elementor elementor-1631 elementor-bc-flex-widget\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-blogcnt e-con-full e-flex e-con e-parent\" data-id=\"blogcnt\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-blogwdg elementor-widget elementor-widget-html\" data-id=\"blogwdg\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n\/* ==========================================================\n   MOGA BLOG \u2014 Magazine \u00e9ditorial bento asym\u00e9trique\n   ========================================================== *\/\n.mblog-wrap {\n  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n  background: #0F2237;\n  color: #e8ecf0;\n  padding: 80px 24px 120px;\n  min-height: 100vh;\n  position: relative;\n  overflow: hidden;\n}\n\n\/* Decorative grain texture *\/\n.mblog-wrap::before {\n  content: '';\n  position: absolute; inset: 0;\n  background-image:\n    radial-gradient(circle at 15% 20%, rgba(201,168,76,0.08) 0%, transparent 35%),\n    radial-gradient(circle at 85% 70%, rgba(37,211,102,0.06) 0%, transparent 40%),\n    radial-gradient(circle at 50% 100%, rgba(139,92,246,0.05) 0%, transparent 50%);\n  pointer-events: none;\n}\n\n.mblog-inner {\n  max-width: 1400px;\n  margin: 0 auto;\n  position: relative;\n}\n\n\/* === MASTHEAD === *\/\n.mblog-mast {\n  display: flex;\n  align-items: flex-end;\n  justify-content: space-between;\n  margin-bottom: 64px;\n  border-bottom: 1px solid rgba(255,255,255,0.08);\n  padding-bottom: 28px;\n}\n.mblog-mast-left { max-width: 720px; }\n.mblog-eyebrow {\n  display: inline-flex;\n  align-items: center;\n  gap: 10px;\n  font-size: 11px;\n  font-weight: 700;\n  letter-spacing: 2.5px;\n  text-transform: uppercase;\n  color: #C9A84C;\n  margin-bottom: 18px;\n}\n.mblog-eyebrow::before {\n  content: ''; width: 32px; height: 1px; background: #C9A84C;\n}\n.mblog-title {\n  font-family: 'Playfair Display', Georgia, serif;\n  font-size: clamp(48px, 7vw, 84px);\n  font-weight: 900;\n  line-height: 0.95;\n  letter-spacing: -0.025em;\n  margin: 0 0 20px;\n  color: #fff;\n}\n.mblog-title em {\n  font-style: italic;\n  background: linear-gradient(120deg, #C9A84C 0%, #f0d890 50%, #C9A84C 100%);\n  background-size: 200% auto;\n  -webkit-background-clip: text;\n  background-clip: text;\n  -webkit-text-fill-color: transparent;\n  animation: blogShimmer 6s linear infinite;\n}\n@keyframes blogShimmer {\n  to { background-position: 200% center; }\n}\n.mblog-deck {\n  font-size: 17px;\n  color: rgba(255,255,255,0.65);\n  line-height: 1.55;\n  max-width: 560px;\n}\n.mblog-mast-right {\n  text-align: right;\n  font-size: 12px;\n  color: rgba(255,255,255,0.4);\n  line-height: 1.6;\n  white-space: nowrap;\n}\n.mblog-mast-right strong { color: rgba(255,255,255,0.7); font-weight: 600; }\n\n\/* === FILTERS === *\/\n.mblog-filters {\n  display: flex;\n  gap: 10px;\n  flex-wrap: wrap;\n  margin-bottom: 48px;\n  padding-bottom: 8px;\n}\n.mblog-filter {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 16px;\n  border-radius: 100px;\n  font-size: 13px;\n  font-weight: 600;\n  color: rgba(255,255,255,0.6);\n  background: rgba(255,255,255,0.04);\n  border: 1px solid rgba(255,255,255,0.08);\n  cursor: pointer;\n  transition: all .25s cubic-bezier(.4,0,.2,1);\n  white-space: nowrap;\n}\n.mblog-filter:hover {\n  color: #fff;\n  background: rgba(255,255,255,0.08);\n  border-color: rgba(255,255,255,0.18);\n  transform: translateY(-1px);\n}\n.mblog-filter.active {\n  background: rgba(201,168,76,0.18);\n  border-color: rgba(201,168,76,0.5);\n  color: #f0d890;\n  box-shadow: 0 0 18px rgba(201,168,76,0.3);\n}\n.mblog-filter-count {\n  font-size: 11px;\n  opacity: 0.6;\n  font-weight: 500;\n}\n\n\/* === BENTO GRID === *\/\n.mblog-grid {\n  display: grid;\n  grid-template-columns: repeat(6, 1fr);\n  grid-auto-rows: 200px;\n  gap: 16px;\n}\n@media (max-width: 1024px) {\n  .mblog-grid { grid-template-columns: repeat(4, 1fr); }\n}\n@media (max-width: 700px) {\n  .mblog-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 220px; }\n}\n@media (max-width: 480px) {\n  .mblog-grid { grid-template-columns: 1fr; grid-auto-rows: 240px; }\n  .mblog-wrap { padding: 60px 16px 100px; }\n}\n\n\/* === TILE BASE === *\/\n.mblog-tile {\n  position: relative;\n  background: rgba(255,255,255,0.03);\n  border: 1px solid rgba(255,255,255,0.08);\n  border-radius: 22px;\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n  padding: 28px;\n  text-decoration: none !important;\n  transition: transform .4s cubic-bezier(.16,1,.3,1), border-color .25s, box-shadow .35s;\n  cursor: pointer;\n  opacity: 0;\n  transform: translateY(28px);\n  isolation: isolate;\n}\n.mblog-tile.in {\n  opacity: 1;\n  transform: translateY(0);\n}\n.mblog-tile::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  background: radial-gradient(circle at 30% 0%, var(--tile-glow, transparent) 0%, transparent 60%);\n  opacity: 0.7;\n  pointer-events: none;\n  z-index: 0;\n  transition: opacity .35s;\n}\n.mblog-tile::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  background:\n    linear-gradient(180deg, transparent 50%, rgba(15,34,55,0.95) 100%);\n  pointer-events: none;\n  z-index: 1;\n}\n.mblog-tile > * { position: relative; z-index: 2; }\n\n.mblog-tile:hover {\n  transform: translateY(-6px) rotateX(2deg);\n  border-color: var(--tile-border, rgba(255,255,255,0.2));\n  box-shadow:\n    0 24px 60px -20px rgba(0,0,0,0.5),\n    0 0 0 1px var(--tile-border, rgba(255,255,255,0.1)),\n    0 0 30px -5px var(--tile-glow, transparent);\n}\n.mblog-tile:hover::before { opacity: 1; }\n\n\/* Pattern decoration *\/\n.mblog-tile-deco {\n  position: absolute;\n  top: 0; right: 0;\n  width: 50%; height: 50%;\n  pointer-events: none;\n  z-index: 0;\n  opacity: 0.06;\n  background:\n    radial-gradient(circle 2px at 10px 10px, currentColor 1px, transparent 1px) 0 0 \/ 20px 20px,\n    radial-gradient(circle 2px at 10px 10px, currentColor 1px, transparent 1px) 10px 10px \/ 20px 20px;\n  color: var(--tile-accent, #fff);\n}\n\n\/* === TILE SIZES (asymmetric bento) === *\/\n.mblog-tile.size-hero      { grid-column: span 6; grid-row: span 3; padding: 56px 48px; }\n.mblog-tile.size-large     { grid-column: span 4; grid-row: span 2; padding: 36px 32px; }\n.mblog-tile.size-tall      { grid-column: span 2; grid-row: span 2; padding: 28px; }\n.mblog-tile.size-wide      { grid-column: span 4; grid-row: span 1; padding: 24px 28px; }\n.mblog-tile.size-square    { grid-column: span 2; grid-row: span 1; padding: 24px; }\n.mblog-tile.size-text      { grid-column: span 3; grid-row: span 2; padding: 32px; }\n\n@media (max-width: 1024px) {\n  .mblog-tile.size-hero    { grid-column: span 4; }\n  .mblog-tile.size-large   { grid-column: span 4; }\n  .mblog-tile.size-tall    { grid-column: span 2; }\n  .mblog-tile.size-wide    { grid-column: span 4; }\n  .mblog-tile.size-square  { grid-column: span 2; }\n  .mblog-tile.size-text    { grid-column: span 4; }\n}\n@media (max-width: 700px) {\n  .mblog-tile.size-hero,\n  .mblog-tile.size-large,\n  .mblog-tile.size-wide,\n  .mblog-tile.size-text    { grid-column: span 2; }\n  .mblog-tile.size-tall,\n  .mblog-tile.size-square  { grid-column: span 1; }\n}\n@media (max-width: 480px) {\n  .mblog-tile               { grid-column: span 1 !important; }\n}\n\n\/* === TILE CONTENT === *\/\n.mblog-cat {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  align-self: flex-start;\n  padding: 4px 10px;\n  border-radius: 100px;\n  font-size: 10.5px;\n  font-weight: 700;\n  letter-spacing: 1.5px;\n  text-transform: uppercase;\n  background: var(--tile-cat-bg, rgba(255,255,255,0.1));\n  color: var(--tile-cat-fg, #fff);\n  border: 1px solid var(--tile-cat-border, rgba(255,255,255,0.18));\n  margin-bottom: 14px;\n}\n.mblog-cat-dot {\n  width: 5px; height: 5px;\n  border-radius: 50%;\n  background: currentColor;\n}\n.mblog-headline {\n  font-family: 'Playfair Display', Georgia, serif;\n  font-weight: 800;\n  line-height: 1.05;\n  letter-spacing: -0.02em;\n  color: #fff;\n  margin: 0 0 12px;\n  display: -webkit-box;\n  -webkit-line-clamp: 4;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n.mblog-tile.size-hero    .mblog-headline { font-size: clamp(32px, 4.5vw, 56px); -webkit-line-clamp: 3; }\n.mblog-tile.size-large   .mblog-headline { font-size: clamp(24px, 2.8vw, 34px); }\n.mblog-tile.size-tall    .mblog-headline { font-size: 20px; }\n.mblog-tile.size-wide    .mblog-headline { font-size: 19px; -webkit-line-clamp: 2; }\n.mblog-tile.size-square  .mblog-headline { font-size: 17px; -webkit-line-clamp: 3; }\n.mblog-tile.size-text    .mblog-headline { font-size: 26px; }\n\n.mblog-excerpt {\n  font-size: 14px;\n  line-height: 1.5;\n  color: rgba(255,255,255,0.65);\n  margin: 0 0 16px;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n.mblog-tile.size-hero    .mblog-excerpt { font-size: 17px; -webkit-line-clamp: 3; max-width: 600px; }\n.mblog-tile.size-large   .mblog-excerpt { font-size: 15px; -webkit-line-clamp: 2; }\n.mblog-tile.size-square  .mblog-excerpt,\n.mblog-tile.size-wide    .mblog-excerpt { display: none; }\n.mblog-tile.size-text    .mblog-excerpt { -webkit-line-clamp: 4; font-size: 14px; }\n\n.mblog-meta {\n  display: flex;\n  align-items: center;\n  gap: 14px;\n  font-size: 11.5px;\n  font-weight: 500;\n  color: rgba(255,255,255,0.45);\n  letter-spacing: 0.3px;\n}\n.mblog-meta-sep {\n  width: 3px; height: 3px;\n  border-radius: 50%;\n  background: rgba(255,255,255,0.25);\n}\n.mblog-arrow {\n  margin-left: auto;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px; height: 32px;\n  border-radius: 50%;\n  background: rgba(255,255,255,0.06);\n  color: rgba(255,255,255,0.5);\n  transition: all .25s;\n}\n.mblog-tile:hover .mblog-arrow {\n  background: var(--tile-accent, #fff);\n  color: #0F2237;\n  transform: translate(2px, -2px) rotate(-45deg);\n}\n\n\/* === LOADING \/ EMPTY === *\/\n.mblog-loading {\n  grid-column: 1 \/ -1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 80px 0;\n  color: rgba(255,255,255,0.4);\n  font-size: 14px;\n  letter-spacing: 1px;\n}\n.mblog-loading::before {\n  content: '';\n  width: 16px; height: 16px;\n  border: 2px solid rgba(255,255,255,0.15);\n  border-top-color: #C9A84C;\n  border-radius: 50%;\n  margin-right: 12px;\n  animation: blogSpin .8s linear infinite;\n}\n@keyframes blogSpin { to { transform: rotate(360deg); } }\n\n.mblog-empty {\n  grid-column: 1 \/ -1;\n  text-align: center;\n  padding: 80px 0;\n  color: rgba(255,255,255,0.5);\n}\n\n\/* === FOOTER NOTE === *\/\n.mblog-footnote {\n  margin-top: 80px;\n  text-align: center;\n  font-size: 13px;\n  color: rgba(255,255,255,0.35);\n  font-style: italic;\n}\n\n\/* === CATEGORY COLORS === *\/\n.cat-wordpress { --tile-glow: rgba(33,117,155,0.4);  --tile-border: rgba(33,117,155,0.5);  --tile-accent: #5cb3d6; --tile-cat-bg: rgba(33,117,155,0.18); --tile-cat-fg: #5cb3d6; --tile-cat-border: rgba(33,117,155,0.45); }\n.cat-seo       { --tile-glow: rgba(201,168,76,0.4);  --tile-border: rgba(201,168,76,0.5);  --tile-accent: #f0d890; --tile-cat-bg: rgba(201,168,76,0.18); --tile-cat-fg: #f0d890; --tile-cat-border: rgba(201,168,76,0.45); }\n.cat-securite  { --tile-glow: rgba(239,68,68,0.4);   --tile-border: rgba(239,68,68,0.5);   --tile-accent: #f87171; --tile-cat-bg: rgba(239,68,68,0.18);  --tile-cat-fg: #f87171; --tile-cat-border: rgba(239,68,68,0.45); }\n.cat-ia        { --tile-glow: rgba(139,92,246,0.4);  --tile-border: rgba(139,92,246,0.5);  --tile-accent: #a78bfa; --tile-cat-bg: rgba(139,92,246,0.18); --tile-cat-fg: #a78bfa; --tile-cat-border: rgba(139,92,246,0.45); }\n.cat-whatsapp  { --tile-glow: rgba(37,211,102,0.4);  --tile-border: rgba(37,211,102,0.5);  --tile-accent: #4ade80; --tile-cat-bg: rgba(37,211,102,0.18); --tile-cat-fg: #4ade80; --tile-cat-border: rgba(37,211,102,0.45); }\n.cat-default   { --tile-glow: rgba(255,255,255,0.15); --tile-border: rgba(255,255,255,0.25); --tile-accent: #fff;    --tile-cat-bg: rgba(255,255,255,0.1);  --tile-cat-fg: #fff;    --tile-cat-border: rgba(255,255,255,0.2); }\n<\/style>\n\n<div class=\"mblog-wrap\">\n  <div class=\"mblog-inner\">\n\n    <!-- MASTHEAD -->\n    <header class=\"mblog-mast\">\n      <div class=\"mblog-mast-left\">\n        <div class=\"mblog-eyebrow\">Le journal MogaCode<\/div>\n        <h1 class=\"mblog-title\">Notes <em>de terrain<\/em><\/h1>\n        <p class=\"mblog-deck\">Retours d'exp\u00e9rience, analyses, m\u00e9thodes \u2014 sur WordPress, le SEO, l'automatisation WhatsApp, l'IA appliqu\u00e9e au m\u00e9tier d'agence, et la s\u00e9curit\u00e9 des sites.<\/p>\n      <\/div>\n      <div class=\"mblog-mast-right\">\n        <strong id=\"mblog-count\">\u2026<\/strong> articles<br>\n        Mise \u00e0 jour <strong id=\"mblog-lastdate\">\u2026<\/strong>\n      <\/div>\n    <\/header>\n\n    <!-- FILTERS -->\n    <nav class=\"mblog-filters\" id=\"mblog-filters\">\n      <button class=\"mblog-filter active\" data-cat=\"all\">Tous <span class=\"mblog-filter-count\" id=\"cnt-all\"><\/span><\/button>\n      <!-- Cat\u00e9gories ajout\u00e9es dynamiquement -->\n    <\/nav>\n\n    <!-- BENTO GRID -->\n    <div class=\"mblog-grid\" id=\"mblog-grid\">\n      <div class=\"mblog-loading\">Chargement des articles\u2026<\/div>\n    <\/div>\n\n    <p class=\"mblog-footnote\">Pas de newsletter, pas de tracking. Juste des notes que nous \u00e9crivons quand un sujet vaut le d\u00e9tour.<\/p>\n\n  <\/div>\n<\/div>\n\n<script>\n(function(){\n  var siteUrl = 'https:\/\/www.mogacode.ma';\n  var grid = document.getElementById('mblog-grid');\n  var filtersEl = document.getElementById('mblog-filters');\n  var countEl = document.getElementById('mblog-count');\n  var lastDateEl = document.getElementById('mblog-lastdate');\n  var allPosts = [];\n\n  \/\/ Mapping cat\u00e9gorie \u2192 CSS class\n  function catKey(name) {\n    if (!name) return 'default';\n    var n = name.toLowerCase();\n    if (n.indexOf('wordpress') !== -1 || n.indexOf('elementor') !== -1) return 'wordpress';\n    if (n.indexOf('seo') !== -1 || n.indexOf('aeo') !== -1 || n.indexOf('geo') !== -1 || n.indexOf('r\u00e9f\u00e9rencement') !== -1) return 'seo';\n    if (n.indexOf('s\u00e9cur') !== -1 || n.indexOf('secur') !== -1 || n.indexOf('rescue') !== -1 || n.indexOf('hack') !== -1 || n.indexOf('pirat') !== -1) return 'securite';\n    if (n.indexOf('ia') !== -1 || n.indexOf('ai') !== -1 || n.indexOf('claude') !== -1 || n.indexOf('chatgpt') !== -1) return 'ia';\n    if (n.indexOf('whatsapp') !== -1 || n.indexOf('messag') !== -1) return 'whatsapp';\n    return 'default';\n  }\n\n  \/\/ D\u00e9tection automatique de la cat\u00e9gorie depuis le titre\/slug si pas de cat\u00e9gorie WP\n  function detectCatFromText(title, slug) {\n    var s = (title + ' ' + slug).toLowerCase();\n    if (s.indexOf('wordpress') !== -1 || s.indexOf('elementor') !== -1) return 'WordPress';\n    if (s.indexOf('seo') !== -1 || s.indexOf('aeo') !== -1 || s.indexOf('overviews') !== -1 || s.indexOf('google') !== -1) return 'SEO';\n    if (s.indexOf('pirat') !== -1 || s.indexOf('s\u00e9cur') !== -1 || s.indexOf('infect') !== -1 || s.indexOf('rescue') !== -1) return 'S\u00e9curit\u00e9';\n    if (s.indexOf('ia ') !== -1 || s.indexOf('ai ') !== -1 || s.indexOf(' ia') !== -1 || s.indexOf('claude') !== -1) return 'IA';\n    if (s.indexOf('whatsapp') !== -1 || s.indexOf('automatisation') !== -1) return 'WhatsApp';\n    if (s.indexOf('follower') !== -1 || s.indexOf('instagram') !== -1 || s.indexOf('social') !== -1) return 'Social';\n    return 'Notes';\n  }\n\n  function decodeEntities(s) {\n    if (!s) return '';\n    var ta = document.createElement('textarea');\n    ta.innerHTML = s;\n    return ta.value;\n  }\n  function stripTags(s) {\n    var text = (s || '').replace(\/\\[[^\\]]+\\]\/g, '').replace(\/<[^>]+>\/g, '').replace(\/\\s+\/g, ' ').trim();\n    return decodeEntities(text);\n  }\n\n  function readTime(text) {\n    var words = stripTags(text).split(\/\\s+\/).length;\n    return Math.max(1, Math.round(words \/ 230));\n  }\n\n  function fmtDate(iso) {\n    if (!iso) return '';\n    var d = new Date(iso);\n    var months = ['janv.','f\u00e9vr.','mars','avr.','mai','juin','juil.','ao\u00fbt','sept.','oct.','nov.','d\u00e9c.'];\n    return d.getDate() + ' ' + months[d.getMonth()] + ' ' + d.getFullYear();\n  }\n\n  \/\/ Pattern de tailles bento (cycle stable ind\u00e9pendamment du nombre d'articles)\n  var sizes = ['size-hero', 'size-large', 'size-tall', 'size-tall', 'size-wide', 'size-text', 'size-square', 'size-square', 'size-large', 'size-square', 'size-tall'];\n\n  function tileHtml(p, idx) {\n    var size = sizes[idx % sizes.length];\n    if (idx === 0) size = 'size-hero';\n    var cat = p._cat || 'Notes';\n    var ckey = catKey(cat);\n    var minutes = readTime(p.excerpt && p.excerpt.rendered || p.content && p.content.rendered || '');\n    var excerpt = stripTags(p.excerpt && p.excerpt.rendered || '');\n    if (excerpt.length > 220) excerpt = excerpt.slice(0, 217) + '\u2026';\n    return '<a href=\"' + p.link + '\" class=\"mblog-tile ' + size + ' cat-' + ckey + '\" data-cat=\"' + cat + '\">' +\n      '<span class=\"mblog-tile-deco\"><\/span>' +\n      '<span class=\"mblog-cat\"><span class=\"mblog-cat-dot\"><\/span>' + cat + '<\/span>' +\n      '<h2 class=\"mblog-headline\">' + stripTags(p.title.rendered) + '<\/h2>' +\n      '<p class=\"mblog-excerpt\">' + excerpt + '<\/p>' +\n      '<div class=\"mblog-meta\">' +\n        '<span>' + fmtDate(p.date) + '<\/span>' +\n        '<span class=\"mblog-meta-sep\"><\/span>' +\n        '<span>' + minutes + ' min de lecture<\/span>' +\n        '<span class=\"mblog-arrow\">' +\n          '<svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"12 5 19 12 12 19\"\/><\/svg>' +\n        '<\/span>' +\n      '<\/div>' +\n    '<\/a>';\n  }\n\n  function render(posts) {\n    if (!posts.length) {\n      grid.innerHTML = '<div class=\"mblog-empty\">Aucun article dans cette cat\u00e9gorie pour le moment.<\/div>';\n      return;\n    }\n    grid.innerHTML = posts.map(function(p, i){ return tileHtml(p, i); }).join('');\n    \/\/ Reveal anim\n    var tiles = grid.querySelectorAll('.mblog-tile');\n    if ('IntersectionObserver' in window) {\n      var io = new IntersectionObserver(function(entries){\n        entries.forEach(function(e, idx){\n          if (e.isIntersecting) {\n            setTimeout(function(){ e.target.classList.add('in'); }, idx * 60);\n            io.unobserve(e.target);\n          }\n        });\n      }, { threshold: 0.05 });\n      tiles.forEach(function(t){ io.observe(t); });\n    } else {\n      tiles.forEach(function(t){ t.classList.add('in'); });\n    }\n  }\n\n  function buildFilters(posts) {\n    var counts = {};\n    posts.forEach(function(p){\n      var c = p._cat;\n      counts[c] = (counts[c] || 0) + 1;\n    });\n    var cats = Object.keys(counts).sort();\n    cats.forEach(function(c){\n      var ckey = catKey(c);\n      var btn = document.createElement('button');\n      btn.className = 'mblog-filter cat-' + ckey;\n      btn.dataset.cat = c;\n      btn.innerHTML = c + ' <span class=\"mblog-filter-count\">' + counts[c] + '<\/span>';\n      filtersEl.appendChild(btn);\n    });\n    document.getElementById('cnt-all').textContent = posts.length;\n\n    filtersEl.addEventListener('click', function(e){\n      var btn = e.target.closest('.mblog-filter');\n      if (!btn) return;\n      filtersEl.querySelectorAll('.mblog-filter').forEach(function(b){ b.classList.remove('active'); });\n      btn.classList.add('active');\n      var cat = btn.dataset.cat;\n      var filtered = (cat === 'all') ? allPosts : allPosts.filter(function(p){ return p._cat === cat; });\n      render(filtered);\n    });\n  }\n\n  function load() {\n    fetch(siteUrl + '\/wp-json\/wp\/v2\/posts?per_page=30&_fields=id,title,excerpt,date,link,slug,categories,_embedded&_embed=wp:term')\n      .then(function(r){ return r.json(); })\n      .then(function(posts){\n        if (!Array.isArray(posts) || !posts.length) {\n          grid.innerHTML = '<div class=\"mblog-empty\">Pas encore d\\'articles publi\u00e9s.<\/div>';\n          return;\n        }\n        \/\/ Enrichir chaque post avec sa cat\u00e9gorie\n        posts.forEach(function(p){\n          var catName = null;\n          if (p._embedded && p._embedded['wp:term'] && p._embedded['wp:term'][0]) {\n            var terms = p._embedded['wp:term'][0];\n            for (var i = 0; i < terms.length; i++) {\n              if (terms[i].name && terms[i].name.toLowerCase() !== 'non class\u00e9' && terms[i].name.toLowerCase() !== 'uncategorized') {\n                catName = terms[i].name;\n                break;\n              }\n            }\n          }\n          if (!catName) catName = detectCatFromText(p.title.rendered, p.slug);\n          p._cat = catName;\n        });\n        allPosts = posts;\n        countEl.textContent = posts.length;\n        lastDateEl.textContent = fmtDate(posts[0].date);\n        buildFilters(posts);\n        render(posts);\n      })\n      .catch(function(err){\n        console.error('Blog fetch error:', err);\n        grid.innerHTML = '<div class=\"mblog-empty\">Impossible de charger les articles pour le moment.<\/div>';\n      });\n  }\n\n  if (document.readyState === 'loading') {\n    document.addEventListener('DOMContentLoaded', load);\n  } else {\n    load();\n  }\n})();\n<\/script>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"","protected":false},"author":0,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-1631","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.5 (Yoast SEO v27.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Blog \u2014 WordPress, SEO &amp; IA au Maroc | MogaCode<\/title>\n<meta name=\"description\" content=\"Articles sur WordPress, SEO et intelligence artificielle par MogaCode \u2014 agence digitale \u00e0 Essaouira, Maroc. Conseils pratiques pour PME et entrepreneurs.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.mogacode.ma\/en\/blog\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Blog \u2014 WordPress, SEO &amp; IA\" \/>\n<meta property=\"og:description\" content=\"Articles sur WordPress, SEO et intelligence artificielle par MogaCode \u2014 agence digitale \u00e0 Essaouira, Maroc. Conseils pratiques pour PME et entrepreneurs.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.mogacode.ma\/en\/blog\/\" \/>\n<meta property=\"og:site_name\" content=\"Mogacode\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/mogacode\" \/>\n<meta property=\"article:modified_time\" content=\"2026-05-23T14:02:33+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@mogacode\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Blog \u2014 WordPress, SEO & IA au Maroc | MogaCode","description":"Articles sur WordPress, SEO et intelligence artificielle par MogaCode \u2014 agence digitale \u00e0 Essaouira, Maroc. Conseils pratiques pour PME et entrepreneurs.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.mogacode.ma\/en\/blog\/","og_locale":"en_US","og_type":"article","og_title":"Blog \u2014 WordPress, SEO &amp; IA","og_description":"Articles sur WordPress, SEO et intelligence artificielle par MogaCode \u2014 agence digitale \u00e0 Essaouira, Maroc. Conseils pratiques pour PME et entrepreneurs.","og_url":"https:\/\/www.mogacode.ma\/en\/blog\/","og_site_name":"Mogacode","article_publisher":"https:\/\/www.facebook.com\/mogacode","article_modified_time":"2026-05-23T14:02:33+00:00","twitter_card":"summary_large_image","twitter_site":"@mogacode","schema":{"@context":"https:\/\/schema.org","@graph":[]}},"_links":{"self":[{"href":"https:\/\/www.mogacode.ma\/en\/wp-json\/wp\/v2\/pages\/1631","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mogacode.ma\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.mogacode.ma\/en\/wp-json\/wp\/v2\/types\/page"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mogacode.ma\/en\/wp-json\/wp\/v2\/comments?post=1631"}],"version-history":[{"count":2,"href":"https:\/\/www.mogacode.ma\/en\/wp-json\/wp\/v2\/pages\/1631\/revisions"}],"predecessor-version":[{"id":1747,"href":"https:\/\/www.mogacode.ma\/en\/wp-json\/wp\/v2\/pages\/1631\/revisions\/1747"}],"wp:attachment":[{"href":"https:\/\/www.mogacode.ma\/en\/wp-json\/wp\/v2\/media?parent=1631"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}