Jak formátovat texty a fotografie na webu?

Jak správně a krásně umístit obsah na web? Podělme se o naše zkušenosti!

Naplnit web obsahem je velmi důležitá a zodpovědná práce. Skládá se z mnoha velkých i malých etap: od definování cílů, záměrů a struktury až po zpracování a umístění hotových textů a grafických materiálů. Každá fáze je velmi důležitá. Proto spěch, nepozornost, nedostatek technických dovedností nebo frivolní přístup k této problematice vedou k nepříjemným chybám. To vše může ovlivnit efektivitu zdroje a jeho výsledky vyhledávání.

Pokud chcete vědět:

1. Co byste měli zvážit při vyplňování webu?
2. S jakými obtížemi se nejčastěji setkáváte?
3. Čemu je důležité věnovat pozornost jako prvnímu?

Přečtěte si náš článek!

Důležité body dobrého obsahu

Text, obrázky, videa jsou důležité nejen pro informační obsah zdroje, ale také pro jeho propagaci. Důležitá je promyšlená struktura informačních bloků, přítomnost odkazů, příkladů a ilustrací. Veškerý obsah by měl být jedinečný, užitečný a srozumitelný pro vaše publikum. V takové věci nemohou být žádné maličkosti.

Nekvalitní obrázky nebo videa, neohrabané fonty a překlepy zdržují konečnou fázi vývoje webu a zanechávají v návštěvnících negativní dojem. V důsledku jednoduchých „chyb“ během registrace může dojít k následujícímu:

• informace a grafické bloky se zobrazují nesprávně;
• vznikají potíže s nastavením optimalizace pro vyhledávače;
• Odkazy nefungují správně a přesměrovávají návštěvníky na stránky s nepotřebnými informacemi nebo chybou 404.

Úkol správce obsahu:

• věnovat pozornost chybám;
• komunikovat s projektovým týmem vývoje webu a zákazníkem, abyste rychle a efektivně odstranili „chyby“.

Co vám pomůže vyvarovat se chyb?

Vizuální design je totiž to první, co návštěvník webu uvidí. V tuto chvíli se tvoří první dojem! Nerovnoměrné nadpisy a odsazení, textové moduly různých velikostí, převislé čáry a přerušovaná slova jsou patrné a snižují efektivitu interakce s webem.

Hlavní zbraní správce obsahu je proto pozornost. Pomáhá efektivně připravit materiál a rychle odhalit chyby. V procesu práce musí správce obsahu vzít v úvahu vše: podmínky technických specifikací, vyvinuté designové rozvržení, požadavky na rozvržení. Pouze v tomto případě můžete získat kvalitní produkt.

Co je důležité ve fázi přípravy textu?

Chyby: gramatické a pravopisné

Chyby v textu vás mohou stát vaši reputaci. Nevinný překlep může navíc změnit význam celé fráze. Někdy je to velmi nebezpečné! Proto je důležité si vše pečlivě přečíst a zkontrolovat. Můžete použít online zdroje podpory.

Správné dělení slov

Důležitým designovým bodem je správné zobrazení textových polí na různých zařízeních (stolní počítače, mobilní telefony). Chcete-li se vyhnout potížím s dlouhými slovy a nadpisy při vyplňování textových bloků, můžete:

• zajistit možnost správného převodu,
• nahradit dlouhé nápisy kratšími synonymy.

Například v mobilní verzi webu by měl být dlouhý nadpis „Atrakce“ umístěn ve dvou řádcích. Tento problém lze vyřešit pomocí značek nebo („Atrakce“ nebo „Atrakce“).

Takto se titulek zobrazuje na ploše

V mobilní verzi název také vypadá správně

Pamatujte na mezery a písma

Správně zvolené písmo umožňuje lépe vnímat informace. Měl by se správně zobrazovat na všech stránkách webu.

Aby byl text lépe vizuálně vnímán, je zapotřebí „vzduch“. Chcete-li to provést, nastavte intervaly mezi odstavci. Používá se například značka html

. A pro přidání dalšího intervalu před nebo za obrázek (tabulku) použijte značku
. Konečný text s odstavci a odsazením by měl vypadat úhledně.

Příklad návrhu mezer mezi odstavci a dalších mezer před fotografií pomocí značek

Speciální znaky a html značky

Dobře navržený text může obsahovat:

• nadpisy různých úrovní (od do);
• odrážkové a číslované seznamy (tagy a );
• vybraný text: „tučné“ (tagy nebo ) nebo kurzíva ( a );
• odkazy: vnější, vnitřní a kotvící (tag);
• tabulky(tag);
• text horního a dolního indexu (značky a ) atd.

Text je kurzívou (tag)

Příklad tučného písma (značky a )

Při práci na značkování se musíte ujistit, že se v hotovém textu nezobrazují zbytečné znaky (například stejné značky HTML). Vyplatí se také zkontrolovat správnost označení HTML. Neměl by obsahovat tagy, které se týkají rozvržení stránky (například) a prázdné odstavce ( Je důležité sledovat, jak se zobrazují textové moduly a výsledek zkontrolovat s designovým rozvržením webu).

Tento přístup pomáhá učinit text čitelnějším a zvyšuje jeho efektivitu. Čisté uspořádání zajišťuje vizuální pořádek. A to může nepřímo ovlivnit pozici webu ve výsledcích vyhledávání.

Extra prázdný odstavec (tagy).

Publikování obsahu a nastavení optimalizace pro vyhledávače

Přidávání stránek a adres URL

Při přidávání nových stránek na váš web je důležité dodržovat pravidla sémantické adresy URL a pokyny společnosti Google pro adresy URL. A to:

• používat srozumitelná slova, písmena latinské abecedy a některé symboly (například „-“);
• vytvářet logické posloupnosti slov v názvech v souladu se strukturou webu (např. všechny zpravodajské stránky v URL budou mít blok „/news/“).

Příklad správného formátování URL

Název, popis a nadpisy

Jednou z největších chyb je úplná shoda meta tagů (název, popis) a hlavních nadpisů (H1). Musí být jedinečné pro každou stránku a zároveň mít stejný význam.

Název, popis a pole H1 v administrativním panelu 1C-Bitrix

Příklad správného názvu a kompozice H1 pro stránku

Správné vyplnění polí H1, title a description header ovlivňuje úspěšnost optimalizace pro vyhledávače a propagace webu. Nadpis H1 by se měl na stránce objevit pouze jednou. Proto se vyplatí pečlivě zkontrolovat označení ( ) a jeho zobrazení na webu. Hlavní textový materiál musí být rozdělen podle významu do bloků s nadpisy nižší úrovně , , . To je další plus pro propagaci vyhledávačů.

Nastavení propojení

Interní hypertextové odkazy na stránkách webu jsou důležité jak pro návštěvníky, tak pro vyhledávací roboty, které indexují obsah. Je důležité, aby odkazy fungovaly a přesměrovávaly na správné stránky. Pracovní šablona je „/razdel/stranica“. Do struktury byste neměli zahrnout název domény. V opačném případě při přesunu webu na „bojový“ web z testovacího webu nebo při změně domény budete muset trávit čas opravou chyb.

Příklad správného návrhu interního odkazu (Tilda Publishing website builder)

_{П správný formát externích odkazů v CMS „1C-Bitrix“ (na stránky partnerských společností)}

externí odkazy

Všechny odkazy na externí zdroje by se měly otevřít na nové kartě. To lze nakonfigurovat ručně pomocí atributu „target=“_blank““. Otevření odkazu neuzavře relaci na hlavní stránce. A čas, který návštěvník stráví na otevřené stránce, se sečte s časem stráveným na té předchozí. Velkou výhodou toho je, že prodlužuje celkovou dobu trvání relace, což má pozitivní vliv na metriky SEO.

Jazykové verze

Pokud jsou verze webu v různých jazycích umístěny na stejné doméně, struktura a adresy URL stránek by měly být podobné. Tím je zajištěn správný přechod mezi jazykovými verzemi, když je návštěvník na konkrétní stránce.

Přidávání obsahu fotografií a videí

Správné zobrazení obrázků

Všechny vybrané fotografie musí být kvalitní: jasné, správně oříznuté a zmenšené. Je důležité zkontrolovat, jak se zobrazují při načítání (jednotlivě, v blocích, v obecné galerii). Nedbale navržené obrázky nebudou přitahovat pozornost uživatelů.

Příklad dobrého obrázku, který je vhodný pro rozvržení

Opravte názvy souborů

Při nahrávání obrázků je důležité:

• jména by měla být jasná a odrážet podstatu obrázku;
• v názvech používejte pouze latinská písmena a znak „-“;
• Ujistěte se, že název souboru odpovídá názvu zobrazenému ve veřejné části webu (v tomto případě bude vyhledávání podle obrázku fungovat správně).

Dobrá volba: Rybnye-kotlety_1.jpg, ceník.doc
Nesprávná volba: Ceník.doc, foto1.jpg, vfsdffvft5ytj5l4j5l.jpg

Příklad správného vyplnění parametrů fotografie: title, alt a atributy title

TITLE a ALT pro obrázky

Správně vyplněné atributy každého obrázku jsou důležité pro propagaci webu ve vyhledávačích:

• — title — text, který se projeví, když na fotku najedete kurzorem;
• — alt — popis toho, co je zobrazeno na fotografii (co nejpřesnější).

Stejně jako u webových stránek by se tyto atributy pro jeden obrázek měly lišit, ale měly by mít stejný význam. Podobné obrázky v galerii musí mít také jedinečné popisy atributů.

Dobrým příkladem: „Car X – přední – mřížka“, „Car X – podpisové LED osvětlení“
Špatný příklad: „Auto X 1“, „Auto X 2“

Příklad správného názvu stahovaného souboru

Kontrola přehrávání videa

Video můžete použít na webu:

• — staženo přímo;
• — integrované s hostováním videa (například YouTube).

Video by se mělo přehrávat bez chyb a závad.

Příklad správného použití videí na YouTube

Doufáme, že vám naše rady pomohou vyrovnat se s nelehkým a zodpovědným úkolem naplnění vašeho webu.