Jak dodać swoje logo do wyników wyszukiwania w Google? (+dodatkowy trick)

Google wyświetla logotypy stron internetowych w wynikach wyszukiwania.

Od dłuższego czasu na urządzeniach mobilnych. Obecnie trwają testy favicon na komputerach stacjonarnych.

Favicona to świetny sposób by wyróżnić swój brand na poziomie wyników wyszukiwania. Za darmo. Pokażę Ci dziś, jak to zrobić.

Obrazek ilustrujący dwie dłonie wyciągnięte ku ikonie serca, która znajduje się po środku obrazka.

W tym artykule dowiesz się:

  • stack_of_photos jak wygląda favicona w Google i jak dodać swoją

  • approval jakie wymogi musisz spełnić by była wyświetlana

  • idea jak zmienić kolor paska przeglądarki (sprytny trick)

Dzięki wiedzy zawartej w tym artykule upewnisz się, że wykorzystujesz sprawdzony sposób na wyróżnienie się z tłumu (zwłaszcza bonusowy trick). Dzięki temu Twoi użytkownicy i klienci będą dobrze pamiętać Twoją markę.

Zacznijmy od początku:

1. Favicona w Google — jak wygląda?

Google dodał favicony do mobilnych wyników wyszukiwania w połowie zeszłego roku. Był to przełom w designie wyszukiwarki.

Od tego czasu favicony w mobilnych wynikach wyszukiwania wyglądają tak:

Na obrazku widać dłoń operującą smartfonem. Na smartfonie wyświetla się przykładowy wynik wyszukiwania. Obok wyników wyszukiwania można dostrzec różne favicony.

Decyzja uargumentowana była tym, że:

  • selfie Wraz z nowym designem, branding strony internetowej staje się bardziej widoczny, wychodzi na pierwszy widok.

  • approve Taki układ strony z wynikami pomaga użytkownikom lepiej zrozumieć, jakie jest źródło informacji.

  • butting_in Z poziomu wyników wyszukiwania internauta może dokonywać wyboru zaufanych przez niego stron.

Co więcej:

Reklamy w wynikach mobilnych zamiast favicony wyświetlają słowo Reklama. Odpowiednie oznaczenie znajdziesz obok adresu strony docelowej:

Na obrazku widać dłoń operującą smartfonem. Na smartfonie wyświetla się wynik wyszukiwania z reklamą Trusted Shops.

Nowy wygląd wyników wyszukiwania na urządzeniach mobilnych okazał się sukcesem. Z tego powodu Google zaczął testować favicony w wynikach na komputerach.

Zerknij na przykład:

metoda-ustalania-cen-desktop

Jak dobrze widzisz, favicony stają się dla Google priorytetem.

Teraz powiem wprost:

Musisz mieć swoją faviconę by nie zginąć w tłumie wyników w Google.

Nie chcesz chyba, żeby Twój wynik przybierał domyślną ikonkę?

Pamiętaj również, że favicony są wyświetlane bezpośrednio w przeglądarce.

Zerknij na przykład poniżej. Strona inFakt nie ma favicony, przyjmuje w to miejsce ikonkę domyślną:

Podpowiedzi w pasku przeglądarki. Wyświetlają się różne strony wraz z faviconami.

W tym przypadku to błąd mojej przeglądarki, gdyż inFakt faviconę ma. Niemniej ten przykład może Ci pokazać, jak wiele stracisz, gdy nie zainstalujesz w poprawny sposób favicony na swojej stronie lub w swoim sklepie.

Pamiętaj, że nie przeglądarka desktopowa również wyświetla favicony:

Na obrazku widać karty przeglądarki Chrome z losowymi stronami internetowymi. Przy tytule strony znajduje się jej favicona.

W dalszej części przedstawię Ci instrukcję, w jaki sposób możesz utworzyć własną faviconę samodzielnie.

Jednak zanim przejdziesz dalej… (Favicona to nie wszystko). Dowiedz się, jak przywiązać klienta do swojej marki:

New call-to-action

2. Jak stworzyć faviconę?

Właściciele stron oraz sklepów internetowych jako faviconę ustawiają najczęściej swoje logo. Ty możesz zrobić tak samo. Pytanie brzmi, jak przerobić Twoje logo na faviconę?

Do tego celu możesz wykorzystać narzędzie Favicon.io:

Laptop wyświetlający stronę favicon.io.

Wystarczy, że przeciągniesz plik ze swoim logotypem, a to narzędzie automatycznie wygeneruje favicony!

(Czy widzisz przykład z logo eTrusted w sekcji Preview na zrzucie ekranu?)

Po pobraniu pliku, w archiwum ZIP znajdziesz gotowe favicony w kilku rozmiarach i formatach:

Folder z archiwum, w którym znajdują się pliki favicony, wygenerowane przez serwis favicon.io.

Jeśli chcesz, możesz utworzyć faviconę z emoji lub liter.

Zobacz przykład favicony z moimi inicjałami (SB):

Strona favicon.io podczas generowania favicony z inicjałami 'SB'.

Jak widzisz, narzędzie Favicon.io jest bardzo funkcjonalne i nie ogranicza się jedynie do prostej konwersji plików graficznych.

Dobra favicona przyciąga wzrok, tak samo jak dobrze prowadzone konto na Instagramie. Masz je? Zacznij przekuwać w zysk:

reklama sklepu na instagramie

3. Jakie wymogi techniczne musisz spełnić?

Google określiło wymogi techniczne w kwestii favicon. Musisz wiedzieć jedno:

Jeśli nie spełniasz wymogów Google, Twoja favicona nie zostanie wyświetlona w wynikach wyszukiwania.

Pamiętaj jednak, że Google nigdy nie daje gwarancji wyświetlenia Twojej favicony, nawet jeśli spełnisz wymogi techniczne. Choć takie zastrzeżenie pojawia się w oficjalnej instrukcji Google, takie przypadki raczej się nie zdarzają. Niemniej — mogą :)

Oto wymagania Google w kwestii favicon:

1. Strona główna oraz plik favicony muszą być możliwe do zindeksowania.

Oznacza to, że nie mogą mieć ustawionego parametru noindex w pliku robots.txt (lub gdziekolwiek indziej). Jeśli nigdy nie modyfikowałes pliku robots.txt, to wszystko powinno działać poprawnie bez dodatkowej ingerencji.

2. Favicona musi reprezentować Twoją witrynę.

Google wymaga, aby Twoja favicona była unikalna i powiązana docelowo z Twoją witryną. Celem wyświetlania favicon w wynikach wyszukiwania jest bowiem ułatwienie internautom znajdywanie interesujących ich treści, w tym wybieranie serwisów, które już znają.

3. Plik favicony musi mieć określony rozmiar i format.

Choć Google automatycznie przeskalowuje favicony znalezione na stronie do rozmiary 16x16 pikseli, wymaga od właścicieli stron większego formatu pliku. Favikona musi być wielokrotnością kwadratu o boku 48 pikseli. Oznacza to zatem rozmiary: 48x48 pikseli, 96x96 pikseli, 144x144 piksele i tak dalej.

Zasadniczo możesz wykorzystać faviconę w rozmiarze 512x512 pikseli jako główną, zdefiniowaną w pliku HTML. Będzie ona wyjściową dla wszystkich innych narzędzi, np. Google.

4. Dostępność pod określonym URL

Twoja favicona musi być dostępna pod określonym adresem URL, np. twojadomena.pl/favicon.png. Nie może to być adres dynamiczny. Nie zmieniaj go, gdyż przy zmianie URL Google może na jakiś czas zgubić faviconę w swoim indeksie.

5. Neutralna treść

Nie stosuj symboli czy znaków zawierających pornografię lub symbole nienawiści, takie jak swastyka. Jeśli zastosowałbyś taki znak, Google wykryje go i ustawi ikonę domyślną.

Google stawia wiele wytycznych, czym może zawrócić w głowie. Ale! Zastosuj się do nich, a będziesz wysoko w wynikach:

SEO dla sklepów internetowych

4. Jak dodać faviconę do Twojej strony?

Faviconę dodajemy do strony za pomocą taga w kodzie HTML.

Dla ikony w formacie .ico:

<link rel="icon" type="image/x-icon" href="favicon.ico" />

Dla ikony w formacie .png:

<link rel="icon" type="image/png" href="favicon.png" />

Tag należy go wstawić w sekcji <head>.

Możesz również skorzystać z gotowych instrukcji i/lub integracji dla Twojego CMS:

Unikalne opisy pomagają zapadać w pamięć, a na dodatek zwiększają konwersję. Jeszcze nie wiesz jak je tworzyć? Szybko pobierz poradnik:

Nouveau call-to-action

5. Bonus: kolor Twojej marki w przeglądarce

Przeglądarki mobilne dają stronom internetowym możliwość zmiany koloru górnego paska. Dzięki temu marka może jeszcze silniej zaznaczać swoją obecność w świadomości internauty czy konsumenta. Zobacz przykład czerwonego paska przeglądarki na stronie transition words po polsku:

Zdjęcie telefonu, który wyświetla stronę transition-words.pl. Pasek przeglądarki Google Chrome jest czerwony, tak samo jak logotyp strony.

Aby osiągnąć taki efekt, musisz wstawić do kodu strony następujący znacznik:

<meta name="theme-color" content="#f73e3e" />

— gdzie #f73e3e jest kolorem, który chcesz zastosować dla paska przeglądarki. Musi on być podany w formacie HEX. Zapis koloru z palety w tym formacie pobierzesz na przykład ze strony HTML Color Codes.

Powyższy kod wprowadź do sekcji <head> swojej strony, jak na przykładzie:

Zrzut ekranu kodu strony, z dodanym tagiem odpowiadającym za kolor paska przeglądarki.

Podsumowanie

Daj znać, czy korzystasz z favicon na swojej stronie. W jaki inny sposób starasz się wzmocnić świadomość swojej marki u internautów i konsumentów? Podziel się swoimi przemyśleniami w sekcji komentarzy poniżej.

4 komentarzy