Headery strony w social mediach

Dzisiaj post o czymś, o czym zwykle nie myślimy, nie zwracamy na to uwagi. O nagłówku strony. Okazuje się, że jego konfiguracja jest bardzo ważna, w momencie gdy chcemy dzielić się linkiem do strony np. na fb/tt.

Na nagłówek może się składać się tytuł strony, jej opis oraz zdjęcie.

Open graph protocol

W skrócie – open graph protocol umożliwia wykorzystywanie metadanych w htmlu, które są rozpoznawane przez social media i odpowiednio renderowane.O tym można, a nawet warto poczytać na oficjalnej stronie.

Og: image

Jest to bardzo ważna składowa nagłówka. Pozwala na wstawienie zdjęcia, które w odpowiedni sposób będzie wyświetlane w mediach społecznościowych. Jeśli będzie małe, będzie wyglądać tak:

Jeśli będzie duże (min. 500×500), to już inaczej:

Ostateczny kod wygląda następująco:

Dodatkowa rada – linux, windows i rozszerzenia plików

Linuks ma to do siebie, że dla niego .JPG i .jpg to zupełnie inne pliki. Dlatego jeśli masz serwer linuksowy – strzeż się!

Dodatkowo zmiana rozszerzenia na windowsie (.JPG -> .jpg i odwrotnie) nie jest rozpoznawany przez git jako zmiana pliku. Na to również uważaj.


Podoba Ci się to, co tworzę? Chcesz dostawać informacje o:
– wydarzeniach, które organizuję lub wspieram (np. konferencje, meetupy, webinary)
– inicjatywach, które organizuję lub wspieram (np. GeekWeekWro, DevAdventCalendar)
– moich prelekcjach, kursach i szkoleniach
– wyróżnionych artykułach z mojego bloga

0% SPAMu, 100% informacji! Krótko i na temat.

Jedna uwaga do wpisu “Headery strony w social mediach

  1. Pingback: Facebook debugger i Open Graph – Programmer-girl

Dodaj komentarz