Prezentacja strony internetowej to pojęcie znacznie szersze niż UX oraz UI. W grę wchodzi także favicon oraz Open Graph. Te dwa aspekty pomagają w budowaniu wizerunku witryny oraz jej pozytywnym odbiorze przez użytkowników. Sprawdź zatem, czym jest favicon oraz Open Graph, a także jak je wykorzystać.
Odbiór witryny internetowej przez użytkowników, a zarazem potencjalnych klientów jest niezwykle ważny. Dzięki budowaniu pozytywnego wrażenia oraz zaufania możliwe jest wpływanie na zwiększenie generowanych leadów oraz konwersji. One z kolei prowadzą do sprzedaży oraz zysków. Wizerunek strony internetowej w głównej mierze powstaje dzięki zastosowaniu zabiegów UX połączonych z UI. To jednak nie wszystkie elementy, na które warto zwrócić uwagę. Jest ich więcej, a wśród nich favicon oraz Open Graph.
Co to jest favicon?
Favicon to charakterystyczna ikona strony internetowej. Może ona przyjmować postać logo, czy też innego charakterystycznego dla firmy znaku graficznego.
Ikona prezentowana jest w kilku miejscach:
- przed adresem witryny w przeglądarce,
- przed tytułem witryny w zakładce przeglądarki,
- przed adresem w wynikach wyszukiwania.
Favicon wyświetlana jest w postaci kwadratu. Jej rozdzielczość powinna być równa 48×48 pikselom bądź ich wielokrotności. Można zatem dodać ikonę, której wymiary będą wynosić 96×96 pikseli, 144×144 pikseli. Warto jednak podkreślić, że w wielu przypadkach wyświetlana będzie ona znacznie mniejsza, np. w rozmiarze 16×16 pikseli. Większa rozdzielczość ma tutaj znaczenie dla zachowania odpowiedniej jakości oraz możliwości skalowania ikony.
Istotne dla prawidłowego odczytu favicon jest rozszerzenie. Przyjmuje ono postać .ico, konieczne jest więc odpowiednie jej zapisanie lub konwersja za pomocą darmowych online’owych narzędzi (np. Convertio).
Przeczytaj także: Gdzie zarejestrować logo i nazwę firmy?
Jak dodać favicon?
Favicon dodaje się do strony internetowej w bardzo prosty sposób:
- w przypadku witryny pozbawionej systemu zarządzania treścią można dodać ją za pomocą tagu umieszczanego w kodzie:
<link rel="shortcut icon" href="favicon.ico">- kiedy witryna korzysta z CMS dodanie favicon możliwe jest w ustawieniach lub w sekcji dotyczącej personalizacji wykorzystywanego motywu – np. w WordPress ścieżka prowadząca do dodania ikony prezentuje się następująco: Wygląd>Dostosuj>Tożsamość witryny.
Co to jest Open Graph?
Drugim ciekawym, a zarazem ważnym elementem strony internetowej są meta tagi Open Graph. Są różne sposoby zachęcania użytkowników Facebook’a do odwiedzania witryn, a omawiane tagi są jednym z nich. Dzięki zastosowaniu Open Graph strony internetowe prezentują się w sposób określony przez użytkownika. Ma to ogromne znaczenie w przypadku wpisów blogowych, podstron z produktami, a także ofertami.
Wykorzystując Open Graph można:
- zwiększyć czytelność udostępnianych linków,
- wzmocnić atrakcyjność prezentowanych treści,
- zachęcić do kliknięcia w link.
Ten wpis też Cię może zainteresować: Wymiary grafik na FB
Z czego składa się Open Graph?
Open graph składa się z kilku tagów HTML. Wśród nich znajdują się:
og:title
Powyższy tag oznacza tytuł udostępnianej strony internetowej, wpisu blogowego lub produktu. Maksymalna ilość znaków, jaką można w nim zawrzeć, wynosi 95. Jednak, aby tytuł prawidłowo się wyświetlał na różnych urządzeniach, optymalna jego długość wynosi 55 znaków. Og:title powinien zaintrygować użytkowników portalu i skłonić do kliknięcia linka. Jeśli tag ten nie zostanie zastosowany, Facebook zaprezentuje tytuł na podstawie innego, czyli standardowego meta-title.
Umieszczenie tagu og:title możliwe jest za pomocą kodu:
<meta property=”og:title” content=”Tytuł udostępnianej strony” />og:url
Drugim ważnym meta tagiem Open Graph jest og:url. Określa on link kanoniczny do udostępnianej treści.
Tag og:url dodaje się poprzez kod:
<meta property=”og:url” content=”Adres udostępnianej strony” />og: type
Kolejnym istotnym tagiem jest og:type. Za jego pomocą można uszczegółowić rodzaj udostępnianej treści. Facebook dopuszcza następujące typy publikowanych linków:
- artykuł,
- strona internetowa,
- blog,
- film,
- książka
- utwór muzyczny,
- materiał filmowy,
- gra,
- jedzenie
- aktor,
- polityk,
- autor,
- firma,
- hotel,
- restauracja.
Og:type można dodać przy pomocy kodu:
<meta property=”og:type” content=”article” />og:image
Skoro Open Graph pomaga zadbać o warstwę wizualną udostępnianych na Facebook’u linków, nie można pominąć tagu og:image. Dotyczy on grafik, które stanowią obrazek wyróżniający. Co ciekawe, mogą być one różne niż zdjęcie główne, które znajduje się np. we wpisie blogowym.
Tag og:image precyzuje się za pośrednictwem kodu:
<meta property=”og:image” content=”Bezpośredni adres grafiki” />Sprawdź także: Co to jest logo w krzywych?
og:description
Ostatnim wartym uwagi tagiem Open Graph jest og:description. Odpowiada on za prezentowanie opisu udostępnianej witryny. Podobnie, jak w przypadku og:title, jeśli nie zostanie on dodany, Facebook zaprezentuje dane pobrane z tagu meta-description. Jeśli zatem portal daje możliwość jego zmiany i dostosowania do grupy docelowej, to warto wykorzystać ten element. Co ważne – taki opis będzie widoczny tylko i wyłącznie na Facebook’u. Nie wpływa on na pozycjonowanie strony internetowej w wyszukiwarce i wyświetlany w niej opis, pobrany z tagu meta-description.
Og:description można dodać do strony internetowej poprzez kod:
<meta property=”og:description” content=”Opis udostępnianej strony” />og:locale
Tag og:locale określa język udostępnianej na Facebooku treści. Jego stosowanie nie jest obowiązkowe.
Można go dodać za pomocą kodu:
<meta property=”og:locale” content=”pl_PL” />og:audio
Meta tag og:audio jest bardzo często stosowany w przypadku publikowania na stronach utworów muzycznych oraz popularnych aktualnie podcastów.
Og:audio jest umieszczany poprzez kod:
<meta property="og:audio" content="Link do materiału audio"/>og:video
Analogicznie jak w przypadku utworów muzycznych, udostępniane strony mogą zawierać także materiały wideo. Tag og:video jest przeznaczony do umieszczania bezpośrednich linków do nich.
Dodaje się go za pośrednictwem kodu:
<meta property="og:video" content="Link do materiału video"/>fb:app_id
Ostatnim tagiem Open Graph jest fb:app_id. Facebook przeznaczył go do połączenia witryny internetowej z aplikacją stworzoną w obszarze portalu społecznościowego. Dzięki umieszczeniu fb:app_id w kodzie witryny, możliwe jest uzyskiwanie dodatkowych informacji związanych z ruchem.
Tag ten dodaje się za pomocą:
<meta property="fb:app_id" content="Identyfikator aplikacji na Facebook’u"/>Podsumowanie
Podczas projektowania strony internetowej, a także w trakcie jej funkcjonowania warto zadbać o dodatkowe aspekty wizualne. Mowa o favicon oraz tagach Open Graph. Wpływają one na budowanie zaufania do strony internetowej oraz wzmacniają jej atrakcyjność podczas udostępniania w mediach społecznościowych. Tym samym mogą przełożyć się na zwiększenie ruchu.
Autor:
