20+ základních částí webu [Updated]

Dnešní obchodní prostředí je hybridem osobních a digitálních zážitků. Vybudování schůdných webových stránek výrazně zvýší důvěryhodnost vaší firmy, protože zákazníkům poskytne spolehlivý a všudypřítomný zdroj informací ve snadno dostupném formátu.

Moderní nástroje pro tvorbu webových stránek to usnadňují než kdykoli předtím, přesto je důležité znát základní anatomii webu. Každá komponenta slouží na vašem webu k důležitému účelu a dohromady by měla návštěvníkům i zákazníkům nabídnout bezproblémovou zkušenost s vaší firmou.

Zde jsou klíčové komponenty webové stránky, které potřebujete znát.

Základní části webu

Toto jsou klíčové komponenty webu. Většina z nás o nich nepřemýšlí, když procházíme internetem, ale všimli by si jich, kdyby chyběly nebo byly nějak mimo, protože jsou to základní prvky.

Záhlaví je horní část vašeho webu, která obsahuje logonabídky, obvykle vyhledávací pole a často jednoduchá tlačítka s výzvou k akci, jako je přihlášení k e-mailu nebo „zavolej teď” knoflík.

Současným trendem jsou jednoduchá záhlaví, která se načítají rychle, spíše než těžká, obrázky nabitá, která zabírají polovinu stránky.

Je důležité udržovat záhlaví konzistentní na všech stránkách vašeho webu, aby se návštěvníci mohli snadno pohybovat.

Zápatí je spodní část vašeho webu a funguje jako sekundární nabídka. Obsahuje odkazy na informace jako:

• Právní informace
• Kariéra
• Ochrana osobních údajů/Podmínky
• Kontaktujte nás
• O nás

Vaše zápatí by mělo minimálně obsahovat vaše informace o autorských právech a zásady ochrany osobních údajů a podmínky.

To jsou důležité právní detaily. Mnoho webových stránek obsahuje v zápatí také mapu webu. To je užitečné pro velké weby s více sekcemi, protože to uživatelům pomáhá rychleji se po webu pohybovat.

Postranní panely jsou jednou z nejvíce přizpůsobitelných částí webu.

Mohou být na levé nebo pravé straně stránky nebo na obou. Obsahují libovolnou kombinaci následujících:

• výzvy k akci
• Sociální zdroje
• Nedávné příspěvky na blogu
• Emailová přihlášení
• O nás
• Bios autorů
• Nákupní widgety
• Ohlasy zákazníků
• Kontaktní informace
• videa

Vyberte si pro svůj postranní panel několik nejdůležitějších, abyste se vyhnuli přeplněnému pocitu.

Návštěvníci potřebují způsob, jak navštívit různé sekce webu. Vaše nabídka je mapa vašeho webu a měla by být dostupná v záhlaví.

Odkazy na nabídky by měly být rozděleny podle kategorií způsobem, který dává smysl vašemu podnikání – například rezidenční a obchodní služby pro instalatérskou společnost.

Kliknutí na odkaz přesměruje návštěvníky na různé stránky webu.

Na mobilu je menu obvykle reprezentováno jako tři řádky naskládané na sobě – tedy „hamburgerové menu“. Prohlížeče klepnutím na nabídku zobrazí rozšířené možnosti. Ujistěte se, že každá webová stránka je propojena s vaším menu, jinak je návštěvníci nenajdou. Rozbalitelné nabídky mohou pomoci snížit nepořádek v záhlaví vašeho webu.

Obsah těla

Všechny prvky designu nakonec existují tak, aby doplňovaly obsah těla každé stránky.

To obvykle odkazuje na psaný obsah stránky, i když pokud máte stránku s velkým množstvím obrázků (například fotogalerii), pak jsou hlavním obsahem fotografie.

Termín „tělo“ odkazuje na kód HTML pro tuto sekci, který říká vaší obsahové platformě, aby jej umístila do velkého otevřeného prostoru uprostřed vaší stránky.

Strouhanka

Drobečková navigace je podobná nabídce webu v tom, že pomáhá uživateli pochopit, kde se na vašem webu aktuálně nachází. Drobečková navigace může být také použita k navigaci z jedné stránky na druhou, pokud je web uspořádán hierarchicky.

Nejen, že je drobenka užitečná pro lidi, ale Google ji také používá k lepšímu pochopení vaší stránky.

To má dopad na SEO vašeho webu, protože Google může hodnotit vaše webové stránky pro vhodné vyhledávací dotazy.

Zde je příklad strouhanky na webu elektronického obchodu:

Jak můžete vidět ze stezky drobečkové navigace, uživatel je v „Zaměřte a vystřelte digitální fotoaparáty“, ale lze snadno přejít do “Fotoaparát a fotografie“ kategorii pouhým kliknutím na odkaz.

Drobečková navigace se však neomezuje pouze na webové stránky elektronického obchodu. Mnoho společností SaaS používá ve svých příspěvcích na blogu drobky.

Obrázky/Hlavní obrázek

Webové stránky potřebují vizuální prvky, aby upoutaly pozornost diváka a rychle sdělily, jaký typ obsahu na daném webu najdou.

Většina stránek obsahuje hlavní obrázek nebo obrázek hrdiny. Toto je reprezentativní obrázek pro každou stránku. Měly by být zahrnuty i další obrázky, ale hlavní obrázek by měl být první.

Na WordPress je doporučený obrázek známý také jako miniatura příspěvku. Tento obrázek je indexován s webovou stránkou a objevuje se ve vyhledávání jako vizuální spojení pro danou stránku.

Posuvník

Posuvník webových stránek je sbírka obrázků nebo videí, které se automaticky otáčejí, téměř jako prezentace, odtud název „posuvník“.

Posuvníky lze umístit na kteroukoli část webu, ale jsou obzvláště běžné jako náhrada za obrázek hrdiny na domovské stránce.

Posuvníky jsou běžnými prvky na webových stránkách elektronického obchodu. Obvykle obsahují nadpis, nějaký text, obrázek a tlačítko s výzvou k akci.

Tlačítka sociálního sdílení

Když se někdo dostane na váš web, chcete mu co nejvíce usnadnit sdílení vašeho obsahu nebo produktů se svými přáteli.

Zde přicházejí na řadu tlačítka pro sdílení na sociálních sítích. Tlačítka pro sdílení na sociálních sítích umožňují návštěvníkům sdílet stránky na různých sociálních sítích, jako je Facebook, LinkedIn a Twitter. Můžete také přidat tlačítko, které mohou návštěvníci použít ke sdílení vašeho obsahu prostřednictvím e-mailu.

Tyto prvky lze přidat do různých dalších částí webu, jako je zápatí, postranní panel, příspěvky na blogu atd.

Hlavní webové stránky

Každý web má sbírku základních stránek, které jsou klíčové pro anatomii webu. Tyto jsou:

• Domov
• Přistání
• O nás
• Kontakt
• Blog

Probereme, k čemu každá stránka slouží.

Domovská stránka

Toto je domovská základna a jedna ze základních součástí webu. Odkazuje na všechny vaše další stránky a slouží jako přivítání a úvod pro návštěvníky. Obvykle obsahuje obrázek funkce, odkazy na klíčový obsah vašeho webu a hlavní úvod do vašeho podnikání nebo jeho výhody.

Logo, které zahrnete do záhlaví (které by mělo být na každé stránce, pamatujte), by mělo odkazovat zpět na vaši domovskou stránku pro případ, že by se návštěvníci ztratili v různých částech webu.

Vaše domovská stránka by měla zůstat konzistentní, ale vždy aktuální. Zastaralé webové stránky narušují důvěru zákazníků.

Vstupní stránka

Vstupní stránka se liší od domovské stránky. Vstupní stránky jsou obvykle spojeny s propagační kampaní a poskytují potenciálním zákazníkům místo přistát když kliknou na reklamu nebo příspěvek na sociální síti.

Vstupní stránky jsou jednoduché a propagují jednu přímou výzvu k akci, např.kup nyní“,”zavolejte si o cenovou nabídku zdarma“, nebo “stáhněte si průvodce“.

Můžete vytvořit více vstupních stránek pro konkrétní propagační akce nebo kampaně a zastaralé stránky byste měli zrušit, abyste se vyhnuli nasměrování potenciálních zákazníků na zbytečný obsah.

Stránka O nás

Vaše “O nás“ Stránka je jednou z nejdůležitějších na vašem webu.

Často je to první zastávka pro nové návštěvníky vašich stránek a měla by obsahovat něco o vaší historii, poslání a charakteristických rysech.

Kontaktní stránka

Vaše kontaktní stránka je nezbytná a měla by být dostupná z jakékoli části vašeho webu prostřednictvím postranního panelu nebo nabídky záhlaví.

Udržujte tuto stránku jednoduchou a přehlednou. Základními součástmi jsou e-mailový formulář, adresa a telefonní číslo.

Blog webových stránek

Blogy jsou skvělým nástrojem pro zvýšení návštěvnosti vašich stránek pomocí autoritativního obsahu. Vaše blogy by měly být přístupné ze stránky blogu, která uvádí jednotlivé příspěvky postupně, přičemž nejnovější je nahoře.

Můžete mít také sekci pro doporučené blogové příspěvky, které chcete zvýraznit, nebo místo pro prezentaci vašich nejoblíbenějších příspěvků.

Možná budete muset blogové příspěvky rozdělit na více stránek, abyste urychlili načítání. Ujistěte se, že máte příspěvky v chronologickém pořadí, i když můžete divákům umožnit seřadit články podle tématu nebo kategorie, zvláště pokud máte hodně příspěvků.

Chybová stránka 404

Když byla jedna z adres URL vašich webových stránek odstraněna nebo přesunuta, návštěvníci se dostanou na chybovou stránku 404, pokud smazaná adresa URL nebyla přesměrována.

I když to není opravdu dobré pro vaše SEO nebo uživatelskou zkušenost webu, nakonec budete mít 404 stránek, protože váš web bude získávat další a další stránky. Je to téměř nevyhnutelné.

Nedovolte však uživatelům, aby se dostali jen na nějakou běžnou stránku 404, která nedělá nic pro to, aby zůstali na vašem webu.

Místo toho byste měli pro svůj web vytvořit vlastní chybovou stránku 404 s odkazy na další důležité stránky nebo „stránky s penězi“.

Můžete také přidat vyhledávací pole nebo odkaz na domovskou stránku.

Když se podíváte na stránku Asana 404, uvidíte, že využili příležitosti k přesměrování návštěvníků přicházejících na mrtvé stránky na jejich domovskou stránku, blog a užitečné průvodce.

Důležité webové stránky koncepty

Pokud jde o design webových stránek, existuje mnoho žargonu. Zde je několik nejdůležitějších pojmů, které byste měli znát.

Nad skladem

Noviny jsou složené a nejdůležitější příběh je obvykle umístěn na přední straně směrem nahoru, takže jej lze rychle naskenovat, i když jsou noviny složené.

Pokud jde o části webové stránky, „nad okrajem“ znamená obsah, který si návštěvníci mohou prohlédnout, aniž by museli stránku posouvat dolů.

Výzkum ukazuje, že lidé tráví až 80 % svého času skenováním nad okrajem webového obsahu, většinou se rozhodují, zda se chtějí obtěžovat posouváním dolů, aby mohli pokračovat ve čtení.

Mělo by se jednat o obsah, který upoutá pozornost, jako je výrazný nadpis, zajímavý obrázek funkce nebo jednořádkové shrnutí uvádějící, o čem stránka je a proč je hodnotná.

Výzva k akci (CTA)

Webové stránky mohou mít více než jednu výzvu k akci a mohou být umístěny v několika různých částech webu: postranní panel a záhlaví jsou nejběžnější.

Výzvy k akci vyzývají diváky, aby udělali něco pro další interakci s vaší značkou a zobrazili se na vaší webové stránce jako vyskakovací okno nebo formulář. Mezi běžné fráze patří:

• předplatit
• Zjistěte více
• Vyzkoušej zdarma
• Objednat teď
• Podívej jak
• jednej teď
• Rezervujte si další dobrodružství
• Zavolejte nám
• Naplánujte si konzultaci
• Nechte se sladit
• Dopřát
• Získejte 10% slevu

Výzvy k akci by měly být naléhavé, ale ne dotěrné a měly by odpovídat tónu vaší značky. Ty obvykle vyžadují, aby divák uvedl e-mailovou adresu.

Všechny vaše nejdůležitější webové stránky – domovská stránka, kontaktujte nás, o nás a blogová stránka – by měly obsahovat výzvu k akci, i když je to tak jednoduché jako e-mailový přihlašovací formulář.

formuláře

Webový formulář je stránka, kam uživatelé dobrovolně zadávají osobní údaje. Průzkumy, přihlášení k odběru e-mailů, aktualizace zásilek a věrnostní programy jsou zpracovávány prostřednictvím webových formulářů.

Formuláře udržujte krátké a jasné a vždy uvádějte prohlášení o tom, jak budou informace použity. Podle HubSpot zlepšení uživatelské zkušenosti s webovými formuláři zvýšilo míru konverze potenciálních zákazníků podniků až o 75 %.

Mobilní responzivní webové stránky

Celosvětově se polovina veškerého prohlížení internetu odehrává na mobilním zařízení. Více uživatelů navíc nakupuje prostřednictvím mobilních zařízení. To znamená, že váš web musí být optimalizován pro snadné prohlížení a interakci prostřednictvím chytrých telefonů a tabletů.

To se neděje automaticky. Někteří tvůrci webových stránek jsou zaměřeni na webové stránky optimalizované pro mobily – Jedním z příkladů je neustálý kontakt.

Dobré mobilní webové stránky jsou jednoduché, mají jasné CTA a obsahují vysoce kvalitní obrázky.

Tvůrci webových stránek a systémy pro správu obsahu

Služby pro tvorbu webu, jako je WordPress a Shopify, výrazně zjednodušily vytváření webu bez pokročilých technických znalostí.

To je místo, kde většina lidí začíná proces navrhování a vytváření webových stránek. Každá stránka je v podstatě řada kódů a tvůrce webových stránek vám umožňuje navrhnout web bez přímého přístupu k tomuto kódu.

Uživatelé si vybírají z řady předem navržených šablon, které nabízejí různé stupně přizpůsobení.

Tvůrci webových stránek umožňují správcům webových stránek nahrávat nový obsah, měnit rozložení stránek, integrovat formuláře a sociální kanály a přidávat speciální nástroje zvané pluginy.

Většina webových tvůrců se také nazývá systémy pro správu obsahu, což znamená, že můžete psát, upravovat a zveřejňovat svůj obsah pomocí jeho rozhraní.

Zde jsme zvážili některé z nejpopulárnějších tvůrců webových stránek:

WordPress

Jedním z nejpopulárnějších dostupných tvůrců webových stránek je WordPress.

S nekonečnými možnostmi přizpůsobení a rozumnými ročními náklady nabízí WordPress také mnoho možností optimalizace pro mobilní zařízení. I když možná budete muset tu a tam upravit nějaké HTML, je to většinou uživatelsky přívětivé.

Shopify

Shopify, pravděpodobně nejvíce přizpůsobitelný tvůrce webových stránek elektronického obchodu, má více než milion a půl uživatelů po celém světě. Má integrovaný platební systém, což z něj dělá skvělou volbu pro internetové obchody.

Wix

Wix je dobrá volba, pokud chcete začít rychle a nejste tak vybíraví v možnostech přizpůsobení. I když nemá tolik možností organizace blogů jako WordPress, může být dobrou volbou pro malé podniky, které chtějí výkladní skříň a některé možnosti obsahu.

Squarespace

Všechny šablony Squarespace jsou automaticky vhodné pro mobilní zařízení a jednoduchý, jasný design je oblíbený u osobností veřejného života, jako je Amanda Gorman. Je také levnější než někteří konkurenti.

Weebly

Weebly, dobrá volba pro weby elektronického obchodu, má intuitivní rozhraní a nabízí omezený zážitek zdarma, s úrovněmi za skromné ​​ceny, které nabízejí další funkce. Má spíše sekci Aplikace než pluginy, které mohou být pro uživatele WordPress známější.

Technické části webu

Zákulisní informace, jako je hosting, domény a CMS, jsou stále důležité pro úplné pochopení anatomie webových stránek. Níže jsme pokryli nejdůležitější součásti.

Pluginy

Pluginy jsou jako aplikace, které vašemu webu přidávají funkce. Váš tvůrce webových stránek nabídne nabídku pluginů kompatibilních s jeho rozhraním. Některé jsou zdarma a jiné vyžadují předplatné nebo účet u služby třetí strany.

Pluginy lze nalézt na mnoha částech webu a mohou zahrnovat:

• Tlačítka sdílení na sociálních sítích
• Vložená videa
• E-mailové přihlašovací formuláře
• SEO nástroje
• Podílové počítadla
• Generátory vyskakovacích oken

Hosting

Webhosting je v podstatě vaše malá část internetových nemovitostí, na kterých stavíte svůj web. Všechny webové stránky si musí zakoupit hosting, což je pronájem prostoru na serveru pro ukládání a publikování vašeho obsahu.

Stejně jako nájemné, i hosting je třeba každoročně obnovovat. Většina tvůrců webových stránek také nabízí seznam kompatibilních hostingových služeb.

Doménové jméno

Každá webová stránka má jedinečné umístění na internetu, ke kterému se přistupuje pomocí její IP adresy. Tato adresa je dlouhá řada čísel, takže existuje textová verze „vhodná pro člověka“, která se nazývá název domény.

Název domény se také nazývá webová adresa. Řídí se standardním vzorcem:

www
doménové jméno
.org, .com, .edu atd.

To by mělo co nejjasněji sdělovat povahu webové stránky a navíc by mělo být snadno zapamatovatelné a pravopisné.

Například celebrity si jako doménu často vybírají své vlastní jméno. Běžný název může být již převzat nebo název obtížně pravopisný může lidem ztížit nalezení webu.

URL

URL je zkratka pro Uniform Resource Locator a odkazuje na přesné umístění jakékoli dané webové stránky. Zahrnuje název vaší domény a konkrétní informace o stránce.

Názvy domén přesměrovávají uživatele na domovskou stránku webu. Adresy URL směřují na konkrétní stránku na tomto webu.

Například, https://www.taylorswift.com/ přesměruje na domovskou stránku oficiálního webu Taylor Swift https://store.taylorswift.com/collections/new-merchandise-beach-collection/products/just-a-summer-thing-scrunchies přesměruje na stránku s konkrétním produktem v obchodě daného webu.

Většina tvůrců webových stránek poskytuje určitou kontrolu nad adresou URL. Pokud se rozhodnete jej nepřizpůsobit, bude automaticky vygenerován na základě názvu vaší webové stránky.

SSL

SSL je zkratka pro secure sockets layer a je to typ kódu, který zajišťuje bezpečné šifrování mezi serverem a prohlížečem.

To chrání data, která procházejí mezi dvěma místy. To zabraňuje útočníkům třetích stran zachytit data zadaná do prohlížeče, když se dostávají na server. Proto se doporučuje, aby jakýkoli web požadující osobní údaje získal certifikát SSL.

Certifikáty SSL se dodávají v řadě s různými úrovněmi ochrany. Certifikáty s vyšším zabezpečením jsou obvykle vyžadovány zákonem například pro finanční nebo pojišťovací webové stránky, zatímco standardní web elektronického obchodu bude mít nižší požadavky na zabezpečení.

Cena certifikátu také závisí na úrovni zabezpečení, kterou poskytuje, a většina z nich musí být každoročně obnovována.

SEO

SEO je zkratka pro Search Engine Optimization a je primárním způsobem, jak vaše webové stránky najdou vyhledávače (zejména Google).

Většina hledajících klikne pouze na první stránku s výsledky vyhledávání, takže je důležité, aby se vaše stránky jevily pro Google jako užitečné.

Toho je dosaženo optimalizací nebo zahrnutím klíčových slov do různých částí webu.

Provádění výzkumu klíčových slov identifikuje, která klíčová slova vaše cílová skupina hledá. Existuje mnoho nástrojů navržených k provádění výzkumu klíčových slov nebo použití funkce prediktivního vyhledávání Google je dobrý způsob, jak najít dlouhé vyhledávací fráze, nazývané long-tailová klíčová slova.

Mezi sekce webové stránky, které je třeba optimalizovat, patří:

Popis metadat: Každá webová stránka má meta popis, který vysvětluje, o čem stránka je. Váš webový tvůrce vám umožňuje toto přímo upravit tak, aby zahrnovalo důležitá klíčová slova.

Název titulku: Zahrňte do svých názvů cílová klíčová slova, abyste vyhledávačům a čtenářům okamžitě ukázali, že toto je téma, které hledají.

Tagy záhlaví: Použití správné kombinace značek záhlaví ke strukturování hierarchie témat představuje nejlepší postup pro publikování obsahu na vašem webu.

Hlavní text: Vyhněte se rozptýlení klíčových slov všude, což poškozuje vaše hodnocení na Googlu. Jejich uvážlivé zahrnutí do prvního odstavce je nejstrategičtějším způsobem optimalizace stránek.

CDN

CDN je zkratka pro Content Delivery Network a je definována jako síť serverů umístěných na různých místech po celém světě.

Účelem CDN je zvýšit rychlost načítání vašeho webu nebo aplikace hostováním vašeho obsahu/souborů webu na serveru, který je uživateli nejblíže.

V důsledku toho může síť CDN snížit míru okamžitého opuštění a prodloužit čas strávený na vašem webu. Oba jsou klíčem ke zlepšení celkového výkonu webu.

Příklady CDN zahrnují:

• mračna
• StackPath
• KeyCDN

Sitemap

Sitemap je soubor, který uvádí všechny adresy URL webových stránek spolu s užitečnými metadaty o každé adrese URL.

Jak název napovídá, jde v podstatě o „mapu“ vašeho webu. Tato mapa pomáhá prohledávačům vyhledávačů najít a indexovat všechny stránky vašeho webu.

Pokud váš web obsahuje stránky, které nebyly indexovány Googlem, nebudou se tyto stránky moci zobrazit ve výsledcích vyhledávání.

V důsledku toho hrají soubory Sitemap zásadní roli v indexovatelnosti vašeho webu.

Naštěstí většina systémů pro správu obsahu automaticky generuje mapu webu vašeho webu, takže to nemusíte dělat ručně.

Můžete také použít bezplatný nástroj XML Sitemap Generator od Ahrefs k vytvoření celé mapy webu vašeho webu.

Jak optimalizujete stránky svých klientů? Rádi bychom od vás slyšeli. Tweetujte nám @seoptimer.

Kliknutím na obrázek níže si stáhnete naši infografiku o základních částech webu.