WYSIWYG: Editor, který ukáže, jak bude text vypadat

Chcete na web přidat článek, ale nemáte tušení o HTML? Potřebujete upravit popisek produktu v e-shopu, ale programátor má dovolenou? Přesně pro tyto situace existují vizuální editory (WYSIWYG).

Za roky práce s weby jsem viděla, jak se WYSIWYG editory staly standardem. Dnes je používá prakticky každý redakční systém, e-shop i emailový nástroj. Přesto se stále setkávám s klienty, kteří nevědí, jak z nich vytěžit maximum.

V tomto článku vám vysvětlím, co WYSIWYG znamená, kde se s ním setkáte a jak ho správně používat pro lepší výsledky.

Co je WYSIWYG

Co zkratka znamená

WYSIWYG je zkratka anglického spojení What You See Is What You Get - v překladu "co vidíte, to dostanete (What You See Is What You Get)".

Jednoduše řečeno: text, který vidíte při editaci, bude vypadat stejně i po publikaci na webu. Tučný text zůstane tučný, nadpis bude nadpisem a obrázek se zobrazí tam, kam ho umístíte.

Je to jako psaní ve Wordu - nemusíte přemýšlet nad kódem, jednoduše formátujete text pomocí tlačítek a vidíte výsledek v reálném čase.

Proč WYSIWYG vznikl

V počátcích internetu vypadala tvorba obsahu úplně jinak. Každá stránka se musela psát ručně v HTML kódu. Pro běžného uživatele to byla noční můra.

Příklad HTML kódu pro jednoduchý odstavec:

<p>Toto je <strong>tučný text</strong> a toto je <em>kurzíva</em>.</p>

WYSIWYG editory vznikly, aby tuto bariéru odstranily. Místo psaní kódu stačí kliknout na tlačítko "B" pro tučné písmo nebo "I" pro kurzívu - stejně jako ve Wordu.

První komerční WYSIWYG editor pro web se objevil kolem roku 1996. Od té doby se technologie dramaticky vyvinula a dnes jsou tyto editory součástí prakticky každého CMS.

Jak WYSIWYG editor funguje

Vizuální vs. kódové zobrazení

Většina moderních WYSIWYG editorů nabízí dva režimy zobrazení:

Vizuální režim je výchozí a pro 90 % práce naprosto dostačuje. Kódový režim se hodí, když potřebujete něco specifického - třeba vložit embed kód videa nebo opravit podivné formátování.

Tip z praxe: Pokud se vám text chová divně (například se špatně zalamuje nebo má podivné mezery), přepněte do kódového zobrazení. Často tam najdete skryté HTML tagy, které způsobují problémy.

Formátování textu

Standardní WYSIWYG editor nabízí tyto možnosti formátování:

Základní formátování:

• Tučné písmo (Ctrl+B)
• Kurzíva (Ctrl+I)
• Podtržení
• Přeškrtnutí

Struktura textu:

• Nadpisy H1-H6
• Odstavce
• Číslované seznamy
• Nečíslované seznamy
• Citace (blockquote)

Pokročilé prvky:

• Odkazy
• Obrázky
• Tabulky
• Horizontální čára

Pro SEO copywriting je klíčové správné používání nadpisů. Struktura H1 > H2 > H3 pomáhá nejen čtenářům, ale i vyhledávačům pochopit hierarchii informací.

Kde se WYSIWYG používá

WordPress

WordPress je nejpoužívanější redakční systém na světě - pohání přibližně 43 % všech webů. A právě WYSIWYG editor (dříve TinyMCE, dnes Gutenberg) je jeho srdcem.

Gutenberg editor od WordPressu 5.0 přinesl blokový přístup - každý prvek (odstavec, nadpis, obrázek) je samostatný blok, který můžete přesouvat a upravovat.

Výhody Gutenbergu:

• Intuitivní drag & drop
• Responzivní náhled
• Rozšiřitelnost pomocí pluginů
• Reusable bloky pro opakující se obsah

E-shopové platformy

Shoptet, Shopify, WooCommerce - všechny moderní e-shopové platformy využívají WYSIWYG editory pro:

• Popisy produktů
• Obsah kategorií
• Blogové články
• Stránky (O nás, Kontakt, VOP)

Tip pro e-shopy: Popisky produktů pište přímo v WYSIWYG editoru platformy. Nekopírujte text z Wordu - přenese se i skryté formátování, které může způsobit problémy se zobrazením.

Email nástroje

Mailchimp, Ecomail, Brevo - všechny emailové platformy mají vlastní WYSIWYG editory pro tvorbu newsletterů.

Emailové editory jsou specifické tím, že musí zajistit správné zobrazení ve všech emailových klientech (Gmail, Outlook, Apple Mail). Proto jsou často jednodušší než webové editory a nabízejí méně možností formátování.

Populární WYSIWYG editory

Který vybrat? Pokud používáte WordPress, nemáte na výběr - Gutenberg je výchozí. Pro vlastní projekty je TinyMCE nebo CKEditor bezpečná volba s dlouhou historií a velkou komunitou.

WYSIWYG vs. Markdown vs. HTML

Markdown je textový formát používající jednoduchou syntaxi (**tučné**, *kurzíva*). Je oblíbený mezi vývojáři a technickými pisateli pro svou jednoduchost a čistý výstup.

HTML dává úplnou kontrolu, ale vyžaduje znalost značkovacího jazyka. Pro běžného uživatele není praktický.

WYSIWYG je kompromis - nabízí jednoduchost při zachování většiny potřebných funkcí. Pro 95 % uživatelů je to správná volba.

Časté problémy s WYSIWYG editory

1. Přehnané formátování

Nejčastější chyba: kopírování textu z Wordu. Word přidává obrovské množství skrytého formátování, které způsobuje chaos v HTML kódu.

Řešení: Vždy vkládejte text přes Ctrl+Shift+V (vložit bez formátování) nebo použijte funkci "Vložit jako prostý text".

2. Nekonzistentní nadpisy

Viděla jsem weby, kde měl každý článek jinou strukturu nadpisů. Někde H1, jinde H3, občas dokonce tučný text místo nadpisu.

Řešení: Stanovte si pravidla (H1 = název článku, H2 = hlavní sekce, H3 = podsekce) a dodržujte je.

3. Příliš mnoho formátování

Když má odstavec tučné, kurzívu, podtržení a barevný text, čtenář neví, co je důležité.

Řešení: Méně je více. Tučné použijte maximálně 2-3x na odstavec pro skutečně klíčové informace.

4. Chybějící alt texty obrázků

WYSIWYG editory umožňují vkládat obrázky, ale automaticky nevyžadují alt text. Pro SEO a přístupnost je ale nezbytný.

Řešení: Před publikací zkontrolujte, že každý obrázek má vyplněný popisný alt text.

5. Rozbité odkazy

Editor vám nedá vědět, že stránka, na kterou odkazujete, již neexistuje.

Řešení: Pravidelně kontrolujte interní i externí odkazy pomocí nástrojů jako Screaming Frog nebo online link checkerů.

Souvislost se SEO

WYSIWYG editory jsou klíčovým nástrojem pro on-page SEO, protože právě v nich vzniká většina obsahu na webu. Správné používání editoru přímo ovlivňuje, jak vyhledávače chápou strukturu a hierarchii vašeho obsahu. Nejdůležitějším aspektem je správné používání nadpisů - Google využívá značky H1-H6 k pochopení struktury stránky a relevance jednotlivých sekcí pro vyhledávací dotazy.

Čistý HTML kód generovaný WYSIWYG editorem má vliv na Core Web Vitals a rychlost načítání stránky. Zbytečné HTML tagy z kopírování z Wordu zvětšují velikost stránky a mohou způsobovat problémy s vykreslováním. To negativně ovlivňuje metriky jako LCP a CLS. Navíc nekonzistentní nebo přehnaně složitý kód může zmást crawlery vyhledávačů při indexaci obsahu.

Praktické SEO tipy pro práci s WYSIWYG editorem: vždy dodržujte hierarchii nadpisů (jeden H1 na stránku, H2 pro hlavní sekce, H3 pro podsekce), přidávejte alt texty ke všem obrázkům s popisem obsahu a relevantními klíčovými slovy, vytvářejte interní odkazy na související články pro lepší provázanost webu a používejte odrážkové seznamy pro strukturovaný obsah (Google je často zobrazuje jako featured snippets). Před publikací přepněte do HTML režimu a zkontrolujte, že kód neobsahuje zbytečné prázdné tagy nebo duplicitní formátování.

Často kladené otázky (FAQ)

Co znamená zkratka WYSIWYG?

WYSIWYG je zkratka anglického "What You See Is What You Get" - tedy "co vidíte, to dostanete". Označuje typ editoru, kde výsledek editace vidíte v reálném čase, bez nutnosti znát HTML kód.

Je WYSIWYG editor zdarma?

Většina základních WYSIWYG editorů je open source a zdarma (TinyMCE, CKEditor, Quill). Pokud používáte WordPress, Shoptet nebo jinou platformu, editor je již součástí systému bez příplatku.

Může WYSIWYG editor ovlivnit SEO?

Ano, ale záleží na tom, jak ho používáte. Správná struktura nadpisů, alt texty u obrázků a čistý kód pomáhají SEO. Naopak přehnané formátování a zbytečný kód z Wordu mohou webu škodit.

Jak vložit text z Wordu bez problémů?

Nejlepší metoda je Ctrl+Shift+V (vložit bez formátování). Alternativně můžete text nejdřív vložit do Poznámkového bloku (Notepad), a až pak do WYSIWYG editoru. Tím se odstraní veškeré skryté formátování.

Jaký WYSIWYG editor je nejlepší pro WordPress?

WordPress od verze 5.0 používá výchozí editor Gutenberg, který pracuje s bloky. Pro klasické psaní můžete doinstalovat plugin "Classic Editor", který vrátí původní TinyMCE rozhraní. Obě možnosti jsou plně funkční - záleží na preferencích.

Shrnutí: WYSIWYG je váš nejlepší přítel

WYSIWYG editory demokratizovaly tvorbu webového obsahu. Díky nim může kdokoliv publikovat článek, upravit popis produktu nebo vytvořit newsletter - bez jediného řádku kódu.

3 pravidla pro efektivní práci s WYSIWYG editorem:

1. Vkládejte text bez formátování - vždy Ctrl+Shift+V
2. Dodržujte strukturu nadpisů - H1 > H2 > H3, vždy konzistentně
3. Méně formátování = více přehlednosti - tučné jen pro to nejdůležitější

Potřebujete pomoct s obsahovou strategií?

Pomůžu vám nastavit efektivní proces tvorby obsahu - od výběru klíčových slov po publikaci optimalizovaných článků.

Objednejte si konzultaci

Související články

• CMS: Redakční systém pro správu obsahu
• SEO copywriting: Texty, co rankují i prodávají