Title Tag Optimizer

A Title Tag Optimizer egy ingyenes SEO eszköz, amely segít tökéletes title tag-eket írni a maximális ranking és CTR (Click-Through Rate) érdekében.

🎯 Mire Jó Ez Az Eszköz?#

A title tag az #1 legfontosabb on-page SEO elem. A title tag:

• 🏆 Ranking faktor: Google használja a relevancia meghatározásához
• 👆 CTR növelő: Jó title 30-50%-kal több kattintást hoz
• 📱 Első benyomás: Ez jelenik meg a SERP-ben, böngésző tab-ban, social share-ben

Problémák rossz title tag-gel:

• ❌ Túl rövid (< 30 karakter): Pazarolod a helyet, kevés kulcsszó
• ❌ Túl hosszú (> 60 karakter): Google levágja (“…”), veszhet el fontos info
• ❌ Rossz pixel szélesség: Desktop vs mobil eltérően jelenik meg
• ❌ Nem látod előre: Nem tudod, hogyan fog kinézni a SERP-ben

Megoldás ezzel az eszközzel:

• ✅ Real-time karakter számláló: Látod pontosan hol tartasz (0-60)
• ✅ Pixel width kalkulátor: Canvas-based mérés (~600px desktop limit)
• ✅ Desktop SERP preview: Teljes snippet előnézet
• ✅ Mobil SERP preview: Kompakt mobil megjelenés
• ✅ 5 színes státusz: Visual feedback (EMPTY, TOO SHORT, PERFECT, LONG, TOO LONG)
• ✅ Best practices: 4 kulcsfontosságú tipp

🚀 Hogyan Használd?#

1. Írd Be a Title Tag-et#

Illeszd be vagy géped be a title tag szöveget az input mezőbe.

2. Valós Idejű Visszajelzés#

Karakter számláló:

52 / 60 karakter

Pixel szélesség:

Desktop: 580px / 600px ✅
Mobil: 420px / 500px ✅

Színes státusz badge:

• 🔵 EMPTY (0 karakter): Üres
• 🟡 TOO SHORT (< 30 karakter): Túl rövid, nem használod ki a helyet
• 🟢 PERFECT (30-55 karakter): Ideális hossz!
• 🟠 LONG (55-60 karakter): Határon, még OK
• 🔴 TOO LONG (> 60 karakter): Levágja a Google!

Animált progress bar:

• Színváltó animáció státusz szerint
• Visual feedback ahogy gépelsz

3. SERP Preview Ellenőrzés#

Desktop snippet:

Title Tag Optimalizálás - Teljes Útmutató | SEOTudás.hu
https://seotudas.hu › technikai-seo › title-tag
Tanuld meg a title tag tökéletes optimalizálását...

Mobil snippet:

Title Tag Optimalizálás...
seotudas.hu › ... › title-tag
Tanuld meg a title tag...

4. Best Practices Alkalmazása#

Az eszköz 4 Best Practice kártyát mutat:

01. KULCSSZÓ ELSŐ 30 KARAKTERBEN

• Főbb kulcsszó kerüljön előre
• Google nagyobb súlyt ad az első szavaknak

02. EGYEDI MINDEN OLDALHOZ

• Ne használj duplikált title-okat
• Minden oldal egyedi címet kap

03. BRAND NÉV VÉGÉN

• Végére: “… | Márkanév”
• Elején csak ha brand keresésnél fontos

04. SZÁMOK ÉS ÉVSZÁMOK

• “10 tipp”, “2026 útmutató”
• +37% CTR növelés átlagosan

📊 Technikai Részletek#

Karakter Számláló Szabályok#

Pixel Width Kalkulátor#

Canvas-based mérés:

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
ctx.font = '20px Arial'; // Google használt font közelítés
const width = ctx.measureText(text).width;

Limit-ek:

• Desktop: ~600px (Google desktop SERP szélesség)
• Mobil: ~500px (Google mobil SERP szélesség)

Miért fontos?

• WWWWW szélesebb mint iiiii azonos karakterszámnál
• Pixel alapú mérés pontosabb
• Ha túlléped → levágás (“…”)

SERP Preview Renderelés#

Desktop:

• Kék klikkhető title (max 60 kar vagy 600px)
• Zöld URL breadcrumb alatt
• Szürke meta description (ha van)

Mobil:

• Rövidebb title megjelenítés
• Truncated URL (“seotudas.hu › …”)
• Kevesebb hely → gyakoribb levágás

💡 Title Tag Best Practices#

DO (Csináld):#

• ✅ 50-60 karakter optimális hossz
• ✅ Kulcsszó az első 30 karakterben
• ✅ Egyedi minden oldalhoz
• ✅ Brand név a végén (kivéve brand keresésnél)
• ✅ Számok és évszámok (“10 tipp 2026-ban”)
• ✅ CTA szavak: “Útmutató”, “Gyors”, “Ingyenes”, “Teljes”
• ✅ Érzelmi szavak: “Bevált”, “Legjobb”, “Garantált”
• ✅ Kérdések (ha releváns): “Hogyan…”, “Mi az a…”

DON’T (Ne csináld):#

• ❌ Keyword stuffing (“SEO SEO SEO Tippek SEO”)
• ❌ ALL CAPS (“TITLE TAG OPTIMALIZÁLÁS!!!”)
• ❌ Duplikált title-ok több oldalon
• ❌ Brand név elöl (kivéve brand kereséseknél)
• ❌ Generic title: “Főoldal”, “Üdvözöljük”
• ❌ Speciális karakterek: Sok emoji, szimbólumok
• ❌ Túl hosszú: > 60 karakter levágódik

🎨 Funkciók Részletesen#

1. Real-Time Karakter Számláló#

Ahogy gépelsz:

• Számláló frissül (0 → 52 → 60)
• Progress bar animálódik
• Színes badge változik automatikusan

Progress bar animáció:

[███████████████░░░░░] 52 / 60

• 0-29 kar: Sárga
• 30-55 kar: Zöld
• 55-60 kar: Narancs
• 60+ kar: Piros

2. Pixel Width Warning#

Ha túlléped:

⚠️ Figyelem! 
A title tag túl hosszú és levágásra kerülhet!

Desktop: 620px / 600px (TÚL HOSSZÚ!)
Mobil: 510px / 500px (TÚL HOSSZÚ!)

Javaslat: Rövidítsd 20 karakterrel.

3. Desktop & Mobil Preview#

Desktop snippet (teljes):

Title Tag Optimalizálás - 10 Arany Szabály | SEOTudás
https://seotudas.hu › technikai-seo › on-page-seo › title-tag

Mobil snippet (kompakt):

Title Tag Optimalizálás...
seotudas.hu › ... › title-tag

4. Clear Button#

Funkció:

• Törli az összes szöveget
• EMPTY státuszra vált
• Újrakezdheted tiszta lappal

5. Best Practice Cards#

4 vizuális kártya:

• Számozott (01, 02, 03, 04)
• Egyszerű, rövid tipp
• Azonnal érthető best practice

🎓 Title Tag Formula#

Optimális struktúra:

[Fő Kulcsszó] - [Kiegészítő Info] | [Brand]

Példák:

Blog cikk:

Title Tag Optimalizálás - 10 Arany Szabály | SEOTudás
^^^^^^^^^^^^^^^^^^^^^^^^   ^^^^^^^^^^^^^^^^   ^^^^^^^^^
Fő kulcsszó (30 kar)       Kiegészítő (15)    Brand (8)
= 53 karakter PERFECT ✅

E-commerce termék:

iPhone 15 Pro Max 256GB Titán - Ingyenes Szállítás
^^^^^^^^^^^^^^^^^^^^^^^^^^^     ^^^^^^^^^^^^^^^^^^^^
Fő kulcsszó + spec (27)         USP (19)
= 46 karakter PERFECT ✅

Szolgáltatás:

SEO Audit - Professzionális Elemzés | SEOTudás
^^^^^^^^^   ^^^^^^^^^^^^^^^^^^^^^^^^   ^^^^^^^^^
Service     Érték                      Brand
= 49 karakter PERFECT ✅

Helyi vállalkozás:

Pizzéria Budapest Belváros - Olasz Pizza | Napoli
^^^^^^^^^ ^^^^^^^^ ^^^^^^^^   ^^^^^^^^^^^   ^^^^^^
Service   Város    Kerület    USP          Brand
= 52 karakter PERFECT ✅

📱 Responsive Design#

Layout:

• Mobil (< 768px): Stacked (input fent, preview lent)
• Tablet (768-1024px): Side-by-side (input bal, preview jobb)
• Desktop (1024px+): Wide layout, 3:2 arány

Dark mode:

• Fekete háttér, fehér szöveg
• Grid pattern háttér animáció
• High contrast design (brutalist style)

🔗 Kapcsolódó Eszközök#

Használd együtt:

• Meta Description Ellenőrző - Meta description optimalizálás
• Heading Analyzer - H1-H6 struktúra ellenőrzés
• Schema Generator - Strukturált adatok hozzáadása

🎓 További Tanulás#

Olvasd el:

• Title Tag Optimalizálás - Teljes Útmutató
• Meta Description vs Title Tag
• SERP CTR Optimalizálás

❓ Gyakori Kérdések#

Mennyi az ideális title tag hossz? 50-60 karakter az optimális. Ez biztosítja, hogy ne vágja le a Google sem desktopon, sem mobilon, és teljes mértékben kihasználod a rendelkezésre álló helyet.

Kell minden oldalnak title tag? Igen! Minden oldalnak KELL egyedi title tag-je. Ha nincs, a Google automatikusan generál egyet (gyakran rossz minőségű).

Hova kerüljön a kulcsszó? A főbb kulcsszó kerüljön az első 30 karakterbe. Google nagyobb súlyt ad a title elején lévő szavaknak.

Brand név elöl vagy hátul? Hátul a legtöbb esetben: “Cikk Címe | Brand”. Elöl csak ha brand keresésre optimalizálsz: “Brand | Szolgáltatás”.

Mi van ha túllépem a 60 karaktert? Google levágja (“…”). A fontos információ (kulcsszó, USP) kerüljön az első 50-55 karakterbe.

Használhatok emoji-kat? Igen, de ritkán. Néhány emoji működhet (🏆 ⭐ ✅), de általában kerülendő - professziótlan hatást kelthet.