Optymalizacja logo strony krok po kroku

Logo to jedna z najważniejszych wizytówek strony firmowej, bloga, czy sklepu internetowego. Logo jest elementem, który znajduje się zazwyczaj bardzo wysoko w kodzie źródła strony internetowej. Roboty Google przywiązują uwagę do tych miejsc, co jest ważne z punktu widzenia SEO. Optymalizacja wybranych elementów strony wymaga zazwyczaj jednorazowej pracy, która często pozwala uzyskać korzyści na długie lata. Skuteczne pozycjonowanie stron internetowych to suma wielu czynników, które decydują o pozycji strony w SERP. Być może optymalizacja logo zaważy o pozycji Twojej strony w wynikach wyszukiwania i przeskoczysz konkurencję. Opracowałem wideo poradnik zawierający proste instrukcje, które szerzej opisują zagadnienia związane z przygotowaniem logo do optymalizacji.

Jak optymalizować logo?

Najpopularniejszym błędem jest osadzenie logo, jako tło w kodzie CSS. W efekcie logo staje się elementem nieklikalnym, psującym użyteczność strony.

Logo strony powinno być plikiem graficznym osadzonym wewnątrz odnośnika kierującego do strony głównej. Należy to zrobić w kodzie HTML, wykorzystując znacznik linku i znacznik grafiki.

Zobacz wideo poradnik

Optymalizacja logo.

Umieszczenie kodu logo na stronie

Na popularnych systemach, takich jak WordPress kod logo znajduje się w pliku header.php szablonu strony.

Wyjściowa struktura kodu HTML logo powinna wyglądać następująco:

<a href="https://projektmarketing.pl">
	<img src="logo.png" width="240" height="67" />
</a>

Do znacznika obrazka warto dodać atrybuty width i height, definiujące odpowiednio szerokość i wysokość grafiki. Efektem działań jest krótsze renderowanie strony internetowej w przeglądarce.

Popularnym błędem jest wczytywanie logo zbyt dużych rozmiarów oraz wykorzystywanie atrybutów width i height do skalowania, pomniejszania obrazków. Szybkość witryny jest czynnikiem wpływającym na pozycjonowanie stron.

Dodawanie atrybutu title do linku

Atrybut title dodawany do odnośników powoduje wyświetlenie tekstu po najechaniu na link. Warto wykorzystać ten atrybut do przedstawienia firmy i nasycenia wybranych słów kluczowych.

<a href="https://projektmarketing.pl" title="Projekt Marketing - Agencja SEO SEM">
	<img src="logo.png" width="240" height="67" />
</a>

Nazewnictwo pliku graficznego

Nazewnictwo plików graficznych i dokumentów PDF jest istotne z punktu widzenia SEO.

Nadanie odpowiednich nazw dla grafik jest ważne dla robotów indeksujących, które mogą mieć problemy z interpretacją zawartości grafik. Nazwa logo – 1.png nie wnosi żadnej wartości dla robota Google, który skanuje nazwy grafik i załączników na stronie.

Wskazówki dla nazewnictwa plików i grafik:

• nazwa pliku powinna być krótka i zawierać słowo kluczowe, np: projekt-marketing-pozycjonowanie-optymalizacja.png.
• każde słowo powinno zostać rozdzielone „-” (myślnikiem).
• dla typowo polskich znaków: ą, ć, ę, ł, ń, ó, ś, ź, ż, stosować odpowiednio: a, c, e, l, n, o, s, z, z.

<a href="https://projektmarketing.pl" title="Projekt Marketing - Agencja SEO SEM">
	<img src="projekt-marketing-pozycjonowanie-optymalizacja.png" width="240" height="67" />
</a>

Kompresja grafiki

Kompresja obrazków na stronie pozwoli zmniejszyć rozmiar pliku, nie tracąc jakości.

Darmowy program online do kompresji grafik – https://compressor.io.

Program umożliwia kompresję stratną i bezstratną. Warto spróbować kompresji stratnej, wówczas należy sprawdzić czy jakość obrazu została zachowana.

Pierwotną grafikę należy nadpisać na serwerze skompresowaną grafiką logo.

Dodawanie atrybutu ALT do grafiki

Atrybut ALT powinien zawierać słowo kluczowe, tekst opisujący grafikę. Dodanie do każdej grafiki atrybutu ALT pozwoli zwiększyć jej widoczność w trakcie przeglądania obrazów w wyszukiwarce Google. W efekcie zwiększy się ruch na stronie pochodzący wyszukiwania grafik.

<a href="https://projektmarketing.pl" title="Projekt Marketing - Agencja SEO SEM">
	<img src="logo-projekt-marketing-pozycjonowanie-optymalizacja.png" alt="Projekt Marketing - optymalizacja i pozycjonowanie stron" width="240" height="67" />
</a>

Dodawanie atrybutu title do grafiki

Atrybut title dodawany do grafiki logo jest dodatkowym nośnikiem informacji, który powinien nawiązywać do zawartości obrazka.

<a href="https://projektmarketing.pl" title="Projekt Marketing - Agencja SEO SEM">
	<img src="logo-projekt-marketing-pozycjonowanie-optymalizacja.png" alt="Projekt Marketing - optymalizacja i pozycjonowanie stron" title="Projekt Marketing - Optymalizacja i pozycjonowanie stron" width="240" height="67" />
</a>

Wdrożenie mikroformatów logo

Mikroformaty pozwalają precyzyjnie opisać poszczególne elementy na stronie w sposób zrozumiały dla botów Google. Logo bez mikroformatów będzie traktowane przez roboty sieciowe jako link i obrazek, natomiast po wdrożeniu mikroformatów będą informować boty, że napotkały logo strony.

<div itemtype="http://schema.org/Organization" itemscope="">
	<a href="https://projektmarketing.pl" title="Projekt Marketing - Agencja SEO SEM" itemprop="url">
		<img src="logo-projekt-marketing-pozycjonowanie-optymalizacja.png" alt="Projekt Marketing - optymalizacja i pozycjonowanie stron" title="Projekt Marketing - Optymalizacja i pozycjonowanie stron" width="240" height="67" itemprop="logo" />
	</a>
</div>

Na koniec należy sprawdzić, czy mikroformaty logo zostały poprawnie wdrożone – [Link] do darmowego narzędzia Google.

Mam też do Ciebie ogromną prośbę. Jeżeli uznasz, że poradnik o optymalizacji logo okazał się wartościowy i pomocny, to udostępnij go swoim znajomym lub podlinkuj. Gdziekolwiek… Niech inni ludzie też na tym skorzystają.