koryto.net Blog o technologii, programowaniu i projektach 2026-03-28T00:00:00.000Z https://koryto.net/ Dariusz Koryto Architektura i implementacja bloga na Eleventy — od koncepcji do deploymentu 2026-03-28T00:00:00.000Z 2026-03-28T00:00:00.000Z https://koryto.net/posts/jak-stworzylem-bloga/ Kompletny przewodnik techniczny budowy nowoczesnego bloga z użyciem Eleventy. Architektura projektu, konfiguracja środowiska, lokalny development i zdalny deployment na GitHub Pages. Ten artykuł dokumentuje kompletny proces budowy bloga opartego na Eleventy (11ty) — od decyzji architektonicznych, przez konfigurację środowiska developerskiego, aż po automatyzację deploymentu. Nie jest to tutorial krok-po-kroku, lecz techniczna dokumentacja decyzji projektowych z gotowymi do użycia fragmentami kodu.

Dlaczego Eleventy?

Przed wyborem technologii przeanalizowałem dostępne opcje w kategoriach kluczowych dla projektu długoterminowego:

Kryterium WordPress Gatsby/Next.js Eleventy
Złożoność Wysoka (PHP + baza) Średnia (React + GraphQL) Minimalna
Wydajność Wymaga optymalizacji Dobra (ale JS hydration) Optymalna (czysty HTML)
Bezpieczeństwo Wymaga aktualizacji Zależy od konfiguracji Maksymalne (statyczne pliki)
Koszty hostingu Wymagany serwer PHP CDN (darmowy) CDN (darmowy)
Kontrola nad HTML Ograniczona Średnia (abstrakcja React) Całkowita
Czas buildu N/A 30-120s (duże projekty) < 5s

Eleventy wygrał ze względu na zero-abstrakcyjność — dostaję dokładnie ten HTML, który napiszę, bez narzutu frameworka. To fundamentalne dla:

  • Optymalizacji SEO (pełna kontrola nad strukturą)
  • Czasu ładowania (brak JavaScriptu do hydracji)
  • Długowieczności projektu (niezależność od trendów frontendowych)

Architektura projektu

Zastosowałem podejście folder-per-feature z separacją odpowiedzialności:

project-root/
├── src/                          # Źródła (input dla 11ty)
│   ├── _data/                    # Globalny stan aplikacji
│   │   └── site.json             # Konfiguracja domeny, autora, SEO
│   ├── _includes/                # Komponenty wielokrotnego użytku
│   │   ├── layouts/              # Layouty stron
│   │   │   ├── base.njk          # Layout główny z pełnym SEO
│   │   │   └── post.njk          # Layout artykułu
│   │   └── partials/             # Częściowe szablony
│   │       ├── header.njk
│   │       ├── footer.njk
│   │       └── breadcrumbs.njk
│   ├── assets/                   # Zasoby statyczne (kopiowane 1:1)
│   │   ├── css/
│   │   ├── js/
│   │   └── images/
│   ├── posts/                    # Treść artykułów
│   │   └── [slug]/               # Folder na wpis + jego zasoby
│   │       ├── index.md
│   │       └── images/
│   ├── index.njk                 # Strona główna
│   ├── blog.njk                  # Archiwum wpisów
│   ├── o-mnie.md                 # Strona statyczna
│   └── 404.md                    # Strona błędu
├── _site/                        # Output (generowany, gitignored)
├── .github/
│   └── workflows/
│       └── deploy.yml            # CI/CD pipeline
├── eleventy.config.js            # Konfiguracja builda
├── package.json
└── .gitignore

Dlaczego taka struktura?

_data/site.json — centralna konfiguracja eliminująca magiczne stringi z szablonów. Zmiana domeny wymaga edycji jednego pliku.

_includes/layouts/ vs _includes/partials/ — rozdzielenie layoutów (pełne strony) od partials (komponenty). Layouty używają dziedziczenia, partials są includowane.

posts/[slug]/index.md — każdy wpis w osobnym folderze umożliwia:

  • Kolokację treści i zasobów (obrazy obok markdown)
  • Przenoszenie wpisów jako atomowych jednostek
  • Łatwe zarządzanie permalinkami (/posts/nazwa/ zamiast /posts/nazwa.html)

Konfiguracja środowiska lokalnego

Wymagania systemowe

  • Node.js w wersji LTS (obecnie 20.x) — sprawdź node --version
  • npm lub yarn — do zarządzania zależnościami
  • Git — do kontroli wersji
  • Edytor kodu z obsługą Nunjucks (VS Code + rozszerzenie "Nunjucks Template")

Inicjalizacja projektu

# 1. Utworzenie katalogu projektu
mkdir moj-blog && cd moj-blog

# 2. Inicjalizacja repozytorium git
git init

# 3. Inicjalizacja projektu Node.js
npm init -y

# 4. Instalacja Eleventy
npm install @11ty/eleventy --save-dev

# 5. Instalacja dodatkowych zależności (opcjonalne)
npm install html-minifier --save-dev  # Minifikacja w produkcji
npm install luxon --save-dev          # Zaawansowana obsługa dat

Konfiguracja 11ty (eleventy.config.js)

Plik konfiguracyjny definiuje transformacje, kolekcje i filtry:

const { DateTime } = require("luxon");

module.exports = function(eleventyConfig) {
  // ═══════════════════════════════════════════════════
  // PASSTHROUGH COPY — pliki kopiowane bez zmian
  // ═══════════════════════════════════════════════════
  eleventyConfig.addPassthroughCopy("src/assets/css");
  eleventyConfig.addPassthroughCopy("src/assets/js");
  eleventyConfig.addPassthroughCopy("src/assets/images");
  eleventyConfig.addPassthroughCopy("src/favicon.ico");

  // ═══════════════════════════════════════════════════
  // KOLEKCJE — grupowanie treści
  // ═══════════════════════════════════════════════════
  eleventyConfig.addCollection("posts", function(collectionApi) {
    return collectionApi
      .getFilteredByGlob("src/posts/**/*.md")
      .sort((a, b) => b.date - a.date); // Sortowanie od najnowszych
  });

  // ═══════════════════════════════════════════════════
  // FILTRY — przetwarzanie danych w szablonach
  // ═══════════════════════════════════════════════════
  
  // Formatowanie daty dla czytelnika (np. "28 marca 2026")
  eleventyConfig.addFilter("dateDisplay", (dateObj) => {
    return DateTime.fromJSDate(dateObj, { zone: 'utc' })
      .setLocale('pl')
      .toFormat('d MMMM yyyy');
  });

  // Formatowanie ISO dla meta tagów i JSON-LD
  eleventyConfig.addFilter("isoDate", (dateObj) => {
    return DateTime.fromJSDate(dateObj, { zone: 'utc' }).toISO();
  });

  // Szacowanie czasu czytania (200 słów/min)
  eleventyConfig.addFilter("readingTime", (content) => {
    const wordsPerMinute = 200;
    const wordCount = content.split(/\s+/).length;
    return Math.ceil(wordCount / wordsPerMinute);
  });

  // Skracanie tekstu dla meta description
  eleventyConfig.addFilter("truncate", (text, length = 160) => {
    if (!text || text.length <= length) return text;
    return text.substring(0, length).replace(/\s+\S*$/, '') + '...';
  });

  // ═══════════════════════════════════════════════════
  // TRANSFORMACJE — modyfikacja wygenerowanego HTML
  // ═══════════════════════════════════════════════════
  
  // Lazy loading dla obrazków
  eleventyConfig.addTransform("lazyImages", function(content, outputPath) {
    if (!outputPath || !outputPath.endsWith(".html")) return content;
    return content.replace(
      /<img(?![^>]*loading=)([^>]*)>/gi,
      '<img$1 loading="lazy" decoding="async">'
    );
  });

  // Minifikacja HTML w produkcji
  if (process.env.NODE_ENV === 'production') {
    const htmlmin = require("html-minifier");
    eleventyConfig.addTransform("htmlmin", function(content, outputPath) {
      if (!outputPath || !outputPath.endsWith(".html")) return content;
      return htmlmin.minify(content, {
        useShortDoctype: true,
        removeComments: true,
        collapseWhitespace: true,
        minifyCSS: true,
        minifyJS: true
      });
    });
  }

  // ═══════════════════════════════════════════════════
  // KONFIGURACJA KATALOGÓW
  // ═══════════════════════════════════════════════════
  return {
    dir: {
      input: "src",           // Katalog źródłowy
      output: "_site",        // Katalog wyjściowy (gitignored)
      includes: "_includes",  // Ścieżka względem input
      data: "_data"           // Ścieżka względem input
    },
    templateFormats: ["md", "njk", "html"],
    markdownTemplateEngine: "njk",  // Nunjucks w Markdown
    pathPrefix: "/"  // Dla GitHub Pages: "/nazwa-repo/"
  };
};

Skrypty w package.json

{
  "name": "moj-blog",
  "version": "1.0.0",
  "scripts": {
    "start": "eleventy --serve --watch",
    "build": "eleventy",
    "build:prod": "NODE_ENV=production eleventy",
    "clean": "rm -rf _site"
  },
  "devDependencies": {
    "@11ty/eleventy": "^3.0.0",
    "html-minifier": "^4.5.0",
    "luxon": "^3.4.0"
  }
}

Lokalny development

Uruchomienie serwera deweloperskiego

# Development z hot-reload
npm start

# Lub bezpośrednio
npx eleventy --serve --watch

Serwer deweloperski dostępny pod http://localhost:8080. Flagi:

  • --serve — uruchamia lokalny serwer HTTP
  • --watch — obserwuje zmiany w plikach i przebudowuje automatycznie

Workflow podczas pisania artykułu

# 1. Utwórz folder dla nowego wpisu
mkdir -p src/posts/moj-nowy-wpis

# 2. Utwórz plik z frontmatter
cat > src/posts/moj-nowy-wpis/index.md << 'EOF'
---
title: Tytuł artykułu
description: Krótki opis dla SEO
date: 2026-03-28
tags:
  - 11ty
  - tutorial
---

Treść artykułu w Markdown...
EOF

# 3. Serwer automatycznie przebuduje i odświeży stronę

Debugowanie i inspekcja

Sprawdź wygenerowany kod w katalogu _site/:

  • _site/index.html — strona główna
  • _site/posts/nazwa-wpisu/index.html — pojedynczy artykuł
  • _site/sitemap.xml — mapa witryny

System szablonów Nunjucks

Layout bazowy (base.njk)

Layout to szablon, który otacza treść. Używa dziedziczenia (dziecko rozszerza rodzica):

<!DOCTYPE html>
<html lang="pl" dir="ltr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  {# Zmienne SEO z hierarchią: frontmatter > site.json > defaults #}
  {% set pageTitle = title | default(site.title) %}
  {% set pageDesc = description | default(site.description) | truncate(160) %}
  
  <title>{% if title %}{{ title }} | {% endif %}{{ site.title }}</title>
  <meta name="description" content="{{ pageDesc }}">
  
  {# Preconnect dla wydajności #}
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="dns-prefetch" href="https://fonts.gstatic.com">
  
  {# Style #}
  <link rel="stylesheet" href="{{ '/assets/css/main.css' | url }}">
</head>
<body>
  {% include "partials/header.njk" %}
  
  <main id="main-content">
    {{ content | safe }}
  </main>
  
  {% include "partials/footer.njk" %}
</body>
</html>

Layout artykułu (post.njk)

Rozszerza layout bazowy i dodaje specyficzne dla artykułu elementy:

---
layout: layouts/base.njk
---

<article class="post">
  <header class="post-header">
    <div class="container">
      <div class="post-meta">
        <time datetime="{{ date | isoDate }}">
          {{ date | dateDisplay }}
        </time>
        <span class="reading-time">
          {{ content | readingTime }} min czytania
        </span>
      </div>
      <h1 class="post-title">{{ title }}</h1>
      {% if description %}
      <p class="post-description">{{ description }}</p>
      {% endif %}
    </div>
  </header>
  
  <div class="post-content">
    <div class="container">
      {{ content | safe }}
    </div>
  </div>
</article>

Składnia Nunjucks — kluczowe elementy

{# Komentarz (nie pojawia się w HTML) #}

{# Wydruk zmiennej #}
{{ zmienna }}

{# Filtry (przetwarzanie potokowe) #}
{{ tekst | truncate(100) | upper }}

{# Logika warunkowa #}
{% if warunek %}
  <p>Prawda</p>
{% elif inny_warunek %}
  <p>Alternatywa</p>
{% else %}
  <p>Fałsz</p>
{% endif %}

{# Pętla #}
{% for post in collections.posts %}
  <article>
    <h2><a href="{{ post.url }}">{{ post.data.title }}</a></h2>
  </article>
{% endfor %}

{# Include (wstawianie partiali) #}
{% include "partials/header.njk" %}

{# Rozszerzanie layoutu #}
{% extends "layouts/base.njk" %}
{% block content %}
  <p>Treść bloku</p>
{% endblock %}

Zdalny deployment na GitHub Pages

Strategia CI/CD

Zastosowałem podejście GitOps — repozytorium jest jedynym źródłem prawdy, a deployment jest efektem ubocznym pusha:

Local: git push origin main
              ↓
GitHub: trigger workflow (on: push)
              ↓
Actions: checkout → setup-node → npm ci → npm run build
              ↓
Deploy: artifact ./_site → deploy to gh-pages branch
              ↓
GitHub Pages: serve static files via CDN

Konfiguracja repozytorium

  1. Utwórz repozytorium na GitHub (np. username.github.io dla głównej strony lub nazwa-repo dla subścieżki)

  2. Dodaj .gitignore:

# Dependencies
node_modules/
package-lock.json

# Build output
_site/

# Environment
.env
.env.local

# Editor
.vscode/
.idea/
*.swp
  1. Włącz GitHub Pages w ustawieniach repozytorium:
    • Settings → Pages → Source: "Deploy from a branch"
    • Branch: gh-pages / root

Workflow GitHub Actions

Plik .github/workflows/deploy.yml:

name: Deploy to GitHub Pages

on:
  push:
    branches: [main, master]
  workflow_dispatch:  # Ręczne uruchomienie z UI

permissions:
  contents: read
  pages: write
  id-token: write

concurrency:
  group: "pages"
  cancel-in-progress: false

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'npm'

      - name: Install dependencies
        run: npm ci

      - name: Build site
        run: npm run build
        env:
          NODE_ENV: production

      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          path: ./_site

  deploy:
    needs: build
    runs-on: ubuntu-latest
    environment:
      name: github-pages
      url: $
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

Konfiguracja dla subścieżki (pathPrefix)

Jeśli repozytorium nie nazywa się username.github.io, strona będzie dostępna pod username.github.io/nazwa-repo/. Wymaga to modyfikacji:

// eleventy.config.js
return {
  pathPrefix: "/nazwa-repo/",  // Ważne: prowadzący i kończący slash
  // ...
};

W szablonach używaj filtra url:

<!-- Zawsze generuje poprawną ścieżkę -->
<link rel="stylesheet" href="/assets/css/main.css">

<!-- Dla subścieżki wygeneruje: /nazwa-repo/assets/css/main.css -->

Weryfikacja deploymentu

Po każdym pushu sprawdź:

  1. Status workflow: GitHub → Actions → wybierz workflow → sprawdź logi
  2. Dostępność: Otwórz https://username.github.io/nazwa-repo/
  3. Konsola przeglądarki: Brak błędów 404 dla zasobów
  4. Sieć: Wszystkie zasoby ładują się poprawnie

Rozwiązywanie problemów

Błąd 404 dla zasobów CSS/JS

  • Sprawdź czy używasz filtra | url we wszystkich ścieżkach
  • Zweryfikuj pathPrefix w konfiguracji

Zmiany nie pojawiają się

  • GitHub Pages cache — odczekaj 2-5 minut
  • Sprawdź czy workflow zakończył się sukcesem

Błędy w buildzie

  • Lokalnie uruchom NODE_ENV=production npm run build
  • Sprawdź logi w GitHub Actions

Podsumowanie architektoniczne

Kluczowe decyzje projektowe:

  1. SSG zamiast CMS — maksymalna kontrola, minimalna złożoność, zero kosztów hostingu
  2. Folder-per-post — kolokacja treści i zasobów ułatwia zarządzanie
  3. Nunjucks zamiast React — czysty HTML bez runtime overhead
  4. GitHub Actions — automatyczny deployment bez konfiguracji serwera
  5. Path prefix — projekt gotowy do deploy na GitHub Pages od pierwszego commita

Następny krok: optymalizacja SEO dla Eleventy

]]> Witaj na moim blogu! 2026-03-29T00:00:00.000Z 2026-03-29T00:00:00.000Z https://koryto.net/posts/pierwszy-wpis/ Pierwszy wpis na nowym blogu o technologii i programowaniu To jest pierwszy wpis na moim nowym blogu! 🎉

Dlaczego zaczynam pisać?

Postanowiłem stworzyć to miejsce, aby dokumentować moją naukę, dzielić się przydatnymi rozwiązaniami oraz tworzyć portfolio moich projektów. Wierzę, że nauka przez nauczanie jest jedną z najskuteczniejszych metod nauki.

Czego możesz się spodziewać?

Na tym blogu będę pisał o:

  • Programowaniu – JavaScript, TypeScript, Node.js, Pythonaaaaaa
  • Narzędziach deweloperskich – Git, Docker, systemy CI/CD
  • Projektach open source – moje własne projekty i przydatne biblioteki
  • Best practices – wzorce projektowe, testowanie, architektura aplikacji

Technologia

Ten blog został zbudowany przy użyciu 11ty (Eleventy) – statycznego generatora stron, który jest szybki, elastyczny i nie narzuca żadnego konkretnego frameworka frontendowego. Strona jest hostowana na GitHub Pages.

// Przykładowy kod w JavaScript
const greeting = "Witaj świecie!";
console.log(greeting);

Podsumowanie

Zapraszam do regularnego odwiedzania bloga! Jeśli masz jakieś pytania lub sugestie, śmiało skontaktuj się ze mną przez GitHub.

Do zobaczenia w kolejnych wpisach! 👋

]]> Jak dodawać obrazki do artykułów - przykład 2026-03-29T00:00:00.000Z 2026-03-29T00:00:00.000Z https://koryto.net/posts/jak-dodawac-obrazki/ Praktyczny przykład użycia obrazków w artykułach na blogu. Zobacz jak to działa! Jak dodawać obrazki do artykułów - przykład

Ten artykuł pokazuje jak używać obrazków w treści wpisów. Jest to przykład praktyczny - zobacz źródło tego pliku aby zobaczyć składnię.

Podstawowa składnia

Aby dodać obrazek, użyj następującej składni Markdown:

![Opis obrazka](/assets/images/posts/nazwa-pliku.jpg)

Ważne zasady

1. Lokalizacja obrazków

Wszystkie obrazki do artykułów wrzucamy do folderu:

src/assets/images/posts/

2. Formaty plików

Format Kiedy używać
WebP Najlepszy - używaj zawsze gdy możliwe
JPG Zdjęcia, obrazy z wieloma kolorami
PNG Zrzuty ekranu, grafiki z przezroczystością
SVG Ikony, loga, proste grafiki wektorowe

3. Optymalizacja

Przed dodaniem obrazka:

  • Zmień rozmiar do max 1200px szerokości
  • Skonwertuj do WebP jeśli to możliwe
  • Upewnij się, że plik ma poniżej 500 KB

Przykłady użycia

Obrazek z tytułem (tooltip)

![Ekran startowy](url "Tytuł pojawiający się po najechaniu")

Obrazek jako link

[![Miniaturka](url-miniatury)](url-pełnego-obrazka)

Placeholdery (tymczasowe obrazki)

Jeśli nie masz jeszcze własnych obrazków, możesz użyć placeholderów:

via.placeholder.com:

![Przykładowy obrazek](https://via.placeholder.com/800x400/6366f1/ffffff?text=Przykładowy+obrazek)

picsum.photos (losowe zdjęcia):

![Losowe zdjęcie](https://picsum.photos/800/400)

placehold.co (z tekstem):

![Obrazek z tekstem](https://placehold.co/600x400/1a1a1e/818cf8?text=Twój+tekst)

SVG jako obrazki

Możesz też tworzyć proste diagramy w SVG:

![Diagram](data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjMWE0MDJlIi8+CiAgPHRleHQgeD0iNTAlIiB5PSI1MCUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxNCIgZmlsbD0iIzgxOGNmOCIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZHk9Ii4zZW0iPlByenkaxhhxWRvd3kgU1ZHPC90ZXh0Pgo8L3N2Zz4=)

Galeria

Aby stworzyć galerię, użyj HTML wewnątrz Markdown:

<div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;">

![Obrazek 1](url1)
![Obrazek 2](url2)

</div>

Checklista przed publikacją

  • [ ] Obrazek ma opisową nazwę pliku
  • [ ] Obrazek jest zoptymalizowany (rozmiar, format)
  • [ ] Dodano tekst alt (![alt text]) dla dostępności
  • [ ] Ścieżka jest poprawna (/assets/images/posts/)
  • [ ] Obrazek wyświetla się poprawnie lokalnie
  • [ ] Obrazek jest dodany do git (git add)

Więcej informacji

Pełną dokumentację znajdziesz w pliku: docs/JAK-DODAC-OBRAZKI.md

Podsumowanie:

  1. Wrzuć obrazek do src/assets/images/posts/
  2. Użyj ![opis](/assets/images/posts/nazwa.jpg) w artykule
  3. Zoptymalizuj przed dodaniem
  4. Zrób commit i push

To wszystko! 🎉

]]> SEO w 11ty - kompletny przewodnik techniczny z wdrożeniem produkcyjnym 2026-03-30T00:00:00.000Z 2026-03-30T00:00:00.000Z https://koryto.net/posts/seo-w-11ty-kompletny-przewodnik/ Profesjonalny przewodnik po optymalizacji SEO dla statycznych stron generowanych przez Eleventy. Od fundamentów po zaawansowane techniki strukturalnych danych, Core Web Vitals i architektury informacji. SEO (Search Engine Optimization) to proces systematycznego dostosowywania strony internetowej do wymagań algorytmów wyszukiwarek. W kontekście statycznych generatorów stron, takich jak Eleventy (11ty), uzyskujemy unikalną przewagę: pełną kontrolę nad generowanym kodem HTML bez narzutu frameworków JavaScriptowych.

Ten artykuł to kompletny przewodnik techniczny, który przeprowadzi Cię przez proces budowy bloga zoptymalizowanego pod kątem wyszukiwarek — od fundamentów architektonicznych po zaawansowane techniki implementacji.

Dlaczego statyczna architektura ma znaczenie dla SEO?

Przed przystąpieniem do implementacji, zrozummy fundamentalną przewagę architektury statycznej:

Mechanizm działania algorytmów wyszukiwarek

Wyszukiwarki internetowe, przede wszystkim Google, funkcjonują w oparciu o crawling (przeglądanie stron) i indexing (indeksowanie treści). Proces ten realizowany jest przez automatyczne roboty (boty/crawlery), które:

  1. Odwiedzają stronę i pobierają jej kod źródłowy
  2. Analizują strukturę HTML, CSS i JavaScript
  3. Ekstrahują treść, metadane i relacje między stronami
  4. Przechowują dane w indeksie wyszukiwarki
  5. Klasyfikują stronę pod kątem zapytań użytkowników

Problemy z CSR (Client-Side Rendering)

Tradycyjne aplikacje SPA (Single Page Application), takie jak te zbudowane na React, Vue czy Angular, generują treść dynamicznie w przeglądarce użytkownika. To stwarza fundamentalne wyzwanie:

  • Bot może otrzymać pusty lub częściowy HTML
  • Wymagane jest renderowanie JavaScriptu (JavaScript Rendering), które zużywa zasoby Googlebot
  • Opóźnienia w indeksowaniu nowych treści
  • Potencjalne błędy przy skomplikowanym kodzie JS

Przewaga SSG (Static Site Generation)

Eleventy generuje czysty, statyczny HTML w fazie builda:

Aspekt Aplikacja SPA Strona statyczna (11ty)
Czas do pierwszego bajta (TTFB) Średni-wysoki (serwer + render) Minimalny (CDN)
Widoczność dla crawlera Wymaga JS Pełna treść w HTML
Zużycie zasobów Google Wysokie (rendering JS) Minimalne
Szybkość indeksowania Opóźniona Natychmiastowa
Core Web Vitals Wymagają optymalizacji Optymalne domyślnie

Architektura informacji i struktura projektu

Zanim przejdziemy do kodu, zaprojektujmy strukturę projektu zoptymalizowaną pod kątem SEO i utrzymania:

src/
├── _data/
│   └── site.json              # Centralna konfiguracja domeny
├── _includes/
│   ├── layouts/
│   │   ├── base.njk           # Layout główny z kompletnym SEO
│   │   └── post.njk           # Layout dla artykułów
│   └── partials/
│       ├── head-seo.njk       # Izolowane komponenty SEO
│       ├── breadcrumbs.njk    # Nawigacja okruszkowa
│       └── schema-org.njk     # Strukturalne dane
├── assets/
│   ├── css/                   # Krytyczne CSS inline, reszta async
│   ├── js/                    # Minimalny JS, defer/async
│   └── images/                # WebP z fallbackiem
├── posts/                     # Treść: frontmatter + markdown
│   └── [slug]/
│       └── index.md           # Wpis z własnym folderem na obrazy
├── sitemap.xml.njk            # Dynamiczna mapa witryny
├── robots.txt.njk             # Instrukcje dla robotów
├── manifest.json.njk          # PWA i ikony systemowe
├── feed.xml.njk               # Atom/RSS dla subskrypcji
└── opensearch.xml.njk         # Wyszukiwarka w pasku adresu

Dlaczego ten układ jest optymalny?

  • Separacja odpowiedzialności: SEO w osobnych partials, łatwe do modyfikacji
  • Organizacja treści: Każdy wpis w osobnym folderze ułatwia zarządzanie zasobami
  • Automatyzacja: Pliki .njk z permalink generują pliki statyczne automatycznie
  • Skalowalność: Struktura działa dla 10, 100 i 1000 wpisów

1. System zarządzania metadanymi

Fundamentalne znaczenie meta tagów

Meta tagi to dane o danych — informacje, które nie są widoczne bezpośrednio na stronie, ale są fundamentalne dla:

  • Wyszukiwarek: description wpływa na CTR (Click-Through Rate) w SERP
  • Mediów społecznościowych: Open Graph kontroluje wygląd udostępnień
  • Platform wiadomości: Twitter Cards, LinkedIn rich previews
  • Przeglądarek: viewport, theme-color, canonical

Implementacja systemu zmiennych SEO

W pliku src/_includes/layouts/base.njk implementujemy hierarchiczną logikę metadanych:

<!DOCTYPE html>
<html lang="pl" dir="ltr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  
  
  <title>SEO w 11ty - kompletny przewodnik techniczny z wdrożeniem produkcyjnym | koryto.net</title>
  
  
  <meta name="description" content="Profesjonalny przewodnik po optymalizacji SEO dla statycznych stron generowanych przez Eleventy. Od fundamentów po zaawansowane techniki strukturalnych...">
  <meta name="keywords" content="posts, 11ty, seo, tutorial, optymalizacja">
  <meta name="author" content="">
  <meta name="copyright" content="">
  <meta name="robots" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1">
  
  
  <link rel="canonical" href="https://koryto.net/posts/seo-w-11ty-kompletny-przewodnik/">
  
  
  <link rel="alternate" hreflang="pl" href="https://koryto.net/posts/seo-w-11ty-kompletny-przewodnik/">
  <link rel="alternate" hreflang="x-default" href="https://koryto.net/posts/seo-w-11ty-kompletny-przewodnik/">
  
  
  <meta property="og:site_name" content="koryto.net">
  <meta property="og:title" content="SEO w 11ty - kompletny przewodnik techniczny z wdrożeniem produkcyjnym">
  <meta property="og:description" content="Profesjonalny przewodnik po optymalizacji SEO dla statycznych stron generowanych przez Eleventy. Od fundamentów po zaawansowane techniki strukturalnych...">
  <meta property="og:type" content="article">
  <meta property="og:url" content="https://koryto.net/posts/seo-w-11ty-kompletny-przewodnik/">
  <meta property="og:image" content="https://koryto.net/assets/images/og-default.png">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
  <meta property="og:image:alt" content="SEO w 11ty - kompletny przewodnik techniczny z wdrożeniem produkcyjnym">
  <meta property="og:locale" content="pl_PL">
  
  
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:site" content="">
  <meta name="twitter:creator" content="">
  <meta name="twitter:title" content="SEO w 11ty - kompletny przewodnik techniczny z wdrożeniem produkcyjnym">
  <meta name="twitter:description" content="Profesjonalny przewodnik po optymalizacji SEO dla statycznych stron generowanych przez Eleventy. Od fundamentów po zaawansowane techniki strukturalnych...">
  <meta name="twitter:image" content="https://koryto.net/assets/images/og-default.png">
  
  
  <link rel="manifest" href="/manifest.json">
  <meta name="theme-color" content="#6366f1">
  <link rel="apple-touch-icon" href="/assets/icons/apple-touch-icon.png">
</head>
<body>
  
</body>
</html>

Konfiguracja globalna (site.json)

Plik src/_data/site.json stanowi centralne źródło prawdy:

{
  "title": "koryto.net",
  "tagline": "Blog o technologii, programowaniu i architekturze oprogramowania",
  "description": "Praktyczne artykuły o web development, JavaScript, Node.js i optymalizacji wydajności. Od fundamentów po zaawansowane wzorce projektowe.",
  "url": "https://dkoryto.github.io/koryto_net",
  "buildDate": "2026-03-30",
  "defaultKeywords": "blog, technologia, programowanie, web development, javascript",
  "author": {
    "name": "Dariusz Koryto",
    "email": "dariusz@example.com",
    "jobTitle": "Software Engineer",
    "url": "https://github.com/dkoryto"
  },
  "social": {
    "twitter": "@dkoryto",
    "github": "https://github.com/dkoryto",
    "linkedin": "https://linkedin.com/in/dkoryto"
  },
  "organization": {
    "name": "koryto.net",
    "logo": "https://dkoryto.github.io/koryto_net/assets/images/logo.png"
  }
}

Dlaczego te metadane są kluczowe?

Meta Description (155-160 znaków) Nie wpływa bezpośrednio na ranking, ale fundamentalnie na CTR. Dobrze napisany opis może zwiększyć klikalność o 5-15%.

Canonical URL Eliminuje problem duplikatów treści (duplicate content), który może rozpraszać "moc SEO" między wieloma URL-ami tej samej treści.

Open Graph Image (1200×630px) To standardowy format dla Facebooka, LinkedIn i innych platform. Obrazy z tekstem nakładanym zwiększają zaangażowanie o 30-80%.

2. Strukturalne dane Schema.org (JSON-LD)

Czym są strukturalne dane?

Strukturalne dane to ustandaryzowany format (JSON-LD) opisu zawartości strony, który pozwala wyszukiwarkom nie tylko indeksować treść, ale rozumieć jej znaczenie semantyczne. n Implementacja strukturalnych danych umożliwia:

  • Rich Snippets — rozszerzone wyniki wyszukiwania (gwiazdki, ceny, daty)
  • Knowledge Graph — panel wiedzy z boku wyników wyszukiwania
  • Voice Search Optimization — odpowiedzi asystentów głosowych
  • Breadcrumbs w SERP — ścieżka nawigacyjna pod wynikiem

Implementacja dla artykułów (BlogPosting)

W pliku src/_includes/partials/schema-org.njk:


<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "https://koryto.net/posts/seo-w-11ty-kompletny-przewodnik/"
  },
  "headline": "SEO w 11ty - kompletny przewodnik techniczny z wdrożeniem produkcyjnym",
  "description": "Profesjonalny przewodnik po optymalizacji SEO dla statycznych stron generowanych przez Eleventy. Od fundamentów po zaawansowane techniki strukturalnych danych, Core Web Vitals i architektury informacji.",
  "image": {
    "@type": "ImageObject",
    "url": "https://koryto.net/assets/images/og-default.png",
    "width": 1200,
    "height": 630
  },
  "author": {
    "@type": "Person",
    "name": "",
    "url": "",
    "jobTitle": ""
  },
  "publisher": {
    "@type": "Organization",
    "name": "",
    "logo": {
      "@type": "ImageObject",
      "url": "",
      "width": 600,
      "height": 60
    }
  },
  "datePublished": "2026-03-30T00:00:00.000Z",
  "dateModified": "2026-03-30T00:00:00.000Z",
  "keywords": "posts, 11ty, seo, tutorial, optymalizacja",
  "articleSection": "posts",
  "inLanguage": "pl-PL",
  "isAccessibleForFree": true
}
</script>

Struktura WebSite z akcją wyszukiwania

Implementacja "Sitelinks Searchbox" — wyszukiwarki bezpośrednio w wynikach Google:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "WebSite",
  "name": "koryto.net",
  "description": "Blog o technologii, programowaniu i projektach",
  "url": "https://koryto.net",
  "publisher": {
    "@type": "Organization",
    "name": "",
    "logo": ""
  },
  "potentialAction": {
    "@type": "SearchAction",
    "target": {
      "@type": "EntryPoint",
      "urlTemplate": "https://koryto.net/search/?q={search_term_string}"
    },
    "query-input": "required name=search_term_string"
  },
  "inLanguage": "pl-PL"
}
</script>

Breadcrumbs z mikrodanymi

Nawigacja okruszkowa (breadcrumbs) poprawia UX i pozwala Google wyświetlić ścieżkę w wynikach wyszukiwania:




  
  



<nav aria-label="Nawigacja okruszkowa">
  <ol itemscope itemtype="https://schema.org/BreadcrumbList">
    
    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      
        <a href="/" itemprop="item">
          <span itemprop="name">Strona główna</span>
        </a>
      
      <meta itemprop="position" content="1">
    </li>
    
    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      
        <a href="/blog/" itemprop="item">
          <span itemprop="name">Blog</span>
        </a>
      
      <meta itemprop="position" content="2">
    </li>
    
    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      
        <span itemprop="name" aria-current="page">SEO w 11ty - kompletny przewodnik techniczny z wdrożeniem produkcyjnym</span>
      
      <meta itemprop="position" content="3">
    </li>
    
  </ol>
</nav>

3. Mapa witryny i instrukcje dla robotów

Protokół Sitemaps

XML Sitemap to plik informujący wyszukiwarki o strukturze witryny. Jest fundamentalny dla:

  • Dużych witryn (>500 stron)
  • Stron z izolowanymi stronami (osierocone)
  • Nowych witryn z małą liczbą linków zwrotnych
  • Stron z treścią multimedialną

Implementacja src/sitemap.xml.njk:

---
permalink: /sitemap.xml
layout: null
---
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
        xmlns:image="http://www.google.com/schemas/sitemap-image/1.1"
        xmlns:news="http://www.google.com/schemas/sitemap-news/0.9">
  <url>
    <loc>https://koryto.net/posts/jak-stworzylem-bloga/</loc>
    <lastmod>2026-03-28T00:00:00.000Z</lastmod>
    <changefreq>weekly</changefreq>
    <priority>0.8</priority>
  </url>
  <url>
    <loc>https://koryto.net/posts/jak-dodawac-obrazki/</loc>
    <lastmod>2026-03-29T00:00:00.000Z</lastmod>
    <changefreq>weekly</changefreq>
    <priority>0.8</priority>
  </url>
  <url>
    <loc>https://koryto.net/posts/pierwszy-wpis/</loc>
    <lastmod>2026-03-29T00:00:00.000Z</lastmod>
    <changefreq>weekly</changefreq>
    <priority>0.8</priority>
  </url>
  <url>
    <loc>https://koryto.net/posts/seo-w-11ty-kompletny-przewodnik/</loc>
    <lastmod>2026-03-30T00:00:00.000Z</lastmod>
    <changefreq>weekly</changefreq>
    <priority>0.8</priority>
  </url>
  <url>
    <loc>https://koryto.net/archiwum/</loc>
    <lastmod>2026-04-06T16:01:41.313Z</lastmod>
    <changefreq>monthly</changefreq>
    <priority>0.5</priority>
  </url>
  <url>
    <loc>https://koryto.net/blog/</loc>
    <lastmod>2026-04-06T16:01:41.314Z</lastmod>
    <changefreq>monthly</changefreq>
    <priority>0.5</priority>
  </url>
  <url>
    <loc>https://koryto.net/edytor/</loc>
    <lastmod>2026-04-06T16:01:41.314Z</lastmod>
    <changefreq>monthly</changefreq>
    <priority>0.5</priority>
  </url>
  <url>
    <loc>https://koryto.net/feed.xml</loc>
    <lastmod>2026-04-06T16:01:41.314Z</lastmod>
    <changefreq>monthly</changefreq>
    <priority>0.5</priority>
  </url>
  <url>
    <loc>https://koryto.net/</loc>
    <lastmod>2026-04-06T16:01:41.314Z</lastmod>
    <changefreq>daily</changefreq>
    <priority>1.0</priority>
  </url>
  <url>
    <loc>https://koryto.net/llms.txt</loc>
    <lastmod>2026-04-06T16:01:41.314Z</lastmod>
    <changefreq>monthly</changefreq>
    <priority>0.5</priority>
  </url>
  <url>
    <loc>https://koryto.net/manifest.json</loc>
    <lastmod>2026-04-06T16:01:41.314Z</lastmod>
    <changefreq>monthly</changefreq>
    <priority>0.5</priority>
  </url>
  <url>
    <loc>https://koryto.net/o-mnie/</loc>
    <lastmod>2026-04-06T16:01:41.314Z</lastmod>
    <changefreq>monthly</changefreq>
    <priority>0.5</priority>
  </url>
  <url>
    <loc>https://koryto.net/robots.txt</loc>
    <lastmod>2026-04-06T16:01:41.316Z</lastmod>
    <changefreq>monthly</changefreq>
    <priority>0.5</priority>
  </url>
  <url>
    <loc>https://koryto.net/search/</loc>
    <lastmod>2026-04-06T16:01:41.316Z</lastmod>
    <changefreq>monthly</changefreq>
    <priority>0.5</priority>
  </url>
  <url>
    <loc>https://koryto.net/sitemap.xml</loc>
    <lastmod>2026-04-06T16:01:41.316Z</lastmod>
    <changefreq>monthly</changefreq>
    <priority>0.5</priority>
  </url>
</urlset>

Robots.txt — protokół wykluczania robotów

Plik src/robots.txt.njk kontroluje dostęp crawlerów:

---
permalink: /robots.txt
layout: null
---
# Protocol: robots.txt
# Documentation: https://www.robotstxt.org/robotstxt.html

User-agent: *
Allow: /

# Optymalizacja crawl budget
Disallow: /tag/
Disallow: /404.html

# Sitemap location
Sitemap: https://koryto.net/sitemap.xml

# Host directive (opcjonalnie, dla Yandex)
Host: koryto.net

Dlaczego wykluczamy /tag/?

Strony tagów często generują thin content (treść niskiej jakości) lub duplikaty. Wykluczenie ich z indeksu:

  • Koncentruje "moc SEO" na wartościowych stronach artykułów
  • Zapobiega kanibalizacji słów kluczowych
  • Optymalizuje crawl budget

4. Wydajność jako czynnik rankingowy (Core Web Vitals)

Od czerwca 2021 Google oficjalnie uwzględnia Core Web Vitals jako czynnik rankingowy. To trzy metryki:

Metryka Cel Mierzy
LCP (Largest Contentful Paint) < 2.5s Czas wyrenderowania największego elementu
FID (First Input Delay) < 100ms Responsywność na pierwszą interakcję
CLS (Cumulative Layout Shift) < 0.1 Stabilność wizualną (przesunięcia layoutu)

Optymalizacja zasobów krytycznych

W sekcji <head> implementujemy hierarchię ładowania:


<link rel="dns-prefetch" href="https://fonts.googleapis.com">
<link rel="dns-prefetch" href="https://unpkg.com">


<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://koryto.net" crossorigin>


<link rel="preload" href="/assets/css/critical.css" as="style">
<link rel="preload" href="/assets/fonts/inter-var.woff2" as="font" type="font/woff2" crossorigin>


<style>
  /* Krytyczne style: layout, typografia, kolory */
  :root{--bg:#0f0f11;--text:#e8e8ec;--font:sans-serif}
  *,*::before,*::after{box-sizing:border-box;margin:0}
  body{font-family:var(--font);background:var(--bg);color:var(--text)}
  /* ... więcej krytycznych stylów ... */
</style>


<link rel="stylesheet" href="/assets/css/main.css" media="print" onload="this.media='all'">
<noscript><link rel="stylesheet" href="/assets/css/main.css"></noscript>

Transformacje HTML dla optymalizacji

W eleventy.config.js dodajemy transformacje:

// Lazy loading dla wszystkich obrazków bez atrybutu loading
eleventyConfig.addTransform("lazyImages", function(content, outputPath) {
  if (!outputPath || !outputPath.endsWith(".html")) return content;
  
  // Dodaj loading="lazy" i decoding="async"
  content = content.replace(
    /<img(?![^>]*loading=)([^>]*)>/gi,
    '<img$1 loading="lazy" decoding="async">'
  );
  
  // Priorytet dla pierwszego obrazka (LCP optimization)
  content = content.replace(
    /<img([^>]*)class="([^"]*hero[^"]*)"([^>]*)>/i,
    '<img$1class="$2"$3 fetchpriority="high" loading="eager">'
  );
  
  return content;
});

// Minifikacja HTML w produkcji
if (process.env.NODE_ENV === 'production') {
  const htmlmin = require("html-minifier");
  eleventyConfig.addTransform("htmlmin", function(content, outputPath) {
    if (!outputPath || !outputPath.endsWith(".html")) return content;
    
    return htmlmin.minify(content, {
      useShortDoctype: true,
      removeComments: true,
      collapseWhitespace: true,
      conservativeCollapse: true,
      minifyCSS: true,
      minifyJS: true,
      removeEmptyAttributes: true,
      removeRedundantAttributes: true
    });
  });
}

Optymalizacja obrazków

Praktyki dla obrazków w treści:

<!-- Format WebP z fallbackiem -->
<picture>
  <source srcset="/assets/images/photo.webp" type="image/webp">
  <img src="/assets/images/photo.jpg" 
       alt="Opisz co widoczne na zdjęciu, nie że to zdjęcie"
       width="800" height="600"
       loading="lazy" 
       decoding="async">
</picture>

<!-- Responsive images dla różnych urządzeń -->
<img srcset="
    /assets/images/photo-400.webp 400w,
    /assets/images/photo-800.webp 800w,
    /assets/images/photo-1200.webp 1200w
  "
  sizes="(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px"
  src="/assets/images/photo-800.webp"
  alt="Deskryptywny opis obrazka">

5. Feeds syndykacji treści (RSS/Atom)

Feed Atom (nowocześniejszy niż RSS 2.0) umożliwia subskrypcję i szybsze indeksowanie nowych wpisów.

---
permalink: /feed.xml
layout: null
---
<?xml version="1.0" encoding="UTF-8"?>
<feed xmlns="http://www.w3.org/2005/Atom" xml:lang="pl">
  <title>koryto.net</title>
  <subtitle></subtitle>
  <link href="https://koryto.net/feed.xml" rel="self" type="application/atom+xml"/>
  <link href="https://koryto.net/" rel="alternate" type="text/html"/>
  <updated></updated>
  <id>https://koryto.net/</id>
  <author>
    <name></name>
    <uri></uri>
  </author>
  <entry>
    <title>Architektura i implementacja bloga na Eleventy — od koncepcji do deploymentu</title>
    <link href="https://koryto.net/posts/jak-stworzylem-bloga/" rel="alternate" type="text/html"/>
    <published>2026-03-28T00:00:00.000Z</published>
    <updated>2026-03-28T00:00:00.000Z</updated>
    <id>https://koryto.net/posts/jak-stworzylem-bloga/</id>
    <summary type="html">Kompletny przewodnik techniczny budowy nowoczesnego bloga z użyciem Eleventy. Architektura projektu, konfiguracja środowiska, lokalny development i zdalny deployment na GitHub Pages.</summary>
    <category term="posts" />
  </entry>
  <entry>
    <title>Witaj na moim blogu!</title>
    <link href="https://koryto.net/posts/pierwszy-wpis/" rel="alternate" type="text/html"/>
    <published>2026-03-29T00:00:00.000Z</published>
    <updated>2026-03-29T00:00:00.000Z</updated>
    <id>https://koryto.net/posts/pierwszy-wpis/</id>
    <summary type="html">Pierwszy wpis na nowym blogu o technologii i programowaniu</summary>
    <category term="posts" />
  </entry>
  <entry>
    <title>Jak dodawać obrazki do artykułów - przykład</title>
    <link href="https://koryto.net/posts/jak-dodawac-obrazki/" rel="alternate" type="text/html"/>
    <published>2026-03-29T00:00:00.000Z</published>
    <updated>2026-03-29T00:00:00.000Z</updated>
    <id>https://koryto.net/posts/jak-dodawac-obrazki/</id>
    <summary type="html">Praktyczny przykład użycia obrazków w artykułach na blogu. Zobacz jak to działa!</summary>
    <category term="posts" />
  </entry>
  <entry>
    <title>SEO w 11ty - kompletny przewodnik techniczny z wdrożeniem produkcyjnym</title>
    <link href="https://koryto.net/posts/seo-w-11ty-kompletny-przewodnik/" rel="alternate" type="text/html"/>
    <published>2026-03-30T00:00:00.000Z</published>
    <updated>2026-03-30T00:00:00.000Z</updated>
    <id>https://koryto.net/posts/seo-w-11ty-kompletny-przewodnik/</id>
    <summary type="html">Profesjonalny przewodnik po optymalizacji SEO dla statycznych stron generowanych przez Eleventy. Od fundamentów po zaawansowane techniki strukturalnych danych, Core Web Vitals i architektury informacji.</summary>
    <category term="posts" />
  </entry>
</feed>

6. Architektura URL i linkowanie wewnętrzne

Przyjazne URL-e (slugi)

Implementacja w eleventy.config.js:

eleventyConfig.addFilter("slugify", (input) => {
  const slug = String(input)
    .normalize('NFD')                    // Rozkład polskich znaków
    .replace(/[\u0300-\u036f]/g, '')     // Usuń diakrytyki
    .toLowerCase()
    .trim()
    .replace(/[^\w\s-]/g, '')           // Usuń znaki specjalne
    .replace(/[\s_-]+/g, '-')            // Zamień spacje na myślniki
    .replace(/^-+|-+$/g, '');            // Trim myślniki
  
  return slug;
});

Strategia linkowania wewnętrznego

Linkowanie wewnętrzne przekazuje "link juice" i pomaga Google zrozumieć hierarchię treści:

<!-- Link kontekstowy z anchor text opisującym docelową stronę -->
<p>W artykule o <a href="/blog/seo-w-11ty/">optymalizacji SEO dla Eleventy</a> 
dokładnie opisałem proces implementacji strukturalnych danych.</p>

<!-- Unikaj "click here" lub "czytaj więcej" -->
<!-- ❌ Źle: -->
<a href="/blog/seo/">Czytaj więcej →</a>

<!-- ✅ Dobrze: -->
<a href="/blog/seo/">Kompletny przewodnik SEO dla 11ty z przykładami</a>

7. Walidacja i monitoring

Narzędzia do weryfikacji wdrożenia

Po wdrożeniu przetestuj stronę w następujących narzędziach:

Narzędzie URL Co sprawdza
Rich Results Test search.google.com/test/rich-results Poprawność Schema.org
PageSpeed Insights pagespeed.web.dev Core Web Vitals
Mobile-Friendly Test search.google.com/test/mobile-friendly Responsywność
RSS Validator validator.w3.org/feed Poprawność feedu
Schema Markup Validator validator.schema.org Strukturalne dane

Google Search Console — podstawowy monitoring

Dodaj stronę do GSC i monitoruj:

  • Coverage — indeksowanie i błędy
  • Core Web Vitals — raport wydajności
  • Performance — zapytania, CTR, pozycje
  • Enhancements — rich results i breadcrumbs

Checklist produkcyjnego wdrożenia SEO

Przed publikacją zweryfikuj:

Meta i struktura

  • [ ] Unikalny <title> na każdej stronie (50-60 znaków)
  • [ ] Unikalny meta description (150-160 znaków)
  • [ ] Canonical URL poprawnie ustawiony
  • [ ] Open Graph tags dla wszystkich stron
  • [ ] Twitter Cards skonfigurowane

Techniczne SEO

  • [ ] Schema.org JSON-LD dla artykułów
  • [ ] Breadcrumbs z mikrodanymi
  • [ ] XML Sitemap generowany automatycznie
  • [ ] Robots.txt zezwalający na indeksowanie
  • [ ] HTTPS wymuszony
  • [ ] Hreflang dla wersji językowych

Wydajność

  • [ ] LCP < 2.5s (PageSpeed Insights)
  • [ ] CLS < 0.1
  • [ ] Lazy loading obrazków
  • [ ] Minifikacja HTML/CSS/JS
  • [ ] Preload krytycznych zasobów
  • [ ] WebP dla obrazków z fallbackiem

Treść i nawigacja

  • [ ] Jednoznaczna hierarchia H1-H6 (tylko jeden H1)
  • [ ] Atrybuty alt dla wszystkich obrazków
  • [ ] Linkowanie wewnętrzne między powiązanymi artykułami
  • [ ] Przyjazne URL-e ze słowami kluczowymi
  • [ ] Atom/RSS feed działający

Monitoring

  • [ ] Strona dodana do Google Search Console
  • [ ] Sitemap zgłoszony w GSC
  • [ ] Test Rich Results przechodzi bez błędów
  • [ ] Test Mobile-Friendly pozytywny

Implementacja powyższych praktyk zapewnia solidne fundamenty SEO dla bloga opartego na Eleventy. Pamiętaj, że SEO to proces ciągły — regularnie monitoruj wyniki w Google Search Console i iteracyjnie poprawiaj stronę na podstawie zebranych danych.

]]>