Знання про CMS, сайти та найкращі практики.
Поради для редакторів сайтів, оновлення продукту та найкращі практики створення сучасних сайтів із Siteor CMS.
Open Graph i Twitter Cards - automatyczne social preview w CMS
Udostępniasz link do strony na Facebooku. Zamiast ładnego podglądu z tytułem, opisem i obrazkiem pojawia się goły URL albo losowy fragment tekstu ze strony. Brzmi znajomo?
To problem brakujących tagów Open Graph. Siteor CMS rozwiązuje go automatycznie.
Czym jest Open Graph
Open Graph (OG) to protokół stworzony przez Facebooka w 2010 roku. Definiuje zestaw tagów meta w sekcji <head> strony, które mówią serwisom społecznościowym jak wyświetlić podgląd udostępnionego linku.
Najważniejsze tagi:
- og:title - tytuł widoczny w podglądzie
- og:description - krótki opis pod tytułem
- og:url - kanoniczny URL strony
- og:type - typ treści (
websitedla stron,articledla artykułów) - og:site_name - nazwa witryny
- og:image - miniaturka, najlepsza proporcja to 1200x630px
Te same tagi rozumieją Facebook, LinkedIn, Slack, Discord, Telegram i wiele innych serwisów.
Twitter Card
Twitter (X) używa własnego zestawu tagów, ale zasada jest ta sama. Siteor CMS generuje oba formaty jednocześnie:
- twitter:card - typ karty (
summary_large_imagegdy jest obrazek,summarybez) - twitter:title - tytuł
- twitter:description - opis
- twitter:image - miniaturka
Jak to działa w Siteor CMS
Wszystkie tagi generują się automatycznie na podstawie danych ze strony lub artykułu. Nie musisz nic konfigurować - wystarczy że strona ma wypełnione pola SEO (tytuł i opis).
Dla artykułów blogowych system dodatkowo:
- Ustawia
og:typenaarticle(zamiastwebsite) - Buduje URL z bazowej strony bloga + ścieżki artykułu
- Używa
image_urlartykułu jakoog:image
Dzięki temu udostępnienie artykułu na Facebooku pokaże tytuł artykułu, jego streszczenie i miniaturkę - nie dane strony-rodzica /blog.
Wymagania w layoucie
Tagi OG i Twitter Card są częścią bloku SEO. Żeby działały, layout musi zawierać zmienną Liquid:
w sekcji <head> strony. Ta jedna zmienna wstawia canonical, hreflang, Open Graph i Twitter Card naraz.
Sprawdzanie podglądu
Po opublikowaniu strony warto sprawdzić jak wygląda podgląd:
- Facebook Sharing Debugger - wklej URL, kliknij Debug
- Twitter Card Validator - analogicznie dla X
- Slack - wklej link w wiadomość, Slack pokaże podgląd na żywo
Jeżeli Facebook cache'uje stary podgląd, użyj przycisku "Scrape Again" w Debuggerze.
Podsumowanie
Wcześniej trzeba było ręcznie dodawać tagi Open Graph w każdym layoucie. Teraz CMS generuje je sam na podstawie pól SEO. Działa na stronach wielojęzycznych - każda wersja językowa dostaje własne tagi z poprawnymi danymi.
Najczęściej zadawane pytania
Czym jest Siteor CMS?+
Siteor CMS to moduł do zarządzania stronami internetowymi w platformie Intum. Pozwala tworzyć i edytować strony przez panel administracyjny lub REST API. Obsługuje wielojęzyczność, SEO (sitemap, robots.txt, hreflang, Open Graph), szablony Liquid, blog z artykułami i integracje z bazami wiedzy.
Czym jest plik llms.txt?+
Plik llms.txt to nowy standard (llmstxt.org) opisujący zawartość strony internetowej dla botów AI takich jak ChatGPT, Claude czy Perplexity. Siteor CMS generuje go automatycznie dla każdego site'a na podstawie stron i artykułów.
Czy Siteor CMS obsługuje wiele języków?+
Tak. Siteor CMS ma wbudowaną wielojęzyczność: strony master/slave z dziedziczeniem treści, osobne domeny per język z automatycznym hreflang, redirect 301 między wersjami językowymi i filtrowanie sitemapy po locale domeny. Obsługiwane języki: pl, en, fr, de, es, cs, sk, uk.
Czy CMS generuje sitemap.xml automatycznie?+
Tak. Sitemap.xml, robots.txt i llms.txt generują się automatycznie z szablonów Liquid. Sitemap zawiera strony, artykuły blogowe i wpisy bazy wiedzy. Szablony można nadpisać przez ustawienia site'a bez zmian w kodzie.
Jak działa Open Graph w Siteor CMS?+
Tagi Open Graph i Twitter Card generują się automatycznie na podstawie pól SEO strony lub artykułu. Wystarczy że layout zawiera zmienną Liquid seo_head w sekcji head. Artykuły blogowe dostają typ article z własnym tytułem, opisem i obrazkiem.