Mobile-First SEO — Optimizacija za mobilne uredjaje

Kompletni vodic za mobilnu optimizaciju: indexing, responsive design, viewport, Core Web Vitals i testiranje

60%+
Google pretraga sa mobilnog
53%
Napusta sajt posle 3 sekunde
2019
Mobile-first indexing za nove sajtove
48px
Min velicina tap target-a

Sadrzaj

  1. Mobile-First Indexing
  2. Responsive vs Separate vs Dynamic
  3. Viewport meta tag
  4. Touch-friendly dizajn
  5. Core Web Vitals na mobilnom
  6. Brzina na mobilnom
  7. AMP — da li jos treba
  8. Najcesce greske
  9. Alati za testiranje
  10. Reference i resursi

1. Mobile-First Indexing — sta znaci

Mobile-first indexing znaci da Google primarno koristi mobilnu verziju vaseg sajta za rangiranje i indeksiranje. Ovo je fundamentalna promena u nacinu na koji Google radi:

  • Jul 2019 — svi novi sajtovi automatski na mobile-first indexing
  • Mart 2021 — Google najavio migraciju svih preostalih sajtova
  • Oktobar 2023 — svi sajtovi su na mobile-first indexing, bez izuzetaka

Sta to znaci u praksi:

  • Ako mobilna verzija ima manje sadrzaja od desktop-a, gubite rang — Google vidi samo mobilnu verziju
  • Ako su slike/video sakriveni na mobilnom, Google ih ne indeksira
  • Ako je mobilna navigacija drugacija, Google koristi mobilne linkove za crawling
  • Structured data (Schema) mora biti na mobilnoj verziji, ne samo desktop
Kriticno: Ako koristite responsive dizajn (isti HTML za desktop i mobile), vec ste OK. Problem nastaje samo ako imate odvojenu mobilnu verziju (m.vasajt.rs) sa manje sadrzaja.

2. Responsive vs Separate vs Dynamic Serving

PristupKako radiGoogle preporukaOdrzavanje
Responsive DesignIsti HTML, CSS media queries prilagodjavaju izgledPreporuceno ✔Lako — 1 verzija
Separate mobile siteOdvojen sajt na m.vasajt.rsPrihvatljivoTesko — 2 verzije
Dynamic servingIsti URL, server salje razlicit HTML po User-AgentPrihvatljivoSrednje

Responsive design je jasni pobednik — jedan URL, jedan HTML, jedan set meta tagova, jedan sitemap. Google ga eksplicitno preporucuje.

<!-- Responsive design osnova -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>
  /* Mobile-first pristup: osnova je za mobilne, pa prosirujete za desktop */
  .container { padding: 1rem; }

  @media (min-width: 768px) {
    .container { padding: 2rem; max-width: 800px; margin: 0 auto; }
  }

  @media (min-width: 1200px) {
    .container { max-width: 1100px; }
  }
</style>
Mobile-first CSS: Pisite CSS najpre za mobilne (bez media query-ja), pa dodajte @media (min-width: ...) za vece ekrane. Ovo je efikasnije i prirodnije za mobile-first pristup.

3. Viewport meta tag

Viewport tag je obavezan za svaki mobile-friendly sajt. Bez njega, browser prikazuje stranicu kao desktop sirine (obicno 980px) smanjenu na mali ekran.

<!-- OBAVEZNO — staviti u <head> svake stranice -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- NIKAD ne blokirajte zoom (accessibility problem) -->
<meta name="viewport" content="width=device-width, initial-scale=1.0,
  maximum-scale=1.0, user-scalable=no">  <!-- ✗ LOSE -->

Parametri:

  • width=device-width — sirina stranice = sirina ekrana uredjaja
  • initial-scale=1.0 — pocetni zoom nivo 100%
  • user-scalable=no — NIKAD ne koristite — blokira zoom za korisnike sa slabim vidom (WCAG 1.4.4)

Detaljnije o viewport tagu u nasem Meta Tagovi vodicu.

4. Touch-friendly dizajn

Mobilni korisnici koriste prste umesto preciznog misa. Dizajn mora biti prilagodjen:

Velicina interaktivnih elemenata

ElementMin velicinaPreporuceni razmak
Dugmad (buttons)48 x 48 CSS px (Google)8px izmedju
Linkovi u tekstuDovoljno padding-a za tapNe slepljeni jedan uz drugi
Input polja48px visine minimum16px margine
Navigacija44 x 44 pt (Apple HIG)Jasno razdvojeni linkovi
Checkbox/Radio24 x 24px minimumKlikabilan label

Ostala pravila

  • Font velicina — minimum 16px za body tekst. Manji tekst prisiljava korisnike na zoom.
  • Line height — minimum 1.5 za citljivost na malim ekranima
  • Horizontalni scroll — NIKAD. Koristite max-width: 100% na slikama i overflow-x: auto na tabelama.
  • Forme — koristite odgovarajuce type atribute (email, tel, number) za prikaz prave tastature.
  • Hamburger meni — za navigaciju sa 5+ linkova na mobilnom. Ali glavni CTA treba uvek biti vidljiv.
<!-- Prava tastatura za razlicite tipove unosa -->
<input type="email" placeholder="email@primer.rs">    <!-- @ tastatura -->
<input type="tel" placeholder="+381...">               <!-- numerička -->
<input type="number" inputmode="numeric">              <!-- numerička -->
<input type="url" placeholder="https://...">           <!-- URL tastatura -->
<input type="search" placeholder="Pretrazite...">      <!-- sa Search dugmetom -->

5. Core Web Vitals na mobilnom

Core Web Vitals se mere odvojeno za mobile i desktop u Google Search Console. Mobilni rezultati su obicno losiji zbog sporije konekcije i slabijeg hardvera.

MetrikaDobar (mobile)Tipicni problemi na mobilnom
LCP (ucitavanje)< 2.5sVelike slike bez srcset, spor server, render-blocking CSS/JS
CLS (stabilnost)< 0.1Slike bez width/height, dinamicki ads, web fontovi (FOUT)
INP (odzivnost)< 200msTezak JavaScript, main thread blokiran, neoptimizovani event handleri

Optimizacija za mobilni CWV

  • Responsive slike — koristite srcset i sizes da saljete manje slike mobilnim uredjajima
  • Lazy loading — loading="lazy" za slike ispod fold-a (ali NE za hero sliku!)
  • Font display: swap — prikazite tekst odmah sa fallback fontom dok se web font ucitava
  • Critical CSS inline — inline-ujte CSS za above-the-fold sadrzaj, ostatak ucitajte asinhrono
  • Minimalni JS — svaki KB JavaScript kosta vise na mobilnom (parsiranje + izvrsavanje)
<!-- Responsive slike — mobilni dobija manju sliku -->
<img
  srcset="slika-400.jpg 400w, slika-800.jpg 800w, slika-1200.jpg 1200w"
  sizes="(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px"
  src="slika-800.jpg"
  alt="Opis slike"
  width="800" height="450"
  loading="lazy"
>

Detaljnije o Core Web Vitals u nasem CWV vodicu.

6. Brzina na mobilnom

Mobilni korisnici su nestrpljivi — ocekuju da se sajt ucita za 1-2 sekunde:

  • 53% mobilnih korisnika napusta sajt koji se ucitava duze od 3 sekunde (Google)
  • 70% mobilnih korisnika ocekuje da sajt radi jednako brzo kao na desktopu
  • Prosecna 4G konekcija ima 50ms latencije i 10-30 Mbps propusnosti
  • Prosecni mobilni uredjaj ima 4-8x slabiji CPU od prosecnog laptopa
Budget za performanse: Za 3-sekundno ucitavanje na 4G, vasa stranica treba biti ispod 170KB kompresovanog sadrzaja (HTML + CSS + JS + slike iznad fold-a). Svaki KB se broji na mobilnom.

7. AMP — da li jos treba

AMP (Accelerated Mobile Pages) je Google-ov open-source framework za ultra-brze mobilne stranice. Kreiran 2015, bio je de facto obavezan za Top Stories u Google-u.

Status u 2026:

  • Jun 2021 — AMP vise nije uslov za Top Stories. Core Web Vitals su postali kriterijum.
  • 2022-2023 — mnogi veliki publisheri (BBC, Washington Post) su napustili AMP
  • 2024-2026 — AMP je i dalje ziv ali gubu na relevantnosti. Google ga tretira isto kao obicne stranice.
Preporuka: Za nove sajtove, NE koristite AMP. Fokusirajte se na brz, responsive sajt sa dobrim Core Web Vitals. AMP donosi kompleksnost (odvojen codebase, ogranicenja u JS) bez znacajne prednosti. Ako vec imate AMP, razmotrite migraciju nazad na standardni HTML.

8. Najcesce greske u mobilnom SEO

  • Nedostaje viewport tag — sajt se prikazuje kao desktop smanjen na mali ekran. Necitljiv tekst, nemoguce kliknuti linkove.
  • user-scalable=no — blokira zoom, accessibility problem, Google moze penalizovati.
  • Tekst premali — ispod 16px body tekst prisiljava korisnike na zoom.
  • Elementi preblizu — tap target-i ispod 48px ili bez dovoljnog razmaka. Korisnici pogresno kliknu.
  • Horizontalni scroll — slike ili tabele sire od ekrana. Koristite max-width: 100%.
  • Blokirani resursi — robots.txt blokira CSS/JS koje Google treba za renderovanje mobilne verzije.
  • Interstitial pop-ups — Google kaznjava intrusive interstitials na mobilnom od 2017. Cookie banner je OK, ali full-screen reklama nije.
  • Razlicit sadrzaj na mobilnom — skriveni tekst, manje slika, uklonjene sekcije. Google indeksira mobilnu verziju — sto sakrijete, to gubite.
  • Spor server — TTFB preko 600ms na mobilnom je kriticno. Koristite CDN i optimizujte backend.
  • Nema srcset za slike — desktop slike (1200px+) na mobilnom trose bandwidth i usporavaju LCP.

9. Alati za testiranje

  • Web Security Scanner — proverava viewport tag, responsive elemente i osnovne mobile-friendly signale.
  • PageSpeed Insights — mobilni i desktop skor sa CWV, preporuke za optimizaciju.
  • Chrome DevTools Device Mode — F12 → Toggle Device Toolbar. Simulira razlicite uredjaje, velicine ekrana i brzine konekcije.
  • Google Search Console — "Mobile Usability" izvestaj prikazuje probleme na celom sajtu.
  • BrowserStack — testiranje na stvarnim uredjajima (iPhone, Samsung, Pixel) u browseru.
  • Lighthouse CI — automatsko testiranje u CI/CD pipeline-u. Blokira deploy ako mobile skor padne ispod praga.

10. Reference i resursi

Proverite mobilnu optimizaciju vaseg sajta →

Mobile-First SEO — Optimization for Mobile Devices

Complete mobile optimization guide: indexing, responsive design, viewport, Core Web Vitals and testing

60%+
Google searches from mobile
53%
Leave site after 3 seconds
2019
Mobile-first indexing for new sites
48px
Min tap target size

Table of Contents

  1. Mobile-First Indexing
  2. Responsive vs Separate vs Dynamic
  3. Viewport meta tag
  4. Touch-friendly design
  5. Core Web Vitals on mobile
  6. Mobile speed
  7. AMP — still needed?
  8. Common mistakes
  9. Testing tools
  10. References

1. Mobile-First Indexing

Mobile-first indexing means Google primarily uses the mobile version of your site for ranking. Since October 2023, ALL sites are on mobile-first indexing.

  • If mobile version has less content, you lose rankings
  • Hidden images/video on mobile are not indexed
  • Structured data must be on the mobile version
Critical: If you use responsive design (same HTML for all devices), you're fine. Problems arise only with separate mobile sites (m.yoursite.com) with less content.

2. Responsive vs Separate vs Dynamic

ApproachHow it worksGoogle recommendation
ResponsiveSame HTML, CSS adapts layoutRecommended ✔
Separate siteDifferent site at m.yoursite.comAcceptable
Dynamic servingSame URL, different HTML per User-AgentAcceptable

Responsive design is the clear winner — one URL, one HTML, one sitemap.

Mobile-first CSS: Write CSS for mobile first (no media queries), then add @media (min-width: ...) for larger screens.

3. Viewport meta tag

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

<!-- NEVER block zoom -->
<meta name="viewport" content="..., user-scalable=no">  <!-- ✗ BAD -->

More about viewport in our Meta Tags guide.

4. Touch-friendly design

ElementMin sizeSpacing
Buttons48 x 48 CSS px8px between
Text linksEnough padding for tapNot stacked together
Input fields48px height16px margins
Navigation44 x 44 pt (Apple)Clear separation
  • Font size: min 16px body text
  • No horizontal scroll — use max-width: 100% on images
  • Input types: use email, tel, number for correct keyboard

5. Core Web Vitals on mobile

CWV are measured separately for mobile and desktop. Mobile scores are typically worse due to slower connections and weaker hardware.

MetricGood (mobile)Typical mobile issues
LCP< 2.5sLarge images without srcset, slow server
CLS< 0.1Images without dimensions, dynamic ads, fonts
INP< 200msHeavy JavaScript, blocked main thread

Use srcset, loading="lazy", font-display: swap, critical CSS inlining. More in our CWV guide.

6. Mobile speed

  • 53% of mobile users leave sites that take over 3 seconds to load
  • Average 4G: 50ms latency, 10-30 Mbps bandwidth
  • Average mobile device: 4-8x weaker CPU than average laptop
Performance budget: For 3-second load on 4G, keep under 170KB compressed (HTML + CSS + JS + above-fold images).

7. AMP — still needed?

Short answer: NO for new sites. AMP lost relevance after June 2021 when it stopped being required for Top Stories. Many publishers (BBC, WaPo) abandoned it. Focus on fast, responsive sites with good Core Web Vitals instead.

Recommendation: Don't use AMP for new sites. If you have AMP, consider migrating back to standard HTML.

8. Common mobile SEO mistakes

  • Missing viewport tag — site renders as zoomed-out desktop
  • user-scalable=no — blocks zoom, accessibility violation
  • Text too small — below 16px requires zooming
  • Elements too close — tap targets under 48px or without spacing
  • Horizontal scroll — images/tables wider than viewport
  • Intrusive interstitials — full-screen popups penalized since 2017
  • Hidden content on mobile — Google indexes mobile version only
  • Slow server — TTFB over 600ms is critical on mobile
  • No srcset — desktop images (1200px+) waste mobile bandwidth

9. Testing tools

  • Web Security Scanner — checks viewport, responsive elements
  • PageSpeed Insights — mobile/desktop scores with CWV
  • Chrome DevTools Device Mode — F12 → Toggle Device Toolbar
  • Google Search Console — Mobile Usability report
  • BrowserStack — test on real devices

10. References and resources

Check your mobile optimization →
SEO vodicSEO Guide Meta TagoviMeta Tags Schema.orgSchema.org Sitemap.xmlSitemap.xml Open GraphOpen Graph Heading strukturaHeading Structure Lokalni SEOLocal SEO