Tutorial complet SEO On-Page modern (Google + Bing)

[GanGster 516]

Tot ce ai nevoie pentru pagini care rankează: structură corectă, meta-uri impecabile, date structurate, internal linking, accesibilitate, performanță și bune practici 2025 — white-hat, sigur pentru indexare.

Cuprins

1. Principii rapide (ce contează azi)
2. HEAD perfect: titlu, descriere, canonical, robots
3. Structura conținutului: H1–H3, paragrafe, media
4. Linking intern & extern (anchor, nofollow)
5. Date structurate (JSON-LD) care chiar ajută
6. Multilingv: hreflang corect (opțional)
7. Accesibilitate & UX (inclusiv contrast)
8. Performanță care influențează SEO
9. Checklist final (copiat & aplicat)
10. Șabloane gata de lipit (HEAD + FAQ + Article)

1) Principii rapide (ce contează azi)

• Intenția de căutare (search intent) > keyword stuffing. Scrie natural, acoperă subiectul complet.
• Un H1 clar pe pagină, urmat de subtitluri logice (H2/H3). Fără sărit peste nivele.
• Meta Title & Description atractive, în limite (≈ 50–60 / 140–160 caractere).
• Canonical pentru a evita duplicatele (parametri UTM, sortări).
• Linkuri interne relevante, anchor text descriptiv (nu „click aici”).
• Date structurate (JSON-LD) pentru rich results (FAQ, Article, Product, Breadcrumb).
• Accesibilitate: alt pe imagini, contrast bun, limbă setată, ARIA unde e necesar.
• Viteză & UX: lazy-load, imagini optimizate, CSS critic mic, fără jumps (CLS).

2) HEAD perfect: titlu, descriere, canonical, robots

Un <head> curat trimite semnale puternice către crawleri. Limite recomandate:

• Title: 50–60 caractere (ideal concis, cu brand scurt la final).
• Description: 140–160 caractere, apel la acțiune, fără keyword stuffing.

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Ghid SEO On-Page modern — Exemple și Șabloane | Brand</title>
  <meta name="description" content="Configurează corect title, meta description, canonical, Open Graph, JSON-LD și schema pentru rezultate mai bune în Google și Bing.">

  <link rel="canonical" href="https://exemplu.ro/pagina-seo/">

  <!-- Control 1 indexare (ex. noindex pe pagini slabe sau duplicate) -->
  <!-- <meta name="robots" content="noindex, follow"> -->

  <!-- Control 2 indexare (ex. index pe pagini pe care doresti sa le indexezi) --> 
  <!-- <meta name="robots" content="index, follow"> --> 

  <!-- Social (OG/Twitter) -->
  <meta property="og:type" content="website">
  <meta property="og:title" content="Ghid SEO On-Page modern — Exemple și Șabloane">
  <meta property="og:description" content="Pași clari pentru un SEO corect, fără riscuri.">
  <meta property="og:image" content="https://exemplu.ro/img/og-cover.jpg">
  <meta property="og:url" content="https://exemplu.ro/pagina-seo/">
  <meta name="twitter:card" content="summary_large_image">
</head>

3) Structura conținutului: H1–H3, paragrafe, media

• Un H1 unic, exact tema paginii. Exemple: „Pelis online gratis în HD — Ghid legal”.
• Împarte în H2 (secțiuni) și H3 (subsecțiuni). Fără sări din H1 direct în H4.
• Paragrafe scurte (2–4 rânduri), liste, citate — cresc lizibilitatea.
• Imagini: alt descriptiv, loading="lazy", extensii moderne (WebP/AVIF).
• Video/iframe: loading="lazy", dimensiuni fixe pentru a evita CLS.

<main>
  <h1>Pagină exemplu: Cum optimizezi SEO On-Page modern</h1>

  <p>Introducere scurtă care explică exact ce găsește utilizatorul pe pagină.</p>

  <h2>1. Titluri și structură logică</h2>
  <p>Explică de ce un H1 clar și subtitluri coerente ajută indexarea și UX.</p>

  <h2>2. Imagini optimizate</h2>
  <img src="/img/exemplu.webp" width="1200" height="675" loading="lazy" alt="Diagrama structurii SEO On-Page">

  <h2>3. Întrebări frecvente (FAQ)</h2>
  <h3>Cum scriu un title bun?</h3>
  <p>Fii concis, include topic + beneficiu + brand (opțional).</p>
</main>

4) Linking intern & extern (anchor, nofollow)

• Intern: 2–5 linkuri către pagini înrudite (categorii, ghiduri, contact). Anchor descriptiv: „ghid SEO”, „politica de confidențialitate”.
• Extern: folosește rel="nofollow noopener noreferrer" pentru site-uri pe care nu vrei să le transmiți autoritate.
• Nu exagera: calitate > cantitate. Evită „pereții” de linkuri.

5) Date structurate (JSON-LD) care chiar ajută

Folosește formatul JSON-LD într-un <script type="application/ld+json"> în pagină. Exemple utile:

a) WebSite + SearchAction (home page)

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "WebSite",
  "name": "Brand",
  "url": "https://exemplu.ro/",
  "potentialAction": {
    "@type": "SearchAction",
    "target": "https://exemplu.ro/cauta?q={search_term_string}",
    "query-input": "required name=search_term_string"
  }
}
</script>

b) Article (pentru pagini de blog/ghid)

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Ghid SEO On-Page modern",
  "description": "Pașii esențiali pentru optimizare corectă.",
  "inLanguage": "ro",
  "author": { "@type": "Person", "name": "Autor" },
  "publisher": { "@type": "Organization", "name": "Brand" },
  "datePublished": "2025-11-04",
  "dateModified": "2025-11-04"
}
</script>

c) FAQPage (pentru secțiunea Întrebări frecvente)

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {"@type":"Question","name":"Cum scriu un title bun?",
     "acceptedAnswer":{"@type":"Answer","text":"Fii concis, folosește topicul principal și evită suprasaturarea de cuvinte."}},
    {"@type":"Question","name":"Cât de lungă să fie descrierea?",
     "acceptedAnswer":{"@type":"Answer","text":"Păstrează 140–160 caractere, cu beneficii clare și apel la acțiune."}}
  ]
}
</script>

6) Multilingv: hreflang corect (opțional)

Dacă ai versiuni în mai multe limbi, adaugă hreflang în <head> (și canonical corelat):

<link rel="alternate" hreflang="ro" href="https://exemplu.ro/pagina/">
<link rel="alternate" hreflang="en" href="https://exemplu.es/pagina/">
<link rel="alternate" hreflang="x-default" href="https://exemplu.com/page/">

7) Accesibilitate & UX (inclusiv contrast)

• lang pe <html> (ex. <html lang="ro">).
• Contrast ≥ 4.5:1 pentru text normal, ≥ 3:1 pentru titluri mari. Testează în PageSpeed/Lighthouse.
• ALT pe imagini relevante, aria-label pe butoane icon.
• Fără „user-scalable=no” și fără maximum-scale < 5 în meta viewport.

😎 Performanță care influențează SEO

• Lazy-load imagini/iframe (atribut loading="lazy").
• Imagini în WebP/AVIF + dimensiuni fixe (evită CLS).
• Preload pentru fonturile critice, preconnect la domenii CDN.
• CSS critic mic în <head>, JS amânat (defer), fără bloat.
• Activează GZIP/Brotli pe server; cache static (far-future).

9) Checklist final (copiat & aplicat)

• ✅ Un singur H1 clar; H2/H3 ordonate logic.
• ✅ Title 50–60c, Description 140–160c (fără keyword stuffing).
• ✅ Canonical spre versiunea preferată a URL-ului.
• ✅ OG/Twitter setate (imagine 1200×630).
• ✅ JSON-LD (Website/Article/FAQ/Breadcrumb) valid.
• ✅ Alt pe imagini, contrast bun, lang pe html.
• ✅ Linkuri interne către pagini relevante (2–5 / pagină).
• ✅ Lazy-load media și imagini optimizate.
• ✅ Evită meta viewport restrictive, pop-up invaziv, pagini subțiri (noindex dacă e cazul).

10) Șabloane gata de pus

a) HEAD minimal SEO-ready

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>[Titlu pagină] — [Beneficiu scurt] | [Brand]</title>
  <meta name="description" content="[Descriere 140–160 caractere, clară și utilă]">
  <link rel="canonical" href="https://domeniu.ro/url-fara-parametri/">

  <meta property="og:type" content="website">
  <meta property="og:title" content="[Titlu social concis]">
  <meta property="og:description" content="[Descriere social concisă]">
  <meta property="og:image" content="https://domeniu.ro/og-cover.jpg">
  <meta property="og:url" content="https://domeniu.ro/url-fara-parametri/">
  <meta name="twitter:card" content="summary_large_image">
</head>

b) FAQ JSON-LD (rich results)

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {"@type":"Question","name":"Întrebare reprezentativă 1",
     "acceptedAnswer":{"@type":"Answer","text":"Răspuns scurt, util și clar."}},
    {"@type":"Question","name":"Întrebare reprezentativă 2",
     "acceptedAnswer":{"@type":"Answer","text":"Răspuns concis, fără keyword stuffing."}}
  ]
}
</script>

c) Article JSON-LD

<script type="application/ld+json">
{
  "@context":"https://schema.org",
  "@type":"Article",
  "headline":"[Titlul articolului]",
  "description":"[Rezumat scurt]",
  "inLanguage":"ro",
  "author":{"@type":"Person","name":"[Autor]"},
  "publisher":{"@type":"Organization","name":"[Brand]"},
  "datePublished":"2025-11-04",
  "dateModified":"2025-11-04"
}
</script>

💡 Pro tip: pentru pagini care trimit către site-uri externe (ex. afiliere), folosește rel="nofollow noopener noreferrer" și păstrează conținutul propriu consistent ca să nu pară „doorway”. Dacă ai pagini foarte scurte/duplicate, aplică <meta name="robots" content="noindex, follow">.