Mobile-First Indexing

Mi az a Mobile-First Indexing?#

A Mobile-First Indexing azt jelenti, hogy a Google elsősorban a weboldal mobil verzióját használja az indexeléshez és rangsoroláshoz. Korábban a Google a desktop verziót indexelte, és az alapján rangsorolt minden eszközön. 2019 júliusa óta azonban a mobil verzió az elsődleges.

Ez azt jelenti:

• A Google robot (Googlebot) elsősorban mobilként crawlolja az oldaladat
• A mobil verzió tartalma kerül indexelésre
• A mobil verzió alapján történik a rangsorolás (mobil ÉS desktop keresésekben is!)
• A desktop verzió másodlagos lett

Miért történt ez?

2015-ben a mobilról történő keresések száma először meghaladta a desktop kereséseket. Ma már a keresések 60-70%-a mobileszközről történik, ezért a Google prioritássá tette a mobil élményt.

Mobile-First Indexing idővonalas története#

2016. november - Bejelentés#

A Google bejelenti a Mobile-First Indexing tervét:

"We're experimenting with making our index mobile-first."
— Google Webmaster Blog

2018. március - Fokozatos bevezetés#

A Google elkezdi átállítani az első weboldalakat Mobile-First Indexingre. Az átállított oldalak tulajdonosai értesítést kapnak a Google Search Console-ban.

2019. július - Alapértelmezett új oldalaknál#

Minden új weboldal automatikusan Mobile-First Indexing alá kerül induláskor.

2020. szeptember - Teljes átállás#

Az összes weboldal Mobile-First Indexing alá került - nincs több desktop-first indexelés.

2023. december - Desktop Googlebot megszűnik#

A Google bejelentette, hogy a desktop Googlebot user-agent megszűnik - csak mobil Googlebot marad.

Mobile-First vs Desktop-First Indexing#

Desktop-First Indexing (régi módszer):

1. Googlebot crawlolja a DESKTOP verziót
2. Desktop tartalom kerül indexelésre
3. Desktop alapján rangsorol MINDEN eszközön
4. Mobil verzió másodlagos (ha van)

Mobile-First Indexing (jelenlegi módszer):

1. Googlebot crawlolja a MOBIL verziót
2. Mobil tartalom kerül indexelésre
3. Mobil alapján rangsorol MINDEN eszközön
4. Desktop verzió másodlagos (ha van)

Kritikus következmény:

Ha valami csak a desktop verzión van, és nincs a mobil verzión → NEM lesz indexelve!

Példák:

• Tartalom elrejtve mobilon
• Képek lazy load-olva mobilon (helytelenül)
• Strukturált adat csak desktopra implementálva
• Internal linkek csak desktop menüben

Mobilbarát design megközelítések#

1. Responsive Web Design (RWD) - AJÁNLOTT#

Egy HTML kód + CSS Media Query-k

A Google által leginkább ajánlott megoldás.

Hogyan működik:

<!-- Egyetlen HTML minden eszközön -->
<div class="container">
  <h1>Címsor</h1>
  <p>Tartalom...</p>
</div>

/* CSS media query-k */
.container {
  max-width: 1200px; /* Desktop */
}

@media (max-width: 768px) {
  .container {
    max-width: 100%; /* Mobil */
    padding: 15px;
  }
}

Előnyök:

• ✅ Egyetlen URL (SEO egyszerűbb)
• ✅ Nincs duplicate content veszély
• ✅ Könnyebb karbantartás
• ✅ Google ajánlás

Hátrányok:

• ❌ Nagyobb fájlméret (mobil tölti le a desktop CSS-t is)
• ❌ Komplexebb fejlesztés nagy oldalaknál

Meta tag:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

2. Dynamic Serving (Dinamikus kiszolgálás)#

Különböző HTML ugyanazon az URL-en

A szerver detektálja a User-Agent-et (mobil/desktop) és ennek megfelelő HTML-t küld.

Hogyan működik:

Ugyanaz az URL: https://example.com/
│
├─ Desktop User-Agent → Desktop HTML
└─ Mobile User-Agent → Mobile HTML

Előnyök:

• ✅ Egyetlen URL
• ✅ Optimalizált kód minden eszközre

Hátrányok:

• ❌ Server-side detektálás (bonyolult)
• ❌ Caching problémák

HTTP Header szükséges:

Vary: User-Agent

3. Külön mobil URL (m.example.com)#

Két külön URL, két külön HTML

Hogyan működik:

Desktop: https://example.com/
Mobil:   https://m.example.com/

Előnyök:

• ✅ Teljesen optimalizált mobil tapasztalat
• ✅ Könnyebb szerver terhelés kezelés

Hátrányok:

• ❌ Két külön URL → duplicate content veszély
• ❌ Canonical és alternate tag-ek kötelezők
• ❌ Dupla karbantartás
• ❌ Google NEM ajánlja új projekteknél

Canonical és Alternate tag-ek (kötelező!):

Desktop oldal (https://example.com/):

<link rel="alternate" media="only screen and (max-width: 640px)" 
      href="https://m.example.com/">

Mobil oldal (https://m.example.com/):

<link rel="canonical" href="https://example.com/">

Google javaslat: Új projekthez ne használd - menj inkább responsive-val.

Mobile-First Indexing optimalizálási checklist#

1. Tartalom paritás (Content Parity)#

Szabály: Minden tartalom, ami a desktop verzión van, legyen elérhető mobilon is.

Ellenőrizd:

✅ Szöveges tartalom:

• Desktop és mobil verzió szövege azonos
• Nincs tartalom elrejtve mobilon (collapse, accordion mögött rendben van, de legyen elérhető)

✅ Képek:

• Minden kép betöltődik mobilon
• Alt text minden képen
• Lazy loading helyesen implementálva

✅ Videók:

• Lejátszhatók mobilon
• Nem Flash-alapúak

✅ Internal linkek:

• Minden belső link elérhető mobilon
• Navigációs menü működik

Rossz példa:

Desktop:

<div class="desktop-only">
  <h2>Fontos tartalom</h2>
  <p>Ez csak desktop-on látszik...</p>
</div>

CSS:

@media (max-width: 768px) {
  .desktop-only {
    display: none; /* ❌ Google nem látja mobilon! */
  }
}

Jó példa:

<div class="content">
  <h2>Fontos tartalom</h2>
  <p>Ez minden eszközön látszik...</p>
</div>

CSS:

/* Responsive layout módosítások, de a tartalom elérhető */
@media (max-width: 768px) {
  .content {
    font-size: 14px;
    padding: 10px;
  }
}

2. Strukturált adatok (Structured Data)#

Szabály: A strukturált adatok (Schema.org markup) legyen azonos mobilon és desktopon.

Ellenőrizd:

<!-- Desktop ÉS mobil verzión is ugyanez -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Cikk címe",
  "author": {
    "@type": "Person",
    "name": "Szerző"
  },
  "datePublished": "2026-01-20"
}
</script>

Tesztelés:

1. Google Rich Results Test: https://search.google.com/test/rich-results
2. Schema Markup Validator: https://validator.schema.org/

Gyakori hiba:

Strukturált adat csak desktop verzióra implementálva, mobilról hiányzik → Google nem látja!

3. Metadata egyezése#

Szabály: Title, meta description, robots meta tag, canonical URL azonos legyen mobilon és desktopon.

Ellenőrizd:

Desktop és mobil verzió:

<!-- Ugyanaz mindkét verzión -->
<title>URL Struktúra Optimalizálás - SEO Útmutató</title>
<meta name="description" content="Tanulj meg SEO-barát URL-eket...">
<meta name="robots" content="index, follow">
<link rel="canonical" href="https://example.com/url-struktura/">

Gyakori hibák:

❌ Eltérő title mobilon
❌ Rövidebb meta description mobilon
❌ noindex csak mobilon vagy csak desktopon

4. Viewport meta tag (KÖTELEZŐ)#

Szabály: Mindig használd a viewport meta tag-et responsive oldalaknál.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Magyarázat:

• width=device-width → Az oldal szélessége az eszköz képernyőszélességéhez igazodik
• initial-scale=1.0 → Kezdeti zoom szint 1:1

Mit NE használj:

❌ Rossz:

<meta name="viewport" content="width=980"> <!-- Fix szélesség -->
<meta name="viewport" content="user-scalable=no"> <!-- Zoom tiltás -->

5. Mobilbarát betűméret#

Szabály: Minimum 16px betűméret mobilon a fő tartalomban.

CSS:

body {
  font-size: 16px; /* Mobil alap */
}

@media (min-width: 768px) {
  body {
    font-size: 18px; /* Desktop */
  }
}

Miért fontos?

16px alatti betűméret esetén a mobil böngészők automatikusan zoomolnak, ami rossz felhasználói élmény.

6. Kattintható elemek távolsága#

Szabály: Kattintható elemek (linkek, gombok) legyenek minimum 48x48 pixel méretűek és 8px távolságra egymástól.

CSS példa:

button, a {
  min-height: 48px;
  min-width: 48px;
  padding: 12px 16px;
  margin: 8px 0;
}

Miért fontos?

Az ujj átmérője ~40-48px, túl kicsi vagy túl közeli elemeket nehéz megnyomni → rossz UX.

Google teszt:

Google Mobile-Friendly Test azonnal jelzi, ha kattintható elemek túl közel vannak.

7. Képek optimalizálása mobilra#

Szabály: Responsive képek, optimalizált méret, lazy loading.

Responsive képek:

<img 
  src="image-800.jpg" 
  srcset="image-400.jpg 400w,
          image-800.jpg 800w,
          image-1200.jpg 1200w"
  sizes="(max-width: 600px) 400px,
         (max-width: 1200px) 800px,
         1200px"
  alt="Leíró szöveg"
>

Lazy loading:

<img src="image.jpg" alt="Leíró szöveg" loading="lazy">

⚠️ FIGYELEM: Lazy loading-nál ügyelj, hogy a Google lássa a képeket!

A viewport fölött (above the fold) lévő képeknél NE használj lazy loading.

8. Mobil navigáció#

Szabály: Hamburger menü rendben van, de minden link legyen elérhető.

Jó gyakorlat:

<nav class="mobile-menu">
  <button class="menu-toggle" aria-label="Menü megnyitása">
    ☰
  </button>
  <ul class="menu-items">
    <li><a href="/technikai-seo/">Technikai SEO</a></li>
    <li><a href="/kulcsszo-kutatas/">Kulcsszó Kutatás</a></li>
    <!-- ... minden link elérhető -->
  </ul>
</nav>

CSS:

@media (max-width: 768px) {
  .menu-items {
    display: none; /* Alapból rejtett */
  }
  
  .menu-items.open {
    display: block; /* JavaScript-tel kinyitható */
  }
}

⚠️ FIGYELEM: A Google JavaScript-et renderel, tehát a hamburger menü mögött lévő linkeket indexeli, ha elérhetők a DOM-ban.

9. Page Speed mobilon#

Szabály: Mobil oldal betöltése 3 másodperc alatt (ideális: 1-2 mp).

Ellenőrzés:

• Google PageSpeed Insights: https://pagespeed.web.dev/
• Chrome DevTools → Lighthouse → Mobile audit

Gyorsítási tippek:

✅ Képek optimalizálása (WebP formátum)
✅ CSS és JavaScript minifikálás
✅ Szerver válaszidő csökkentése
✅ Browser caching
✅ CDN használata
✅ AMP (Accelerated Mobile Pages) - opcionális

10. Interstitial-ek és pop-up-ok#

Szabály: Kerüld a fullscreen interstitial-eket mobilon, mert Google büntet értük.

❌ Rossz gyakorlat (Google büntetés!):

<!-- Fullscreen pop-up mobilon azonnal betöltéskor -->
<div class="mobile-popup" style="position: fixed; width: 100%; height: 100%;">
  <p>Iratkozz fel hírlevelünkre!</p>
</div>

✅ Jó gyakorlat:

• Kis banner (nem takarja a tartalmat)
• Exit-intent popup
• Age verification (jogi követelmény esetén rendben van)
• Cookie notice banner (szintén rendben van)

Google hivatalos álláspont:

"Intrusive interstitials harm the user experience" — Google, 2017

Mobile-First Indexing ellenőrzése#

1. Google Search Console ellenőrzés#

Lépések:

1. Lépj be a Google Search Console-ba
2. Beállítások → Crawlolási statisztikák
3. Nézd meg a User-agent típusát:
   • Smartphone Googlebot → Mobile-First Indexing aktív ✅
   • Desktop Googlebot → Még nincs átállítva ⚠️

URL vizsgálat:

1. URL vizsgálat eszköz
2. Írj be egy URL-t
3. “Crawlolt oldal megtekintése” → Nézd meg, mit lát a Googlebot
4. Ellenőrizd, hogy a mobil verzió renderelődik-e

2. Mobile-Friendly Test#

Eszköz: https://search.google.com/test/mobile-friendly

Lépések:

1. Írd be az URL-t
2. “Teszt URL”
3. Ellenőrizd az eredményt

Mit néz:

• Viewport meta tag
• Szöveg méret
• Kattintható elemek távolsága
• Tartalom szélessége

3. Chrome DevTools Device Mode#

Lépések:

1. Nyisd meg az oldalt Chrome-ban
2. F12 (DevTools megnyitása)
3. Ctrl+Shift+M (Device Mode)
4. Válassz mobil eszközt (iPhone, Samsung, stb.)
5. Navigálj végig az oldalon

Mit ellenőrizz:

• Tartalom teljes egészében elérhető-e
• Gombok könnyen kattinthatók-e
• Képek betöltődnek-e
• Menü működik-e

4. Screaming Frog mobilként#

Screaming Frog SEO Spider beállítás:

1. Configuration → User-Agent → Mobile (Smartphone)
2. Futtass crawlolást
3. Hasonlítsd össze a desktop és mobil crawl eredményeit

Mit néz:

• URL-ek száma (azonos legyen mobilon és desktopon)
• Tartalom mérete
• Képek száma
• Internal linkek száma

Gyakori Mobile-First Indexing hibák#

❌ 1. Tartalom elrejtése mobilon#

Hiba:

<div class="hide-mobile">
  <h2>Fontos SEO tartalom</h2>
  <p>Ez csak desktopon látszik...</p>
</div>

@media (max-width: 768px) {
  .hide-mobile {
    display: none;
  }
}

Probléma: Google nem látja ezt a tartalmat, mert mobilként indexel.

Megoldás: Ne rejtsd el a tartalmat - alakítsd át a layoutot, de tartalom maradjon elérhető.

❌ 2. Lazy loading helytelenül#

Hiba:

<img data-src="image.jpg" alt="Kép"> <!-- NEM töltődik be alapból -->
<script>
  // JavaScript lazy load UTÁN tölti be
</script>

Probléma: Ha a Google nem futtatja a JavaScript-et (vagy túl későn), nem látja a képet.

Megoldás:

<img src="image.jpg" alt="Kép" loading="lazy">
<!-- Natív lazy loading - Google támogatja -->

❌ 3. Különböző canonical URL-ek#

Hiba:

Desktop verzió:

<link rel="canonical" href="https://example.com/page/">

Mobil verzió:

<link rel="canonical" href="https://m.example.com/page/">

Probléma: Duplicate content, zavaros indexelés.

Megoldás: Responsive design esetén ugyanaz a canonical mindkét verzión.

❌ 4. Mobil tartalom acordeonban elrejtve#

Hiba:

<details>
  <summary>Kattints a részletekért</summary>
  <p>Fontos SEO tartalom...</p> <!-- Alapból rejtett -->
</details>

Álláspont: A Google indexeli az accordion/tab mögött lévő tartalmat, de alacsonyabb súllyal kezeli.

Megoldás: Fontos tartalom legyen alapból látható mobilon is, vagy használj aria-expanded="true" állapotot.

❌ 5. Flash vagy nem támogatott technológiák#

Hiba:

<object data="video.swf" type="application/x-shockwave-flash">
  <!-- Flash videó - mobilon nem játszható le -->
</object>

Probléma: Flash nem támogatott mobil böngészőkben (és 2020 óta sehol).

Megoldás:

<video controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
</video>

❌ 6. Viewport meta tag hiánya#

Hiba:

<head>
  <!-- Nincs viewport tag! -->
  <title>Oldal címe</title>
</head>

Probléma: Mobil böngészők desktop layoutot renderelnek, kicsi betűk, rossz UX.

Megoldás:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Mobile-First SEO best practices#

1. Responsive design minden új projektnél#

Mert:

• Egyetlen URL → nincs canonical probléma
• Egyszerűbb karbantartás
• Google ajánlás

2. Mobile-first fejlesztés#

Gondolkodj mobilban először:

1. Tervezd meg a mobil layoutot először
2. Aztán szélesítsd desktop-ra
3. Ne desktop-ból szűkíts mobilra

CSS példa:

/* Mobil alapértelmezett (nem media query!) */
.container {
  width: 100%;
  padding: 15px;
}

/* Desktop bővítés */
@media (min-width: 768px) {
  .container {
    max-width: 1200px;
    padding: 30px;
  }
}

3. Tesztelj valódi eszközökön#

Ne csak emulátoron:

• iPhone (Safari)
• Android (Chrome)
• Tablet (iPad, Samsung Tab)

Mert: Emulátorok nem mindig pontosak (touch viselkedés, scroll, stb.)

4. Core Web Vitals optimalizálás mobilra#

3 fő metrika:

1. LCP (Largest Contentful Paint): Főbb elem betöltési ideje

   • Cél: < 2.5 mp

2. FID (First Input Delay): Első interakció késleltetése

   • Cél: < 100 ms

3. CLS (Cumulative Layout Shift): Layout elmozdulás

   • Cél: < 0.1

Mobil specifikus tippek:

• Képek méretezése előre (width/height attribútumok)
• Font betöltés optimalizálása
• JavaScript lazy loading

5. AMP (Accelerated Mobile Pages) - Opcionális#

Mi az az AMP?

Villámgyors mobil oldalak Google-féle keretrendszerrel.

Előnyök:

• ✅ Villámgyors betöltés
• ✅ Google cache-ből szolgálva
• ✅ Kiemelt megjelenés híreknél (carousel)

Hátrányok:

• ❌ Korlátozott HTML/CSS/JS
• ❌ Extra karbantartás
• ❌ Kevésbé releváns Core Web Vitals bevezetése óta

Google álláspont (2021):

"AMP nem rangsorolási tényező." — Google

Javaslatom: Új projektnél inkább optimalizálj Core Web Vitals-ra, mint AMP-re.

Gyakran Ismételt Kérdések#

Következő lépések#

Most, hogy megértetted a Mobile-First Indexing működését:

• Teszteld weboldaladat a Mobile-Friendly Test eszközzel
• Ellenőrizd a Google Search Console-ban a crawlolási user-agent-et
• Biztosítsd a tartalom paritást (mobil = desktop tartalom)
• Optimalizáld a mobil oldal sebességét
• Olvasd el a Core Web Vitals útmutatót
• Nézd meg a Kép optimalizálás cikket

Források#

• Google Search Central: Mobile-First Indexing Best Practices
• Google: Mobile-Friendly Test
• Web.dev: Responsive Web Design Basics