Favicon i Open Graph - Twarz piramidy

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. Aby dodać favicon:

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>

Formaty faviconów:

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

Open Graph - podgląd w social media

Kiedy udostępniasz link na Facebooku, Twitterze czy LinkedIn, pojawia się podgląd z tytulem, opisem i obrazkiem. To działa dzięki meta tagom Open Graph:

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
14  <!-- Twitter Card -->
15  <meta name="twitter:card" content="summary_large_image">
16  <meta name="twitter:title" content="Muzeum Starożytnego Egiptu">
17  <meta name="twitter:description" content="Odkryj tajemnice piramid">
18  <meta name="twitter:image" content="https://example.com/piramida.jpg">
19</head>

Ważne meta tagi Open Graph:

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

Meta tag description

Nie zapomnij o klasycznym meta tagu

description

- to on pojawia się w wynikach wyszukiwania Google:

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

Ir a CodeWorlds→