Atrybut src

Atrybut src to właściwość elementów HTML wskazująca zewnętrzny zasób — plik graficzny, skrypt JavaScript, ramkę iframe lub audio/wideo — który przeglądarka powinna pobrać i osadzić w dokumencie. Bez poprawnie ustawionego src element pozostaje pusty, a przeglądarka nie ma skąd załadować treści. To jeden z fundamentalnych atrybutów HTML, z którym stykasz się przy każdym projekcie webowym.

• Gdzie występuje: <img>, <script>, <iframe>, <audio>, <video>, <source>, <input type="image">.
• Wartość: bezwzględny URL (https://…) lub relatywna ścieżka (/images/logo.png).
• Znaczenie dla SEO: wpływa na szybkość ładowania strony, indeksację obrazów i dostępność treści dla robotów Google.
• Częsty błąd: brakujące lub błędne src generuje błąd HTTP 404, psuje Core Web Vitals i negatywnie wpływa na widoczność w wyszukiwarce.

Jak atrybut src działa w praktyce

Gdy przeglądarka parsuje HTML i napotyka element z atrybutem src, natychmiast wysyła żądanie HTTP do wskazanego adresu. Jeśli serwer odpowie kodem 200, zasób zostaje pobrany i wyrenderowany w miejscu elementu. Jeśli serwer zwróci 404 lub 403, przeglądarka wyświetli pusty obszar (dla obrazu) lub nie wykona skryptu — co wprost przekłada się na gorsze doświadczenie użytkownika i sygnały rankingowe.

src w elemencie <img> — SEO obrazów

Atrybut src w tagu <img> wskazuje plik graficzny do wyświetlenia. To tutaj SEO obrazów zaczyna się naprawdę. Google Image Search indeksuje obrazy właśnie przez analizę wartości src — dlatego ścieżka pliku powinna zawierać opisową, czytelną nazwę (/images/pozycjonowanie-wroclaw.webp), a nie losowy ciąg znaków (/img/abc123.jpg). W połączeniu z atrybutem alt tworzy podstawowy sygnał semantyczny dla robotów Google.

Współcześnie warto stosować src razem z atrybutem srcset, który pozwala wskazać kilka wariantów grafiki dla różnych rozdzielczości ekranu. Przeglądarka wybiera optymalny plik samodzielnie — co bezpośrednio skraca czas ładowania i poprawia wynik LCP (Largest Contentful Paint) w Core Web Vitals.

<img
  src="/images/audyt-seo-wroclaw.webp"
  srcset="/images/audyt-seo-wroclaw-2x.webp 2x"
  alt="Audyt SEO Wrocław — schemat procesu"
  width="800"
  height="450"
  loading="lazy"
>

src w elemencie <script> — blokowanie renderowania

Atrybut src w tagu <script> wskazuje zewnętrzny plik JavaScript do pobrania i wykonania. Domyślnie przeglądarka wstrzymuje parsowanie HTML w momencie napotkania takiego elementu — to zjawisko zwane blokowaniem renderowania (render-blocking). Każdy skrypt bez atrybutu defer lub async opóźnia wyświetlenie strony, co pogarsza wynik FID (First Input Delay) i TTFB (Time to First Byte).

Standardem w SEO technicznym jest dziś stosowanie <script src="plik.js" defer></script> — plik jest pobierany równolegle z parserem HTML, a wykonanie następuje dopiero po załadowaniu całego dokumentu. Różnica w LCP potrafi wynieść kilkaset milisekund, co przy konkurencyjnych frazach ma realny wpływ na pozycje.

src w elemencie <iframe> — osadzanie treści zewnętrznych

W tagu <iframe> atrybut src wskazuje adres strony lub aplikacji, która zostanie załadowana w ramce. Typowe zastosowania to: osadzanie map Google, formularzy HubSpot, filmów z YouTube czy widżetów płatności. Każda ramka generuje osobne żądanie HTTP, więc nadmiar iframe’ów potrafi znacznie wydłużyć czas ładowania strony. Google w większości przypadków nie indeksuje zawartości iframe’ów jako treści strony nadrzędnej — co oznacza, że wartościowy kontent umieszczony wyłącznie w iframe nie wspiera pozycjonowania strony.

Relatywne vs bezwzględne wartości src — kiedy co stosować?

Wartość atrybutu src może być relatywna (/images/logo.svg) lub bezwzględna (https://cdn.webiti.pl/images/logo.svg). Ścieżki relatywne są prostsze w utrzymaniu przy wewnętrznych zasobach i nie wymagają zmiany przy migracji domeny — przeglądarka sama dopełnia bazowy URL. Ścieżki bezwzględne są obowiązkowe przy korzystaniu z CDN (Content Delivery Network), zasobów cross-origin lub gdy element jest osadzany na zewnętrznych stronach.

Znaczenie atrybutu src dla SEO i widoczności

Atrybut src ma bezpośredni wpływ na kilka obszarów, które Google bierze pod uwagę przy ocenie jakości strony. Błędna lub brakująca wartość src generuje błąd 404 — a każdy niepotrzebny błąd 404 to zmarnowany crawl budget, czyli pula żądań, jaką Googlebot przeznacza na indeksację witryny. W przypadku dużych sklepów internetowych z tysiącami zdjęć produktów, jedna źle ustawiona ścieżka może oznaczać setki zepsutych obrazów i wypadnięcie produktów z Google Images.

Szybkość ładowania to drugi obszar, gdzie src gra główną rolę. Zbyt duże pliki wskazane w src, brak kompresji lub brak atrybutu loading="lazy" bezpośrednio obniżają LCP — jeden ze wskaźników Core Web Vitals. Google oficjalnie potwierdza, że Core Web Vitals są sygnałem rankingowym w ramach Page Experience. W praktyce strony z LCP poniżej 2,5 sekundy mają statystycznie lepsze pozycje niż te przekraczające 4 sekundy.

Przy pozycjonowaniu stron i pozycjonowaniu sklepów internetowych zwracamy szczególną uwagę na poprawność atrybutów src — to jeden z elementów audytu technicznego, który bywa zaskakująco zaniedbany nawet na rozbudowanych witrynach.

FAQ — najczęstsze pytania o atrybut src

Czym różni się atrybut src od href?

Atrybut src wskazuje zasób, który ma zostać osadzony i pobrany jako część bieżącej strony — np. obraz czy skrypt. Atrybut href (używany w <a> i <link>) wskazuje zasób, do którego strona odwołuje się lub linkuje, ale który nie jest automatycznie wbudowywany w dokument. Grafika w tle ustawiana przez CSS korzysta z właściwości url(), nie z src.

Co się dzieje, gdy przeglądarka nie może znaleźć zasobu wskazanego przez src?

Przeglądarka otrzymuje odpowiedź HTTP 404 (Not Found) lub inny kod błędu i zamiast zasobu wyświetla pusty obszar lub błąd. W przypadku obrazu pojawia się ikona uszkodzonego pliku lub tekst alternatywny z alt. W przypadku skryptu JavaScript — kod nie zostaje wykonany, co może zepsuć funkcjonalność strony. Każdy taki błąd jest logowany w Google Search Console i negatywnie wpływa na crawl budget.

Czy wartość atrybutu src wpływa na pozycjonowanie obrazów w Google?

Tak — nazwa pliku wskazana w src to jeden z sygnałów używanych przez Google Image Search. Plik o nazwie buty-sportowe-nike-air.webp jest lepiej rozumiany przez algorytm niż IMG_00342.jpg. Opisowa nazwa pliku, uzupełniona o atrybut alt z dobrze dobraną frazą, realnie zwiększa szansę na pojawienie się obrazu w wynikach graficznych Google i może generować dodatkowy ruch organiczny.

Kiedy zamiast src warto użyć srcset?

Atrybut srcset stosuje się razem z src wtedy, gdy chcemy serwować różne warianty obrazu zależnie od rozdzielczości ekranu lub gęstości pikseli (np. ekrany Retina). Przeglądarka sama wybiera optymalny plik — mniejszy dla urządzeń mobilnych, większy dla desktopów. To bezpośrednio przekłada się na lepszy wynik LCP i oszczędność transferu danych, co szczególnie ważne przy pozycjonowaniu mobilnym.

Atrybut src — mały szczegół, duży wpływ na wyniki

Poprawna wartość atrybutu src to nie tylko kwestia działania strony, ale realna zmienna wpływająca na szybkość, indeksację i widoczność w wynikach wyszukiwania. Zanim zaczniesz szukać przyczyny słabych pozycji w bardziej skomplikowanych obszarach, warto upewnić się, że fundamenty HTML — w tym właśnie src — są ustawione bez błędów. Jeśli chcesz sprawdzić, czy Twoja witryna nie traci potencjału przez techniczne niedopatrzenia, skontaktuj się z zespołem Webiti — specjalizujemy się w kompleksowym audycie SEO i skutecznym pozycjonowaniu stron.