Favicon i Open Graph - Twarz piramidy

Masz otwartych piętnaście kart w przeglądarce i szukasz tej z muzeum, ale wszystkie mają tę samą szarą ikonkę, a tytuły są ucięte. Albo wysyłasz znajomemu link do swojej strony, a komunikator pokazuje sam goły adres, bez obrazka i opisu. Obie sytuacje naprawiają dwa drobiazgi w sekcji <head>. Każda piramida w Egipcie miała swój unikatowy symbol - kartusz faraona. W świecie stron internetowych takim symbolem jest favicon (ikona w zakładce przeglądarki) oraz meta tagi Open Graph (podgląd strony w mediach społecznościowych).

Favicon - ikona strony

Favicon to mała ikona wyświetlana obok tytułu strony w zakładce przeglądarki, a także w zakładkach (ulubionych) i historii. Dodajesz go elementem <link> w sekcji <head>:

1<head>
2  <!-- Podstawowy favicon (16x16 lub 32x32 pikseli) -->
3  <link rel="icon" type="image/x-icon" href="/favicon.ico">
4
5  <!-- Nowoczesne favicony w formacie PNG -->
6  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
7  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
8
9  <!-- Ikona dla urządzeń Apple -->
10  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
11</head>

Najważniejszy jest atrybut rel="icon" - mówi przeglądarce, że plik z href to ikona strony. type i sizes pomagają jej wybrać najlepszy plik, a apple-touch-icon pojawi się na ekranie iPhone'a po dodaniu strony do ekranu początkowego. Bez żadnego linku wiele przeglądarek i tak spróbuje pobrać plik /favicon.ico z katalogu głównego serwera.

Formaty faviconów:

• .ico - tradycyjny format, wspierany przez wszystkie przeglądarki
• .png - nowoczesny format z przezroczystością
• .svg - skalowalny, idealny dla nowoczesnych przeglądarek

Polecam zestaw: plik .ico jako zapas i ikonę SVG lub PNG dla nowszych przeglądarek. Zaprojektuj ją tak, by była czytelna w 16 pikselach - kartusz z jednym wyraźnym znakiem działa lepiej niż cała scena z piramidami.

Open Graph - podgląd w social media

Kiedy udostępniasz link na Facebooku, X (dawniej Twitterze) czy LinkedIn, pojawia się podgląd z tytułem, opisem i obrazkiem. To działa dzięki meta tagom Open Graph - protokołowi stworzonemu przez Facebooka, który dziś odczytuje większość serwisów i komunikatorów. Dopisujesz je obok zwykłych meta tagów, z atrybutem property:

1<head>
2  <!-- Podstawowe meta tagi -->
3  <meta charset="UTF-8">
4  <meta name="viewport" content="width=device-width, initial-scale=1.0">
5  <meta name="description" content="Strona o piramidach w Egipcie">
6
7  <!-- Open Graph -->
8  <meta property="og:title" content="Muzeum Starożytnego Egiptu">
9  <meta property="og:description" content="Odkryj tajemnice piramid i faraonów">
10  <meta property="og:image" content="https://example.com/piramida.jpg">
11  <meta property="og:url" content="https://example.com">
12  <meta property="og:type" content="website">
13</head>

Każdy tag to para: nazwa w property i wartość w content. Protokół wymaga czterech z nich na każdej stronie: og:title, og:type, og:image i og:url. Adres obrazka musi być pełny, z https://, bo serwis pobiera go z zewnątrz, a nie z Twojego katalogu.

X ma też własny, podobny zestaw tagów, czyli Twitter Card. Zwróć uwagę, że tutaj używamy atrybutu name, a nie property:

1<head>
2  <!-- Twitter Card -->
3  <meta name="twitter:card" content="summary_large_image">
4  <meta name="twitter:title" content="Muzeum Starożytnego Egiptu">
5  <meta name="twitter:description" content="Odkryj tajemnice piramid">
6  <meta name="twitter:image" content="https://example.com/piramida.jpg">
7</head>

summary_large_image wybiera duży podgląd z obrazkiem na całą szerokość. Gdy brakuje tagów twitter:title czy twitter:image, X sięga po odpowiedniki z Open Graph, więc bez twitter:card się nie obejdzie, a resztę możesz pominąć.

Ważne meta tagi Open Graph:

• og:title - tytuł strony (zalecane do ok. 60 znaków)
• og:description - opis strony (zalecane do ok. 160 znaków)
• og:image - obrazek podglądu (zalecane 1200x630 pikseli)
• og:url - kanoniczny adres URL strony
• og:type - typ treści (website, article, product)

Limity znaków to wskazówki, a nie wymogi protokołu - dłuższy tekst serwis zwykle przytnie. Podgląd sprawdzisz przed publikacją w Sharing Debuggerze Facebooka albo w Post Inspectorze LinkedIna.

Meta tag description

Nie zapomnij o klasycznym meta tagu description - Google często wyświetla go jako opis strony w wynikach wyszukiwania, choć czasem woli fragment samej treści:

1<meta name="description" content="Muzeum Starożytnego Egiptu - zwiedzaj wystawy, poznaj historię faraonów. Bilety online.">

Pisz go dla człowieka, nie dla robota: jedno lub dwa zdania, które zachęcą do kliknięcia. Każda podstrona powinna mieć własny, inny opis.

Kolejność w head

Na koniec kolejność. Ta, którą polecam, zaczyna się od kodowania znaków, bo przeglądarka musi je poznać w pierwszych 1024 bajtach dokumentu:

1<head>
2  <meta charset="UTF-8">
3  <meta name="viewport" content="width=device-width, initial-scale=1.0">
4  <title>Muzeum Starożytnego Egiptu</title>
5  <meta name="description" content="Wystawy, bilety i historia faraonów.">
6  <link rel="stylesheet" href="style.css">
7</head>

Po charset idzie viewport, potem tytuł i opis, a dalej linki do ikon i arkuszy stylów oraz tagi Open Graph. Kolejność pozostałych tagów nie zmienia działania strony, ale stały porządek sprawia, że w każdym projekcie wiesz, gdzie czego szukać. W projekcie końcowym modułu favicon i Open Graph będą obowiązkowe.

Praktyka

W edytorze poniżej znajdziesz stronę z kompletem meta tagów i makietą karty Open Graph. Porównaj tagi w <head> z makietą i wskaż, który tag odpowiada za każdy element podglądu:

1<!DOCTYPE html>
2<html lang="pl">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Muzeum Egiptu | Strona glowna</title>
7
8    <!-- Meta description -->
9    <meta name="description" content="Muzeum Starorzytnego Egiptu - odkryj tajemnice piramid i faraonow. Bilety online.">
10
11    <!-- Favicon -->
12    <link rel="icon" type="image/png" sizes="32x32" href="https://placehold.co/32x32/d4af37/1a1a2e?text=E">
13
14    <!-- Open Graph -->
15    <meta property="og:title" content="Muzeum Starorzytnego Egiptu">
16    <meta property="og:description" content="Odkryj tajemnice piramid i faraonow. Bilety online.">
17    <meta property="og:image" content="https://placehold.co/1200x630/d4af37/1a1a2e?text=Muzeum+Egiptu">
18    <meta property="og:url" content="https://muzeum-egiptu.pl">
19    <meta property="og:type" content="website">
20
21    <!-- Twitter Card -->
22    <meta name="twitter:card" content="summary_large_image">
23    <meta name="twitter:title" content="Muzeum Starorzytnego Egiptu">
24    <meta name="twitter:description" content="Odkryj tajemnice piramid i faraonow">
25
26    <link rel="stylesheet" href="style.css">
27</head>
28<body>
29    <h1>Favicon i Open Graph w praktyce</h1>
30
31    <section>
32        <h2>Meta tagi tej strony</h2>
33        <p>Sprawdz zrodlo tej strony (Ctrl+U) aby zobaczyc
34           wszystkie meta tagi w sekcji &lt;head&gt;.</p>
35
36        <div class="meta-preview">
37            <h3>Podglad Open Graph:</h3>
38            <div class="og-card">
39                <img src="https://placehold.co/600x315/d4af37/1a1a2e?text=Muzeum+Egiptu"
40                     alt="Podglad Open Graph" width="600" height="315">
41                <div class="og-info">
42                    <p class="og-url">muzeum-egiptu.pl</p>
43                    <h4>Muzeum Starorzytnego Egiptu</h4>
44                    <p>Odkryj tajemnice piramid i faraonow. Bilety online.</p>
45                </div>
46            </div>
47        </div>
48    </section>
49
50    <section>
51        <h2>Favicon</h2>
52        <p>Spojrz na zakladke przegladarki - zobaczysz ikone "E"
53           obok tytulu strony. To jest favicon!</p>
54        <p>Favicon dodajemy w sekcji <code>&lt;head&gt;</code>
55           za pomoca znacznika <code>&lt;link&gt;</code>.</p>
56    </section>
57</body>
58</html>

Pamiętaj: favicon to kartusz faraona na drzwiach Twojej piramidy, a Open Graph - tablica przed wejściem, która zaprasza gości, zanim przekroczą próg.