SEO: základní optimalizace webu
- před 6 měsíci
- 12 min čtení
- 2345 počet slov
SEO: základní věci pro programátora
Základní SEO principy a optimalizace webu. Praktické tipy, jak zlepšit viditelnost vašeho webu a zvýšit organickou návštěvnost z pohledu programátora.
HEAD - SEO
Meta description
<head>
<meta charset="utf-8">
<meta name="title" content="Tvorba webu | Tvorba webových aplikací | Freelancer - Ludwig Tomáš">
<meta name="description" content="Freelancer, který vám pomůže s tvorbou webových stránek, e-shopů, webových aplikací a s realizací inviduálních rešení.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="webová stránka, tvorba stránek, tvorba aplikace, tvorba e-shopu, programátor">
<meta name="language" content="Czech">
<meta name="author" content="Tomas Ludwig">
<meta name="robots" content="index, follow">
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="black" />
</head>Title ( důležité )
- Jedna z nejdůležitějších on-page SEO faktorů.
- První věc, která se zobrazí uživateli při vyhledávání ve výsledcích (SERP - Search Engine Results Page).
- HTML element, který specifikuje název webové stránky, nachází se v sekci <head>.
- Doporučená délka title tagu se pohybuje mezi 50-60 znaky.
- Klíčová slova by měla být přirozeně začleněna do title tagu, ideálně na začátek.
- Každá stránka by měla mít jedinečný title tag, který přesně popisuje obsah stránky.
- Může obsahovat název značky nebo firmy na konci (např. "Jak optimalizovat web pro SEO | MojeFirma").
<meta name="title" content="Tvorba webu | Tvorba webových aplikací | Freelancer - Ludwig Tomáš">
Description ( důležité )
- HTML element, který specifikuje krátký popis obsahu webové stránky, nachází se v sekci
<head> - Důležitý on-page SEO faktor, který ovlivňuje proklikovost (CTR) ve výsledcích vyhledávání
- Zobrazuje se jako úryvek pod title tagem ve výsledcích vyhledávání (SERP - Search Engine Results Page)
- Doporučená délka description tagu se pohybuje mezi 70-155 znaky
- Klíčová slova by měla být přirozeně začleněna do description tagu, ale nepřeháněj to s jejich počtem
- Každá stránka by měla mít jedinečný description tag, který přesně popisuje obsah stránky a motivuje uživatele k prokliku
- Měl by být napsán poutavě a jasně komunikovat hodnotu stránky nebo nabídky
<meta name="description" content="Freelancer, který vám pomůže s tvorbou webových stránek, e-shopů, webových aplikací a s realizací inviduálních rešení.">Viewport ( důležité )
- HTML meta tag, který specifikuje, jak má být obsah stránky zobrazen na různých zařízeních, zejména mobilních
- Základní syntaxe viewport meta tagu:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
1. Základní Viewport Meta Tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
2. Viewport Meta Tag s Omezujícím Zvětšením:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
3. Viewport Meta Tag se Zákazem Manuálního Zvětšení:
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
Keywords ( nedůležité )
- Aktuálně má minimální nebo žádný vliv na hodnocení stránky ve většině vyhledávačů, včetně Google.
- Stále může být užitečný pro některé menší vyhledávače nebo pro interní vyhledávání na webu.
<meta name="keywords" content="webová stránka, tvorba stránek, tvorba aplikace, tvorba e-shopu, programátor">
Language ( důležité )
- HTML atribut, který specifikuje jazykový kód obsahu webové stránky
- Pomáhá vyhledávačům a prohlížečům správně interpretovat a zobrazovat obsah stránky
- Zlepšuje přístupnost a uživatelský zážitek tím, že informuje uživatele a jejich zařízení o jazyku použitém na stránce
<meta name="language" content="Czech">
Author ( nedůležité )
- HTML meta tag, který specifikuje autora webové stránky nebo dokumentu.
- Pomáhá identifikovat, kdo je tvůrcem obsahu, což může být užitečné pro věrohodnost a správu autorských práv.
- Může být užitečný pro různé nástroje a služby, které potřebují informace o autorovi, jako jsou vyhledávače, RSS čtečky nebo analytické nástroje.
<meta name="author" content="Tomas Ludwig">
Robots (pokročilé)
- HTML meta tag, který umožňuje řídit chování robotů (crawlerů) vyhledávačů na svých stránkách.
- Základní syntaxe:
<meta name="robots" content="index, follow">- Další možnosti
index: Stránka by měla být indexována (zahrnuta do vyhledávačů).noindex: Stránka by neměla být indexována (nebude zahrnuta do vyhledávačů).follow: Roboti by měli následovat odkazy na stránce.nofollow: Roboti by neměli následovat odkazy na stránce.noarchive: Stránka by neměla být uchována v archivu.nosnippet: Vyhledávače by neměly zobrazovat výňatky z obsahu stránky.noimageindex: Obrázky na stránce by neměly být indexovány.max-snippet:[number]: Maximální délka textového výňatku výsledků vyhledávače.max-image-preview:[setting]: Maximální velikost náhledu obrázků.max-video-preview:[setting]: Maximální velikost náhledu videí.
Theme Color (pokročilé)
- Meta tag v HTML, který specifikuje barvu tématu pro UI prvky prohlížeče.
- Používá se k přizpůsobení vzhledu adresního řádku prohlížeče a dalších UI prvků podle značky nebo tématu webové stránky.
- Zlepšuje vizuální jednotnost a uživatelský zážitek webové stránky.
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="black" />Favicon
<!-- Favicon pro různé velikosti -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png">
<!-- Favicon v ICO formátu (pro Windows) -->
<link rel="icon" type="image/x-icon" href="/favicon/favicon.ico">
<!-- Apple touch icon pro iOS (180x180px) -->
<link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png">
<!-- Maskable icon (SVG nebo PNG) pro moderní prohlížeče -->
<link rel="mask-icon" href="/favicon/mask-icon.svg" color="#4285f4">Favicon je malý obrázek, který se zobrazuje vedle názvu webové stránky v záložkách prohlížeče a v jiných UI prvcích.
Vizuální Identifikace: Pomáhá uživatelům rozpoznat vaši stránku mezi jinými otevřenými záložkami, což může zlepšit uživatelskou zkušenost a návratnost.
Snadná Identifikace: I když přímo neovlivňuje hodnocení ve vyhledávačích, může zvýšit důvěryhodnost a zapamatovatelnost vašeho webu.
Open Graph
Některé aplikace podporují grafický náhled webu (Signal, Discord, Facebook).
<meta property="og:title" content="Tomáš Ludwig - Webový vývojář">
<meta property="og:description" content="Pomůžu Vám vytvořit profesionální webové stránky, webové ....">
<meta property="og:url" content="https://ludwigtomas.cz/">
<meta property="og:type" content="website">
<meta property="og:image" content="https://ludwigtomas.cz/source/skills/avatar.png">- og:title ( důležité )
- og:tescription ( důležité )
- og:url ( důležité )
- og:type ( důležité )
- og:image ( důležité )
Rich link preview (Twitter)
Obodoba jako OG (Open Graph), akorát má pokročilejší možnosti nastavení, které jsou optimalizované přímo pro Twitterové uživatele a prostředí.
<meta name="twitter:card" content="https://ludwigtomas.cz/source/skills/avatar.png">
<meta name="twitter:title" content="Tomáš Ludwig - Webový vývojář">
<meta name="twitter:site" content="@dev_ludwigtomas">
<meta name="twitter:creator" content="@dev_ludwigtomas">
<meta name="twitter:description" content="Pomůžu Vám vytvořit profesionální webové stránky, webové aplikace a grafiku ....">
<meta name="twitter:image" content="https://ludwigtomas.cz/source/skills/avatar.png">CODE - SEO
HTML attributy - Semantic struktura
Jedna z hlavních věcí v dnešní době je, držet takzvanou "semantic" strukturu webu. Příchodem HTML5 jsme získali nové html tagy jako jsou například section, article, aside, header a hromada dalších, které napomáhají prohlížečům lépe pochopit strukturu webu.
- Špatná semantic struktura (využívat pouze "div")
<body>
<div id="header">
<h1>My Blog</h1>
</div>
<div id="main-content">
<div class="post">
<h2>Post Title 1</h2>
<p>Posted on January 1, 2023</p>
<p>Content of the first post...</p>
</div>
<div class="post">
<h2>Post Title 2</h2>
<p>Posted on February 1, 2023</p>
<p>Content of the second post...</p>
</div>
</div>
</body>
- Správná semantic struktura (využívat HTML5 tagy, header, main, article, time, aside, footer, ....)
<body>
<header>
<h1>My Blog</h1>
</header>
<main>
<article>
<header>
<h2>Post Title 1</h2>
<time datetime="2023-02-01">February 1, 2023</time>
</header>
<p>Content of the first post...</p>
</article>
<article>
<header>
<h2>Post Title 2</h2>
<time datetime="2023-02-01">February 1, 2023</time>
</header>
<p>Content of the second post...</p>
</article>
</main>
</body>
Myslet na slepé lidi
- HTML tagy jako jsou button, anchor, img, input, div
<button>Potvrdit</button>
<a href="ludwigtomas.cz">Developer</a>
<img src="developer.png"/>
<input type="text" placeholder="vlož své jméno"/>
<div>February 1, 2023</div>- by měly obsahovat "popisky" pro slepé lidi, vzorový kód:
<button aria-label="Potvrdit">Potvrdit</button>
<a aria-label="Odkaz na ludwigtomas.cz" href="ludwigtomas.cz">Developer</a>
<img alt="developer" src="developer.png" />
<input aria-label="Vlož své jméno" type="text" placeholder="vlož své jméno"/>
<time datetime="2023-02-01">February 1, 2023</time>
Mobilní Rychlost a přívětivost
- prohlížeče, konkrétně Google, berou velký ohled na rychlost "mobilní verze" webu, kterou lze otestovat například přímo Google nástrojem PageSpeed.
SEO (Další možnosti)
- Keywords (Google trends)
- vytvořit firmu na Google (Google business)
- vytvořit firmu na seznamu (firmy.cz)
- indexovat web na Google (Google search console)
- indexovat web na Bingu (Bing webmaster)
- vytvořit sociální účty, který budou odkazovat na váš web
