O czym jest ten film
- Autor prezentuje Web-Obs — darmową, otwartą wtyczkę (licencja MIT) do Obsidiana, która zamienia dowolną publiczną witrynę w notatki Markdown.
- Efektem przechwycenia jest interaktywna mapa 3D serwisu: globus, widok klastrów oraz mapa ścieżek, którymi porusza się klient.
- Całość działa lokalnie: czysty Python plus Playwright, bez wywoływania jakiegokolwiek API i bez kosztów.
- Wbudowany audyt techniczny SEO wykrywa błędy 404/410, przekierowane adresy źródłowe, przeskoki poziomów nagłówków, obrazy bez tekstu alternatywnego i za długie tytuły.
- Audyt sygnalizuje także podstrony konkurujące o ten sam temat (kanibalizacja słów kluczowych) oraz niski stosunek tekstu do kodu HTML.
- Narzędzie wskazuje konkretne obrazy do odchudzenia (np. 257 kB) i przypomina, że WebP lub AVIF tną rozmiar pliku o co najmniej jedną trzecią.
- Sprawdza nagłówki bezpieczeństwa odpowiedzi (HSTS, CSP, X-Frame-Options i pozostałe) oraz pokazuje najczęstsze frazy w całym serwisie.
- Wyniki można wyeksportować jako CSV, a do tego generowane są raport audytu i raport linków — gotowy kontekst dla agenta AI.
- W części live autor przechwytuje witrynę członka społeczności: 4 mapy serwisu, 28 podstron, 136 obrazów i 277 linków w niecałe dwie minuty.
- Instalacja odbywa się z GitHuba (ZIP lub git clone przez GitHub CLI), a plany obejmują integrację z „AI marketing hub” oraz wtyczką Claude SEO.
10 najważniejszych takeaways — z kontekstem zastosowania
1.Skan całego serwisu bez API i bez kosztów
Na czym polega: Web-Obs (Python plus Playwright) odczytuje publiczne podstrony na podstawie mapy serwisu i zapisuje je jako notatki Markdown — z tekstem, obrazami i linkami — lokalnie w sejfie Obsidiana.
Jak stosować: zainstaluj wtyczkę z GitHuba, wpisz domenę i kliknij „przechwyć”. Po jednej–dwóch minutach masz komplet notatek, na których możesz budować własne automatyzacje — licencja MIT pozwala na dowolne modyfikacje.
Na co uważać: przechwytywanie opiera się na mapie serwisu, więc podstrony spoza niej lub ukryte za logowaniem nie zostaną pobrane. Do działania potrzebne są lokalne zależności Pythona i przeglądarki.
2.Architektura witryny jako globus 3D
Na czym polega: każda podstrona staje się węzłem interaktywnej mapy — widać na niej, co z czym się łączy, w trzech widokach: globusa, klastrów i ścieżek klienta.
Jak stosować: po przechwyceniu oceniaj strukturę serwisu wizualnie: samotne podstrony, przerwy w linkowaniu wewnętrznym i brakujące połączenia widać gołym okiem szybciej niż w tabeli.
Na co uważać: młode witryny mają z natury ubogą strukturę — nie każda luka to błąd; czasem centralny węzeł dopiero się buduje i kolejne podstrony dołączą z czasem.
3.Audyt techniczny SEO z gotową listą błędów
Na czym polega: wtyczka klasyfikuje podstrony (błędy, „wymaga uwagi”, „warto przejrzeć”) i wskazuje konkretne problemy: 404/410, przekierowane adresy źródłowe, przeskoki poziomów nagłówków, obrazy bez tekstu alternatywnego, za długi tytuł.
Jak stosować: po każdym przechwyceniu otwórz widok audytu i przechodź kategoriami od błędów w dół; każdą pozycję można zbadać u źródła i otworzyć na żywej stronie.
Na co uważać: to diagnostyka, nie naprawa — narzędzie wykrywa problem, ale nie zmienia nic na serwerze. Zakres przypomina PageSpeed Insights, więc część sygnałów trzeba interpretować samodzielnie.
4.Kanibalizacja słów kluczowych wykryta od ręki
Na czym polega: audyt oznacza podstrony konkurujące o ten sam temat oraz pokazuje najczęstsze frazy w całym serwisie — czyli dane, które pozwolają wychwycić adresy wzajemnie się znoszące.
Jak stosować: zestaw listę najczęstszych fraz z listą konkurujących podstron i na tej podstawie decyduj, które treści połączyć lub zróżnicować tematycznie.
Na co uważać: częściowe pokrycie tematyczne bywa celowe (np. warianty produktów); przed scaleniem podstron sprawdź, czy rzeczywiście walczą o te same zapytania.
5.Obrazy do odchudzenia wskazane z nazwy pliku
Na czym polega: raport wypisuje grafiki o nadmiernym ciężarze (w przykładzie m.in. 257 kB, 216 kB, 212 kB) i przypomina, że WebP lub AVIF zwykle zmniejszają plik o jedną trzecią lub więcej bez utraty jakości.
Jak stosować: przekonwertuj wskazane obrazy do WebP, wgraj je z powrotem i powtórz przechwycenie, żeby porównać efekt.
Na co uważać: raport obejmuje tylko pliki wykryte w skanie — grafiki dodane później trzeba pilnować osobno, a przy AVIF warto sprawdzić wsparcie w starszych przeglądarkach.
6.Checklist nagłówków bezpieczeństwa
Na czym polega: audyt pokazuje obecność nagłówków odpowiedzi strony głównej: HSTS, CSP, X-Frame-Options, X-Content-Type-Options, Referrer-Policy i Permissions-Policy.
Jak stosować: traktuj listę jako listę kontrolną wdrożeniową — brakujący nagłówek uzupełnij w konfiguracji serwera lub aplikacji.
Na co uważać: sama wtyczka nie podpowiada, jak nagłówki dodać — wymaga to dostępu do serwera i wiedzy technicznej, a nie każdy nagłówek jest potrzebny każdemu serwisowi.
7.Wyniki do wzięcia do ręki: CSV i raporty
Na czym polega: wszystkie ustalenia da się zapisać jako plik CSV, a oprócz tego generowane są raport audytu i raport linków.
Jak stosować: eksportuj CSV przed rozmową z klientem jako konkretny dowód problemów, a raporty wklej agentowi AI jako kontekst do zaplanowania napraw.
Na co uważać: raport to diagnoza, nie plan działania — przed automatycznymi zmianami na produkcji zweryfikuj ustalenia na żywej stronie.
8.Audyt klienta bez posiadania jego danych dostępowych
Na czym polega: skan działa na publicznej wersji witryny, więc pełny zrzut serwisu klienta możesz przygotować i przekazać agentowi, nie mając żadnych poświadczeń do jego systemu.
Jak stosować: w pracy agencyjnej rób przechwycenie przed pierwszym kontaktem — lista błędów (jak cztery 404 na znanej witrynie z filmu) to gotowy punkt zaczepienia dla oferty.
Na co uważać: skan pokazuje stan publiczny; niektóre pozycje mogą wynikać z wersji roboczych lub stron kampanii, więc daj klientowi możliwość wyjaśnienia, zanim cokolwiek „naprawisz”.
9.Połączenie z agentem AI do naprawy SEO
Na czym polega: notatki z Web-Obs można przekazać agentowi z włączonym modułem SEO (autor używa wtyczki Claude SEO), który wskaże i wdroży poprawki — to oszczędza tokeny, czas i pieniądze.
Jak stosować: po audycie udostępnij agentowi notatki i raporty, a poprawki wdrażaj etapami — najpierw martwe linki i 404, potem treść i obrazy.
Na co uważać: agent musi mieć jasno zakreślony zakres działań; zmiany warto przetestować na kopii witryny, zanim trafią na produkcję.
10.Instalacja w kilka minut z GitHuba
Na czym polega: Web-Obs jest dostępny w repozytorium — pobierasz archiwum ZIP albo klonujesz repo przez GitHub CLI, a wtyczkę osadza się w nowym folderze otwartym w Obsidianie. Autor planuje zgłosić ją do oficjalnego katalogu.
Jak stosować: utwórz folder, pobierz lub sklonuj repozytorium, otwórz folder w Obsidianie i włącz wtyczkę; gdy coś nie działa, zgłoś problem w repozytorium albo poproś o pomoc agenta AI.
Na co uważać: to projekt społecznościowy bez gwarancji wsparcia — przed użyciem komercyjnym przetestuj go na własnych witrynach i śledź zmiany w repozytorium.
Redakcyjne tłumaczenie
Dowolny serwis jako notatki w Obsidianie
Każdą stronę internetową da się zamienić w notatki w sejfie Obsidiana, a potem zwiedzać ją jak trójwymiarową mapę. Zobaczcie to na moim serwisie Claude Ads. Po jednym kliknięciu dostajecie komplet danych o witrynie: pełną migawkę podstrony z treścią w Markdown, linki wewnętrzne i zewnętrzne oraz wszystkie potrzebne obrazy. I co ważne — działa to za darmo, w ogóle bez API. Za wszystko odpowiada czysty Python wraz z Playwright.
(Informacja dodatkowa: Playwright to otwarta biblioteka Microsoftu do automatyzowania przeglądarki; tutaj służy do lokalnego pobierania stron.)
Do tego dochodzi mapa ścieżek: po jej otwarciu widać dokładnie, jaką drogę przebywa klient po serwisie. To pełny widok 3D, a jeśli ktoś woli inny układ, do dyspozycji jest też widok klastrów.
Audyt techniczny w stylu narzędzi SEO
Jest również audyt serwisu — ta część przypomina znane narzędzia SEO, bo dotyczy kwestii czysto technicznych: błędów 404 i 410, błędów serwera, pozycji nierozstrzygniętych i niesprawdzonych. Można tu przejrzeć sygnały podstron, treść, linki, strukturę witryny, obrazy, zmiany, dane strukturalne i pozostałe potrzebne elementy. Efektem jest kompletny audyt plus pełna migawka każdej podstrony. Jeśli chcesz mieć taki materiał lokalnie dla siebie albo dla klienta, wystarczy przekazać go swoim agentom AI i wprowadzić poprawki, zanim w ogóle dotkniesz właściwego serwisu.
Pierwsze testy: błędy widać z daleka
Testowałem to na kilku witrynach — na moim serwisie agricidaniel.com oraz na dość znanym serwisie, i tak właśnie wygląda efekt. A teraz wyobraźcie sobie, że chcecie sprzedać tej firmie swoje usługi. Od razu widać: jeden błąd 404, drugi, trzeci, czwarty. To wadliwe linki, oznaczone na żółto, żeby każdy od razu wiedział, co wymaga naprawy.
Wezmę na warsztat kolejną stronę. Wszystkie podstrony świecą na pomarańczowo. Dlaczego? Wystarczy kliknąć i wiadomo, co jest nie tak: w kategorii „warto przejrzeć” — przeskoki poziomów nagłówków, obrazy bez tekstu alternatywnego, przekierowane adresy źródłowe. Dokładnie to psuje tę podstronę. Kolejna — to samo. Jeszcze inna: tytuł za długi, znów przeskoczone poziomy nagłówków, obrazy bez tekstu alternatywnego i przekierowany adres źródłowy. Po wejściu w kontrole, linki i „otwórz notatkę” widzimy w całości obrazy i pełny kontekst podstrony. I pomyślcie tylko, co się stanie, gdy takimi danymi podzielicie się ze swoim agentem. Zadziała znakomicie.
Przechwytywanie na żywo: co dzieje się pod maską
Czas na kolejny test. Wpisuję adres witryny jednego z członków naszej społeczności i klikam „przechwyć”. Tak prosty jest cały proces. Najpierw pobierana jest mapa serwisu, a na jej podstawie uruchamiane są skrypty. W efekcie dostajemy podstrony wraz z tekstem, obrazy z załącznikami oraz linky z wynikami kontroli. Całość zapisywana jest jako notatki i nanoszona na mapę w sejfie Obsidiana.
Firecrawl, nie miejcie mi tego za złe — podobną usługę znajdziemy przecież w Firecrawlu i innych narzędziach do pobierania treści stron. W moim przypadku działa to jednak jako pełnoprawna wtyczka Obsidiana.
(Informacja dodatkowa: Firecrawl to komercyjny serwis do pobierania stron i zamiany ich w dane gotowe dla modeli AI.)
Dzięki takiemu podejściu od razu widzimy, czy na stronie dzieje się coś złego. Można to połączyć z wtyczką Claude SEO: przechwycenie plus analiza pozwalają naprawiać martwe linki, dokładnie przejrzeć linkowanie wewnętrzne i zewnętrzne, treść oraz obrazy. A to oszczędza tokeny, czas i pieniądze.
Wtyczkę można pobrać — link zostawiam w opisie filmu. Jest darmowa i otwarta, na licencji MIT, więc dowolnie ją zmodyfikujecie. W planach mam zaimportowanie Web-Obs do naszego centrum marketingu AI — to zresztą główny powód, dla którego w ogóle zbudowałem tę wtyczkę.
Krótko o Obsidianie
Żeby zobaczyć pełny widok 3D, potrzebny jest Obsidian. Dla niezorientowanych: to darmowa, elastyczna aplikacja do notatek, od lat dostępna bez opłat i działająca w całości lokalnie na komputerze. Najpierw ją pobierzcie, a za chwilę pokażę, jak przechwycić stronę i ustawić wszystko na własnej maszynie.
Samo przechwytywanie trwa od minuty do maksymalnie dwóch, bo odpalanych jest szereg kontroli — między innymi sprawdzamy, czy podstrony nie mają przekierowań i czy obrazy mają swoje teksty alternatywne. Skrypty są poukładane etapami, żeby wyłapywać nieścisłości na stronie — twojej albo klienta.
A w międzyczasie wyniki już wpadają: odkryliśmy cztery mapy serwisu, przechwycono 28 podstron z tekstem, 136 obrazów i załączników oraz 277 linków wraz z kontrolami — wewnętrznych i zewnętrznych łącznie. Do tego dochodzą audyt serwisu i jego analityczne podsumowanie — równie ważna część. Być może dodam jeszcze w przyszłości licznik postępu pokazujący, co akurat dzieje się w tle.
Pierwsze wejście na globus
I proszę — tak wygląda przechwycona witryna. Naprawdę mocne. Z przodu widać sam serwis, jego logo, a wokół podstrony. Piękna struktura, przyznaję — jestem pod wrażeniem. Klikamy: strona główna, dokładnie taka, jaka jest naprawdę. Witryna należy do firmy z Holandii, więc treść wyświetla się w innym języku. Migawka podstrony odtwarza ją jeden do jednego: można ją powiększyć i przewijać w dół, wszystko na swoim miejscu — razem z obrazami i istotnymi informacjami z serwisu. Mocne i piękne zarazem.
Sprawdźmy, czy w podstronach kryją się jakieś błędy. Zamykam notatkę — przypominam, że każda podstrona ma pełną migawkę całości. Przechodzimy do widoku ścieżek: strony są na nim wszystkie, dobrze poukładane. Brakuje kilku węzłów centralnych i linków, ale to zrozumiałe — witryna jest młoda, kolejne podstrony z czasem dołączą do struktury. Tak to wygląda od strony ścieżek, a to jest widok klastrów. Wracamy do globusa.
Audyt w praktyce: co konkretnie naprawić
Otwieramy audyt serwisu — znowu głównie kwestie techniczne. Zobaczmy, co jest nie tak i co wymaga poprawy. „Miejsca docelowe zwróciły 404 lub 410”: dwie podstrony. Mogę je otworzyć, zbadać źródło, kliknąć „otwórz działający adres” — i faktycznie, ta podstrona ma konkretne błędy 404. Wracam do audytu i sprawdzam dalej. W kategorii „warto przejrzeć”: niski stosunek tekstu do kodu HTML, podstrony konkurujące o ten sam temat, dane strukturalne bez zalecanych właściwości. Ten punkt jest szczególnie ciekawy — zwłaszcza że kanibalizacja słów kluczowych to bardzo ważna sprawa, bo pozostawiona bez reakcji powoduje, że podstrony wzajemnie się znoszą.
Sekcja „wymaga uwagi”: bezpośrednie sprawdzenie zwraca odpowiedź o braku lub usunięciu strony — trzeba potwierdzić miejsce docelowe i tam, gdzie to zasadne, podmienić link. Cel zwrócił 404 albo 410 przy potwierdzeniu żądaniem GET. W skrócie: te podstrony mają problem z linkowaniem wewnętrznym. Jeśli przekażę to Claude’owi z włączonym modułem SEO, będzie dokładnie wiedział, co trzeba naprawić.
I to nie wszystko. „Warto przejrzeć”: czternaście podstron, a obrazów — 38. WebP lub AVIF zwykle tną rozmiar pliku o jedną trzecią lub więcej przy niezmienionej jakości. Część grafik jest w porządku, ale po otwarciu notatki widać te, które wymagają optymalizacji — pliki są po prostu za duże. Da się je łatwo poprawić? Oczywiście: wystarczy przekonwertować je na WebP i będą zoptymalizowane. Spójrzcie: 257 kB, 216 kB, 212 kB, 209 kB — 38 plików łącznie, a każdy z nich można odchudzić w imię szybkości. To bardzo ważne dla każdej strony, żeby nie ładowała się w nieskończoność. Do tego dochodzą niski stosunek tekstu do kodu HTML i dane strukturalne bez zalecanych właściwości — takich pozycji też nie brakuje.
Nagłówki, frazy i eksport wyników
Zauważcie, że całość przypomina nieco PageSpeed Insights, ale tu dostajecie znacznie więcej: pełną treść każdej podstrony po kolei, obrazy i tekst w Markdown — bez wywoływania jakiegokolwiek API. Do tego nagłówki odpowiedzi strony głównej, czyli kwestie bezpieczeństwa: HSTS, CSP, X-Frame-Options, X-Content-Type-Options, Referrer-Policy i Permissions-Policy — wszystkie obecne. Dalej typy zasobów i ich liczba, podsumowanie treści oraz najczęstsze frazy w całym serwisie. Na tej podstawie łatwo zidentyfikujecie kluczowe słowa i sprawdzicie wspomnianą kanibalizację.
Wszystkie ustalenia można jednym ruchem zapisać jako CSV — dla siebie, dla klienta albo dla agenta. Bardzo praktyczna rzecz. Do tego raport linków i pełny raport audytu, żeby agent dokładnie wiedział, co ma robić, gdzie i jak — i mógł zabrać się za „gotowanie”.
Praca agencyjna bez danych dostępowych
Mówiłem już, że testowałem wtyczkę na kilku witrynach, żeby upewnić się, że wszystko działa — i działa znakomicie. Na moim serwisie nie ma wadliwych linków, bo użyłem wtyczki Claude SEO. Jest też witryna mojego przyjaciela Jake’a — kilka rzeczy wymaga u niego pracy: tu przekierowany adres źródłowy, tam znowu, większość podstron ma ten sam problem, a niektóre obrazy są bez tekstu alternatywnego. Mogę otworzyć dowolną podstronę, choćby stronę główną, kliknąć „otwórz notatkę” — i ponieważ mamy pełny zrzut całego serwisu ze wszystkimi danymi w środku, mogę przekazać go mojemu agentowi. Agent będzie wiedział dokładnie, co „ugotować” i kiedy — a ja nie muszę mieć żadnych poświadczeń do jego strony. W pracy agencyjnej dla klientów narzędzie sprawdza się właśnie tak: wychwycisz wadliwe linki i wszystko, co wymaga naprawy.
Jest jeszcze ta znana witryna — popatrzcie, jaką ma piękną strukturę. Czy linkowanie wewnętrzne jest poprawne? W zasadzie tak: każda podstrona łączy się z inną, bo serwis trzyma się przemyślanej architektury — ci ludzie wiedzą, co robią. Ale i tu kilka podstron zwraca 404. Ciekawe, prawda? Serwis tej skali jest po prostu trudny do ogarnięcia, a z tym podejściem wykryjemy problem bez trudu.
Instalacja krok po kroku
To jest Web-Obs i to jest jego repozytorium. Przypominam: Web-Obs to wtyczka Obsidiana, więc sam Obsidian jest niezbędny. Oficjalny opis brzmi tak: Web-Obs zamienia dowolną stronę internetową w notatki w twoim sejfie Obsidiana, a następnie pozwala eksplorować ją jako mapę 3D. Wpisujesz domenę, Web-Obs odczytuje publiczne podstrony, zapisuje każdą jako notatkę Markdown i rysuje cały serwis w postaci interaktywnego globusa — dzięki temu widać, jak wszystko się ze sobą łączy. Właśnie to pokazywałem wam w demonstracji.
Jeśli chcecie to wypróbować, kliknijcie „Code”. Możecie pobrać archiwum ZIP albo skopiować polecenie do terminala — w tym drugim wypadku potrzebny będzie podłączony GitHub CLI. Może zgłoszę wtyczkę do przeglądu, żeby w przyszłości trafiła do oficjalnego katalogu Obsidiana. Aby zacząć, utwórzcie folder — mój nazwę demo-web-obs, bo mam już jedną instalację. Są dwie drogi: pobrać ZIP i go rozpakować albo otworzyć terminal i wkleić polecenie klonowania. Potem otwieramy Obsidian w nowym oknie, wskazujemy utworzony folder na pulpicie i zatwierdzamy. I to w zasadzie wszystko — pozostaje zainstalować wtyczkę.
Na koniec: Web-Obs jest dostępny, pobierajcie i próbujcie. Jeśli natraficie na problemy, puśćcie na to swojego agenta AI, budujcie na tym projekcie, przysyłajcie pull requesty, zgłaszajcie błędy, dawajcie gwiazdki i dołączajcie do naszej społeczności. Do zobaczenia w kolejnym odcinku. Ciao!