"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "wprowadzenie", "hProperties": { "id": "wprowadzenie" } }, "depth": 2, "value": "Wprowadzenie" }, { "data": { "id": "nigdy-nie-słyszałeś-o-metadanych-stron-internetowych", "hProperties": { "id": "nigdy-nie-słyszałeś-o-metadanych-stron-internetowych" } }, "depth": 2, "value": "Nigdy nie słyszałeś o metadanych stron internetowych?" }, { "data": { "id": "konfiguracja-metadanych-open-graph", "hProperties": { "id": "konfiguracja-metadanych-open-graph" } }, "depth": 2, "value": "Konfiguracja metadanych Open Graph" }, { "data": { "id": "konfiguracja-metadanych-twitter-cards", "hProperties": { "id": "konfiguracja-metadanych-twitter-cards" } }, "depth": 2, "value": "Konfiguracja metadanych Twitter Cards" }, { "data": { "id": "zakończenie", "hProperties": { "id": "zakończenie" } }, "depth": 2, "value": "Zakończenie" }]; const readingTime = { "minutes": 3, "words": 762, "text": "3 min read" }; const frontmatter = undefined; function _createMdxContent(props) { const _components = { a: "a", code: "code", h2: "h2", img: "img", li: "li", p: "p", pre: "pre", span: "span", ul: "ul", ..._provideComponents(), ...props.components }; return _jsxs(_Fragment, { children: [_jsxs(_components.h2, { id: "wprowadzenie", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#wprowadzenie", children: _jsx(_components.span, { children: "#" }) }), "Wprowadzenie"] }), "\n", _jsx(_components.p, { children: "Kiedy udostępniasz link do swojej strony internetowej w mediach społecznościowych, chcesz, aby wyglądał dobrze. Zamiast pokazywać tylko prosty link, chcesz pokazać piękny podgląd z wszystkimi niezbędnymi metadanymi, takimi jak tytuł, opis i obraz. Tutaj wchodzą w grę metadane Open Graph i Twitter (teraz X) Cards." }), "\n", _jsxs(_components.p, { children: ["W tym artykule pokażemy Ci, jak skonfigurować metadane Open Graph (", _jsx(_components.a, { href: "https://ogp.me/", children: "ogp.me" }), ") i Twitter Cards dla Twojej strony internetowej. Pokażemy Ci również, jak przetestować swoje metadane, aby upewnić się, że wyglądają dobrze w mediach społecznościowych."] }), "\n", _jsxs(_components.h2, { id: "nigdy-nie-słyszałeś-o-metadanych-stron-internetowych", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#nigdy-nie-słyszałeś-o-metadanych-stron-internetowych", children: _jsx(_components.span, { children: "#" }) }), "Nigdy nie słyszałeś o metadanych stron internetowych?"] }), "\n", _jsx(_components.p, { children: "Gdy człowiek odwiedza stronę internetową, widzi treści renderowane przez przeglądarkę. Ale gdy bot (jak na przykład wyszukiwarka lub scraper mediów społecznościowych) odwiedza stronę internetową, widzi tylko surowe HTML. Teraz metadane strony internetowej wchodzą w grę i dostarczają strukturalnych informacji o stronie dla bota, które może wykorzystać do renderowania strukturalnych wyników, jak karta podglądu." }), "\n", _jsxs(_components.p, { children: ["Jeśli klikniesz prawym przyciskiem myszy na stronie internetowej i wybierzesz \"Wyświetl źródło strony\", zobaczysz surowe HTML strony. Metadane są zazwyczaj zawarte w sekcji ", _jsx(_components.code, { children: "" }), " HTML i wyglądają tak:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "\n\n" }) }), "\n", _jsx(_components.p, { children: "Powyższy kod jest samoopisujący: tytuł strony internetowej to \"Moja Strona Internetowa\" a opis to \"To jest moja strona internetowa.\"." }), "\n", _jsxs(_components.p, { children: ["Możesz zauważyć przedrostek ", _jsx(_components.code, { children: "og:" }), " w metadanych, który oznacza ", _jsx(_components.a, { href: "https://ogp.me/", children: "Open Graph" }), ". Open Graph to protokół opracowany przez Facebooka w celu dostarczania strukturalnych informacji o stronie internetowej. Twitter (teraz X) również ma własny protokół metadanych, nazwany Twitter Cards."] }), "\n", _jsxs(_components.h2, { id: "konfiguracja-metadanych-open-graph", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#konfiguracja-metadanych-open-graph", children: _jsx(_components.span, { children: "#" }) }), "Konfiguracja metadanych Open Graph"] }), "\n", _jsx(_components.p, { children: "Niektóre z najczęściej używanych znaczników metadanych Open Graph to:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "og:site_name" }), ": Nazwa strony internetowej."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "og:title" }), ": Tytuł bieżącej strony."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "og:description" }), ": Krótki opis strony internetowej."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "og:image" }), ": URL obrazu do wyświetlenia."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "og:url" }), ": ", _jsx(_components.a, { href: "https://developers.google.com/search/docs/crawling-indexing/canonicalization", children: "kanoniczny URL" }), " strony internetowej."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "og:type" }), ": Typ strony internetowej (np. witryna, artykuł, wideo)."] }), "\n"] }), "\n", _jsxs(_components.p, { children: ["Różnica między ", _jsx(_components.code, { children: "og:title" }), " a ", _jsx(_components.code, { children: "og:site_name" }), " polega na tym, że ", _jsx(_components.code, { children: "og:title" }), " to tytuł bieżącej strony (np. tytuł wpisu na blogu), podczas gdy ", _jsx(_components.code, { children: "og:site_name" }), " to nazwa strony internetowej (np. nazwa bloga). Jeśli sprawdzisz kod źródłowy tej strony, zobaczysz następujące metadane Open Graph:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "\n\n\n\n\n\n" }) }), "\n", _jsxs(_components.p, { children: ["Ponieważ mamy ", _jsx(_components.code, { children: "og:type" }), " ustawione na ", _jsx(_components.code, { children: "article" }), ", można dodać dodatkowe metadane, takie jak autor i data publikacji. Na przykład, jeśli chcesz dodać tagi do wpisu na blogu, możesz dodać następujące metadane:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "\n\n" }) }), "\n", _jsxs(_components.p, { children: ["Open Graph określa, że jeśli chcesz dodać wiele wartości, powinieneś użyć wielu znaczników ", _jsx(_components.code, { children: "" }), " z tym samym atrybutem property."] }), "\n", _jsxs(_components.p, { children: ["Po dodaniu metadanych Open Graph do swojej strony internetowej, możesz je przetestować za pomocą ", _jsx(_components.a, { href: "https://developers.facebook.com/tools/debug/", children: "Debugera Udostępniania na Facebooku" }), ". Wprowadź URL swojej strony internetowej i kliknij \"Debug\". Jeśli pojawią się jakiekolwiek problemy z metadanymi, debuger wykaże błędy."] }), "\n", _jsxs(_components.p, { children: ["Oto przykład naszego wpisu na blogu ", _jsx(_components.a, { href: "/when-should-i-use-jwts", children: "When should I use JWTs?" }), " w Debugerze Udostępniania na Facebooku:"] }), "\n", _jsx(_components.p, { children: _jsx(_components.img, { src: "https://uploads.strapi.logto.io/Screenshot_2024_08_24_at_15_29_16_min_34070c92c1.png", alt: "Debuger Facebooka" }) }), "\n", _jsxs(_components.h2, { id: "konfiguracja-metadanych-twitter-cards", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#konfiguracja-metadanych-twitter-cards", children: _jsx(_components.span, { children: "#" }) }), "Konfiguracja metadanych Twitter Cards"] }), "\n", _jsxs(_components.p, { children: ["Metadane Twitter Cards są podobne do metadanych Open Graph, ale mają ", _jsx(_components.a, { href: "https://developer.x.com/en/docs/x-for-websites/cards/overview/", children: "swoje własne konwencje" }), ". Istnieją cztery typy Twitter Cards:"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Karta podsumowania: Karta z tytułem, opisem i miniaturką." }), "\n", _jsx(_components.li, { children: "Karta podsumowania z dużym obrazem: Karta z tytułem, opisem i dużym obrazem." }), "\n", _jsx(_components.li, { children: "Karta aplikacji: Karta do promowania aplikacji mobilnych." }), "\n", _jsx(_components.li, { children: "Karta odtwarzacza: Karta do treści wideo i audio." }), "\n"] }), "\n", _jsx(_components.p, { children: "Dla naszego wpisu na blogu użyjemy Karty podsumowania z dużym obrazem. Metadane Twitter Cards dla wpisu na blogu wyglądają tak:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "\n\n\n\n\n\n" }) }), "\n", _jsx(_components.p, { children: "Dwie główne różnice w stosunku do metadanych Open Graph to:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["Tag ", _jsx(_components.code, { children: "twitter:card" }), " jest wymagany i określa typ karty."] }), "\n", _jsxs(_components.li, { children: ["Tag ", _jsx(_components.code, { children: "twitter:site" }), " określa nazwę użytkownika Twittera strony internetowej."] }), "\n"] }), "\n", _jsxs(_components.p, { children: ["Istniał ", _jsx(_components.a, { href: "https://cards-dev.twitter.com/validator", children: "Validator Kart Twittera" }), ", jednak funkcja podglądu została przeniesiona do Tweet Composer (lepsze niż nic)."] }), "\n", _jsxs(_components.h2, { id: "zakończenie", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#zakończenie", children: _jsx(_components.span, { children: "#" }) }), "Zakończenie"] }), "\n", _jsx(_components.p, { children: "Konfiguracja metadanych Open Graph i Twitter Cards dla swojej strony internetowej jest łatwa, a zarazem przydatna. Ludzie uwielbiają obrazy, a piękna karta podglądu może przyciągnąć więcej uwagi do Twojej strony internetowej. Powodzenia z Twoją stroną internetową i udanego udostępniania!" })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { headings, readingTime, frontmatter, default: MDXContent };