Co to jest favicon i Open Graph? Czym jest i za co odpowiada?
Obecność każdej firmy w internecie to współcześnie standard. Nawet jeżeli strona internetowa to prosta wizytówka, a profile w mediach społecznościowych przekazują tylko podstawowe informacje na temat przedsiębiorstwa. Warto zainwestować w podstawowe elementy promujące stronę i nasze profile wśród internautów. Podstawa to kompletny pakiet grafik oraz odpowiednie oznaczanie treści. Tutaj pojawiają się dwa obcobrzmiące terminy: favicon i Open Graph. Czym są i w jaki sposób mogą pomóc dotrzeć do nowych klientów?
Favicon, czyli logotyp strony
Otwierając strony w przeglądarce, przyzwyczailiśmy się już do ich wielu wspólnych elementów. Menu, stopka z mapą strony, ale i charakterystyczna grafika wyświetlająca się po prawej stronie karty, zaraz obok tytułu danej podstrony. To właśnie favicon, czyli ikona strony internetowej. Wiele osób zaczynających swoją przygodę z tworzeniem witryn często o nim zapomina, przez co skazane są na nieatrakcyjną pustkę lub grafikę pochodzącą z szablonu dostawcy oprogramowania.
To niepozorne, niewielkie logo znacząco pomaga wyróżnić się na tle konkurencji. Użytkownicy często zaglądający na daną stronę są w stanie dzięki temu intuicyjnie rozpoznać ją na pasku otwartych kart. Szczególnie przy ich dużej liczbie podziałka znacznie się kurczy i często widoczne pozostają tylko favicony.
Standardowo mają one wymiary kwadratu 16 × 16 pikseli, aczkolwiek zaleca się korzystanie z grafik w dużo wyższej rozdzielczości, która elegancko skaluje się w dół. Bardzo często przyjmuje ona formę symbolu na transparentnym tle zamiast prezentacji elementu na jednolitym, kolorowym tle. Dzięki temu udaje się uzyskać niestandardowe kształty, jak gwiazda, koło czy zaokrąglone rogi.
Aby ikona strony internetowej zaczęła się wyświetlać, zazwyczaj niepotrzebna jest ingerencja w kod strony i wystarczy umieszczenie pliku w katalogu głównym. Platforma WordPress zawiera specjalną opcję jej uruchomienia, co też nie powinno sprawić nikomu wielkich trudności.
HTML a favicon ? jak dodać?
Tutaj przyda się znajomość podstaw tego języka programowania. W sekcji <head> trzeba dodać odpowiedni znacznik, który wskaże przeglądarce, gdzie szukać ikony. Oto przykładowa linijka kodu, która za to odpowiada: <link rel=”icon” type=”image/x-icon” href=”/lokalizacjapliku/favicon.ico”>.
Open Graph ? czym jest i za co odpowiada?
Open Graph jest listą komend określaną jako meta tagi. Dzięki nim można dokładnie kontrolować sposób wyświetlania się zamieszczanych treści w mediach społecznościowych. Zostały one pierwotnie wprowadzone przez Facebooka, natomiast współcześnie większość popularnych portali tego typu ma ich własną wersję.
Meta tagi są również obecne w wyszukiwarkach, gdzie odgrywają ważną rolę w pozycjonowaniu stron internetowych. Roboty Google dzięki nim mogą łatwiej określać przydatność witryny, a przy okazji są także dobierane tak, by zachęcić użytkownika, aby kliknął dany link.
Jakie znaczniki Open Graph są najważniejsze?
Oczywiście ich znajomość nie jest niezbędna, bo obecnie większość popularnych CMS-ów ma własne wtyczki, które są dedykowane do ich umieszczania. Najpopularniejszą z nich jest przeznaczona dla WordPressa YoastSEO ? intuicyjna, z którą poradzi sobie nawet laik. Dla osób, które są skazane na ręczne umieszczanie konkretnych informacji, przygotowaliśmy listę tagów do umieszczenia w sekcji <head>:
- og:title ? tutaj należy w skrócie określić, czego dotyczy dana strona. Optymalna liczba znaków wynosi między 40 a 60. Warto przy okazji w jakiś sposób zachęcić użytkowników do kliknięcia odnośnika. Linijka kodu wygląda tak: <meta property=”og:title” content=”Tytuł obiektu” />. Jeżeli żadna wartość nie będzie ustawiona, Facebook wyświetli po prostu meta title;.
- og:type ? w tym miejscu określa się, czego dotyczy konkretny odnośnik. Możesz wybrać spośród wielu kategorii, dostępnych pod adresem: https://ogp.me/#types. Tak wygląda znacznik odpowiedzialny za typ treści: <meta property=”og:type” content=”website” />;
- og:url ? tym tagiem przypisuje się adres strony internetowej do konkretnej treści, przykładowo: < meta property=”og:url” content=”https://www.adres.pl/podstrona” />;
- og:description ? w tym miejscu do dyspozycji oddane zostaje ok. 160 znaków, w których trzeba zachęcić użytkownika do interakcji z danym obiektem. Podobnie jak w przypadku og:title, jeżeli żadna wartość nie zostanie ustawiona, wyświetli się ustalony wcześniej meta description, a tak prezentuje się odpowiedzialna za opis linijka kodu: <meta property=?og:description? content=miejsce na własny opis strony? />;
- og:image ? znacznik kluczowy, gdyż określa, która fotografia ma się wyświetlić użytkownikowi jako miniaturka treści. Jak wiadomo, mediami społecznościowymi rządzi właśnie obraz ze względu na większą przystępność dla odbiorcy. Znacznik wygląda tak: <meta property=”og:image” content=”https://linkdozdjecia.pl/zdjecie.jpg” />.
Co dają znaczniki Open Graph?
Tak obudowana treść wzbudza po prostu większe zaufanie użytkowników jako specjalnie dostosowana do ich oczekiwań. Przekłada się to bezpośrednio na ich aktywność ? więcej kliknięć, polubień oraz udostępnień. Wpływa to nie tylko na popularność strony w mediach społecznościowych, ale buduje także solidne zaplecze do skutecznego pozycjonowania w wynikach wyszukiwania. Roboty Google zauważają, że witryna musi być użyteczna, jeżeli jest tak często odwiedzana przez użytkowników.
Favicon w projekcie graficznym
Przygotowując pakiet graficzny dla naszych klientów w ramach usługi: https://fesido.pl/grafika-na-strone-www/, zawsze bierzemy pod uwagę zindywidualizowany i nowoczesny favicon. Wiemy, że to swego rodzaju wizytówka każdej witryny, więc musi być łatwa do zapamiętania dla internautów.
Open Graph a grafiki w social mediach
Odpowiednie oznaczenie udostępnianych treści powinno być priorytetem w działaniach prowadzonych online. Dzisiaj oprócz specjalnie przygotowanych do mediów społecznościowych grafik: https://fesido.pl/grafika-na-social-media/ tylko dobrze napisany tytuł oraz opis mogą zachęcić do kliknięcia linku i jego dalszego udostępnienia.
Parametry Open Graph będą bardzo ważne także dla produktów i usług, które reklamowane są w ramach Google Ads. Wówczas można nieco rozszerzyć zakres promocji, udostępniając przygotowane grafiki: https://fesido.pl/grafika-do-kampanii-w-adsach/ w social mediach, kładąc nacisk na chwytliwy tytuł, przekonujący opis oraz właściwe linkowanie.
Favicony i Open Graph ? podsumowanie
Ujmując rzecz krótko ? favicony nie są niczym innym niż logiem strony internetowej na pasku otwartych kart. Dla internauty liczy się przede wszystkim jego czytelność, aby mógł łatwo zidentyfikować, które strony ma uruchomione w przeglądarce.
Natomiast Open Graph to słowna otoczka udostępnianych w popularnych mediach społecznościowych treści, stworzona tak, aby zachęcić użytkowników do ich sprawdzenia. Dokładnie, dostosowując tytuł, opis oraz zdjęcia właściciel strony ma pełną kontrolę nad tym, co i w jaki sposób zostało przedstawione oglądającym zainteresowanym tematem.