Dobre praktyki opisywania obrazków w WordPress: Poprawa SEO i dostępności

Właściwe oznaczanie obrazków może znacząco wpłynąć na widoczność strony w wyszukiwarkach oraz ułatwić jej użytkowanie osobom z niepełnosprawnościami.

Najlepsze praktyki opisywania obrazków

Nazwa pliku

Przed wgraniem obrazka na stronę WordPress, warto zadbać o odpowiednią nazwę pliku. Nazwa powinna być krótka, ale opisowa, zawierać słowa kluczowe i używać myślników zamiast spacji.

Przykład:
ZÅ‚a nazwa: _{IMG_1234.jpg}
Dobra nazwa: _{pies-bawiacy-sie-w-parku.jpg}

Tekst alternatywny (Alt Text)

Tekst alternatywny jest najważniejszym elementem opisu obrazka z punktu widzenia SEO i dostępności. Powinien dokładnie opisywać, co znajduje się na obrazku, i zawierać słowa kluczowe, jeśli to możliwe.

Przykład:
ZÅ‚y Alt Text: obrazek
Dobry Alt Text: Pies bawiÄ…cy siÄ™ w parku

Tytuł obrazka

Tytuł obrazka może być mniej opisowy niż tekst alternatywny, ale powinien nadal przekazywać istotne informacje. Może być widoczny po najechaniu kursorem na obrazek.

Przykład:
Tytuł: Pies w parku

Opis obrazka (Description)

Opis obrazka jest mniej ważny dla SEO, ale może być przydatny dla użytkowników oraz przy zarządzaniu mediami w WordPressie. Może zawierać dodatkowe informacje o obrazku, które nie zmieściły się w Alt Text i tytule.

Podpis obrazka (Caption)

Podpis to krótki tekst wyświetlany pod obrazkiem na stronie. Jest widoczny dla wszystkich użytkowników i może zawierać kontekstowy opis lub dodatkowe informacje.

Przykład:
Podpis: Pies bawiący się w parku w słoneczny dzień

Formaty i kompresja

Wybór odpowiedniego formatu i kompresja obrazków również wpływają na SEO i doświadczenie użytkowników. Zaleca się używanie formatów takich jak JPEG dla zdjęć i PNG dla grafik z przezroczystościami. Dla większej optymalizacji można użyć formatu WebP.

Responsywność

Obrazki powinny być responsywne, czyli dostosowywać się do różnych rozmiarów ekranów. WordPress automatycznie generuje różne rozmiary obrazków, ale warto upewnić się, że wszystkie wersje są odpowiednio opisane i zoptymalizowane.

Lazy Loading

Aby poprawić czas ładowania strony, warto zastosować technikę lazy loading, która opóźnia ładowanie obrazków do momentu, gdy są one potrzebne (czyli gdy użytkownik przewija stronę do miejsca, w którym obrazki się znajdują).

Przykłady kodu

Przykład HTML dla obrazka z pełnymi opisami:

<img src="pies-bawiacy-sie-w-parku.jpg" 
     alt="Pies bawiÄ…cy siÄ™ w parku" 
     title="Pies w parku" 
     loading="lazy">

Przykład CSS dla responsywnych obrazków:

img {
    max-width: 100%;
    height: auto;
}

Kiedy dodawać nazwę firmy w nazwach obrazków?

Dodawanie nazwy firmy w nazwach obrazków, tekstach alternatywnych i tytułach może być korzystne z punktu widzenia SEO oraz budowania marki. Poniżej przedstawiamy, kiedy i jak to robić, aby przyniosło to najlepsze rezultaty.

Budowanie marki

Dodawanie nazwy firmy do nazw obrazków i ich opisów pomaga w budowaniu marki. Jeśli obrazy Twojej firmy są często udostępniane lub pojawiają się w wynikach wyszukiwania grafiki, obecność nazwy firmy może zwiększyć jej rozpoznawalność.

Poprawa SEO

Dodanie nazwy firmy do nazw obrazków może pomóc w SEO, zwłaszcza jeśli użytkownicy wyszukują obrazy związane z Twoją firmą. Używanie słów kluczowych wraz z nazwą firmy zwiększa szansę na wyższą pozycję w wynikach wyszukiwania.

Zgodność z brandingiem

Warto dodać nazwę firmy, gdy obrazek jest elementem, który ma być zgodny z brandingiem firmy. Na przykład, jeśli obrazki są częścią kampanii marketingowej, warto dodać nazwę firmy.

Przykłady, kiedy dodać nazwę firmy:

1. Produkty i usługi
   • JeÅ›li publikujesz obrazki produktów lub usÅ‚ug, dodaj nazwÄ™ firmy, aby zwiÄ™kszyć ich widoczność. PrzykÅ‚ad: nazwa-produktu-nazwa-firmy.jpg.
2. Materiały marketingowe
   • Obrazki wykorzystywane w kampaniach marketingowych powinny zawierać nazwÄ™ firmy. PrzykÅ‚ad: kampania-letnia-nazwa-firmy.jpg.
3. Treści edukacyjne i blogowe
   • JeÅ›li tworzysz treÅ›ci edukacyjne lub blogowe, dodanie nazwy firmy może pomóc w budowaniu autorytetu marki. PrzykÅ‚ad: poradnik-seo-nazwa-firmy.jpg.

Przykłady implementacji:

Przykład nazwy pliku:
ZÅ‚a nazwa: produkty.jpg
Dobra nazwa: produkty-nazwa-firmy.jpg

Przykład tekstu alternatywnego:
ZÅ‚y Alt Text: Obrazek produktu
Dobry Alt Text: Nowy model produktu nazwa-firmy

Przykład tytułu obrazka:
TytuÅ‚: Nowy model produktu - Nazwa Firmy

Przykład opisu obrazka:
Opis: Nowy model produktu firmy Nazwa Firmy, idealny do codziennego użytku.

Przykład HTML:

<img src="nowy-model-produktu-nazwa-firmy.jpg" 
     alt="Nowy model produktu nazwa-firmy" 
     title="Nowy model produktu - Nazwa Firmy" 
     loading="lazy">

Kiedy unikać dodawania nazwę firmy w nazwach obrazków?

Nadmierne użycie

Unikaj nadmiernego dodawania nazwy firmy do każdego obrazka, ponieważ może to wyglądać na spam i negatywnie wpłynąć na SEO.

Brak zwiÄ…zku z firmÄ…

Jeśli obrazek nie jest bezpośrednio związany z Twoją firmą lub jej działalnością, nie dodawaj nazwy firmy na siłę.

Przykład skryptu w Pythonie do masowej zmiany nazw plików w katalogu

import os

def rename_files(directory, company_name):
    for filename in os.listdir(directory):
        if filename.endswith(".jpg") or filename.endswith(".png"):
            new_filename = f"{os.path.splitext(filename)[0]}-{company_name}{os.path.splitext(filename[1]}"
            os.rename(os.path.join(directory, filename), os.path.join(directory, new_filename))

directory = "/path/to/your/images"
company_name = "nazwa-firmy"
rename_files(directory, company_name)