SEO: základní optimalizace webu

  • před 2 týdny
  • 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)

 

Pojďme se sejít !

📱 +420 730 681 670

✉ info@ludwigtomas.cz

🖥️ Web - Kontakty

Další informace

před 2 týdny přidáno

62 počet návštěv

2345 počet slov

12 minut čtení

Další nabízené blogy

SEO: základní optimalizace webu

před 2 týdny

62

2345

SEO: základní optimalizace webu

Laravel Horizon | V produkci Pomocí Supervisora

před 1 měsícem

64

617

Laravel Horizon | V produkci Pomocí Supervisora

Vue.js - Moderní javascriptový framework

před 7 měsíci

40

1370

Vue.js - Moderní javascriptový framework

Laravel - nejpopulárnější PHP framework

před 7 měsíci

50

1805

Laravel - nejpopulárnější PHP framework